Added more control to SVG.Matrix

4 files changed, 41 insertions, 29 deletions

diff --git a/src/fx.js b/src/fx.js
index d504089..ddbbcd0 100755
--- a/src/fx.js
+++ b/src/fx.js
@@ -218,10 +218,6 @@ SVG.FX = SVG.invent({
       
       return this
     }
-    // Add animatable transformations
-  , transform: function(o) {
-      return this.attr('transform', o)
-    }
     // Add animatable styles
   , style: function(s, v) {
       if (typeof s == 'object')
diff --git a/src/matrix.js b/src/matrix.js
index 91bcd8a..e9c8900 100644
--- a/src/matrix.js
+++ b/src/matrix.js
@@ -104,37 +104,37 @@ SVG.Matrix = SVG.invent({
         cx = y
       }
 
-      return this
-        .multiply(new SVG.Matrix(1, 0, 0, 1, cx || 0, cy || 0))
-        .multiply(new SVG.Matrix(x, 0, 0, y, 0, 0))
-        .multiply(new SVG.Matrix(1, 0, 0, 1, -cx || 0, -cy || 0))
+      return this.around(cx, cy, new SVG.Matrix(x, 0, 0, y, 0, 0))
     }
     // Rotate matrix
-  , rotate: function(d, cx, cy) {
+  , rotate: function(r, cx, cy) {
       // convert degrees to radians
-      d = SVG.utils.radians(d)
+      r = SVG.utils.radians(r)
       
-      return this
-        .multiply(new SVG.Matrix(1, 0, 0, 1, cx || 0, cy || 0))
-        .multiply(new SVG.Matrix(Math.cos(d), Math.sin(d), -Math.sin(d), Math.cos(d), 0, 0))
-        .multiply(new SVG.Matrix(1, 0, 0, 1, -cx || 0, -cy || 0))
+      return this.around(cx, cy, new SVG.Matrix(Math.cos(r), Math.sin(r), -Math.sin(r), Math.cos(r), 0, 0))
     }
-    // Flip matrix on x or y
-  , flip: function(a) {
-      return new SVG.Matrix(this.native()['flip' + a.toUpperCase()]())
+    // Flip matrix on x or y, at a given offset
+  , flip: function(a, o) {
+      return a == 'x' ? this.scale(-1, 1, o, 0) : this.scale(1, -1, 0, o)
     }
     // Skew
   , skew: function(x, y, cx, cy) {
-      // IMPLEMENT SKEW CENTER POINT
-      return new SVG.Matrix(this.native().skewX(x || 0).skewY(y || 0))
+      return this.around(cx, cy, this.native().skewX(x || 0).skewY(y || 0))
+    }
+    // Transform around a center point
+  , around: function(cx, cy, matrix) {
+      return this
+        .multiply(new SVG.Matrix(1, 0, 0, 1, cx || 0, cy || 0))
+        .multiply(matrix)
+        .multiply(new SVG.Matrix(1, 0, 0, 1, -cx || 0, -cy || 0))
     }
     // Convert to native SVGMatrix
   , native: function() {
       // create new matrix
-      var i, matrix = SVG.parser.draw.node.createSVGMatrix()
+      var matrix = SVG.parser.draw.node.createSVGMatrix()
   
       // update with current values
-      for (i = abcdef.length - 1; i >= 0; i--)
+      for (var i = abcdef.length - 1; i >= 0; i--)
         matrix[abcdef[i]] = this[abcdef[i]]
 
       return matrix
diff --git a/src/sugar.js b/src/sugar.js
index 52f5697..cc01c00 100755
--- a/src/sugar.js
+++ b/src/sugar.js
@@ -34,8 +34,8 @@ SVG.extend(SVG.Element, SVG.FX, {
     return this.transform({ rotation: d, cx: cx, cy: cy })
   }
   // Map skew to transform
-, skew: function(x, y) {
-    return this.transform({ skewX: x, skewY: y })
+, skew: function(x, y, cx, cy) {
+    return this.transform({ skewX: x, skewY: y, cx: cx, cy: cy })
   }
   // Map scale to transform
 , scale: function(x, y, cx, cy) {
@@ -47,6 +47,10 @@ SVG.extend(SVG.Element, SVG.FX, {
 , translate: function(x, y) {
     return this.transform({ x: x, y: y })
   }
+  // Map flip to transform
+, flip: function(a, o) {
+    return this.transform({ flip: a, offset: o })
+  }
   // Map matrix to transform
 , matrix: function(m) {
     return this.attr('transform', new SVG.Matrix(m))
diff --git a/src/transform.js b/src/transform.js
index d33a411..7c4902b 100644
--- a/src/transform.js
+++ b/src/transform.js
@@ -11,10 +11,10 @@ SVG.extend(SVG.Element, SVG.FX, {
 		// singular getter
 		else if (typeof o === 'string')
 			return target.ctm().extract()[o]
-
+		
 		// get current matrix
 		var matrix = new SVG.Matrix(target)
-
+		
 		// act on matrix
 		if (o.a != null)
 			matrix = matrix.multiply(new SVG.Matrix(o))
@@ -26,19 +26,31 @@ SVG.extend(SVG.Element, SVG.FX, {
 			, o.cx == null ? target.bbox().cx : o.cx
 			, o.cy == null ? target.bbox().cy : o.cy
 			)
-
+		
 		// act on scale
 		else if (o.scale != null || o.scaleX != null || o.scaleY != null)
 			matrix = matrix.scale(
 				o.scale != null ? o.scale : o.scaleX != null ? o.scaleX : 1
 			, o.scale != null ? o.scale : o.scaleY != null ? o.scaleY : 1
-			, o.cx 		!= null ? o.cx 		: target.bbox().x
-			, o.cy 		!= null ? o.cy 		: target.bbox().y
+			, o.cx 		== null ? target.bbox().x : o.cx
+			, o.cy 		== null ? target.bbox().y : o.cy
 			)
 
 		// act on skew
 		else if (o.skewX || o.skewY)
-			matrix = matrix.skew(o.skewX, o.skewY)
+			matrix = matrix.skew(
+				o.skewX
+			, o.skewY
+			, o.cx == null ? target.bbox().cx : o.cx
+			, o.cy == null ? target.bbox().cy : o.cy
+			)
+
+		// act on flip
+		else if (o.flip)
+			matrix = matrix.flip(
+				o.flip
+			, o.offset == null ? target.bbox()['c' + o.flip] : o.offset
+			)
 
 		// act on translate
 		else if (o.x || o.y)