added insertAfter/Before, introduce attrHooks, move few methods, SVG.Text.textPath returns first textPath child now

4 files changed, 61 insertions, 16 deletions

diff --git a/src/modules/core/attr.js b/src/modules/core/attr.js
index 7c9e2c1..f90dcb9 100644
--- a/src/modules/core/attr.js
+++ b/src/modules/core/attr.js
@@ -1,9 +1,14 @@
-import { isImage, isNumber } from './regex.js'
 import { attrs as defaults } from './defaults.js'
+import { isNumber } from './regex.js'
 import Color from '../../types/Color.js'
 import SVGArray from '../../types/SVGArray.js'
 import SVGNumber from '../../types/SVGNumber.js'
 
+const hooks = []
+export function registerAttrHook (fn) {
+  hooks.push(fn)
+}
+
 // Set svg element attribute
 export default function attr (attr, val, ns) {
   // act as full getter
@@ -19,8 +24,12 @@ export default function attr (attr, val, ns) {
     }
 
     return attr
-  } else if (Array.isArray(attr)) {
-    // FIXME: implement
+  } else if (attr instanceof Array) {
+    // loop through array and get all values
+    return attr.reduce((last, curr) => {
+      last[curr] = this.attr(curr)
+      return last
+    }, {})
   } else if (typeof attr === 'object') {
     // apply every attribute individually if an object is passed
     for (val in attr) this.attr(val, attr[val])
@@ -34,18 +43,10 @@ export default function attr (attr, val, ns) {
       : isNumber.test(val) ? parseFloat(val)
         : val
   } else {
-    // convert image fill and stroke to patterns
-    if (attr === 'fill' || attr === 'stroke') {
-      if (isImage.test(val)) {
-        val = this.doc().defs().image(val)
-      }
-    }
-
-    // FIXME: This is fine, but what about the lines above?
-    // How does attr know about image()?
-    while (typeof val.attrHook === 'function') {
-      val = val.attrHook(this, attr)
-    }
+    // Loop through hooks and execute them to convert value
+    val = hooks.reduce((_val, hook) => {
+      return hook(attr, _val, this)
+    }, val)
 
     // ensure correct numeric values (also accepts NaN and Infinity)
     if (typeof val === 'number') {
diff --git a/src/modules/core/textable.js b/src/modules/core/textable.js
index c9a90db..139d056 100644
--- a/src/modules/core/textable.js
+++ b/src/modules/core/textable.js
@@ -11,7 +11,6 @@ export function plain (text) {
   return this
 }
 
-// FIXME: Does this also work for textpath?
 // Get length of text element
 export function length () {
   return this.node.getComputedTextLength()
diff --git a/src/modules/optional/arrange.js b/src/modules/optional/arrange.js
index ca0e074..6ce2eea 100644
--- a/src/modules/optional/arrange.js
+++ b/src/modules/optional/arrange.js
@@ -1,3 +1,4 @@
+import { makeInstance } from '../../utils/adopter.js'
 import { registerMethods } from '../../utils/methods.js'
 
 // Get all siblings, including myself
@@ -73,6 +74,7 @@ export function back () {
 
 // Inserts a given element before the targeted element
 export function before (element) {
+  element = makeInstance(element)
   element.remove()
 
   var i = this.position()
@@ -84,6 +86,7 @@ export function before (element) {
 
 // Inserts a given element after the targeted element
 export function after (element) {
+  element = makeInstance(element)
   element.remove()
 
   var i = this.position()
@@ -93,6 +96,16 @@ export function after (element) {
   return this
 }
 
+export function insertBefore (element) {
+  element = makeInstance(element)
+  element.before(this)
+}
+
+export function insertAfter (element) {
+  element = makeInstance(element)
+  element.after(this)
+}
+
 registerMethods('Dom', {
   siblings, position, next, prev, forward, backward, front, back, before, after
 })
diff --git a/src/modules/optional/sugar.js b/src/modules/optional/sugar.js
index 904e353..9cdc662 100644
--- a/src/modules/optional/sugar.js
+++ b/src/modules/optional/sugar.js
@@ -1,3 +1,4 @@
+import { on, off } from '../core/event.js'
 import { registerMethods } from '../../utils/methods.js'
 import Color from '../../types/Color.js'
 import Element from '../../elements/Element.js'
@@ -157,3 +158,34 @@ registerMethods(['Element', 'Runner'], {
           : this.attr(a, v)
   }
 })
+
+// Add events to elements
+const methods = [ 'click',
+  'dblclick',
+  'mousedown',
+  'mouseup',
+  'mouseover',
+  'mouseout',
+  'mousemove',
+  'mouseenter',
+  'mouseleave',
+  'touchstart',
+  'touchmove',
+  'touchleave',
+  'touchend',
+  'touchcancel' ].reduce(function (last, event) {
+  // add event to Element
+  const fn = function (f) {
+    if (f === null) {
+      off(this, event)
+    } else {
+      on(this, event, f)
+    }
+    return this
+  }
+
+  last[event] = fn
+  return last
+}, {})
+
+registerMethods('Element', methods)