Reworked arrange module, <defs> always on top

7 files changed, 278 insertions, 19 deletions

diff --git a/spec/index.html b/spec/index.html
index d4cf605..524bff7 100644
--- a/spec/index.html
+++ b/spec/index.html
@@ -31,6 +31,7 @@
 <script type="text/javascript" src="spec/svg.js"></script>
 <script type="text/javascript" src="spec/container.js"></script>
 <script type="text/javascript" src="spec/element.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/rect.js"></script>
 <script type="text/javascript" src="spec/ellipse.js"></script>
@@ -41,6 +42,7 @@
 <script type="text/javascript" src="spec/image.js"></script>
 <script type="text/javascript" src="spec/text.js"></script>
 <script type="text/javascript" src="spec/doc.js"></script>
+<script type="text/javascript" src="spec/group.js"></script>
 <script type="text/javascript" src="spec/gradient.js"></script>
 <script type="text/javascript" src="spec/color.js"></script>
 <script type="text/javascript" src="spec/number.js"></script>
diff --git a/spec/spec/arrange.js b/spec/spec/arrange.js
new file mode 100644
index 0000000..195c322
--- /dev/null
+++ b/spec/spec/arrange.js
@@ -0,0 +1,180 @@
+describe('Arrange', function() {
+  var e1, e2, e3
+
+  beforeEach(function() {
+    draw.clear()
+
+    e1 = draw.rect(100,100).move(10,10).attr('id', 'e1')
+    e2 = draw.ellipse(100,100).move(20,20).attr('id', 'e2')
+    e3 = draw.line(0,0,100,100).move(30,30).attr('id', 'e3')
+  })
+
+  describe('siblings()', function() {
+    it('returns all siblings of targeted element', function() {
+      expect(e1.siblings().length).toBe(3)
+      expect([e1,e2,e3]).toEqual(e2.siblings())
+    })
+  })
+
+  describe('position()', function() {
+    it('returns the index position within it\'s parent', function() {
+      expect(e1.siblings().length).toBe(3)
+      expect(e1.position()).toBe(0)
+      expect(e2.position()).toBe(1)
+      expect(e3.position()).toBe(2)
+    })
+  })
+
+  describe('next()', function() {
+    it('returns the next sibling within the parent element', function() {
+      expect(e1.next()).toBe(e2)
+      expect(e2.next()).toBe(e3)
+      expect(e3.next()).toBe(undefined)
+    })
+  })
+
+  describe('previous()', function() {
+    it('returns the previous sibling within the parent element', function() {
+      expect(e1.previous()).toBe(undefined)
+      expect(e2.previous()).toBe(e1)
+      expect(e3.previous()).toBe(e2)
+    })
+  })
+
+  describe('forward()', function() {
+    it('returns the element itself', function() {
+      expect(e1.forward()).toBe(e1)
+    })
+    it('moves the element one step forward within its parent', function() {
+      e1.forward()
+      expect(e1.position()).toBe(1)
+      expect(e2.position()).toBe(0)
+      expect(e3.position()).toBe(2)
+    })
+    it('keeps the last element at the same position', function() {
+      e3.forward()
+      expect(e3.position()).toBe(2)
+    })
+    it('keeps the defs on top of the stack', function() {
+      e3.forward()
+      expect(draw.node.childNodes[2]).toBe(e3.node)
+      expect(draw.node.childNodes[3]).toBe(draw.defs().node)
+    })
+  })
+
+  describe('backward()', function() {
+    it('returns the element itself', function() {
+      expect(e1.backward()).toBe(e1)
+    })
+    it('moves the element one step backwards within its parent', function() {
+      e3.backward()
+      expect(e1.position()).toBe(0)
+      expect(e2.position()).toBe(2)
+      expect(e3.position()).toBe(1)
+    })
+    it('keeps the first element at the same position', function() {
+      e3.backward()
+      expect(e1.position()).toBe(0)
+    })
+  })
+
+  describe('front()', function() {
+    it('returns the element itself', function() {
+      expect(e3.front()).toBe(e3)
+    })
+    it('moves the element to the top of the stack within its parent', function() {
+      e1.front()
+      expect(e1.position()).toBe(2)
+      expect(e2.position()).toBe(0)
+      expect(e3.position()).toBe(1)
+    })
+    it('keeps the last element at the same position', function() {
+      e3.front()
+      expect(e3.position()).toBe(2)
+    })
+    it('keeps the defs on top of the stack', function() {
+      e1.front()
+      expect(draw.node.childNodes[2]).toBe(e1.node)
+      expect(draw.node.childNodes[3]).toBe(draw.defs().node)
+    })
+  })
+
+  describe('back()', function() {
+    it('returns the element itself', function() {
+      expect(e3.back()).toBe(e3)
+    })
+    it('moves the element to the bottom of the stack within its parent', function() {
+      e3.back()
+      expect(e1.position()).toBe(1)
+      expect(e2.position()).toBe(2)
+      expect(e3.position()).toBe(0)
+    })
+    it('keeps the first element at the same position', function() {
+      e1.back()
+      expect(e1.position()).toBe(0)
+    })
+  })
+
+  describe('before()', function() {
+    it('returns the targeted element itself', function() {
+      expect(e3.before(e1)).toBe(e3)
+    })
+    it('inserts a given element before the targeted element', function() {
+      e3.before(e1)
+      expect(e1.position()).toBe(1)
+      expect(e2.position()).toBe(0)
+      expect(e3.position()).toBe(2)
+    })
+    it('moves elements between containers', function() {
+      var group = draw.group()
+        , e4 = group.rect(80,120)
+        , e5 = group.rect(80,120)
+        , e6 = group.rect(80,120)
+
+      e2.before(e5)
+      expect(e1.position()).toBe(0)
+      expect(e2.position()).toBe(2)
+      expect(e3.position()).toBe(3)
+      expect(e5.position()).toBe(1)
+    })
+  })
+
+  describe('after()', function() {
+    it('returns the targeted element itself', function() {
+      expect(e3.after(e1)).toBe(e3)
+    })
+    it('inserts a given element after the targeted element', function() {
+      e3.after(e1)
+      expect(e1.position()).toBe(2)
+      expect(e2.position()).toBe(0)
+      expect(e3.position()).toBe(1)
+    })
+    it('moves elements between containers', function() {
+      var group = draw.group()
+        , e4 = group.rect(80,120)
+        , e5 = group.rect(80,120)
+        , e6 = group.rect(80,120)
+
+      e2.after(e5)
+      expect(e1.position()).toBe(0)
+      expect(e2.position()).toBe(1)
+      expect(e3.position()).toBe(3)
+      expect(e5.position()).toBe(2)
+    })
+  })
+
+})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/spec/spec/bbox.js b/spec/spec/bbox.js
index 0218e42..44c1eb8 100644
--- a/spec/spec/bbox.js
+++ b/spec/spec/bbox.js
@@ -4,7 +4,7 @@ describe('BBox', function() {
     draw.clear()
   })
   
-  it('should create a new instance without passing an element', function() {
+  it('creates a new instance without passing an element', function() {
     var box = new SVG.BBox
     expect(box.x).toBe(0)
     expect(box.y).toBe(0)
@@ -15,7 +15,7 @@ describe('BBox', function() {
   })
   
   describe('merge()', function() {
-    it('should merge various bounding boxes', function() {
+    it('merges various bounding boxes', function() {
       var box1 = draw.rect(100,100).move(50,50).bbox()
       var box2 = draw.rect(100,100).move(300,400).bbox()
       var box3 = draw.rect(100,100).move(500,100).bbox()
@@ -27,7 +27,7 @@ describe('BBox', function() {
       expect(merged.width).toBe(550)
       expect(merged.height).toBe(450)
     })
-    it('should return a new bbox instance', function() {
+    it('returns a new bbox instance', function() {
       var box1 = draw.rect(100,100).move(50,50).bbox()
       var box2 = draw.rect(100,100).move(300,400).bbox()
       var merged = box1.merge(box2)
diff --git a/spec/spec/color.js b/spec/spec/color.js
index 1980600..ca74bca 100644
--- a/spec/spec/color.js
+++ b/spec/spec/color.js
@@ -1,20 +1,20 @@
 describe('Color', function() {
 
-	it('should correclty parse a rgb string', function() {
+	it('correclty parses a rgb string', function() {
 		var color = new SVG.Color('rgb(255,0,128)')
 		expect(color.r).toBe(255)
 		expect(color.g).toBe(0)
 		expect(color.b).toBe(128)
 	})
 	
-	it('should correclty parse a 3 digit hex string', function() {
+	it('correclty parses a 3 digit hex string', function() {
 		var color = new SVG.Color('#f06')
 		expect(color.r).toBe(255)
 		expect(color.g).toBe(0)
 		expect(color.b).toBe(102)
 	})
 
-	it('should correclty parse a 6 digit hex string', function() {
+	it('correclty parses a 6 digit hex string', function() {
 		var color = new SVG.Color('#0066ff')
 		expect(color.r).toBe(0)
 		expect(color.g).toBe(102)
diff --git a/spec/spec/container.js b/spec/spec/container.js
index af07fd9..11727d7 100644
--- a/spec/spec/container.js
+++ b/spec/spec/container.js
@@ -1,4 +1,8 @@
 describe('Container', function() {
+
+  beforeEach(function() {
+    draw.clear()
+  })
   
   describe('rect()', function() {
     it('should increase children by 1', function() {
@@ -186,11 +190,11 @@ describe('Container', function() {
       draw.clear()
       expect(draw.children().length).toBe(0)
     })
-    it('should create a new defs node', function() {
+    it('should keep the defs node', function() {
       var oldDefs = draw.defs()
       draw.rect(100,100).maskWith(draw.circle(100, 100))
       draw.clear()
-      expect(draw.defs()).not.toBe(oldDefs)
+      expect(draw.defs()).toBe(oldDefs)
     })
   })
   
@@ -205,7 +209,6 @@ describe('Container', function() {
       draw.each(function() {
         children.push(this.type)
       })
-      
       expect(children).toEqual(['rect', 'ellipse', 'polygon'])
     })
     it('should only include the its own children', function() {
diff --git a/spec/spec/group.js b/spec/spec/group.js
new file mode 100644
index 0000000..f0404fd
--- /dev/null
+++ b/spec/spec/group.js
@@ -0,0 +1,74 @@
+describe('Group', function() {
+  var group
+
+  beforeEach(function() {
+    group = draw.group()
+    group.rect(100,100)
+  })
+  
+  afterEach(function() {
+    draw.clear()
+  })
+
+  describe('x()', function() {
+    it('returns the value of x without an argument', function() {
+      expect(group.x()).toBe(0)
+    })
+    it('sets the value of x with the first argument', function() {
+      group.x(123)
+      var box = group.bbox()
+      expect(box.x).toBe(123)
+    })
+  })
+  
+  describe('y()', function() {
+    it('returns the value of y without an argument', function() {
+      expect(group.y()).toBe(0)
+    })
+    it('sets the value of y with the first argument', function() {
+      group.y(345)
+      var box = group.bbox()
+      expect(box.y).toBe(345)
+    })
+  })
+  
+  describe('cx()', function() {
+    it('returns the value of cx without an argument', function() {
+      expect(group.cx()).toBe(50)
+    })
+    it('sets the value of cx with the first argument', function() {
+      group.cx(123)
+      var box = group.bbox()
+      expect(box.cx).toBe(123)
+    })
+  })
+  
+  describe('cy()', function() {
+    it('returns the value of cy without an argument', function() {
+      expect(group.cy()).toBe(50)
+    })
+    it('sets the value of cy with the first argument', function() {
+      group.cy(345)
+      var box = group.bbox()
+      expect(box.cy).toBe(345)
+    })
+  })
+
+  describe('move()', function() {
+    it('sets the x and y position', function() {
+      group.move(123,456)
+      expect(group.node.getAttribute('transform')).toBe('translate(123,456)')
+    })
+  })
+  
+  describe('center()', function() {
+    it('sets the cx and cy position', function() {
+      group.center(321,567)
+      var box = group.bbox()
+      expect(box.cx).toBe(321)
+      expect(box.cy).toBe(567)
+    })
+  })
+  
+
+})
\ No newline at end of file
diff --git a/spec/spec/svg.js b/spec/spec/svg.js
index 1aecc31..75f8a6d 100644
--- a/spec/spec/svg.js
+++ b/spec/spec/svg.js
@@ -13,27 +13,27 @@ describe('SVG', function() {
       wrapper.parentNode.removeChild(wrapper)
     })
     
-    it('should create a new svg canvas', function() {
+    it('creates a new svg canvas', function() {
       expect(canvas.type).toBe('svg')
     })
-    it('should create an instance of SVG.Doc', function() {
+    it('creates an instance of SVG.Doc', function() {
       expect(canvas instanceof SVG.Doc).toBe(true)
     })
   })
   
   describe('create()', function() {
-    it('should create an element with given node name and return it', function() {
+    it('creates an element with given node name and return it', function() {
       var element = SVG.create('rect')
       
       expect(element.nodeName).toBe('rect')
     })
-    it('should increase the global id sequence', function() {
+    it('increases the global id sequence', function() {
       var did = SVG.did
         , element = SVG.create('rect')
       
       expect(did + 1).toBe(SVG.did)
     })
-    it('should add a unique id containing the node name', function() {
+    it('adds a unique id containing the node name', function() {
       var did = SVG.did
         , element = SVG.create('rect')
       
@@ -42,7 +42,7 @@ describe('SVG', function() {
   })
   
   describe('extend()', function() {
-    it('should add all functions in the given object to the target object', function() {
+    it('adds all functions in the given object to the target object', function() {
       SVG.extend(SVG.Rect, {
         soft: function() {
           return this.opacity(0.2)
@@ -52,7 +52,7 @@ describe('SVG', function() {
       expect(typeof SVG.Rect.prototype.soft).toBe('function')
       expect(draw.rect(100,100).soft().attr('opacity')).toBe(0.2)
     })
-    it('should accept and extend multiple modules at once', function() {
+    it('accepts and extend multiple modules at once', function() {
       SVG.extend(SVG.Rect, SVG.Ellipse, SVG.Path, {
         soft: function() {
           return this.opacity(0.5)
@@ -66,7 +66,7 @@ describe('SVG', function() {
       expect(typeof SVG.Path.prototype.soft).toBe('function')
       expect(draw.path().soft().attr('opacity')).toBe(0.5)
     })
-    it('should ignone non existant objects', function() {
+    it('ignones non existant objects', function() {
       SVG.extend(SVG.Rect, SVG.Bogus, {
         soft: function() {
           return this.opacity(0.3)
@@ -80,12 +80,12 @@ describe('SVG', function() {
   })
   
   describe('get()', function() {
-    it('should get an element\'s instance by id', function() {
+    it('gets an element\'s instance by id', function() {
       var rect = draw.rect(111,333)
       
       expect(SVG.get(rect.attr('id'))).toBe(rect)
     })
-    it('should make have all the element\'s methods available', function() {
+    it('makes have all the element\'s methods available', function() {
       var element = draw.group()
         , got = SVG.get(element.attr('id'))