fix a few mistakes. Make sugar work. Roll back to childNodes because children is 10x slower

6 files changed, 81 insertions, 29 deletions

diff --git a/src/Element.js b/src/Element.js
index 71b158b..d852ced 100644
--- a/src/Element.js
+++ b/src/Element.js
@@ -272,7 +272,7 @@ export function getEventTarget () {
 
 registerMethods('Element', {
   x, y, cx, cy, move, center, width, height, size, clone, remove, replace,
-  putIn, id, inside, toString, classes, hasClass, addClass, removeClass,
+  addTo, putIn, id, inside, toString, classes, hasClass, addClass, removeClass,
   toggleClass, reference, doc, defs, parents, matches, native, svg,
   writeDataToDom, setData, getEventTarget
 })
diff --git a/src/Parent.js b/src/Parent.js
index 1a1136f..ee8e3b0 100644
--- a/src/Parent.js
+++ b/src/Parent.js
@@ -13,8 +13,10 @@ export function children () {
 export function add (element, i) {
   element = makeInstance(element)
 
-  if (element.node !== this.node.children[i]) {
-    this.node.insertBefore(element.node, this.node.children[i] || null)
+  if (i == null) {
+    this.node.appendChild(element.node)
+  } else if (element.node !== this.node.childNodes[i]) {
+    this.node.insertBefore(element.node, this.node.childNodes[i])
   }
 
   return this
@@ -33,22 +35,22 @@ export function has (element) {
 
 // Gets index of given element
 export function index (element) {
-  return [].slice.call(this.node.children).indexOf(element.node)
+  return [].slice.call(this.node.childNodes).indexOf(element.node)
 }
 
 // Get a element at the given index
 export function get (i) {
-  return adopt(this.node.children[i])
+  return adopt(this.node.childNodes[i])
 }
 
 // Get first child
 export function first () {
-  return this.get(0)
+  return adopt(this.node.firstChild)
 }
 
 // Get the last child
 export function last () {
-  return this.get(this.node.children.length - 1)
+  return adopt(this.node.lastChild)
 }
 
 // Iterates over all children and invokes a given block
diff --git a/src/elemnts-svg.js b/src/elemnts-svg.js
index 082ccd5..39fb22b 100644
--- a/src/elemnts-svg.js
+++ b/src/elemnts-svg.js
@@ -1,34 +1,67 @@
     // Import raw svg
-    svg: function (svg) {
+    svg: function (svg, fn = false) {
       var well, len
 
       // act as getter if no svg string is given
-      if(svg == null || svg === true) {
+      if(svg == null || svg === true || typeof svg == 'function') {
         // write svgjs data to the dom
         this.writeDataToDom()
+        let current = this
 
-        // return outer or inner content
+        // An export modifier was passed
+        if (typeof svg == 'function') {
+          // Juggle arguments
+          [fn, svg] = [svg, fn]
+
+          // If the user wants outerHTML we need to process this node, too
+          if (!svg) {
+            current = fn(current)
+
+            // The user does not want this node? Well, then he gets nothing
+            if (current === false) return ''
+          }
+
+          // Deep loop through all children and apply modifier
+          current.each(function () {
+            let result = fn(this)
+
+            // If modifier returns false, discard node
+            if (result === false) {
+              this.remove()
+
+            // If modifier returns new node, use it
+            } else if (result !== this) {
+              this.replace(result)
+            }
+          }, true)
+        }
+
+        // Return outer or inner content
         return svg
-          ? this.node.innerHTML
-          : this.node.outerHTML
+          ? current.node.innerHTML
+          : current.node.outerHTML
       }
 
-      // act as setter if we got a string
+      // Act as setter if we got a string
 
-      // make sure we are on a parent when trying to import
-      if(!(this instanceof SVG.Parent))
-        throw Error('Cannot import svg into non-parent element')
+      // Make sure we are on a current when trying to import
+      if(!(this instanceof SVG.current))
+        throw Error('Cannot import svg into non-current element')
 
-      // create temporary holder
+      // Create temporary holder
       well = document.createElementNS(SVG.ns, 'svg')
+      fragment = document.createDocumentFragment()
 
-      // dump raw svg
+      // Dump raw svg
       well.innerHTML = svg
 
-      // transplant nodes
+      // Transplant nodes into the fragment
       for (len = well.children.length; len--;) {
-        this.node.appendChild(well.firstElementChild)
+        fragment.appendChild(well.firstElementChild)
       }
 
+      // Add the whole fragment at once
+      this.node.appendChild(fragment)
+
       return this
-    },
\ No newline at end of file
+    },
diff --git a/src/methods.js b/src/methods.js
index 4a51faa..4eb92b9 100644
--- a/src/methods.js
+++ b/src/methods.js
@@ -2,17 +2,25 @@ const methods = {}
 const constructors = {}
 
 export function registerMethods (name, m) {
+  if (Array.isArray(name)) {
+    for (let _name of name) {
+      registerMethods(_name, m)
+    }
+    return
+  }
+
   if (typeof name == 'object') {
     for (let [_name, _m] of Object.entries(name)) {
       registerMethods(_name, _m)
     }
+    return
   }
 
   methods[name] = Object.assign(methods[name] || {}, m)
 }
 
 export function getMethodsFor (name) {
-  return methods[name]
+  return methods[name] || {}
 }
 
 // FIXME: save memory?
@@ -26,5 +34,5 @@ export function registerConstructor (name, setup) {
 }
 
 export function getConstructor (name) {
-  return {setup: constructors[name], name}
+  return constructors[name] ? {setup: constructors[name], name} : {}
 }
diff --git a/src/sugar.js b/src/sugar.js
index e33fb10..75f0e00 100644
--- a/src/sugar.js
+++ b/src/sugar.js
@@ -1,4 +1,5 @@
-import {Color, Element, Runner} from './classes.js'
+import Color from './Color.js'
+import {registerMethods} from './methods.js'
 
 // Define list of available attributes for stroke and fill
 var sugar = {
@@ -32,10 +33,10 @@ var sugar = {
     return this
   }
 
-  extend([Element, Runner], extension)
+  registerMethods(['Element', 'Runner'], extension)
 })
 
-extend([Element, Runner], {
+registerMethods(['Element', 'Runner'], {
   // Let the user set the matrix directly
   matrix: function (mat, b, c, d, e, f) {
     // Act as a getter
@@ -114,7 +115,7 @@ extend([Element, Runner], {
   }
 })
 
-extend([Rect, Ellipse, Circle, Gradient, Runner], {
+registerMethods('radius', {
   // Add x and y radius
   radius: function (x, y) {
     var type = (this._target || this).type
@@ -124,7 +125,7 @@ extend([Rect, Ellipse, Circle, Gradient, Runner], {
   }
 })
 
-extend(Path, {
+registerMethods('Path', {
   // Get path length
   length: function () {
     return this.node.getTotalLength()
@@ -135,7 +136,7 @@ extend(Path, {
   }
 })
 
-extend([Parent, Text, Tspan, Runner], {
+registerMethods(['Container', 'Runner'], {
   // Set font
   font: function (a, v) {
     if (typeof a === 'object') {
diff --git a/src/svg.js b/src/svg.js
index a58c127..bc5dd3b 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -16,6 +16,7 @@ import './selector.js'
 import './css.js'
 import './transform.js'
 import './memory.js'
+import './sugar.js'
 import {getMethodsFor, getConstructor} from './methods.js'
 const extend = tools.extend
 
@@ -48,6 +49,13 @@ extend([
   Classes.Tspan
 ], getMethodsFor('Tspan'))
 
+extend([
+  Classes.Rect,
+  Classes.Ellipse,
+  Classes.Circle,
+  Classes.Gradient
+], getMethodsFor('radius'))
+
 const containerMethods = getMethodsFor('Container')
 // FIXME: We need a container array
 for (let i in containers) {