added possibility to pass in additional attribues to element creators (#796)

e.g.
- `canvas.rect({x:100})` or
- `canvas.rect(100, 100, {x:100})`

24 files changed, 138 insertions, 87 deletions

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)