Completely reworked transform system

5 files changed, 92 insertions, 20 deletions

diff --git a/spec/index.html b/spec/index.html
index 94f13db..30899fd 100755
--- a/spec/index.html
+++ b/spec/index.html
@@ -56,6 +56,7 @@
 <script type="text/javascript" src="spec/memory.js"></script>
 <script type="text/javascript" src="spec/arrange.js"></script>
 <script type="text/javascript" src="spec/bbox.js"></script>
+<script type="text/javascript" src="spec/matrix.js"></script>
 <script type="text/javascript" src="spec/rect.js"></script>
 <script type="text/javascript" src="spec/circle.js"></script>
 <script type="text/javascript" src="spec/ellipse.js"></script>
diff --git a/spec/spec/container.js b/spec/spec/container.js
index 63b1a01..523167d 100755
--- a/spec/spec/container.js
+++ b/spec/spec/container.js
@@ -273,6 +273,12 @@ describe('Container', function() {
   })
   
   describe('viewbox()', function() {
+
+    beforeEach(function() {
+      draw.attr('viewBox', null)
+      console.log(draw.node)
+    })
+
     it('should set the viewbox when four arguments are provided', function() {
       draw.viewbox(0,0,100,100)
       expect(draw.node.getAttribute('viewBox')).toBe('0 0 100 100')
diff --git a/spec/spec/element.js b/spec/spec/element.js
index 598ab1e..0611210 100755
--- a/spec/spec/element.js
+++ b/spec/spec/element.js
@@ -1,5 +1,9 @@
 describe('Element', function() {
   
+  beforeEach(function() {
+    draw.attr('viewBox', null)
+  })
+
   afterEach(function() {
     draw.clear()
   })
@@ -15,7 +19,11 @@ describe('Element', function() {
     beforeEach(function() {
       rect = draw.rect(100,100)
     })
-    
+
+    afterEach(function() {
+      rect.remove()
+    })
+
     it('sets one attribute when two arguments are given', function() {
       rect.attr('fill', '#ff0066')
       expect(rect.node.getAttribute('fill')).toBe('#ff0066')
@@ -68,19 +76,20 @@ describe('Element', function() {
       rect.style('cursor', '')
       expect(rect.style.cursor).toBe(undefined)
     })
-    it('should act as a global getter when no arguments are given', function() {
+    it('acts as a global getter when no arguments are given', function() {
       rect.fill('#ff0066')
       expect(rect.attr().fill).toBe('#ff0066')
     })
-    it('should correctly parse numeric values as a global getter', function() {
+    it('correctly parses numeric values as a global getter', function() {
       rect.stroke({ width: 20 })
       expect(rect.attr()['stroke-width']).toBe(20)
     })
-    it('should correctly parse negative numeric values as a global getter', function() {
+    it('correctly parses negative numeric values as a global getter', function() {
       rect.x(-30)
+      console.log(rect.native())
       expect(rect.attr().x).toBe(-30)
     })
-    it('should leave unit values alone as a global getter', function() {
+    it('leaves unit values alone as a global getter', function() {
       rect.attr('x', '69%')
       expect(rect.attr().x).toBe('69%')
     })
@@ -138,27 +147,23 @@ describe('Element', function() {
   describe('transform()', function() {
     it('gets the current transformations', function() {
       var rect = draw.rect(100,100)
-      expect(rect.transform()).toEqual(SVG.defaults.trans())
+      expect(rect.transform()).toEqual(new SVG.Matrix(rect).extract())
     })
     it('sets the translation of and element', function() {
-      var rect = draw.rect(100,100).transform({ x: 10, y: 10 })
-      expect(rect.node.getAttribute('transform')).toBe('translate(10 10)')
-    })
-    it('sets the scaleX of and element', function() {
-      var rect = draw.rect(100,100).transform({ scaleX: 0.1 })
-      expect(rect.node.getAttribute('transform')).toBe('scale(0.1 1)')
+      var rect = draw.rect(100,100).transform({ x: 10, y: 11 })
+      expect(rect.node.getAttribute('transform')).toBe('matrix(1,0,0,1,10,11)')
     })
-    it('sets the scaleY of and element', function() {
-      var rect = draw.rect(100,100).transform({ scaleY: 10 })
-      expect(rect.node.getAttribute('transform')).toBe('scale(1 10)')
+    it('sets the scaleX and scaleY of and element', function() {
+      var rect = draw.rect(100,100).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() {
-      var rect = draw.rect(100,100).transform({ skewX: 0.1 })
-      expect(rect.node.getAttribute('transform')).toBe('skewX(0.1)')
+      var rect = draw.rect(100,100).transform({ skewX: 10 })
+      expect(rect.node.getAttribute('transform')).toBe('matrix(1,0,0.17632698070846498,1,0,0)')
     })
     it('sets the skewY of and element', function() {
-      var rect = draw.rect(100,100).transform({ skewY: 10 })
-      expect(rect.node.getAttribute('transform')).toBe('skewY(10)')
+      var rect = draw.rect(100,100).transform({ skewY: -10 })
+      expect(rect.node.getAttribute('transform')).toBe('matrix(1,-0.17632698070846498,0,1,0,0)')
     })
     it('rotates the element around its centre if no rotation point is given', function() {
       var rect = draw.rect(100,100).transform({ rotation: 45 })
diff --git a/spec/spec/matrix.js b/spec/spec/matrix.js
new file mode 100644
index 0000000..9689d81
--- /dev/null
+++ b/spec/spec/matrix.js
@@ -0,0 +1,61 @@
+describe('Matrix', function() {
+	var matrix
+
+	describe('initialization', function() {
+		
+		describe('without a source', function() {
+			
+			beforeEach(function() {
+				matrix = new SVG.Matrix
+			})
+
+			it('creates a new matrix with default values', function() {
+				expect(matrix.a).toBe(1)
+				expect(matrix.b).toBe(0)
+				expect(matrix.c).toBe(0)
+				expect(matrix.d).toBe(1)
+				expect(matrix.e).toBe(0)
+				expect(matrix.f).toBe(0)
+			})
+			it('parses translation values', function() {
+				expect(matrix.x).toBe(0)
+				expect(matrix.y).toBe(0)
+			})
+			it('parses skew values', function() {
+				expect(matrix.skewX).toBe(0)
+				expect(matrix.skewY).toBe(0)
+			})
+			it('parses scale values', function() {
+				expect(matrix.scaleX).toBe(1)
+				expect(matrix.scaleY).toBe(1)
+			})
+			it('parses rotaton value', function() {
+				expect(matrix.rotation).toBe(0)
+			})
+		})
+
+		describe('with an element given', function() {
+			
+			beforeEach(function() {
+				matrix = new SVG.Matrix(draw.rect(100, 100).skew(10, 20).translate(50, 50).scale(3, 2))
+			})
+
+			it('parses the current transform matrix form an element', function() {
+				expect(matrix.a).toBe(1)
+				expect(matrix.b).toBe(0)
+				expect(matrix.c).toBe(0)
+				expect(matrix.d).toBe(1)
+				expect(matrix.e).toBe(0)
+				expect(matrix.f).toBe(0)
+			})
+		})
+	})
+
+})
+
+
+
+
+
+
+
diff --git a/spec/spec/selector.js b/spec/spec/selector.js
index 8c16aa1..b28213d 100644
--- a/spec/spec/selector.js
+++ b/spec/spec/selector.js
@@ -10,7 +10,6 @@ describe('Selector', function() {
       var element = draw.group()
         , got = SVG.get(element.attr('id'))
       
-      expect(got.transform()).toEqual(SVG.defaults.trans())
       expect(got.attr()).toEqual(element.attr())
     })
     it('gets a referenced element by attribute value', function() {