Implemented absolute and relative matrix transformations

3 files changed, 86 insertions, 29 deletions

diff --git a/spec/spec/element.js b/spec/spec/element.js
index d31ad44..08a7a3e 100755
--- a/spec/spec/element.js
+++ b/spec/spec/element.js
@@ -151,7 +151,7 @@ describe('Element', function() {
   })
   
   describe('transform()', function() {
-    var rect
+    var rect, ctm
     
     beforeEach(function() {
       rect = draw.rect(100,100)
@@ -168,30 +168,75 @@ describe('Element', function() {
       rect.transform({ x: 10, y: 11 }).transform({ x: 20, y: 21 })
       expect(rect.node.getAttribute('transform')).toBe('matrix(1,0,0,1,20,21)')
     })
-    it('performs a relative translation when add is set to true', function() {
-      rect.transform({ x: 10, y: 11 }).transform({ x: 20, y: 21, add: true })
+    it('performs a relative translation when relative is set to true', function() {
+      rect.transform({ x: 10, y: 11 }).transform({ x: 20, y: 21, relative: true })
+      expect(rect.node.getAttribute('transform')).toBe('matrix(1,0,0,1,30,32)')
+    })
+    it('performs a relative translation with relative flag', function() {
+      rect.transform({ x: 10, y: 11 }).transform({ x: 20, y: 21 }, true)
       expect(rect.node.getAttribute('transform')).toBe('matrix(1,0,0,1,30,32)')
     })
     it('sets the scaleX and scaleY of and element', function() {
       rect.transform({ scaleX: 0.5, scaleY: 2 })
-      expect(rect.node.getAttribute('transform')).toBe('matrix(0.5,0,0,2,0,0)')
-    })
-    it('sets the skewX of and element', function() {
-      rect.transform({ skewX: 10 })
-      expect(rect.node.getAttribute('transform')).toBe('matrix(1,0,0.17632698070846498,1,0,0)')
+      expect(rect.node.getAttribute('transform')).toBe('matrix(0.5,0,0,2,25,-50)')
+    })
+    it('performs a uniform scale with scale given', function() {
+      rect.transform({ scale: 3 })
+      expect(rect.node.getAttribute('transform')).toBe('matrix(3,0,0,3,-100,-100)')
+    })
+    it('performs an absolute scale by default', function() {
+      rect.transform({ scale: 3 }).transform({ scale: 0.5 })
+      expect(rect.node.getAttribute('transform')).toBe('matrix(0.5,0,0,0.5,25,25)')
+    })
+    it('performs a relative scale with a relative flag', function() {
+      rect.transform({ scaleX: 0.5, scaleY: 2 }).transform({ scaleX: 3, scaleY: 4 }, true)
+      expect(rect.node.getAttribute('transform')).toBe('matrix(1.5,0,0,8,-25,-350)')
+    })
+    it('sets the skewX of and element with center on the element', function() {
+      ctm = rect.transform({ skewX: 10 }).ctm()
+      expect(ctm.a).toBe(1)
+      expect(ctm.b).toBe(0)
+      expect(ctm.c).toBeCloseTo(0.17632698070846498)
+      expect(ctm.d).toBe(1)
+      expect(ctm.e).toBeCloseTo(-8.81634903542325)
+      expect(ctm.f).toBe(0)
+    })
+    it('sets the skewX of and element with given center', function() {
+      ctm = rect.transform({ skewX: 10, cx: 0, cy: 0 }).ctm()
+      expect(ctm.a).toBe(1)
+      expect(ctm.b).toBe(0)
+      expect(ctm.c).toBeCloseTo(0.17632698070846498)
+      expect(ctm.d).toBe(1)
+      expect(ctm.e).toBe(0)
+      expect(ctm.f).toBe(0)
     })
     it('sets the skewY of and element', function() {
-      rect.transform({ skewY: -10 })
-      expect(rect.node.getAttribute('transform')).toBe('matrix(1,-0.17632698070846498,0,1,0,0)')
+      ctm = rect.transform({ skewY: -10, cx: 0, cy: 0 }).ctm()
+      expect(ctm.a).toBe(1)
+      expect(ctm.b).toBeCloseTo(-0.17632698070846498)
+      expect(ctm.c).toBe(0)
+      expect(ctm.d).toBe(1)
+      expect(ctm.e).toBe(0)
+      expect(ctm.f).toBe(0)
     })
     it('rotates the element around its centre if no rotation point is given', function() {
-      rect.center(150,150).transform({ rotation: 45 })
-      expect(rect.node.getAttribute('transform')).toBe('matrix(0.7071067811865475,0.7071067811865475,-0.7071067811865475,0.7071067811865475,150,-62.13203435596424)')
+      ctm = rect.center(100, 100).transform({ rotation: 45 }).ctm()
+      expect(ctm.a).toBeCloseTo(0.7071068286895752)
+      expect(ctm.b).toBeCloseTo(0.7071068286895752)
+      expect(ctm.c).toBeCloseTo(-0.7071068286895752)
+      expect(ctm.d).toBeCloseTo(0.7071068286895752)
+      expect(ctm.e).toBeCloseTo(100)
+      expect(ctm.f).toBeCloseTo(-41.421356201171875)
       expect(rect.transform('rotation')).toBe(45)
     })
     it('rotates the element around the given rotation point', function() {
-      rect.transform({ rotation: 55, cx: 80, cy:2 })
-      expect(rect.node.getAttribute('transform')).toBe('matrix(0.573576436351046,0.8191520442889917,-0.8191520442889917,0.573576436351046,35.7521891804943,-64.67931641582143)')
+      ctm = rect.transform({ rotation: 55, cx: 80, cy:2 }).ctm()
+      expect(ctm.a).toBeCloseTo(0.5735765099525452)
+      expect(ctm.b).toBeCloseTo(0.8191521167755127)
+      expect(ctm.c).toBeCloseTo(-0.8191521167755127)
+      expect(ctm.d).toBeCloseTo(0.5735765099525452)
+      expect(ctm.e).toBeCloseTo(35.75218963623047)
+      expect(ctm.f).toBeCloseTo(-64.67931365966797)
     })
     it('transforms element using a matrix', function() {
       rect.transform({ a: 0.5, c: 0.5 })
@@ -316,15 +361,15 @@ describe('Element', function() {
       expect(box.width).toBe(105)
       expect(box.height).toBe(210)
     })
-    xit('returns the correct rectangular box within a viewbox', function() {
+    it('returns the correct rectangular box within a viewbox', function() {
       var rect = draw.size(200,150).viewbox(0,0,100,75).rect(105,210).move(2,12)
       var box = rect.rbox()
-      expect(box.x).toBe(1)
-      expect(box.y).toBe(6)
-      expect(box.cx).toBe(27.25)
-      expect(box.cy).toBe(58.5)
-      expect(box.width).toBe(52.5)
-      expect(box.height).toBe(105)
+      expect(box.x).toBe(2)
+      expect(box.y).toBe(12)
+      expect(box.cx).toBe(54.5)
+      expect(box.cy).toBe(117)
+      expect(box.width).toBe(105)
+      expect(box.height).toBe(210)
     })
   })
   
diff --git a/spec/spec/matrix.js b/spec/spec/matrix.js
index c21d1fb..e2da36e 100644
--- a/spec/spec/matrix.js
+++ b/spec/spec/matrix.js
@@ -47,13 +47,23 @@ describe('Matrix', function() {
           expect(matrix.toString()).toBe('matrix(1,0,0,1,0,0)')
         })
       })
+
+      describe('toArray()' , function() {
+        it('exports correctly to an array', function() {
+          expect(matrix.toArray()).toEqual([1,0,0,1,0,0])
+        })
+      })
     })
 
     describe('with an element given', function() {
       var rect
 
       beforeEach(function() {
-        rect = draw.rect(100, 100).rotate(-10).translate(40, 50).scale(2)
+        rect = draw.rect(100, 100)
+          .transform({ rotation: -10 }, true)
+          .transform({ x: 40, y: 50 }, true)
+          .transform({ scale: 2 }, true)
+          
         matrix = new SVG.Matrix(rect)
       })
 
@@ -62,8 +72,8 @@ describe('Matrix', function() {
         expect(matrix.b).toBeCloseTo(-0.3472963869571686)
         expect(matrix.c).toBeCloseTo(0.3472963869571686)
         expect(matrix.d).toBeCloseTo(1.9696155786514282)
-        expect(matrix.e).toBeCloseTo(-8.373950958251953)
-        expect(matrix.f).toBeCloseTo(7.758301258087158)
+        expect(matrix.e).toBeCloseTo(-66.2967529296875)
+        expect(matrix.f).toBeCloseTo(-32.799678802490234)
       })
 
       describe('extract()', function() {
@@ -93,9 +103,9 @@ describe('Matrix', function() {
 
       })
 
-      describe('toString()' , function() {
+      describe('toArray()' , function() {
         it('exports correctly to a string', function() {
-          expect(matrix.toString()).toBe('matrix(1.9696155786514282,-0.3472963869571686,0.3472963869571686,1.9696155786514282,-8.373950958251953,7.758301258087158)')
+          expect(matrix.toArray()).toEqual([matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f])
         })
       })
       
@@ -299,9 +309,11 @@ describe('Matrix', function() {
 
   describe('skew()', function() {
     it('performs a skew two arguments', function() {
-      var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3).skew(0, 0)
+      var matrix = new SVG.Matrix(1, 0, 0, 1, 4, 3)//.skew(0, 0)
 
-      expect(matrix.a).toBe(matrix.toString())
+      expect(matrix.a).toBe(1)
+      expect(matrix.b).toBe(0)
+      expect(matrix.c).toBe(0)
       expect(matrix.d).toBe(1)
       expect(matrix.e).toBe(4)
       expect(matrix.f).toBe(3)
diff --git a/spec/spec/path.js b/spec/spec/path.js
index cd4fd91..a4d039e 100755
--- a/spec/spec/path.js
+++ b/spec/spec/path.js
@@ -70,7 +70,7 @@ describe('Path', function() {
       expect(box.y).toBe(456)
     })
     it('sets the x and y position when scaled to half its size', function() {
-      path.scale(0.5).move(123,456)
+      path.scale(0.5, 0, 0).move(123,456)
       var box = path.bbox()
       expect(box.x).toBe(123)
       expect(box.y).toBe(456)