rework of classes, make events on every object possible

24 files changed, 440 insertions, 437 deletions

diff --git a/src/Bare.js b/src/Bare.js
index 76aa3bf..c08d8fc 100644
--- a/src/Bare.js
+++ b/src/Bare.js
@@ -1,10 +1,10 @@
 import {nodeOrNew} from './tools.js'
 import {register} from './adopter.js'
-import Parent from './Parent.js'
+import Container from './Container.js'
 import {registerMethods} from './methods.js'
 import {extend} from './tools.js'
 
-export default class Bare extends Parent {
+export default class Bare extends Container {
   constructor (node) {
     super(nodeOrNew(node, typeof node === 'string' ? null : node), Bare)
   }
diff --git a/src/Box.js b/src/Box.js
index 0bf738e..c2bd5d5 100644
--- a/src/Box.js
+++ b/src/Box.js
@@ -1,4 +1,3 @@
-//import {Parent, Doc, Symbol, Image, Pattern, Marker, Point} from './classes.js'
 import Point from './Point.js'
 import parser from './parser.js'
 import {fullBox, domContains, isNulledBox} from './helpers.js'
diff --git a/src/Container.js b/src/Container.js
index 5d6dc43..c45d805 100644
--- a/src/Container.js
+++ b/src/Container.js
@@ -1,2 +1,26 @@
-import Parent from './Parent.js'
-export default class Container extends Parent {}
+import Element from './Element.js'
+export default class Container extends Element {
+  flatten (parent) {
+    this.each(function () {
+      if (this instanceof Container) return this.flatten(parent).ungroup(parent)
+      return this.toParent(parent)
+    })
+
+    // we need this so that Doc does not get removed
+    this.node.firstElementChild || this.remove()
+
+    return this
+  }
+
+  ungroup (parent) {
+    parent = parent || this.parent()
+
+    this.each(function () {
+      return this.toParent(parent)
+    })
+
+    this.remove()
+
+    return this
+  }
+}
diff --git a/src/Dom.js b/src/Dom.js
new file mode 100644
index 0000000..515c872
--- /dev/null
+++ b/src/Dom.js
@@ -0,0 +1,237 @@
+import EventTarget from './EventTarget.js'
+import {assignNewId, adopt, makeInstance, eid} from './adopter.js'
+import {map} from './utils.js'
+import {matcher} from './helpers.js'
+import {ns} from './namespaces.js'
+
+export default class Dom extends EventTarget {
+  constructor (node) {
+    super(node)
+    this.node = node
+    this.type = node.nodeName
+  }
+
+  // Add given element at a position
+  add (element, i) {
+    element = makeInstance(element)
+
+    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
+  }
+
+  // Add element to given container and return self
+  addTo (parent) {
+    return makeInstance(parent).put(this)
+  }
+
+  // Returns all child elements
+  children () {
+    return map(this.node.children, function (node) {
+      return adopt(node)
+    })
+  }
+
+  // Remove all elements in this container
+  clear () {
+    // remove children
+    while (this.node.hasChildNodes()) {
+      this.node.removeChild(this.node.lastChild)
+    }
+
+    // remove defs reference
+    delete this._defs
+
+    return this
+  }
+
+  // Clone element
+  clone (parent) {
+    // write dom data to the dom so the clone can pickup the data
+    this.writeDataToDom()
+
+    // clone element and assign new id
+    let clone = assignNewId(this.node.cloneNode(true))
+
+    // insert the clone in the given parent or after myself
+    if (parent) parent.add(clone)
+    // FIXME: after might not be available here
+    else this.after(clone)
+
+    return clone
+  }
+
+  // Iterates over all children and invokes a given block
+  each (block, deep) {
+    var children = this.children()
+    var i, il
+
+    for (i = 0, il = children.length; i < il; i++) {
+      block.apply(children[i], [i, children])
+
+      if (deep) {
+        children[i].each(block, deep)
+      }
+    }
+
+    return this
+  }
+
+  // Get first child
+  first () {
+    return adopt(this.node.firstChild)
+  }
+
+  // Get a element at the given index
+  get (i) {
+    return adopt(this.node.childNodes[i])
+  }
+
+  getEventHolder () {
+    return this.node
+  }
+
+  getEventTarget () {
+    return this.node
+  }
+
+  // Checks if the given element is a child
+  has (element) {
+    return this.index(element) >= 0
+  }
+
+  // Get / set id
+  id (id) {
+    // generate new id if no id set
+    if (typeof id === 'undefined' && !this.node.id) {
+      this.node.id = eid(this.type)
+    }
+
+    // dont't set directly width this.node.id to make `null` work correctly
+    return this.attr('id', id)
+  }
+
+  // Gets index of given element
+  index (element) {
+    return [].slice.call(this.node.childNodes).indexOf(element.node)
+  }
+
+  // Get the last child
+  last () {
+    return adopt(this.node.lastChild)
+  }
+
+  // matches the element vs a css selector
+  matches (selector) {
+    return matcher(this.node, selector)
+  }
+
+  // Returns the svg node to call native svg methods on it
+  native () {
+    return this.node
+  }
+
+  // Returns the parent element instance
+  parent (type) {
+    var parent = this
+
+    // check for parent
+    if (!parent.node.parentNode) return null
+
+    // get parent element
+    parent = adopt(parent.node.parentNode)
+
+    if (!type) return parent
+
+    // loop trough ancestors if type is given
+    while (parent && parent.node instanceof window.SVGElement) {
+      if (typeof type === 'string' ? parent.matches(type) : parent instanceof type) return parent
+      parent = adopt(parent.node.parentNode)
+    }
+  }
+
+  // Basically does the same as `add()` but returns the added element instead
+  put (element, i) {
+    this.add(element, i)
+    return element
+  }
+
+  // Add element to given container and return container
+  putIn (parent) {
+    return makeInstance(parent).add(this)
+  }
+
+  // Remove element
+  remove () {
+    if (this.parent()) {
+      this.parent().removeElement(this)
+    }
+
+    return this
+  }
+
+  // Remove a given child
+  removeElement (element) {
+    this.node.removeChild(element.node)
+
+    return this
+  }
+
+  // Replace element
+  replace (element) {
+    // FIXME: after might not be available here
+    this.after(element).remove()
+
+    return element
+  }
+
+  // Return id on string conversion
+  toString () {
+    return this.id()
+  }
+
+  // Import raw svg
+  svg (svg) {
+    var well, len
+
+    // act as a setter if svg is given
+    if (svg) {
+      // create temporary holder
+      well = document.createElementNS(ns, 'svg')
+      // dump raw svg
+      well.innerHTML = svg
+
+      // transplant nodes
+      for (len = well.children.length; len--;) {
+        this.node.appendChild(well.firstElementChild)
+      }
+
+    // otherwise act as a getter
+    } else {
+      // write svgjs data to the dom
+      this.writeDataToDom()
+
+      return this.node.outerHTML
+    }
+
+    return this
+  }
+
+  // write svgjs data to the dom
+  writeDataToDom () {
+    // dump variables recursively
+    this.each(function () {
+      this.writeDataToDom()
+    })
+
+    return this
+  }
+}
+
+import {extend} from './tools.js'
+import attr from './attr.js'
+extend(Dom, {attr})
diff --git a/src/Element.js b/src/Element.js
index 5e798ff..e7944fc 100644
--- a/src/Element.js
+++ b/src/Element.js
@@ -1,27 +1,20 @@
 import {proportionalSize, matcher, idFromReference} from './helpers.js'
-import {makeInstance, adopt, assignNewId, eid, root, getClass} from './adopter.js'
+import {makeInstance, root, getClass} from './adopter.js'
 import {delimiter} from './regex.js'
 import {ns} from './namespaces.js'
 import SVGNumber from './SVGNumber.js'
-import {registerMethods} from './methods.js'
-import {registerConstructor} from './methods.js'
-import EventTarget from './EventTarget.js'
+import Dom from './Dom.js'
 
 const Doc = getClass(root)
 
-//export const name = 'Element'
-
-export default class Element extends EventTarget {
+export default class Element extends Dom {
   constructor (node) {
-    super()
+    super(node)
 
-  // initialize data object
+    // initialize data object
     this.dom = {}
 
-  // create circular reference
-    this.node = node
-
-    this.type = node.nodeName
+    // create circular reference
     this.node.instance = this
 
     if (node.hasAttribute('svgjs:data')) {
@@ -30,14 +23,9 @@ export default class Element extends EventTarget {
     }
   }
 
-  // Move over x-axis
-  x (x) {
-    return this.attr('x', x)
-  }
-
-  // Move over y-axis
-  y (y) {
-    return this.attr('y', y)
+  // Move element by its center
+  center (x, y) {
+    return this.cx(x).cy(y)
   }
 
   // Move by center over x-axis
@@ -52,19 +40,19 @@ export default class Element extends EventTarget {
       : this.y(y - this.height() / 2)
   }
 
-  // Move element to given x and y values
-  move (x, y) {
-    return this.x(x).y(y)
+  // Get defs
+  defs () {
+    return this.doc().defs()
   }
 
-  // Move element by its center
-  center (x, y) {
-    return this.cx(x).cy(y)
+  // Get parent document
+  doc () {
+    let p = this.parent(Doc)
+    return p && p.doc()
   }
 
-  // Set width of element
-  width (width) {
-    return this.attr('width', width)
+  getEventHolder () {
+    return this
   }
 
   // Set height of element
@@ -72,65 +60,6 @@ export default class Element extends EventTarget {
     return this.attr('height', height)
   }
 
-  // Set element size to given width and height
-  size (width, height) {
-    let p = proportionalSize(this, width, height)
-
-    return this
-      .width(new SVGNumber(p.width))
-      .height(new SVGNumber(p.height))
-  }
-
-  // Clone element
-  clone (parent) {
-    // write dom data to the dom so the clone can pickup the data
-    this.writeDataToDom()
-
-    // clone element and assign new id
-    let clone = assignNewId(this.node.cloneNode(true))
-
-    // insert the clone in the given parent or after myself
-    if (parent) parent.add(clone)
-    else this.after(clone)
-
-    return clone
-  }
-
-  // Remove element
-  remove () {
-    if (this.parent()) { this.parent().removeElement(this) }
-
-    return this
-  }
-
-  // Replace element
-  replace (element) {
-    this.after(element).remove()
-
-    return element
-  }
-
-  // Add element to given container and return self
-  addTo (parent) {
-    return makeInstance(parent).put(this)
-  }
-
-  // Add element to given container and return container
-  putIn (parent) {
-    return makeInstance(parent).add(this)
-  }
-
-  // Get / set id
-  id (id) {
-    // generate new id if no id set
-    if (typeof id === 'undefined' && !this.node.id) {
-      this.node.id = eid(this.type)
-    }
-
-    // dont't set directly width this.node.id to make `null` work correctly
-    return this.attr('id', id)
-  }
-
   // Checks whether the given point inside the bounding box of the element
   inside (x, y) {
     let box = this.bbox()
@@ -141,83 +70,9 @@ export default class Element extends EventTarget {
       y < box.y + box.height
   }
 
-  // Return id on string conversion
-  toString () {
-    return this.id()
-  }
-
-  // Return array of classes on the node
-  classes () {
-    var attr = this.attr('class')
-    return attr == null ? [] : attr.trim().split(delimiter)
-  }
-
-  // Return true if class exists on the node, false otherwise
-  hasClass (name) {
-    return this.classes().indexOf(name) !== -1
-  }
-
-  // Add class to the node
-  addClass (name) {
-    if (!this.hasClass(name)) {
-      var array = this.classes()
-      array.push(name)
-      this.attr('class', array.join(' '))
-    }
-
-    return this
-  }
-
-  // Remove class from the node
-  removeClass (name) {
-    if (this.hasClass(name)) {
-      this.attr('class', this.classes().filter(function (c) {
-        return c !== name
-      }).join(' '))
-    }
-
-    return this
-  }
-
-  // Toggle the presence of a class on the node
-  toggleClass (name) {
-    return this.hasClass(name) ? this.removeClass(name) : this.addClass(name)
-  }
-
-  // Get referenced element form attribute value
-  reference (attr) {
-    let id = idFromReference(this.attr(attr))
-    return id ? makeInstance(id) : null
-  }
-
-  // Returns the parent element instance
-  parent (type) {
-    var parent = this
-
-    // check for parent
-    if (!parent.node.parentNode) return null
-
-    // get parent element
-    parent = adopt(parent.node.parentNode)
-
-    if (!type) return parent
-
-    // loop trough ancestors if type is given
-    while (parent && parent.node instanceof window.SVGElement) {
-      if (typeof type === 'string' ? parent.matches(type) : parent instanceof type) return parent
-      parent = adopt(parent.node.parentNode)
-    }
-  }
-
-  // Get parent document
-  doc () {
-    let p = this.parent(Doc)
-    return p && p.doc()
-  }
-
-  // Get defs
-  defs () {
-    return this.doc().defs()
+  // Move element to given x and y values
+  move (x, y) {
+    return this.x(x).y(y)
   }
 
   // return array of all ancestors of given type up to the root svg
@@ -235,22 +90,30 @@ export default class Element extends EventTarget {
     return parents
   }
 
-  // matches the element vs a css selector
-  matches (selector) {
-    return matcher(this.node, selector)
+  // Get referenced element form attribute value
+  reference (attr) {
+    let id = idFromReference(this.attr(attr))
+    return id ? makeInstance(id) : null
   }
 
-  // Returns the svg node to call native svg methods on it
-  native () {
-    return this.node
+  // set given data to the elements data property
+  setData (o) {
+    this.dom = o
+    return this
   }
 
-  // Import raw svg
-  svg () {
-    // write svgjs data to the dom
-    this.writeDataToDom()
+  // Set element size to given width and height
+  size (width, height) {
+    let p = proportionalSize(this, width, height)
 
-    return this.node.outerHTML
+    return this
+      .width(new SVGNumber(p.width))
+      .height(new SVGNumber(p.height))
+  }
+
+  // Set width of element
+  width (width) {
+    return this.attr('width', width)
   }
 
   // write svgjs data to the dom
@@ -261,17 +124,18 @@ export default class Element extends EventTarget {
     if (Object.keys(this.dom).length) {
       this.node.setAttribute('svgjs:data', JSON.stringify(this.dom)) // see #428
     }
-    return this
+
+    return super.writeDataToDom()
   }
 
-  // set given data to the elements data property
-  setData (o) {
-    this.dom = o
-    return this
+  // Move over x-axis
+  x (x) {
+    return this.attr('x', x)
   }
 
-  getEventTarget () {
-    return this.node
+  // Move over y-axis
+  y (y) {
+    return this.attr('y', y)
   }
 }
 
diff --git a/src/EventTarget.js b/src/EventTarget.js
index a72cafd..637f7f8 100644
--- a/src/EventTarget.js
+++ b/src/EventTarget.js
@@ -3,11 +3,13 @@ import {on, off, dispatch} from './event.js'
 import {extend} from './tools.js'
 
 export default class EventTarget extends Base{
-  constructor (node = {}) {
+  constructor ({events = {}} = {}) {
     super()
-    this.events = node.events || {}
+    this.events = events
   }
 
+  addEventListener () {}
+
   // Bind given event to listener
   on (event, listener, binding, options) {
     on(this, event, listener, binding, options)
@@ -24,11 +26,36 @@ export default class EventTarget extends Base{
     return dispatch(this, event, data)
   }
 
+  dispatchEvent (event) {
+    const bag = this.getEventHolder().events
+    if (!bag) return true
+
+    const events = bag[event.type]
+
+    for (let i in events) {
+      for (let j in events[i]) {
+        events[i][j](event)
+      }
+    }
+
+    return !event.defaultPrevented
+  }
+
   // Fire given event
   fire (event, data) {
     this.dispatch(event, data)
     return this
   }
+
+  getEventHolder () {
+    return this
+  }
+
+  getEventTarget () {
+    return this
+  }
+
+  removeEventListener () {}
 }
 
 
diff --git a/src/HtmlNode.js b/src/HtmlNode.js
index 258c0ec..ff45984 100644
--- a/src/HtmlNode.js
+++ b/src/HtmlNode.js
@@ -1,35 +1,9 @@
-import {makeInstance} from './adopter.js'
-import Parent from './Parent.js'
+import Dom from './Dom.js'
 import {register} from './adopter.js'
 
-export default class HtmlNode extends Parent {
-  constructor (element) {
-    super(element, HtmlNode)
-    this.node = element
-  }
-
-  add (element, i) {
-    element = makeInstance(element)
-
-    if (element.node !== this.node.children[i]) {
-      this.node.insertBefore(element.node, this.node.children[i] || null)
-    }
-
-    return this
-  }
-
-  put (element, i) {
-    this.add(element, i)
-    return element
-  }
-
-  removeElement (element) {
-    this.node.removeChild(element.node)
-    return this
-  }
-
-  getEventTarget () {
-    return this.node
+export default class HtmlNode extends Dom {
+  constructor (node) {
+    super(node, HtmlNode)
   }
 }
 
diff --git a/src/Parent.js b/src/Parent.js
deleted file mode 100644
index 6786329..0000000
--- a/src/Parent.js
+++ /dev/null
@@ -1,169 +0,0 @@
-import {makeInstance, adopt} from './adopter.js'
-import {map} from './utils.js'
-import {registerMethods} from './methods.js'
-import Element from './Element.js'
-import {ns} from './namespaces.js'
-
-export default class Parent extends Element {
-  // Returns all child elements
-  children () {
-    return map(this.node.children, function (node) {
-      return adopt(node)
-    })
-  }
-
-  // Add given element at a position
-  add (element, i) {
-    element = makeInstance(element)
-
-    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
-  }
-
-  // Basically does the same as `add()` but returns the added element instead
-  put (element, i) {
-    this.add(element, i)
-    return element.instance || element
-  }
-
-  // Checks if the given element is a child
-  has (element) {
-    return this.index(element) >= 0
-  }
-
-  // Gets index of given element
-  index (element) {
-    return [].slice.call(this.node.childNodes).indexOf(element.node)
-  }
-
-  // Get a element at the given index
-  get (i) {
-    return adopt(this.node.childNodes[i])
-  }
-
-  // Get first child
-  first () {
-    return adopt(this.node.firstChild)
-  }
-
-  // Get the last child
-  last () {
-    return adopt(this.node.lastChild)
-  }
-
-  // Iterates over all children and invokes a given block
-  each (block, deep) {
-    var children = this.children()
-    var i, il
-
-    for (i = 0, il = children.length; i < il; i++) {
-      if (children[i] instanceof Element) {
-        block.apply(children[i], [i, children])
-      }
-
-      if (deep && (children[i] instanceof Parent)) {
-        children[i].each(block, deep)
-      }
-    }
-
-    return this
-  }
-
-  // Remove a given child
-  removeElement (element) {
-    this.node.removeChild(element.node)
-
-    return this
-  }
-
-  // Remove all elements in this container
-  clear () {
-    // remove children
-    while (this.node.hasChildNodes()) {
-      this.node.removeChild(this.node.lastChild)
-    }
-
-    // remove defs reference
-    delete this._defs
-
-    return this
-  }
-
-  // Import raw svg
-  svg (svg) {
-    var well, len
-
-    // act as a setter if svg is given
-    if (svg) {
-      // create temporary holder
-      well = document.createElementNS(ns, 'svg')
-      // dump raw svg
-      well.innerHTML = svg
-
-      // transplant nodes
-      for (len = well.children.length; len--;) {
-        this.node.appendChild(well.firstElementChild)
-      }
-
-    // otherwise act as a getter
-    } else {
-      // write svgjs data to the dom
-      this.writeDataToDom()
-
-      return this.node.outerHTML
-    }
-
-    return this
-  }
-
-  // write svgjs data to the dom
-  writeDataToDom () {
-    // dump variables recursively
-    this.each(function () {
-      this.writeDataToDom()
-    })
-
-    // remove previously set data
-    this.node.removeAttribute('svgjs:data')
-
-    if (Object.keys(this.dom).length) {
-      this.node.setAttribute('svgjs:data', JSON.stringify(this.dom)) // see #428
-    }
-    return this
-  }
-
-  flatten (parent) {
-    this.each(function () {
-      if (this instanceof Parent) return this.flatten(parent).ungroup(parent)
-      return this.toParent(parent)
-    })
-
-    // we need this so that Doc does not get removed
-    this.node.firstElementChild || this.remove()
-
-    return this
-  }
-
-  ungroup (parent) {
-    parent = parent || this.parent()
-
-    this.each(function () {
-      return this.toParent(parent)
-    })
-
-    this.remove()
-
-    return this
-  }
-}
-
-
-// registerMethods('Container', {
-//   children, add, put, has, index, get, first, last, each,
-//   removeElement, clear, svg, writeDataToDom, flatten, ungroup
-// })
diff --git a/src/Runner.js b/src/Runner.js
index 52731e0..b8bafa6 100644
--- a/src/Runner.js
+++ b/src/Runner.js
@@ -9,6 +9,7 @@ import {extend} from './tools.js'
 import Animator from './Animator.js'
 import Point from './Point.js'
 import {registerMethods} from './methods.js'
+import EventTarget from './EventTarget.js'
 
 // FIXME: What is this doing here?
 // easing = {
@@ -18,8 +19,10 @@ import {registerMethods} from './methods.js'
 //   '<': function (pos) { return -Math.cos(pos * Math.PI / 2) + 1 }
 // }
 
-export default class Runner {
+export default class Runner extends EventTarget {
   constructor (options) {
+    super()
+
     // Store a unique id on the runner, so that we can identify it later
     this.id = Runner.id++
 
@@ -266,7 +269,7 @@ export default class Runner {
     var justFinished = this._lastTime < this._time && this.time > duration
     this._lastTime = this._time
     if (justStarted) {
-      // this.fire('start', this)
+       this.fire('start', this)
     }
 
     // Work out if the runner is finished set the done flag here so animations
@@ -282,14 +285,14 @@ export default class Runner {
       // clear the transforms on this runner so they dont get added again and again
       this.transforms = new Matrix()
       var converged = this._run(declarative ? dt : position)
-      // this.fire('step', this)
+      this.fire('step', this)
     }
     // correct the done flag here
     // declaritive animations itself know when they converged
     this.done = this.done || (converged && declarative)
-    // if (this.done) {
-    //   this.fire('finish', this)
-    // }
+    if (this.done) {
+      this.fire('finish', this)
+    }
     return this
   }
 
diff --git a/src/Shape.js b/src/Shape.js
index bf4ae8f..f02fec2 100644
--- a/src/Shape.js
+++ b/src/Shape.js
@@ -1,2 +1,2 @@
-import Parent from './Parent.js'
-export default class Shape extends Parent {}
+import Element from './Element.js'
+export default class Shape extends Element {}
diff --git a/src/Text.js b/src/Text.js
index 239b429..55fed22 100644
--- a/src/Text.js
+++ b/src/Text.js
@@ -1,4 +1,4 @@
-import Parent from './Parent.js'
+import Shape from './Shape.js'
 import SVGNumber from './SVGNumber.js'
 import {nodeOrNew, extend} from './tools.js'
 import {attrs} from './defaults.js'
@@ -6,7 +6,7 @@ import * as textable from './textable.js'
 import {register, adopt} from './adopter.js'
 import {registerMethods} from './methods.js'
 
-export default class Text extends Parent {
+export default class Text extends Shape {
   // Initialize node
   constructor (node) {
     super(nodeOrNew('text', node), Text)
diff --git a/src/Tspan.js b/src/Tspan.js
index 677adf4..148fb16 100644
--- a/src/Tspan.js
+++ b/src/Tspan.js
@@ -1,11 +1,10 @@
-import Parent from './Parent.js'
+import Text from './Text.js'
 import {nodeOrNew, extend} from './tools.js'
 import * as textable from './textable.js'
 import {register} from './adopter.js'
 import {registerMethods} from './methods.js'
-import Text from './Text.js'
 
-export default class Tspan extends Parent {
+export default class Tspan extends Text {
   // Initialize node
   constructor (node) {
     super(nodeOrNew('tspan', node), Tspan)
diff --git a/src/arrange.js b/src/arrange.js
index 4d4ec1c..d0a5b23 100644
--- a/src/arrange.js
+++ b/src/arrange.js
@@ -94,6 +94,6 @@ export function after (element) {
   return this
 }
 
-registerMethods('Element', {
+registerMethods('Dom', {
   siblings, position, next, prev, forward, backward, front, back, before, after
 })
diff --git a/src/attr.js b/src/attr.js
index 23baf51..c44fa68 100644
--- a/src/attr.js
+++ b/src/attr.js
@@ -3,7 +3,7 @@ import {attrs as defaults} from './defaults.js'
 import Color from './Color.js'
 import SVGArray from './SVGArray.js'
 import SVGNumber from './SVGNumber.js'
-import {registerMethods} from './methods.js'
+//import {registerMethods} from './methods.js'
 
 // Set svg element attribute
 export default function attr (attr, val, ns) {
@@ -80,4 +80,4 @@ export default function attr (attr, val, ns) {
   return this
 }
 
-registerMethods('Element', {attr})
+//registerMethods('Element', {attr})
diff --git a/src/classHandling.js b/src/classHandling.js
new file mode 100644
index 0000000..27bf11a
--- /dev/null
+++ b/src/classHandling.js
@@ -0,0 +1,44 @@
+import {registerMethods} from './methods.js'
+import {delimiter} from './regex.js'
+
+// Return array of classes on the node
+function classes () {
+  var attr = this.attr('class')
+  return attr == null ? [] : attr.trim().split(delimiter)
+}
+
+// Return true if class exists on the node, false otherwise
+function hasClass (name) {
+  return this.classes().indexOf(name) !== -1
+}
+
+// Add class to the node
+function addClass (name) {
+  if (!this.hasClass(name)) {
+    var array = this.classes()
+    array.push(name)
+    this.attr('class', array.join(' '))
+  }
+
+  return this
+}
+
+// Remove class from the node
+function removeClass (name) {
+  if (this.hasClass(name)) {
+    this.attr('class', this.classes().filter(function (c) {
+      return c !== name
+    }).join(' '))
+  }
+
+  return this
+}
+
+// Toggle the presence of a class on the node
+function toggleClass (name) {
+  return this.hasClass(name) ? this.removeClass(name) : this.addClass(name)
+}
+
+registerMethods('Dom', {
+  classes, hasClass, addClass, removeClass, toggleClass
+})
diff --git a/src/classes.js b/src/classes.js
index 8385c20..283baaa 100644
--- a/src/classes.js
+++ b/src/classes.js
@@ -1,7 +1,7 @@
 export {default as EventTarget} from './EventTarget.js'
+export {default as Dom} from './Dom.js'
 export {default as Element} from './Element.js'
 export {default as Shape} from './Shape.js'
-export {default as Parent} from './Parent.js'
 export {default as Container} from './Container.js'
 export {default as HtmlNode} from './HtmlNode.js'
 export {default as Doc} from './Doc.js'
@@ -68,7 +68,6 @@ export {Controller, Ease, PID, Spring} from './Controller.js'
 // export {default as Matrix} from './Matrix.js'
 // export {default as Morphable} from './Morphable.js'
 // export {default as SVGNumber} from './SVGNumber.js'
-// export {default as Parent} from './Parent.js'
 // export {default as Path} from './Path.js'
 // export {default as PathArray} from './PathArray.js'
 // export {default as Pattern} from './Pattern.js'
diff --git a/src/css.js b/src/css.js
index 795be71..b581d71 100644
--- a/src/css.js
+++ b/src/css.js
@@ -68,6 +68,6 @@ export function visible () {
   return this.css('display') !== 'none'
 }
 
-registerMethods('Element', {
+registerMethods('Dom', {
   css, show, hide, visible
 })
diff --git a/src/data.js b/src/data.js
index c49f6a9..6374987 100644
--- a/src/data.js
+++ b/src/data.js
@@ -23,4 +23,4 @@ export function data (a, v, r) {
   return this
 }
 
-registerMethods('Element', {data})
+registerMethods('Dom', {data})
diff --git a/src/elemnts-svg.js b/src/elemnts-svg.js
index 5e51034..5ee97b7 100644
--- a/src/elemnts-svg.js
+++ b/src/elemnts-svg.js
@@ -44,10 +44,6 @@
 
       // Act as setter if we got a string
 
-      // Make sure we are on a current when trying to import
-      if(!(this instanceof SVG.Parent))
-        throw Error('Cannot import svg into non-current element')
-
       // Create temporary holder
       well = document.createElementNS(SVG.ns, 'svg')
       fragment = document.createDocumentFragment()
diff --git a/src/event.js b/src/event.js
index acc4dd6..2aa9daf 100644
--- a/src/event.js
+++ b/src/event.js
@@ -1,27 +1,38 @@
 import {delimiter} from './regex.js'
 import {registerMethods} from './methods.js'
+import {makeInstance} from './adopter.js'
 
 let listenerId = 0
 
+function getEvents (node) {
+  const n = makeInstance(node).getEventHolder()
+  if (!n.events) n.events = {}
+  return n.events
+}
+
 function getEventTarget (node) {
-  return typeof node.getEventTarget === 'function'
-    ? node.getEventTarget()
-    : node
+  return makeInstance(node).getEventTarget()
+}
+
+function clearEvents (node) {
+  const n = makeInstance(node).getEventHolder()
+  if (n.events) n.events = {}
 }
 
 // Add event binder in the SVG namespace
 export function on (node, events, listener, binding, options) {
   var l = listener.bind(binding || node)
+  var bag = getEvents(node)
   var n = getEventTarget(node)
 
   // events can be an array of events or a string of events
   events = Array.isArray(events) ? events : events.split(delimiter)
 
   // ensure instance object for nodes which are not adopted
-  n.instance = n.instance || {events: {}}
+  // n.instance = n.instance || {events: {}}
 
   // pull event handlers from the element
-  var bag = n.instance.events
+  // var bag = n.instance.events
 
   // add id to listener
   if (!listener._svgjsListenerId) {
@@ -46,10 +57,11 @@ export function on (node, events, listener, binding, options) {
 
 // Add event unbinder in the SVG namespace
 export function off (node, events, listener, options) {
+  var bag = getEvents(node)
   var n = getEventTarget(node)
 
   // we cannot remove an event if its not an svg.js instance
-  if (!n.instance) return
+  // if (!n.instance) return
 
   // listener can be a function or a number
   if (typeof listener === 'function') {
@@ -58,7 +70,7 @@ export function off (node, events, listener, options) {
   }
 
   // pull event handlers from the element
-  var bag = n.instance.events
+  // var bag = n.instance.events
 
   // events can be an array of events or a string or undefined
   events = Array.isArray(events) ? events : (events || '').split(delimiter)
@@ -101,7 +113,7 @@ export function off (node, events, listener, options) {
       // remove all listeners on a given node
       for (event in bag) { off(n, event) }
 
-      n.instance.events = {}
+      clearEvents(node)
     }
   })
 }
diff --git a/src/memory.js b/src/memory.js
index 77d3518..a94f0e2 100644
--- a/src/memory.js
+++ b/src/memory.js
@@ -42,5 +42,5 @@ export function memory () {
   return (this._memory = this._memory || {})
 }
 
-registerMethods('Element', {remember, forget, memory})
+registerMethods('Dom', {remember, forget, memory})
 //registerConstructor('Memory', setup)
diff --git a/src/selector.js b/src/selector.js
index 973787d..c6717fb 100644
--- a/src/selector.js
+++ b/src/selector.js
@@ -37,4 +37,4 @@ export function find (query) {
   return baseFind(query, this.node)
 }
 
-registerMethods('Element', {find})
+registerMethods('Dom', {find})
diff --git a/src/sugar.js b/src/sugar.js
index e5d6b61..6465985 100644
--- a/src/sugar.js
+++ b/src/sugar.js
@@ -3,6 +3,7 @@ import Runner from './Runner.js'
 import SVGNumber from './SVGNumber.js'
 import Matrix from './Matrix.js'
 import Point from './Point.js'
+import Element from './Element.js'
 import {registerMethods} from './methods.js'
 
 // Define list of available attributes for stroke and fill
@@ -23,7 +24,7 @@ var sugar = {
     if (typeof o === 'undefined') {
       return this
     }
-    if (typeof o === 'string' || Color.isRgb(o) || (o && typeof o.fill === 'function')) {
+    if (typeof o === 'string' || Color.isRgb(o) || (o instanceof Element)) {
       this.attr(m, o)
     } else {
       // set all attributes from sugar.fill and sugar.stroke list
@@ -37,7 +38,7 @@ var sugar = {
     return this
   }
 
-  registerMethods(['Element', 'Runner'], extension)
+  registerMethods(['Shape', 'Runner'], extension)
 })
 
 registerMethods(['Element', 'Runner'], {
@@ -140,7 +141,7 @@ registerMethods('Path', {
   }
 })
 
-registerMethods(['Parent', 'Runner'], {
+registerMethods(['Element', 'Runner'], {
   // Set font
   font: function (a, v) {
     if (typeof a === 'object') {
diff --git a/src/svg.js b/src/svg.js
index 4206060..7cfbbc8 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -1,9 +1,3 @@
-// import {extend} from './tools.js'
-// import * as Element from './Element.js'
-// import Defs from './Defs.js'
-//
-// extend(Defs, [EventTarget, Element, Parent])
-
 import {makeInstance} from './adopter.js'
 import * as Classes from './classes.js'
 import * as adopter from './adopter.js'
@@ -13,6 +7,7 @@ import * as elements from './elements.js'
 import './attr.js'
 import './arrange.js'
 import './data.js'
+import './classHandling.js'
 import find from './selector.js'
 import './css.js'
 import './transform.js'
@@ -24,7 +19,6 @@ const extend = tools.extend
 
 import './EventTarget.js'
 import './Element.js'
-import './Parent.js'
 
 extend([
   Classes.Doc,
@@ -59,8 +53,9 @@ extend([
 ], getMethodsFor('radius'))
 
 extend(Classes.EventTarget, getMethodsFor('EventTarget'))
+extend(Classes.Dom, getMethodsFor('Dom'))
 extend(Classes.Element, getMethodsFor('Element'))
-extend(Classes.Element, getMethodsFor('Parent'))
+extend(Classes.Shape, getMethodsFor('Shape'))
 //extend(Classes.Element, getConstructor('Memory'))
 extend(Classes.Container, getMethodsFor('Container'))
 
@@ -97,8 +92,6 @@ import * as ns from './namespaces.js'
 SVG.get = SVG
 SVG.find = find
 Object.assign(SVG, ns)
-// import Base from './Base.js'
-// SVG.Element = SVG.Parent = SVG.Shape = SVG.Container = Base
 import {easing} from './Controller.js'
 SVG.easing = easing
 import * as events from './event.js'