Added new SVG.Line class and working on SVG.Matrix

10 files changed, 107 insertions, 201 deletions

diff --git a/src/bbox.js b/src/bbox.js
index c68bec5..1632a02 100755
--- a/src/bbox.js
+++ b/src/bbox.js
@@ -2,19 +2,19 @@
 SVG.BBox = function(element) {
   var box
 
-  /* initialize zero box */
+  // Initialize zero box
   this.x      = 0
   this.y      = 0
   this.width  = 0
   this.height = 0
   
-  /* get values if element is given */
+  // Get values if element is given
   if (element) {
     try {
-      /* actual, native bounding box */
+      // Actual, native bounding box
       box = element.node.getBBox()
     } catch(e) {
-      /* fallback for some browsers */
+      // Fallback for some browsers
       box = {
         x:      element.node.clientLeft
       , y:      element.node.clientTop
@@ -23,16 +23,16 @@ SVG.BBox = function(element) {
       }
     }
     
-    /* include translations on x an y */
+    // Include translations on x an y
     this.x = box.x + element.trans.x
     this.y = box.y + element.trans.y
     
-    /* plain width and height */
+    // Plain width and height
     this.width  = box.width  * element.trans.scaleX
     this.height = box.height * element.trans.scaleY
   }
 
-  /* add center, right and bottom */
+  // Add center, right and bottom
   boxProperties(this)
   
 }
@@ -41,18 +41,15 @@ SVG.BBox = function(element) {
 SVG.extend(SVG.BBox, {
   // merge bounding box with another, return a new instance
   merge: function(box) {
-    var b = new SVG.BBox()
+    var b = new SVG.BBox
 
-    /* merge box */
+    // Merge box
     b.x      = Math.min(this.x, box.x)
     b.y      = Math.min(this.y, box.y)
     b.width  = Math.max(this.x + this.width,  box.x + box.width)  - b.x
     b.height = Math.max(this.y + this.height, box.y + box.height) - b.y
 
-    /* add center, right and bottom */
-    boxProperties(b)
-
-    return b
+    return boxProperties(b)
   }
 
 })
\ No newline at end of file
diff --git a/src/default.js b/src/default.js
index b9819a7..0c9ba33 100755
--- a/src/default.js
+++ b/src/default.js
@@ -1,10 +1,7 @@
 
 SVG.defaults = {
-  // Default matrix
-  matrix:       '1 0 0 1 0 0'
-  
   // Default attribute values
-, attrs: {
+  attrs: {
     /* fill and stroke */
     'fill-opacity':     1
   , 'stroke-opacity':   1
@@ -35,30 +32,28 @@ SVG.defaults = {
   , 'font-family':      'Helvetica, Arial, sans-serif'
   , 'text-anchor':      'start'
   }
-  
-  // Default transformation values
-, trans: function() {
-    return {
-      /* translate */
-      x:        0
-    , y:        0
-      /* scale */
-    , scaleX:   1
-    , scaleY:   1
-      /* rotate */
-    , rotation: 0
-      /* skew */
-    , skewX:    0
-    , skewY:    0
-      /* matrix */
-    , matrix:   this.matrix
-    , a:        1
-    , b:        0
-    , c:        0
-    , d:        1
-    , e:        0
-    , f:        0
-    }
+
+  // Transforms
+, trans: {
+  /* translate */
+    x:        0
+  , y:        0
+    /* scale */
+  , scaleX:   1
+  , scaleY:   1
+    /* rotate */
+  , rotation: 0
+    /* skew */
+  , skewX:    0
+  , skewY:    0
+    /* matrix */
+  , matrix:   this.matrix
+  , a:        1
+  , b:        0
+  , c:        0
+  , d:        1
+  , e:        0
+  , f:        0
   }
   
 }
\ No newline at end of file
diff --git a/src/element.js b/src/element.js
index 069c487..3d7de12 100755
--- a/src/element.js
+++ b/src/element.js
@@ -2,16 +2,16 @@
 SVG.Element = SVG.invent({
   // Initialize node
   create: function(node) {
-    /* make stroke value accessible dynamically */
+    // Make stroke value accessible dynamically
     this._stroke = SVG.defaults.attrs.stroke
 
-    /* initialize transformation store with defaults */
-    this.trans = SVG.defaults.trans()
-    
-    /* create circular reference */
+    // Create circular reference
     if (this.node = node) {
       this.type = node.nodeName
       this.node.instance = this
+
+      // Store current attribute value
+      this._stroke = node.getAttribute('stroke') || this._stroke
     }
   }
 
@@ -122,10 +122,6 @@ SVG.Element = SVG.invent({
         SVG.regex.isNumber.test(v) ?
           parseFloat(v) : v
       
-      } else if (a == 'style') {
-        // Redirect to the style method
-        return this.style(v)
-      
       } else {
         // BUG FIX: some browsers will render a stroke if a color is given even though stroke width is 0
         if (a == 'stroke-width')
@@ -176,76 +172,12 @@ SVG.Element = SVG.invent({
       return this
     }
     // Manage transformations
-  , transform: function(o, v) {
-      
-      if (arguments.length == 0) {
-        /* act as a getter if no argument is given */
-        return this.trans
-        
-      } else if (typeof o === 'string') {
-        /* act as a getter if only one string argument is given */
-        if (arguments.length < 2)
-          return this.trans[o]
+  , transform: function(t, v) {
+      // Get a transformation at a given position
+      if (typeof t === 'number') {
         
-        /* apply transformations as object if key value arguments are given*/
-        var transform = {}
-        transform[o] = v
-        
-        return this.transform(transform)
       }
-      
-      /* ... otherwise continue as a setter */
-      var transform = []
-      
-      /* parse matrix */
-      o = parseMatrix(o)
-      
-      /* merge values */
-      for (v in o)
-        if (o[v] != null)
-          this.trans[v] = o[v]
-      
-      /* compile matrix */
-      this.trans.matrix = this.trans.a
-                  + ' ' + this.trans.b
-                  + ' ' + this.trans.c
-                  + ' ' + this.trans.d
-                  + ' ' + this.trans.e
-                  + ' ' + this.trans.f
-      
-      /* alias current transformations */
-      o = this.trans
-      
-      /* add matrix */
-      if (o.matrix != SVG.defaults.matrix)
-        transform.push('matrix(' + o.matrix + ')')
-      
-      /* add rotation */
-      if (o.rotation != 0)
-        transform.push('rotate(' + o.rotation + ' ' + (o.cx == null ? this.bbox().cx : o.cx) + ' ' + (o.cy == null ? this.bbox().cy : o.cy) + ')')
-      
-      /* add scale */
-      if (o.scaleX != 1 || o.scaleY != 1)
-        transform.push('scale(' + o.scaleX + ' ' + o.scaleY + ')')
-      
-      /* add skew on x axis */
-      if (o.skewX != 0)
-        transform.push('skewX(' + o.skewX + ')')
-      
-      /* add skew on y axis */
-      if (o.skewY != 0)
-        transform.push('skewY(' + o.skewY + ')')
-      
-      /* add translation */
-      if (o.x != 0 || o.y != 0)
-        transform.push('translate(' + new SVG.Number(o.x / o.scaleX) + ' ' + new SVG.Number(o.y / o.scaleY) + ')')
-      
-      /* update transformations, even if there are none */
-      if (transform.length == 0)
-        this.node.removeAttribute('transform')
-      else
-        this.node.setAttribute('transform', transform.join(' '))
-      
+        
       return this
     }
     // Dynamic style generator
diff --git a/src/helpers.js b/src/helpers.js
index ad73fde..9411e5e 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -93,15 +93,12 @@ function arrayToString(a) {
 
 // Deep new id assignment
 function assignNewId(node) {
-  // Adopt element and assign new id
-  var element = SVG.adopt(node).id(SVG.eid(node.nodeName))
-
   // Do the same for SVG child nodes as well
   for (var i = node.childNodes.length - 1; i >= 0; i--)
     if (node.childNodes[i] instanceof SVGElement)
       assignNewId(node.childNodes[i])
 
-  return element
+  return SVG.adopt(node).id(SVG.eid(node.nodeName))
 }
 
 // Add more bounding box properties
@@ -110,6 +107,8 @@ function boxProperties(b) {
   b.y2 = b.y + b.height
   b.cx = b.x + b.width / 2
   b.cy = b.y + b.height / 2
+
+  return b
 }
 
 // Parse a matrix string
diff --git a/src/line.js b/src/line.js
index c11a734..d76f891 100755
--- a/src/line.js
+++ b/src/line.js
@@ -7,60 +7,31 @@ SVG.Line = SVG.invent({
 
   // Add class methods
 , extend: {
-    // Move over x-axis
-    x: function(x) {
-      var b = this.bbox()
-      
-      return x == null ? b.x : this.attr({
-        x1: this.attr('x1') - b.x + x
-      , x2: this.attr('x2') - b.x + x
-      })
-    }
-    // Move over y-axis
-  , y: function(y) {
-      var b = this.bbox()
-      
-      return y == null ? b.y : this.attr({
-        y1: this.attr('y1') - b.y + y
-      , y2: this.attr('y2') - b.y + y
-      })
-    }
-    // Move by center over x-axis
-  , cx: function(x) {
-      var half = this.bbox().width / 2
-      return x == null ? this.x() + half : this.x(x - half)
-    }
-    // Move by center over y-axis
-  , cy: function(y) {
-      var half = this.bbox().height / 2
-      return y == null ? this.y() + half : this.y(y - half)
-    }
-    // Set width of element
-  , width: function(width) {
-      var b = this.bbox()
+    // Get array
+    array: function() {
+      return (this._array = new SVG.PointArray([
+        [ this.attr('x1'), this.attr('y1') ]
+      , [ this.attr('x2'), this.attr('y2') ]
+      ]))
+    }
+    // Overwrite native plot() method
+  , plot: function(x1, y1, x2, y2) {
+      if (typeof x1 === 'number')
+        x1 = { x1: x1, y1: y1, x2: x2, y2: y2 }
+      else 
+        x1 = (this._array = new SVG.PointArray(x1)).toLine()
 
-      return width == null ? b.width : this.attr(this.attr('x1') < this.attr('x2') ? 'x2' : 'x1', b.x + width)
+      return this.attr(x1)
     }
-    // Set height of element
-  , height: function(height) {
-      var b = this.bbox()
-
-      return height == null ? b.height : this.attr(this.attr('y1') < this.attr('y2') ? 'y2' : 'y1', b.y + height)
+    // Move by left top corner
+  , move: function(x, y) {
+      return this.attr(this.array().move(x, y).toLine())
     }
-    // Set line size by width and height
+    // Set element size to given width and height
   , size: function(width, height) {
       var p = proportionalSize(this.bbox(), width, height)
 
-      return this.width(p.width).height(p.height)
-    }
-    // Set path data
-  , plot: function(x1, y1, x2, y2) {
-      return this.attr({
-        x1: x1
-      , y1: y1
-      , x2: x2
-      , y2: y2
-      })
+      return this.attr(this.array().size(p.width, p.height).toLine())
     }
   }
   
@@ -68,7 +39,7 @@ SVG.Line = SVG.invent({
 , construct: {
     // Create a line element
     line: function(x1, y1, x2, y2) {
-      return this.put(new SVG.Line().plot(x1, y1, x2, y2))
+      return this.put(new SVG.Line).plot(x1, y1, x2, y2)
     }
   }
 })
diff --git a/src/matrix.js b/src/matrix.js
new file mode 100644
index 0000000..2202011
--- /dev/null
+++ b/src/matrix.js
@@ -0,0 +1,3 @@
+SVG.Matrix = function() {
+
+}
\ No newline at end of file
diff --git a/src/pointarray.js b/src/pointarray.js
index 67b6ad4..f43234c 100755
--- a/src/pointarray.js
+++ b/src/pointarray.js
@@ -15,6 +15,15 @@ SVG.extend(SVG.PointArray, {
 
     return array.join(' ')
   }
+  // Convert array to line object
+, toLine: function() {
+    return {
+      x1: this.value[0][0]
+    , y1: this.value[0][1]
+    , x2: this.value[1][0]
+    , y2: this.value[1][1]
+    }
+  }
   // Get morphed array at given position
 , at: function(pos) {
     /* make sure a destination is defined */
diff --git a/src/pointed.js b/src/pointed.js
new file mode 100644
index 0000000..02ff44e
--- /dev/null
+++ b/src/pointed.js
@@ -0,0 +1,25 @@
+// unify all point to point elements
+SVG.extend(SVG.Line, SVG.Polyline, SVG.Polygon, {
+  // Define morphable array
+  morphArray:  SVG.PointArray
+  // Move by left top corner over x-axis
+, x: function(x) {
+    return x == null ? this.bbox().x : this.move(x, this.bbox().y)
+  }
+  // Move by left top corner over y-axis
+, y: function(y) {
+    return y == null ? this.bbox().y : this.move(this.bbox().x, y)
+  }
+  // Set width of element
+, width: function(width) {
+    var b = this.bbox()
+
+    return width == null ? b.width : this.size(width, b.height)
+  }
+  // Set height of element
+, height: function(height) {
+    var b = this.bbox()
+
+    return height == null ? b.height : this.size(b.width, height) 
+  }
+})
\ No newline at end of file
diff --git a/src/poly.js b/src/poly.js
index 2bf0b57..0f3b1e6 100755
--- a/src/poly.js
+++ b/src/poly.js
@@ -32,10 +32,8 @@ SVG.Polygon = SVG.invent({
 
 // Add polygon-specific functions
 SVG.extend(SVG.Polyline, SVG.Polygon, {
-  // Define morphable array
-  morphArray:  SVG.PointArray
   // Get array
-, array: function() {
+  array: function() {
     return this._array || (this._array = new SVG.PointArray(this.attr('points')))
   }
   // Plot new path
@@ -46,26 +44,6 @@ SVG.extend(SVG.Polyline, SVG.Polygon, {
 , move: function(x, y) {
     return this.attr('points', this.array().move(x, y))
   }
-  // Move by left top corner over x-axis
-, x: function(x) {
-    return x == null ? this.bbox().x : this.move(x, this.bbox().y)
-  }
-  // Move by left top corner over y-axis
-, y: function(y) {
-    return y == null ? this.bbox().y : this.move(this.bbox().x, y)
-  }
-  // Set width of element
-, width: function(width) {
-    var b = this.bbox()
-
-    return width == null ? b.width : this.size(width, b.height)
-  }
-  // Set height of element
-, height: function(height) {
-    var b = this.bbox()
-
-    return height == null ? b.height : this.size(b.width, height) 
-  }
   // Set element size to given width and height
 , size: function(width, height) {
     var p = proportionalSize(this.bbox(), width, height)
diff --git a/src/rbox.js b/src/rbox.js
index fe6a9fa..6ede8ae 100755
--- a/src/rbox.js
+++ b/src/rbox.js
@@ -47,8 +47,8 @@ SVG.RBox = function(element) {
   this.height = box.height /= zoom
   
   /* offset by window scroll position, because getBoundingClientRect changes when window is scrolled */
-  this.x += window.scrollX;
-  this.y += window.scrollY;
+  this.x += window.scrollX
+  this.y += window.scrollY
 
   /* add center, right and bottom */
   boxProperties(this)
@@ -66,11 +66,8 @@ SVG.extend(SVG.RBox, {
     b.y      = Math.min(this.y, box.y)
     b.width  = Math.max(this.x + this.width,  box.x + box.width)  - b.x
     b.height = Math.max(this.y + this.height, box.y + box.height) - b.y
-
-    /* add center, right and bottom */
-    boxProperties(b)
-
-    return b
+    
+    return boxProperties(b)
   }
 
 })