svgjs now saves crucial data in the dom (fixes #369 again)

4 files changed, 54 insertions, 22 deletions

diff --git a/src/doc.js b/src/doc.js
index 6efb649..ef1a58b 100644
--- a/src/doc.js
+++ b/src/doc.js
@@ -2,13 +2,13 @@ SVG.Doc = SVG.invent({
   // Initialize node
   create: function(element) {
     if (element) {
-      /* ensure the presence of a dom element */
+      // ensure the presence of a dom element
       element = typeof element == 'string' ?
         document.getElementById(element) :
         element
       
-      /* If the target is an svg element, use that element as the main wrapper.
-         This allows svg.js to work with svg documents as well. */
+      // If the target is an svg element, use that element as the main wrapper.
+      // This allows svg.js to work with svg documents as well.
       if (element.nodeName == 'svg') {
         this.constructor.call(this, element)
       } else {
@@ -16,7 +16,7 @@ SVG.Doc = SVG.invent({
         element.appendChild(this.node)
       }
       
-      /* set svg element attributes and ensure defs node */
+      // set svg element attributes and ensure defs node
       this.namespace().size('100%', '100%').defs()
     }
   }
@@ -31,6 +31,7 @@ SVG.Doc = SVG.invent({
       return this
         .attr({ xmlns: SVG.ns, version: '1.1' })
         .attr('xmlns:xlink', SVG.xlink, SVG.xmlns)
+        .attr('xmlns:svgjs', SVG.svgjs, SVG.xmlns)
     }
     // Creates and returns defs element
   , defs: function() {
diff --git a/src/element.js b/src/element.js
index aa75235..194886e 100644
--- a/src/element.js
+++ b/src/element.js
@@ -5,6 +5,9 @@ SVG.Element = SVG.invent({
     // make stroke value accessible dynamically
     this._stroke = SVG.defaults.attrs.stroke
 
+    // initialize data object
+    this.dom = {}
+
     // create circular reference
     if (this.node = node) {
       this.type = node.nodeName
@@ -177,6 +180,7 @@ SVG.Element = SVG.invent({
   , doc: function() {
       return this instanceof SVG.Doc ? this : this.parent(SVG.Doc)
     }
+    // return array of all ancestors of given type up to the root svg
   , parents: function(type) {
       var parents = [], parent = this
 
@@ -216,6 +220,9 @@ SVG.Element = SVG.invent({
         // create a wrapping svg element in case of partial content
         well.appendChild(svg = document.createElement('svg'))
 
+        // write svgjs data to the dom
+        this.writeDataToDom()
+
         // insert a copy of this node
         svg.appendChild(this.node.cloneNode(true))
 
@@ -225,5 +232,26 @@ SVG.Element = SVG.invent({
 
       return this
     }
+  // write svgjs data to the dom
+  , writeDataToDom: function() {
+
+      // dump variables recursively
+      if(this.each || this.lines){
+        var fn = this.each ? this : this.lines();
+        fn.each(function(){
+          this.writeDataToDom()
+        })
+      }
+
+      if(Object.keys(this.dom).length)
+        this.node.setAttributeNS(SVG.svgjs, 'svgjs:data', JSON.stringify(this.dom))
+        
+      return this
+    }
+  // set given data to the elements data property
+  , setData: function(o){
+      this.dom = o
+      return this
+    }
   }
 })
diff --git a/src/svg.js b/src/svg.js
index c8454f0..ebe298c 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -14,6 +14,7 @@ var SVG = this.SVG = function(element) {
 SVG.ns    = 'http://www.w3.org/2000/svg'
 SVG.xmlns = 'http://www.w3.org/2000/xmlns/'
 SVG.xlink = 'http://www.w3.org/1999/xlink'
+SVG.svgjs = 'http://svgjs.com/svgjs'
 
 // Svg support test
 SVG.supported = (function() {
@@ -116,6 +117,9 @@ SVG.adopt = function(node) {
   if (element instanceof SVG.Doc)
     element.namespace().defs()
 
+  // pull svgjs data from the dom (getAttributeNS doesn't work in html5)
+  element.setData(JSON.parse(node.getAttribute('svgjs:data')) || {})
+
   return element
 }
 
diff --git a/src/text.js b/src/text.js
index cf24d79..59d85f8 100644
--- a/src/text.js
+++ b/src/text.js
@@ -3,9 +3,9 @@ SVG.Text = SVG.invent({
   create: function() {
     this.constructor.call(this, SVG.create('text'))
 
-    this._leading = new SVG.Number(1.3)    // store leading value for rebuilding
-    this._rebuild = true                   // enable automatic updating of dy values
-    this._build   = false                  // disable build mode for adding multiple lines
+    this.dom.leading = new SVG.Number(1.3)    // store leading value for rebuilding
+    this._rebuild = true                      // enable automatic updating of dy values
+    this._build   = false                     // disable build mode for adding multiple lines
 
     // set default font
     this.attr('font-family', SVG.defaults.attrs['font-family'])
@@ -20,13 +20,6 @@ SVG.Text = SVG.invent({
       // clone element and assign new id
       var clone = assignNewId(this.node.cloneNode(true))
 
-      // mark first level tspans as newlines
-      this.lines().each(function(i){
-        clone.lines().get(i).newLined = this.newLined;
-      })
-      
-      clone._leading = new SVG.Number(this._leading.valueOf())
-
       // insert the clone after myself
       this.after(clone)
 
@@ -40,7 +33,7 @@ SVG.Text = SVG.invent({
 
       // move lines as well if no textPath is present
       if (!this.textPath)
-        this.lines().each(function() { if (this.newLined) this.x(x) })
+        this.lines().each(function() { if (this.dom.newLined) this.x(x) })
 
       return this.attr('x', x)
     }
@@ -72,7 +65,7 @@ SVG.Text = SVG.invent({
         for(var i = 0, len = children.length; i < len; ++i){
           
           // add newline if its not the first child and newLined is set to true
-          if(i != 0 && children[i].nodeType != 3 && SVG.adopt(children[i]).newLined == true){
+          if(i != 0 && children[i].nodeType != 3 && SVG.adopt(children[i]).dom.newLined == true){
             text += '\n'
           }
           
@@ -110,10 +103,10 @@ SVG.Text = SVG.invent({
   , leading: function(value) {
       // act as getter
       if (value == null)
-        return this._leading
+        return this.dom.leading
 
       // act as setter
-      this._leading = new SVG.Number(value)
+      this.dom.leading = new SVG.Number(value)
 
       return this.rebuild()
     }
@@ -138,11 +131,11 @@ SVG.Text = SVG.invent({
         var self = this
 
         this.lines().each(function() {
-          if (this.newLined) {
+          if (this.dom.newLined) {
             if (!this.textPath)
               this.attr('x', self.attr('x'))
 
-            this.attr('dy', self._leading * new SVG.Number(self.attr('font-size')))
+            this.attr('dy', self.dom.leading * new SVG.Number(self.attr('font-size')))
           }
         })
 
@@ -156,6 +149,12 @@ SVG.Text = SVG.invent({
       this._build = !!build
       return this
     }
+    // overwrite method from parent to set data properly
+  , setData: function(o){
+      this.dom = o
+      this.dom.leading = o.leading ? new SVG.Number(o.leading.value, o.leading.unit) : new SVG.Number(1.3)
+      return this
+    }
   }
 
   // Add parent method
@@ -201,10 +200,10 @@ SVG.Tspan = SVG.invent({
       var t = this.parent(SVG.Text)
 
       // mark new line
-      this.newLined = true
+      this.dom.newLined = true
 
       // apply new hy¡n
-      return this.dy(t._leading * t.attr('font-size')).attr('x', t.x())
+      return this.dy(t.dom.leading * t.attr('font-size')).attr('x', t.x())
     }
   }