Bumped to v0.7 with reworked id sequence, attr nullifier, and various other fixes

8 files changed, 79 insertions, 63 deletions

diff --git a/src/container.js b/src/container.js
index a78d93f..fd41a96 100644
--- a/src/container.js
+++ b/src/container.js
@@ -10,7 +10,16 @@ SVG.extend(SVG.Container, {
   // Add given element at a position
   add: function(element, index) {
     if (!this.has(element)) {
+      /* define insertion index if none given */
       index = index == null ? this.children().length : index
+      
+      /* remove references from previous parent */
+      if (element.parent) {
+        var i = element.parent.children().indexOf(element)
+        element.parent.children().splice(i, 1)
+      }
+      
+      /* add element references */
       this.children().splice(index, 0, element)
       this.node.insertBefore(element.node, this.node.childNodes[index] || null)
       element.parent = this
@@ -42,18 +51,13 @@ SVG.extend(SVG.Container, {
     
     return this
   }
-  // Remove a given child element
+  // Remove a child element at a position
 , remove: function(element) {
-    return this.removeAt(this.children().indexOf(element))
-  }
-  // Remove a child element at a given position
-, removeAt: function(index) {
-    if (0 <= index && index < this.children().length) {
-      var element = this.children()[index]
-      this.children().splice(index, 1)
-      this.node.removeChild(element.node)
-      element.parent = null
-    }
+    var index = this.children().indexOf(element)
+
+    this.children().splice(index, 1)
+    this.node.removeChild(element.node)
+    element.parent = null
     
     return this
   }
diff --git a/src/doc.js b/src/doc.js
index ac314f3..a2db3a4 100644
--- a/src/doc.js
+++ b/src/doc.js
@@ -10,13 +10,13 @@ SVG.Doc = function(element) {
     element
   
   /* set svg element attributes and create the <defs> node */
-  this.
-    attr({ xmlns: SVG.ns, version: '1.1', width: '100%', height: '100%' }).
-    attr('xlink', SVG.xlink, SVG.ns).
-    defs()
+  this
+    .attr({ xmlns: SVG.ns, version: '1.1', width: '100%', height: '100%' })
+    .attr('xlink', SVG.xlink, SVG.ns)
+    .defs()
   
   /* ensure correct rendering for safari */
-  this.stage(); 
+  this.stage()
 }
 
 // Inherits from SVG.Container
diff --git a/src/element.js b/src/element.js
index a44547c..3846576 100644
--- a/src/element.js
+++ b/src/element.js
@@ -9,34 +9,34 @@ SVG.Element = function(node) {
   
   /* initialize attribute store with defaults */
   this.attrs = {
-    'fill-opacity':   1,
-    'stroke-opacity': 1,
-    'stroke-width':   0,
-    fill:     '#000',
-    stroke:   '#000',
-    opacity:  1,
-    x:        0,
-    y:        0,
-    cx:       0,
-    cy:       0,
-    width:    0,
-    height:   0,
-    r:        0,
-    rx:       0,
-    ry:       0
+    'fill-opacity':   1
+  , 'stroke-opacity': 1
+  , 'stroke-width':   0
+  , 'id':     (node ? node.getAttribute('id') : null)
+  , fill:     '#000'
+  , stroke:   '#000'
+  , opacity:  1
+  , x:        0
+  , y:        0
+  , cx:       0
+  , cy:       0
+  , width:    0
+  , height:   0
+  , r:        0
+  , rx:       0
+  , ry:       0
   }
   
   /* initialize transformation store with defaults */
   this.trans = {
-    x:        0,
-    y:        0,
-    scaleX:   1,
-    scaleY:   1,
-    rotation: 0,
-    skewX:    0,
-    skewY:    0
+    x:        0
+  , y:        0
+  , scaleX:   1
+  , scaleY:   1
+  , rotation: 0
+  , skewX:    0
+  , skewY:    0
   }
-
 }
 
 //
@@ -106,7 +106,9 @@ SVG.extend(SVG.Element, {
   },
   // Remove element
   remove: function() {
-    return this.parent != null ? this.parent.remove(this) : void 0
+    if (this.parent)
+      this.parent.remove(this)
+    return this
   },
   // Get parent document
   doc: function() {
@@ -135,20 +137,30 @@ SVG.extend(SVG.Element, {
       else
         return this.attrs[a]
     
+    } else if (v === null) {
+      /* remove value */
+      this.node.removeAttribute(a)
+      
     } else {
       /* store value */
       this.attrs[a] = v
       
       /* treat x differently on text elements */
-      if (a == 'x' && this._isText())
+      if (a == 'x' && this._isText()) {
         for (var i = this.lines.length - 1; i >= 0; i--)
           this.lines[i].attr(a, v)
       
       /* set the actual attribute */
-      else
+      } else {
+        /* BUG FIX: some browsers will render a stroke if a color is given even though stroke width is 0 */
+        if (a == 'stroke-width')
+          this.attr('stroke', parseFloat(v) > 0 ? this.attrs.stroke : null)
+        
+        /* set give attribute on node */
         n != null ?
           this.node.setAttributeNS(n, a, v) :
           this.node.setAttribute(a, v)
+      }
       
       /* if the passed argument belongs to the style as well, add it there */
       if (this._isStyle(a)) {
@@ -214,9 +226,7 @@ SVG.extend(SVG.Element, {
       }
       
     } else {
-      v === null ?
-        this.node.removeAttribute('data-' + a) :
-        this.attr('data-' + a, r === true ? v : JSON.stringify(v))
+      this.attr('data-' + a, v === null ? null : r === true ? v : JSON.stringify(v))
     }
     
     return this
diff --git a/src/gradient.js b/src/gradient.js
index f3ba85c..73975c5 100644
--- a/src/gradient.js
+++ b/src/gradient.js
@@ -1,9 +1,6 @@
 SVG.Gradient = function(type) {
   this.constructor.call(this, SVG.create(type + 'Gradient'))
   
-  /* set unique id */
-  this.attr('id', (this.id = 'svgjs_element_' + (SVG.did++)))
-  
   /* store type */
   this.type = type
 }
@@ -48,7 +45,7 @@ SVG.extend(SVG.Gradient, {
   },
   // Return the fill id
   fill: function() {
-    return 'url(#' + this.id + ')'
+    return 'url(#' + this.attr('id') + ')'
   }
   
 })
diff --git a/src/mask.js b/src/mask.js
index 708b982..f863e8d 100644
--- a/src/mask.js
+++ b/src/mask.js
@@ -1,8 +1,5 @@
 SVG.Mask = function() {
   this.constructor.call(this, SVG.create('mask'))
-  
-  /* set unique id */
-  this.attr('id', (this.id = 'svgjs_element_' + (SVG.did++)))
 }
 
 // Inherit from SVG.Container
@@ -15,7 +12,7 @@ SVG.extend(SVG.Element, {
     /* use given mask or create a new one */
     this.mask = element instanceof SVG.Mask ? element : this.parent.mask().add(element)
     
-    return this.attr('mask', 'url(#' + this.mask.id + ')')
+    return this.attr('mask', 'url(#' + this.mask.attr('id') + ')')
   }
   
 })
\ No newline at end of file
diff --git a/src/nested.js b/src/nested.js
index 45820f2..9d4401c 100644
--- a/src/nested.js
+++ b/src/nested.js
@@ -1,6 +1,7 @@
 SVG.Nested = function() {
   this.constructor.call(this, SVG.create('svg'))
-  this.attr('overflow', 'visible')
+  
+  this.attr('style', 'overflow:visible')
 }
 
 // Inherit from SVG.Container
diff --git a/src/pattern.js b/src/pattern.js
index 82a2339..7343d6a 100644
--- a/src/pattern.js
+++ b/src/pattern.js
@@ -1,8 +1,5 @@
 SVG.Pattern = function(type) {
   this.constructor.call(this, SVG.create('pattern'))
-  
-  /* set unique id */
-  this.attr('id', (this.id = 'svgjs_element_' + (SVG.did++)))
 }
 
 // Inherit from SVG.Container
@@ -12,7 +9,7 @@ SVG.Pattern.prototype = new SVG.Container
 SVG.extend(SVG.Pattern, {
   // Return the fill id
   fill: function() {
-    return 'url(#' + this.id + ')'
+    return 'url(#' + this.attr('id') + ')'
   }
   
 })
diff --git a/src/svg.js b/src/svg.js
index f017e77..e56086b 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -18,12 +18,22 @@ this.SVG = {
   ns:    'http://www.w3.org/2000/svg'
 , xlink: 'http://www.w3.org/1999/xlink'
   
-  /* defs id sequence */
-, did: 0
-  
+  /* element id sequence */
+, did: 1000
+
+  // Get next named element id
+, eid: function(name) {
+    return 'Svgjs' + name.charAt(0).toUpperCase() + name.slice(1) + 'Element' + (SVG.did++)
+  }
   // Method for element creation
-, create: function(element) {
-    return document.createElementNS(this.ns, element)
+, create: function(name) {
+    /* create element */
+    var element = document.createElementNS(this.ns, name)
+    
+    /* apply unique id */
+    element.setAttribute('id', this.eid(name))
+    
+    return element
   }
   // Method for extending objects
 , extend: function(object, module) {