added `morph()` and `at()` methods to `SVG.Number` for unit morphing

1 files changed, 65 insertions, 52 deletions

diff --git a/dist/svg.js b/dist/svg.js
index 675fb37..09059f6 100644
--- a/dist/svg.js
+++ b/dist/svg.js
@@ -1,4 +1,4 @@
-/* svg.js v1.0rc2 - svg regex default color array pointarray patharray number viewbox bbox rbox element parent container fx relative event defs group arrange mask clip gradient doc shape use rect ellipse line poly path image text textpath nested hyperlink sugar set data memory loader - svgjs.com/license */
+/* svg.js v1.0rc2-11-ga19bbab - svg regex default color array pointarray patharray number viewbox bbox rbox element parent container fx relative event defs group arrange mask clip gradient doc shape use rect ellipse line poly path image text textpath nested hyperlink sugar set data memory loader - svgjs.com/license */
 ;(function() {
 
   this.SVG = function(element) {
@@ -269,7 +269,7 @@
       /* normalise pos */
       pos = pos < 0 ? 0 : pos > 1 ? 1 : pos
   
-      /* generate morphed array */
+      /* generate morphed color */
       return new SVG.Color({
         r: ~~(this.r + (this.destination.r - this.r) * pos)
       , g: ~~(this.g + (this.destination.g - this.g) * pos)
@@ -816,13 +816,6 @@
     valueOf: function() {
       return this.value
     }
-    // Convert to different unit
-  , to: function(unit) {
-      if (typeof unit === 'string')
-        this.unit = unit
-  
-      return this
-    }
     // Add number
   , plus: function(number) {
       this.value = this + new SVG.Number(number)
@@ -845,6 +838,30 @@
   
       return this
     }
+    // Convert to different unit
+  , to: function(unit) {
+      if (typeof unit === 'string')
+        this.unit = unit
+  
+      return this
+    }
+    // Make number morphable
+  , morph: function(number) {
+      this.destination = new SVG.Number(number)
+  
+      return this
+    }
+    // Get morphed number at given position
+  , at: function(pos) {
+      /* make sure a destination is defined */
+      if (!this.destination) return this
+  
+      /* generate morphed number */
+      return new SVG.Number(this.destination)
+          .minus(this)
+          .times(pos)
+          .plus(this)
+    }
   
   })
 
@@ -1078,11 +1095,11 @@
     }
     // Move by center over x-axis
   , cx: function(x) {
-      return x == null ? this.bbox().cx : this.x(x - this.bbox().width / 2)
+      return x == null ? this.x() + this.width() / 2 : this.x(x - this.width() / 2)
     }
     // Move by center over y-axis
   , cy: function(y) {
-      return y == null ? this.bbox().cy : this.y(y - this.bbox().height / 2)
+      return y == null ? this.y() + this.height() / 2 : this.y(y - this.height() / 2)
     }
     // Move element to given x and y values
   , move: function(x, y) {
@@ -1592,7 +1609,6 @@
     this.target = element
   }
   
-  //
   SVG.extend(SVG.FX, {
     // Add animation parameters and start animation
     animate: function(d, ease, delay) {
@@ -1687,46 +1703,46 @@
         } else {
           /* run all x-position properties */
           if (fx._x)
-            element.x(fx._at(fx._x, pos))
+            element.x(at(fx._x, pos))
           else if (fx._cx)
-            element.cx(fx._at(fx._cx, pos))
+            element.cx(at(fx._cx, pos))
   
           /* run all y-position properties */
           if (fx._y)
-            element.y(fx._at(fx._y, pos))
+            element.y(at(fx._y, pos))
           else if (fx._cy)
-            element.cy(fx._at(fx._cy, pos))
+            element.cy(at(fx._cy, pos))
   
           /* run all size properties */
           if (fx._size)
-            element.size(fx._at(fx._size.width, pos), fx._at(fx._size.height, pos))
+            element.size(at(fx._size.width, pos), at(fx._size.height, pos))
         }
   
         /* run all viewbox properties */
         if (fx._viewbox)
           element.viewbox(
-            fx._at(fx._viewbox.x, pos)
-          , fx._at(fx._viewbox.y, pos)
-          , fx._at(fx._viewbox.width, pos)
-          , fx._at(fx._viewbox.height, pos)
+            at(fx._viewbox.x, pos)
+          , at(fx._viewbox.y, pos)
+          , at(fx._viewbox.width, pos)
+          , at(fx._viewbox.height, pos)
           )
   
         /* animate attributes */
         for (i = akeys.length - 1; i >= 0; i--)
-          element.attr(akeys[i], fx._at(fx.attrs[akeys[i]], pos))
+          element.attr(akeys[i], at(fx.attrs[akeys[i]], pos))
   
         /* animate transformations */
         for (i = tkeys.length - 1; i >= 0; i--)
-          element.transform(tkeys[i], fx._at(fx.trans[tkeys[i]], pos))
+          element.transform(tkeys[i], at(fx.trans[tkeys[i]], pos))
   
         /* animate styles */
         for (i = skeys.length - 1; i >= 0; i--)
-          element.style(skeys[i], fx._at(fx.styles[skeys[i]], pos))
+          element.style(skeys[i], at(fx.styles[skeys[i]], pos))
   
         /* callback for each keyframe */
         if (fx._during)
           fx._during.call(element, pos, function(from, to) {
-            return fx._at({ from: from, to: to }, pos)
+            return at({ from: from, to: to }, pos)
           })
       }
       
@@ -1790,7 +1806,7 @@
       return this.target.bbox()
     }
     // Add animatable attributes
-  , attr: function(a, v, n) {
+  , attr: function(a, v) {
       if (typeof a == 'object') {
         for (var key in a)
           this.attr(key, a[key])
@@ -1800,6 +1816,8 @@
   
         this.attrs[a] = SVG.Color.isColor(from) ?
           new SVG.Color(from).morph(v) :
+        SVG.regex.unit.test(from) ?
+          new SVG.Number(from).morph(v) :
           { from: from, to: v }
       }
       
@@ -1984,29 +2002,9 @@
   
       return this
     }
-    // Private: calculate position according to from and to
-  , _at: function(o, pos) {
-      /* number recalculation */
-      return typeof o.from == 'number' ?
-        o.from + (o.to - o.from) * pos :
-      
-      /* unit recalculation */
-      SVG.regex.unit.test(o.to) ?
-        new SVG.Number(o.to)
-          .minus(new SVG.Number(o.from))
-          .times(pos)
-          .plus(new SVG.Number(o.from)) :
-      
-      /* color recalculation */
-      o instanceof SVG.Color ? o.at(pos) :
-      
-      /* for all other values wait until pos has reached 1 to return the final value */
-      pos < 1 ? o.from : o.to
-    }
     
   })
   
-  //
   SVG.extend(SVG.Element, {
     // Get fx module or create a new one, then animate with given duration and ease
     animate: function(d, ease, delay) {
@@ -2033,15 +2031,21 @@
   
       return this
     }
-  
     
   })
-  // Usage:
-  
-  //     rect.animate(1500, '>').move(200, 300).after(function() {
-  //       this.fill({ color: '#f06' })
-  //     })
   
+  // Calculate position according to from and to
+  function at(o, pos) {
+    /* number recalculation (don't bother converting to SVG.Number for performance reasons) */
+    return typeof o.from == 'number' ?
+      o.from + (o.to - o.from) * pos :
+    
+    /* instance recalculation */
+    o instanceof SVG.Color || o instanceof SVG.Number ? o.at(pos) :
+    
+    /* for all other values wait until pos has reached 1 to return the final value */
+    pos < 1 ? o.from : o.to
+  }
   
   // Shim layer with setTimeout fallback by Paul Irish
   window.requestAnimFrame = (function(){
@@ -2159,6 +2163,15 @@
   , y: function(y) {
       return y == null ? this.trans.y : this.transform('y', y)
     }
+    // Move by center over x-axis
+  , cx: function(x) {
+      return x == null ? this.bbox().cx : this.x(x - this.bbox().width / 2)
+    }
+    // Move by center over y-axis
+  , cy: function(y) {
+      return y == null ? this.bbox().cy : this.y(y - this.bbox().height / 2)
+    }
+    
   })
   
   //