Reworked arrange module, <defs> always on top

6 files changed, 78 insertions, 34 deletions

diff --git a/src/arrange.js b/src/arrange.js
index 157c91c..13b4311 100644
--- a/src/arrange.js
+++ b/src/arrange.js
@@ -8,7 +8,9 @@ SVG.extend(SVG.Element, {
   }
   // Get the curent position siblings
 , position: function() {
-    return this.siblings().indexOf(this)
+    var siblings = this.siblings()
+
+    return siblings.indexOf(this)
   }
   // Get the next element (will return null if there is none)
 , next: function() {
@@ -20,17 +22,16 @@ SVG.extend(SVG.Element, {
   }
   // Send given element one step forward
 , forward: function() {
-    return this.parent.removeElement(this).put(this, this.position() + 1)
+    var i = this.position()
+    return this.parent.removeElement(this).put(this, i + 1)
   }
   // Send given element one step backward
 , backward: function() {
-    this.parent.level()
-    
     var i = this.position()
     
-    if (i > 1)
+    if (i > 0)
       this.parent.removeElement(this).add(this, i - 1)
-    
+
     return this
   }
   // Send given element all the way to the front
@@ -39,12 +40,30 @@ SVG.extend(SVG.Element, {
   }
   // Send given element all the way to the back
 , back: function() {
-    this.parent.level()
-    
     if (this.position() > 1)
       this.parent.removeElement(this).add(this, 0)
     
     return this
   }
-  
+  // Inserts a given element before the targeted element
+, before: function(element) {
+    element.remove()
+
+    var i = this.position()
+    
+    this.parent.add(element, i)
+
+    return this
+  }
+  // Insters a given element after the targeted element
+, after: function(element) {
+    element.remove()
+    
+    var i = this.position()
+    
+    this.parent.add(element, i + 1)
+
+    return this
+  }
+
 })
\ No newline at end of file
diff --git a/src/container.js b/src/container.js
index cb010f2..f928c54 100644
--- a/src/container.js
+++ b/src/container.js
@@ -28,6 +28,12 @@ SVG.extend(SVG.Container, {
       this.node.insertBefore(element.node, this.node.childNodes[i] || null)
       element.parent = this
     }
+
+    /* reposition defs */
+    if (this._defs) {
+      this.node.removeChild(this._defs.node)
+      this.node.appendChild(this._defs.node)
+    }
     
     return this
   }
@@ -50,7 +56,7 @@ SVG.extend(SVG.Container, {
       , children = this.children()
     
     for (i = 0, il = children.length; i < il; i++) {
-      if (children[i] instanceof SVG.Shape)
+      if (children[i] instanceof SVG.Element)
         block.apply(children[i], [i, children])
 
       if (deep && (children[i] instanceof SVG.Container))
@@ -69,13 +75,9 @@ SVG.extend(SVG.Container, {
     
     return this
   }
-  // Returns defs element
+  // Get defs
 , defs: function() {
-    return this._defs || (this._defs = this.put(new SVG.Defs, 0))
-  }
-  // Re-level defs to first positon in element stack
-, level: function() {
-    return this.removeElement(this.defs()).put(this.defs(), 0)
+    return this.doc().defs()
   }
   // Get first child, skipping the defs node
 , first: function() {
@@ -105,10 +107,8 @@ SVG.extend(SVG.Container, {
       this.removeElement(this.children()[i])
 
     /* remove defs node */
-    if (this._defs) {
-      this._defs.remove()
-      delete this._defs
-    }
+    if (this._defs)
+      this._defs.clear()
 
     return this
   }
diff --git a/src/doc.js b/src/doc.js
index faf89c5..65545eb 100644
--- a/src/doc.js
+++ b/src/doc.js
@@ -12,11 +12,14 @@ SVG.Doc = function(element) {
   this.constructor
     .call(this, this.parent.nodeName == 'svg' ? this.parent : SVG.create('svg'))
   
-  /* set svg element attributes and create the <defs> node */
+  /* set svg element attributes */
   this
     .attr({ xmlns: SVG.ns, version: '1.1', width: '100%', height: '100%' })
     .attr('xlink', SVG.xlink, SVG.ns)
-    .defs()
+  
+  /* create the <defs> node */
+  this._defs = new SVG.Defs
+  this.node.appendChild(this._defs.node)
   
   /* ensure correct rendering */
   if (this.parent.nodeName != 'svg')
@@ -26,7 +29,7 @@ SVG.Doc = function(element) {
 // Inherits from SVG.Container
 SVG.Doc.prototype = new SVG.Container
 
-
+//
 SVG.extend(SVG.Doc, {
   // Hack for safari preventing text to be rendered in one line.
   // Basically it sets the position of the svg node to absolute
@@ -76,6 +79,11 @@ SVG.extend(SVG.Doc, {
     return this
   }
 
+  // Creates and returns defs element
+, defs: function() {
+    return this._defs
+  }
+
   // Fix for possible sub-pixel offset. See:
   // https://bugzilla.mozilla.org/show_bug.cgi?id=608812
 , fixSubPixelOffset: function() {
diff --git a/src/group.js b/src/group.js
index 1184657..84eed54 100644
--- a/src/group.js
+++ b/src/group.js
@@ -15,11 +15,6 @@ SVG.extend(SVG.G, {
 , y: function(y) {
     return y == null ? this.trans.y : this.transform('y', y)
   }
-  // Get defs
-, defs: function() {
-    return this.doc().defs()
-  }
-  
 })
 
 //
diff --git a/src/instance.js b/src/instance.js
new file mode 100644
index 0000000..086a019
--- /dev/null
+++ b/src/instance.js
@@ -0,0 +1,28 @@
+SVG.Use = function() {
+  this.constructor.call(this, SVG.create('use'))
+}
+
+// Inherit from SVG.Shape
+SVG.Use.prototype = new SVG.Element
+
+//
+SVG.extend(SVG.Use, {
+  
+  // (re)load image
+  load: function(url) {
+    return (url ? this.attr('xlink:href', (this.src = url), SVG.xlink) : this)
+  }
+  
+})
+
+//
+SVG.extend(SVG.Container, {
+  // Create a use element
+  use: function(element) {
+    if (element instanceof SVG.Element)
+      element = element.id
+
+    return this.put(new SVG.Use().)
+  }
+
+})
\ No newline at end of file
diff --git a/src/svg.js b/src/svg.js
index 1de5c77..1b82053 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -12,12 +12,6 @@ this.SVG = function(element) {
     return new SVG.Doc(element)
 }
 
-// DEPRECATED!!! Use SVG() instead
-this.svg = function(element) {
-  console.warn('WARNING: svg() is deprecated, please use SVG() instead.')
-  return SVG(element)
-}
-
 // Default namespaces
 SVG.ns = 'http://www.w3.org/2000/svg'
 SVG.xlink = 'http://www.w3.org/1999/xlink'