From 09e7d0b595da5a2e86e375ea4bd9bd7aba02c588 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Ulrich-Matthias=20Sch=C3=A4fer?= Date: Thu, 8 Nov 2018 19:49:49 +0100 Subject: [PATCH] added possibility to pass in additional attribues to element creators (#796) e.g. - `canvas.rect({x:100})` or - `canvas.rect(100, 100, {x:100})` --- CHANGELOG.md | 3 +- dist/svg.js | 143 ++++++++++++++++++++------------------- src/elements/A.js | 6 +- src/elements/Bare.js | 8 +-- src/elements/Circle.js | 11 ++- src/elements/ClipPath.js | 6 +- src/elements/Doc.js | 11 ++- src/elements/Ellipse.js | 11 ++- src/elements/G.js | 6 +- src/elements/Gradient.js | 15 ++-- src/elements/Image.js | 6 +- src/elements/Line.js | 11 ++- src/elements/Marker.js | 10 +-- src/elements/Mask.js | 6 +- src/elements/Path.js | 6 +- src/elements/Pattern.js | 10 +-- src/elements/Polygon.js | 11 ++- src/elements/Polyline.js | 11 ++- src/elements/Rect.js | 11 ++- src/elements/Style.js | 12 ++-- src/elements/Symbol.js | 6 +- src/elements/Text.js | 16 +++-- src/elements/TextPath.js | 16 ++--- src/elements/Tspan.js | 11 ++- src/elements/Use.js | 6 +- src/utils/adopter.js | 2 +- 26 files changed, 213 insertions(+), 158 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c88389e..b8c78c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,7 +27,8 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http: - added `Dom` which is a baseclass to get dom abilities - added `round()` which lets you round attribues from a node - added `ax(), ay(), amove()` to change texts x and y values directly (#787) -- added possibility to pass attribues into a constructor like: `new SVG.Rect({width:100})` +- added possibility to pass attributes into a constructor like: `new SVG.Rect({width:100})` +- added possibility to pass in additional attribues to element creators e.g. `canvas.rect({x:100})` or `canvas.rect(100, 100, {x:100})` (#796) ### Removed - removed `SVG.Array.split()` function diff --git a/dist/svg.js b/dist/svg.js index 91c140b..bcaef61 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -6,7 +6,7 @@ * @copyright Wout Fierens * @license MIT * -* BUILT: Thu Nov 08 2018 16:05:07 GMT+0100 (GMT+01:00) +* BUILT: Thu Nov 08 2018 19:44:36 GMT+0100 (GMT+01:00) */; var SVG = (function () { 'use strict'; @@ -443,7 +443,7 @@ var SVG = (function () { var o = args[args.length - 1]; - if (o && !o.prototype && !(o instanceof Array) && _typeof(o) === 'object') { + if (o && o.constructor === Object && !(o instanceof Array)) { return fn.apply(this, args.slice(0, -1)).attr(o); } else { return fn.apply(this, args); @@ -2053,9 +2053,9 @@ var SVG = (function () { registerMethods({ Container: { // Create nested svg document - nested: function nested() { + nested: wrapWithAttrCheck(function () { return this.put(new Doc$1()); - } + }) } }); register(Doc$1, 'Doc', true); @@ -5405,9 +5405,9 @@ var SVG = (function () { registerMethods({ Element: { // Create circle element - circle: function circle(size) { + circle: wrapWithAttrCheck(function (size) { return this.put(new Circle()).size(size).move(0, 0); - } + }) } }); register(Circle); @@ -5436,9 +5436,9 @@ var SVG = (function () { extend(Ellipse, circled); registerMethods('Container', { // Create an ellipse - ellipse: function ellipse(width$$1, height$$1) { + ellipse: wrapWithAttrCheck(function (width$$1, height$$1) { return this.put(new Ellipse()).size(width$$1, height$$1).move(0, 0); - } + }) }); register(Ellipse); @@ -5557,15 +5557,15 @@ var SVG = (function () { registerMethods({ Container: { // Create gradient element in defs - gradient: function gradient(type, block) { + gradient: wrapWithAttrCheck(function (type, block) { return this.defs().gradient(type, block); - } + }) }, // define gradient Defs: { - gradient: function gradient(type, block) { + gradient: wrapWithAttrCheck(function (type, block) { return this.put(new Gradient(type)).update(block); - } + }) } }); register(Gradient); @@ -5631,12 +5631,14 @@ var SVG = (function () { registerMethods({ Container: { // Create pattern element in defs - pattern: function pattern(width, height, block) { - return this.defs().pattern(width, height, block); + pattern: function pattern() { + var _this$defs; + + return (_this$defs = this.defs()).pattern.apply(_this$defs, arguments); } }, Defs: { - pattern: function pattern(width, height, block) { + pattern: wrapWithAttrCheck(function (width, height, block) { return this.put(new Pattern()).update(block).attr({ x: 0, y: 0, @@ -5644,7 +5646,7 @@ var SVG = (function () { height: height, patternUnits: 'userSpaceOnUse' }); - } + }) } }); register(Pattern); @@ -5718,9 +5720,9 @@ var SVG = (function () { registerMethods({ Container: { // create image element, load image and set its size - image: function image(source, callback) { + image: wrapWithAttrCheck(function (source, callback) { return this.put(new Image()).size(0, 0).load(source, callback); - } + }) } }); register(Image); @@ -5916,7 +5918,7 @@ var SVG = (function () { registerMethods({ Container: { // Create a line element - line: function line() { + line: wrapWithAttrCheck(function () { for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } @@ -5924,7 +5926,7 @@ var SVG = (function () { // make sure plot is called as a setter // x1 is not necessarily a number, it can also be an array, a string and a PointArray return Line.prototype.plot.apply(this.put(new Line()), args[0] != null ? args : [0, 0, 0, 0]); - } + }) } }); register(Line); @@ -5984,17 +5986,19 @@ var SVG = (function () { }(Container); registerMethods({ Container: { - marker: function marker(width, height, block) { + marker: function marker() { + var _this$defs; + // Create marker element in defs - return this.defs().marker(width, height, block); + return (_this$defs = this.defs()).marker.apply(_this$defs, arguments); } }, Defs: { // Create marker - marker: function marker(width, height, block) { + marker: wrapWithAttrCheck(function (width, height, block) { // Set default viewbox to match the width and height, set ref to cx and cy and set orient to auto return this.put(new Marker()).size(width, height).ref(width / 2, height / 2).viewbox(0, 0, width, height).attr('orient', 'auto').update(block); - } + }) }, marker: { // Create and attach markers @@ -6093,10 +6097,10 @@ var SVG = (function () { registerMethods({ Container: { // Create a wrapped path element - path: function path(d) { + path: wrapWithAttrCheck(function (d) { // make sure plot is called as a setter return this.put(new Path()).plot(d || new PathArray()); - } + }) } }); register(Path); @@ -6148,10 +6152,10 @@ var SVG = (function () { registerMethods({ Container: { // Create a wrapped polygon element - polygon: function polygon(p) { + polygon: wrapWithAttrCheck(function (p) { // make sure plot is called as a setter return this.put(new Polygon()).plot(p || new PointArray()); - } + }) } }); extend(Polygon, pointed); @@ -6175,10 +6179,10 @@ var SVG = (function () { registerMethods({ Container: { // Create a wrapped polygon element - polyline: function polyline(p) { + polyline: wrapWithAttrCheck(function (p) { // make sure plot is called as a setter return this.put(new Polyline()).plot(p || new PointArray()); - } + }) } }); extend(Polyline, pointed); @@ -6206,9 +6210,9 @@ var SVG = (function () { registerMethods({ Container: { // Create a rect element - rect: function rect(width$$1, height$$1) { + rect: wrapWithAttrCheck(function (width$$1, height$$1) { return this.put(new Rect()).size(width$$1, height$$1); - } + }) } }); register(Rect); @@ -6411,13 +6415,13 @@ var SVG = (function () { registerMethods({ Container: { // Create text element - text: function text(_text2) { - return this.put(new Text()).text(_text2); - }, + text: wrapWithAttrCheck(function (text) { + return this.put(new Text()).text(text); + }), // Create plain text element - plain: function plain$$1(text) { + plain: wrapWithAttrCheck(function (text) { return this.put(new Text()).plain(text); - } + }) } }); register(Text); @@ -6472,7 +6476,7 @@ var SVG = (function () { extend(Tspan, textable); registerMethods({ Tspan: { - tspan: function tspan(text) { + tspan: wrapWithAttrCheck(function (text) { var tspan = new Tspan(); // clear if build mode is disabled if (!this._build) { @@ -6482,7 +6486,7 @@ var SVG = (function () { this.node.appendChild(tspan.node); return tspan.text(text); - } + }) } }); register(Tspan); @@ -6517,9 +6521,9 @@ var SVG = (function () { register(Bare); registerMethods('Container', { // Create an element that is not described by SVG.js - element: function element(node, inherit) { - return this.put(new Bare(node, inherit)); - } + element: wrapWithAttrCheck(function (node) { + return this.put(new Bare(node)); + }) }); var ClipPath = @@ -6556,9 +6560,9 @@ var SVG = (function () { registerMethods({ Container: { // Create clipping element - clip: function clip() { + clip: wrapWithAttrCheck(function () { return this.defs().put(new ClipPath()); - } + }) }, Element: { // Distribute clipPath to svg element @@ -6595,9 +6599,9 @@ var SVG = (function () { registerMethods({ Element: { // Create a group element - group: function group() { + group: wrapWithAttrCheck(function () { return this.put(new G()); - } + }) } }); register(G); @@ -6647,9 +6651,9 @@ var SVG = (function () { registerMethods({ Container: { // Create a hyperlink element - link: function link(url) { + link: wrapWithAttrCheck(function (url) { return this.put(new A()).to(url); - } + }) }, Element: { // Create a hyperlink element @@ -6702,9 +6706,9 @@ var SVG = (function () { }(Container); registerMethods({ Container: { - mask: function mask() { + mask: wrapWithAttrCheck(function () { return this.defs().put(new Mask()); - } + }) }, Element: { // Distribute mask to svg element @@ -6773,13 +6777,13 @@ var SVG = (function () { return Style; }(Element); - registerMethods('Element', { - style: function style(selector, obj) { + registerMethods('Dom', { + style: wrapWithAttrCheck(function (selector, obj) { return this.put(new Style()).rule(selector, obj); - }, - fontface: function fontface(name, src, params) { + }), + fontface: wrapWithAttrCheck(function (name, src, params) { return this.put(new Style()).font(name, src, params); - } + }) }); var _Symbol = @@ -6798,9 +6802,9 @@ var SVG = (function () { }(Container); registerMethods({ Container: { - symbol: function symbol() { + symbol: wrapWithAttrCheck(function () { return this.put(new _Symbol()); - } + }) } }); register(_Symbol); @@ -6849,13 +6853,13 @@ var SVG = (function () { }(Text); registerMethods({ Container: { - textPath: function textPath(text, path) { + textPath: wrapWithAttrCheck(function (text, path) { return this.defs().path(path).text(text).addTo(this); - } + }) }, Text: { // Create path for text to run on - path: function path(track) { + path: wrapWithAttrCheck(function (track) { var path = new TextPath(); // if track is a path, reuse it if (!(track instanceof Path)) { @@ -6867,7 +6871,7 @@ var SVG = (function () { path.attr('href', '#' + track, xlink); // add textPath element as child node and return textPath return this.put(path); - }, + }), // Get the textPath children textPath: function textPath() { return this.find('textPath')[0]; @@ -6875,15 +6879,14 @@ var SVG = (function () { }, Path: { // creates a textPath from this path - text: function text(_text) { - if (_text instanceof Text) { - var txt = _text.text(); - - return _text.clear().path(this).text(txt); + text: wrapWithAttrCheck(function (text) { + if (text instanceof Text) { + var txt = text.text(); + return text.clear().path(this).text(txt); } - return this.parent().put(new Text()).path(this).text(_text); - }, + return this.parent().put(new Text()).path(this).text(text); + }), targets: function targets() { return baseFind('svg [href*="' + this.id() + '"]'); } @@ -6917,9 +6920,9 @@ var SVG = (function () { registerMethods({ Container: { // Create a use element - use: function use(element, file) { + use: wrapWithAttrCheck(function (element, file) { return this.put(new Use()).element(element, file); - } + }) } }); register(Use); diff --git a/src/elements/A.js b/src/elements/A.js index a0d7311..722deed 100644 --- a/src/elements/A.js +++ b/src/elements/A.js @@ -1,4 +1,4 @@ -import { nodeOrNew, register } from '../utils/adopter.js' +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import { xlink } from '../modules/core/namespaces.js' import Container from './Container.js' @@ -22,9 +22,9 @@ export default class A extends Container { registerMethods({ Container: { // Create a hyperlink element - link: function (url) { + link: wrapWithAttrCheck(function (url) { return this.put(new A()).to(url) - } + }) }, Element: { // Create a hyperlink element diff --git a/src/elements/Bare.js b/src/elements/Bare.js index 6264ae2..9415cd4 100644 --- a/src/elements/Bare.js +++ b/src/elements/Bare.js @@ -1,4 +1,4 @@ -import { nodeOrNew, register } from '../utils/adopter.js' +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import Container from './Container.js' @@ -24,7 +24,7 @@ register(Bare) registerMethods('Container', { // Create an element that is not described by SVG.js - element (node, inherit) { - return this.put(new Bare(node, inherit)) - } + element: wrapWithAttrCheck(function (node) { + return this.put(new Bare(node)) + }) }) diff --git a/src/elements/Circle.js b/src/elements/Circle.js index 2f0d7f2..3135ada 100644 --- a/src/elements/Circle.js +++ b/src/elements/Circle.js @@ -1,5 +1,10 @@ import { cx, cy, height, width, x, y } from '../modules/core/circled.js' -import { extend, nodeOrNew, register } from '../utils/adopter.js' +import { + extend, + nodeOrNew, + register, + wrapWithAttrCheck +} from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import SVGNumber from '../types/SVGNumber.js' import Shape from './Shape.js' @@ -33,11 +38,11 @@ extend(Circle, { x, y, cx, cy, width, height }) registerMethods({ Element: { // Create circle element - circle (size) { + circle: wrapWithAttrCheck(function (size) { return this.put(new Circle()) .size(size) .move(0, 0) - } + }) } }) diff --git a/src/elements/ClipPath.js b/src/elements/ClipPath.js index 5164086..e545baa 100644 --- a/src/elements/ClipPath.js +++ b/src/elements/ClipPath.js @@ -1,4 +1,4 @@ -import { nodeOrNew, register } from '../utils/adopter.js' +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import Container from './Container.js' import baseFind from '../modules/core/selector.js' @@ -27,9 +27,9 @@ export default class ClipPath extends Container { registerMethods({ Container: { // Create clipping element - clip: function () { + clip: wrapWithAttrCheck(function () { return this.defs().put(new ClipPath()) - } + }) }, Element: { // Distribute clipPath to svg element diff --git a/src/elements/Doc.js b/src/elements/Doc.js index 2132491..0d862ba 100644 --- a/src/elements/Doc.js +++ b/src/elements/Doc.js @@ -1,4 +1,9 @@ -import { adopt, nodeOrNew, register } from '../utils/adopter.js' +import { + adopt, + nodeOrNew, + register, + wrapWithAttrCheck +} from '../utils/adopter.js' import { ns, svgjs, xlink, xmlns } from '../modules/core/namespaces.js' import { registerMethods } from '../utils/methods.js' import Container from './Container.js' @@ -63,9 +68,9 @@ export default class Doc extends Container { registerMethods({ Container: { // Create nested svg document - nested () { + nested: wrapWithAttrCheck(function () { return this.put(new Doc()) - } + }) } }) diff --git a/src/elements/Ellipse.js b/src/elements/Ellipse.js index 4ba8771..0350f1f 100644 --- a/src/elements/Ellipse.js +++ b/src/elements/Ellipse.js @@ -1,4 +1,9 @@ -import { extend, nodeOrNew, register } from '../utils/adopter.js' +import { + extend, + nodeOrNew, + register, + wrapWithAttrCheck +} from '../utils/adopter.js' import { proportionalSize } from '../utils/utils.js' import { registerMethods } from '../utils/methods.js' import SVGNumber from '../types/SVGNumber.js' @@ -23,9 +28,9 @@ extend(Ellipse, circled) registerMethods('Container', { // Create an ellipse - ellipse: function (width, height) { + ellipse: wrapWithAttrCheck(function (width, height) { return this.put(new Ellipse()).size(width, height).move(0, 0) - } + }) }) register(Ellipse) diff --git a/src/elements/G.js b/src/elements/G.js index 5eeb65a..6a93a3f 100644 --- a/src/elements/G.js +++ b/src/elements/G.js @@ -1,4 +1,4 @@ -import { nodeOrNew, register } from '../utils/adopter.js' +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import Container from './Container.js' @@ -11,9 +11,9 @@ export default class G extends Container { registerMethods({ Element: { // Create a group element - group: function () { + group: wrapWithAttrCheck(function () { return this.put(new G()) - } + }) } }) diff --git a/src/elements/Gradient.js b/src/elements/Gradient.js index cfa2950..23de97d 100644 --- a/src/elements/Gradient.js +++ b/src/elements/Gradient.js @@ -1,4 +1,9 @@ -import { extend, nodeOrNew, register } from '../utils/adopter.js' +import { + extend, + nodeOrNew, + register, + wrapWithAttrCheck +} from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import Box from '../types/Box.js' import Container from './Container.js' @@ -62,15 +67,15 @@ extend(Gradient, gradiented) registerMethods({ Container: { // Create gradient element in defs - gradient (type, block) { + gradient: wrapWithAttrCheck(function (type, block) { return this.defs().gradient(type, block) - } + }) }, // define gradient Defs: { - gradient (type, block) { + gradient: wrapWithAttrCheck(function (type, block) { return this.put(new Gradient(type)).update(block) - } + }) } }) diff --git a/src/elements/Image.js b/src/elements/Image.js index 469e10a..c529439 100644 --- a/src/elements/Image.js +++ b/src/elements/Image.js @@ -1,5 +1,5 @@ import { isImage } from '../modules/core/regex.js' -import { nodeOrNew, register } from '../utils/adopter.js' +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' import { off, on } from '../modules/core/event.js' import { registerAttrHook } from '../modules/core/attr.js' import { registerMethods } from '../utils/methods.js' @@ -72,9 +72,9 @@ registerAttrHook(function (attr, val, _this) { registerMethods({ Container: { // create image element, load image and set its size - image (source, callback) { + image: wrapWithAttrCheck(function (source, callback) { return this.put(new Image()).size(0, 0).load(source, callback) - } + }) } }) diff --git a/src/elements/Line.js b/src/elements/Line.js index ba15135..99e7497 100644 --- a/src/elements/Line.js +++ b/src/elements/Line.js @@ -1,4 +1,9 @@ -import { extend, nodeOrNew, register } from '../utils/adopter.js' +import { + extend, + nodeOrNew, + register, + wrapWithAttrCheck +} from '../utils/adopter.js' import { proportionalSize } from '../utils/utils.js' import { registerMethods } from '../utils/methods.js' import PointArray from '../types/PointArray.js' @@ -49,14 +54,14 @@ extend(Line, pointed) registerMethods({ Container: { // Create a line element - line (...args) { + line: wrapWithAttrCheck(function (...args) { // make sure plot is called as a setter // x1 is not necessarily a number, it can also be an array, a string and a PointArray return Line.prototype.plot.apply( this.put(new Line()) , args[0] != null ? args : [0, 0, 0, 0] ) - } + }) } }) diff --git a/src/elements/Marker.js b/src/elements/Marker.js index 7e78e7f..d40d13b 100644 --- a/src/elements/Marker.js +++ b/src/elements/Marker.js @@ -1,4 +1,4 @@ -import { nodeOrNew, register } from '../utils/adopter.js' +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import Container from './Container.js' @@ -42,14 +42,14 @@ export default class Marker extends Container { registerMethods({ Container: { - marker (width, height, block) { + marker (...args) { // Create marker element in defs - return this.defs().marker(width, height, block) + return this.defs().marker(...args) } }, Defs: { // Create marker - marker (width, height, block) { + marker: wrapWithAttrCheck(function (width, height, block) { // Set default viewbox to match the width and height, set ref to cx and cy and set orient to auto return this.put(new Marker()) .size(width, height) @@ -57,7 +57,7 @@ registerMethods({ .viewbox(0, 0, width, height) .attr('orient', 'auto') .update(block) - } + }) }, marker: { // Create and attach markers diff --git a/src/elements/Mask.js b/src/elements/Mask.js index 89eb97f..8dfffd6 100644 --- a/src/elements/Mask.js +++ b/src/elements/Mask.js @@ -1,4 +1,4 @@ -import { nodeOrNew, register } from '../utils/adopter.js' +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import Container from './Container.js' import baseFind from '../modules/core/selector.js' @@ -27,9 +27,9 @@ export default class Mask extends Container { registerMethods({ Container: { - mask () { + mask: wrapWithAttrCheck(function () { return this.defs().put(new Mask()) - } + }) }, Element: { // Distribute mask to svg element diff --git a/src/elements/Path.js b/src/elements/Path.js index c8a4de4..dc27320 100644 --- a/src/elements/Path.js +++ b/src/elements/Path.js @@ -1,4 +1,4 @@ -import { nodeOrNew, register } from '../utils/adopter.js' +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' import { proportionalSize } from '../utils/utils.js' import { registerMethods } from '../utils/methods.js' import PathArray from '../types/PathArray.js' @@ -71,10 +71,10 @@ Path.prototype.MorphArray = PathArray registerMethods({ Container: { // Create a wrapped path element - path (d) { + path: wrapWithAttrCheck(function (d) { // make sure plot is called as a setter return this.put(new Path()).plot(d || new PathArray()) - } + }) } }) diff --git a/src/elements/Pattern.js b/src/elements/Pattern.js index 4a1eee0..6dd4e01 100644 --- a/src/elements/Pattern.js +++ b/src/elements/Pattern.js @@ -1,4 +1,4 @@ -import { nodeOrNew, register } from '../utils/adopter.js' +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import Box from '../types/Box.js' import Container from './Container.js' @@ -51,12 +51,12 @@ export default class Pattern extends Container { registerMethods({ Container: { // Create pattern element in defs - pattern (width, height, block) { - return this.defs().pattern(width, height, block) + pattern (...args) { + return this.defs().pattern(...args) } }, Defs: { - pattern (width, height, block) { + pattern: wrapWithAttrCheck(function (width, height, block) { return this.put(new Pattern()).update(block).attr({ x: 0, y: 0, @@ -64,7 +64,7 @@ registerMethods({ height: height, patternUnits: 'userSpaceOnUse' }) - } + }) } }) diff --git a/src/elements/Polygon.js b/src/elements/Polygon.js index a7bf592..afa5f31 100644 --- a/src/elements/Polygon.js +++ b/src/elements/Polygon.js @@ -1,4 +1,9 @@ -import { extend, nodeOrNew, register } from '../utils/adopter.js' +import { + extend, + nodeOrNew, + register, + wrapWithAttrCheck +} from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import PointArray from '../types/PointArray.js' import Shape from './Shape.js' @@ -15,10 +20,10 @@ export default class Polygon extends Shape { registerMethods({ Container: { // Create a wrapped polygon element - polygon (p) { + polygon: wrapWithAttrCheck(function (p) { // make sure plot is called as a setter return this.put(new Polygon()).plot(p || new PointArray()) - } + }) } }) diff --git a/src/elements/Polyline.js b/src/elements/Polyline.js index 079da52..5897295 100644 --- a/src/elements/Polyline.js +++ b/src/elements/Polyline.js @@ -1,4 +1,9 @@ -import { extend, nodeOrNew, register } from '../utils/adopter.js' +import { + extend, + nodeOrNew, + register, + wrapWithAttrCheck +} from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import PointArray from '../types/PointArray.js' import Shape from './Shape.js' @@ -15,10 +20,10 @@ export default class Polyline extends Shape { registerMethods({ Container: { // Create a wrapped polygon element - polyline (p) { + polyline: wrapWithAttrCheck(function (p) { // make sure plot is called as a setter return this.put(new Polyline()).plot(p || new PointArray()) - } + }) } }) diff --git a/src/elements/Rect.js b/src/elements/Rect.js index 7433993..6e161c9 100644 --- a/src/elements/Rect.js +++ b/src/elements/Rect.js @@ -1,4 +1,9 @@ -import { extend, nodeOrNew, register } from '../utils/adopter.js' +import { + extend, + nodeOrNew, + register, + wrapWithAttrCheck +} from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import { rx, ry } from '../modules/core/circled.js' import Shape from './Shape.js' @@ -15,9 +20,9 @@ extend(Rect, { rx, ry }) registerMethods({ Container: { // Create a rect element - rect (width, height) { + rect: wrapWithAttrCheck(function (width, height) { return this.put(new Rect()).size(width, height) - } + }) } }) diff --git a/src/elements/Style.js b/src/elements/Style.js index 6ac84f4..8c58346 100644 --- a/src/elements/Style.js +++ b/src/elements/Style.js @@ -1,4 +1,4 @@ -import { nodeOrNew } from '../utils/adopter.js' +import { nodeOrNew, wrapWithAttrCheck } from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import { unCamelCase } from '../utils/utils.js' import Element from './Element.js' @@ -41,11 +41,11 @@ export default class Style extends Element { } } -registerMethods('Element', { - style (selector, obj) { +registerMethods('Dom', { + style: wrapWithAttrCheck(function (selector, obj) { return this.put(new Style()).rule(selector, obj) - }, - fontface (name, src, params) { + }), + fontface: wrapWithAttrCheck(function (name, src, params) { return this.put(new Style()).font(name, src, params) - } + }) }) diff --git a/src/elements/Symbol.js b/src/elements/Symbol.js index cdb5f85..f44125c 100644 --- a/src/elements/Symbol.js +++ b/src/elements/Symbol.js @@ -1,4 +1,4 @@ -import { nodeOrNew, register } from '../utils/adopter.js' +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import Container from './Container.js' @@ -11,9 +11,9 @@ export default class Symbol extends Container { registerMethods({ Container: { - symbol () { + symbol: wrapWithAttrCheck(function () { return this.put(new Symbol()) - } + }) } }) diff --git a/src/elements/Text.js b/src/elements/Text.js index bd27428..b4ba0ad 100644 --- a/src/elements/Text.js +++ b/src/elements/Text.js @@ -1,4 +1,10 @@ -import { adopt, extend, nodeOrNew, register } from '../utils/adopter.js' +import { + adopt, + extend, + nodeOrNew, + register, + wrapWithAttrCheck +} from '../utils/adopter.js' import { attrs } from '../modules/core/defaults.js' import { registerMethods } from '../utils/methods.js' import SVGNumber from '../types/SVGNumber.js' @@ -166,14 +172,14 @@ extend(Text, textable) registerMethods({ Container: { // Create text element - text (text) { + text: wrapWithAttrCheck(function (text) { return this.put(new Text()).text(text) - }, + }), // Create plain text element - plain (text) { + plain: wrapWithAttrCheck(function (text) { return this.put(new Text()).plain(text) - } + }) } }) diff --git a/src/elements/TextPath.js b/src/elements/TextPath.js index cddeda8..324d768 100644 --- a/src/elements/TextPath.js +++ b/src/elements/TextPath.js @@ -1,10 +1,10 @@ -import { nodeOrNew, register } from '../utils/adopter.js' +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import { xlink } from '../modules/core/namespaces.js' -import baseFind from '../modules/core/selector.js' import Path from './Path.js' import PathArray from '../types/PathArray.js' import Text from './Text.js' +import baseFind from '../modules/core/selector.js' export default class TextPath extends Text { // Initialize node @@ -39,13 +39,13 @@ export default class TextPath extends Text { registerMethods({ Container: { - textPath (text, path) { + textPath: wrapWithAttrCheck(function (text, path) { return this.defs().path(path).text(text).addTo(this) - } + }) }, Text: { // Create path for text to run on - path (track) { + path: wrapWithAttrCheck(function (track) { var path = new TextPath() // if track is a path, reuse it @@ -59,7 +59,7 @@ registerMethods({ // add textPath element as child node and return textPath return this.put(path) - }, + }), // Get the textPath children textPath () { @@ -68,13 +68,13 @@ registerMethods({ }, Path: { // creates a textPath from this path - text (text) { + text: wrapWithAttrCheck(function (text) { if (text instanceof Text) { var txt = text.text() return text.clear().path(this).text(txt) } return this.parent().put(new Text()).path(this).text(text) - }, + }), targets () { return baseFind('svg [href*="' + this.id() + '"]') diff --git a/src/elements/Tspan.js b/src/elements/Tspan.js index 9745b95..abd032f 100644 --- a/src/elements/Tspan.js +++ b/src/elements/Tspan.js @@ -1,4 +1,9 @@ -import { extend, nodeOrNew, register } from '../utils/adopter.js' +import { + extend, + nodeOrNew, + register, + wrapWithAttrCheck +} from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import Text from './Text.js' import * as textable from '../modules/core/textable.js' @@ -45,7 +50,7 @@ extend(Tspan, textable) registerMethods({ Tspan: { - tspan (text) { + tspan: wrapWithAttrCheck(function (text) { var tspan = new Tspan() // clear if build mode is disabled @@ -57,7 +62,7 @@ registerMethods({ this.node.appendChild(tspan.node) return tspan.text(text) - } + }) } }) diff --git a/src/elements/Use.js b/src/elements/Use.js index 5808988..7921461 100644 --- a/src/elements/Use.js +++ b/src/elements/Use.js @@ -1,4 +1,4 @@ -import { nodeOrNew, register } from '../utils/adopter.js' +import { nodeOrNew, register, wrapWithAttrCheck } from '../utils/adopter.js' import { registerMethods } from '../utils/methods.js' import { xlink } from '../modules/core/namespaces.js' import Shape from './Shape.js' @@ -18,9 +18,9 @@ export default class Use extends Shape { registerMethods({ Container: { // Create a use element - use: function (element, file) { + use: wrapWithAttrCheck(function (element, file) { return this.put(new Use()).element(element, file) - } + }) } }) diff --git a/src/utils/adopter.js b/src/utils/adopter.js index 6880399..88cd383 100644 --- a/src/utils/adopter.js +++ b/src/utils/adopter.js @@ -126,7 +126,7 @@ export function wrapWithAttrCheck (fn) { return function (...args) { let o = args[args.length - 1] - if (o && !o.prototype && !(o instanceof Array) && typeof o === 'object') { + if (o && o.constructor === Object && !(o instanceof Array)) { return fn.apply(this, args.slice(0, -1)).attr(o) } else { return fn.apply(this, args) -- 2.39.5