Added marker, symbol and dynamic referencing

11 files changed, 244 insertions, 51 deletions

diff --git a/spec/index.html b/spec/index.html
index 78d95d8..2dd41b2 100755
--- a/spec/index.html
+++ b/spec/index.html
@@ -29,6 +29,7 @@
 
 <!-- include spec files here... -->
 <script type="text/javascript" src="spec/svg.js"></script>
+<script type="text/javascript" src="spec/selector.js"></script>
 <script type="text/javascript" src="spec/regex.js"></script>
 <script type="text/javascript" src="spec/container.js"></script>
 <script type="text/javascript" src="spec/element.js"></script>
@@ -41,15 +42,18 @@
 <script type="text/javascript" src="spec/polyline.js"></script>
 <script type="text/javascript" src="spec/polygon.js"></script>
 <script type="text/javascript" src="spec/path.js"></script>
+<script type="text/javascript" src="spec/marker.js"></script>
 <script type="text/javascript" src="spec/image.js"></script>
 <script type="text/javascript" src="spec/text.js"></script>
 <script type="text/javascript" src="spec/textpath.js"></script>
 <script type="text/javascript" src="spec/doc.js"></script>
+<script type="text/javascript" src="spec/defs.js"></script>
 <script type="text/javascript" src="spec/group.js"></script>
 <script type="text/javascript" src="spec/set.js"></script>
 <script type="text/javascript" src="spec/gradient.js"></script>
 <script type="text/javascript" src="spec/pattern.js"></script>
 <script type="text/javascript" src="spec/use.js"></script>
+<script type="text/javascript" src="spec/symbol.js"></script>
 <script type="text/javascript" src="spec/mask.js"></script>
 <script type="text/javascript" src="spec/clip.js"></script>
 <script type="text/javascript" src="spec/color.js"></script>
diff --git a/spec/spec/defs.js b/spec/spec/defs.js
new file mode 100644
index 0000000..5e5da08
--- /dev/null
+++ b/spec/spec/defs.js
@@ -0,0 +1,12 @@
+describe('Defs', function() {
+  var defs
+
+  beforeEach(function() {
+    defs = draw.defs()
+  })
+
+  it('creates an instance of SVG.Defs', function() {
+    expect(defs instanceof SVG.Defs).toBeTruthy()
+  })
+
+})
\ No newline at end of file
diff --git a/spec/spec/element.js b/spec/spec/element.js
index a0c7a2a..5bda0d2 100755
--- a/spec/spec/element.js
+++ b/spec/spec/element.js
@@ -85,6 +85,22 @@ describe('Element', function() {
       expect(rect.attr().x).toBe('69%')
     })
   })
+
+  describe('id()', function() {
+    var rect
+    
+    beforeEach(function() {
+      rect = draw.rect(100,100)
+    })
+    
+    it('gets the value if the id attribute without an argument', function() {
+      expect(rect.id()).toBe(rect.attr('id'))
+    })
+    it('sets the value of the id', function() {
+      rect.id('new_id')
+      expect(rect.attr('id')).toBe('new_id')
+    })
+  })
   
   describe('style()', function() {
     it('should set the style with key and value arguments', function() {
@@ -384,17 +400,27 @@ describe('Element', function() {
       element.toggleClass('one')
       expect(element.hasClass('one')).toBeTruthy()
     })
-
     it('removes the class when it already exists', function(){
       var element = draw.rect(100,100)
       element.addClass('one')
       element.toggleClass('one')
       expect(element.hasClass('one')).toBeFalsy()
     })
-
     it('returns the svg instance', function() {
       var element = draw.rect(100,100)
       expect(element.toggleClass('one')).toEqual(element)
     })
   })
+
+  describe('reference()', function() {
+    it('gets a referenced element from a given attribute', function() {
+      var rect = draw.defs().rect(100, 100)
+        , use  = draw.use(rect)
+        , mark = draw.marker(10, 10)
+        , path = draw.path(svgPath).marker('end', mark)
+
+      expect(use.reference('href')).toBe(rect)
+      expect(path.reference('marker-end')).toBe(mark)
+    })
+  })
 })
diff --git a/spec/spec/helper.js b/spec/spec/helper.js
index 552ca6c..e3cba61 100755
--- a/spec/spec/helper.js
+++ b/spec/spec/helper.js
@@ -15,7 +15,7 @@ loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras soda
 
 /* approximately helper */
 function approximately(number, precision) {
-  precision = precision == null ? 2.5 : precision
+  precision = precision == null ? 1.5 : precision
   
   return Math.round(number / precision) * precision
 }
diff --git a/spec/spec/marker.js b/spec/spec/marker.js
new file mode 100644
index 0000000..8d18c85
--- /dev/null
+++ b/spec/spec/marker.js
@@ -0,0 +1,89 @@
+describe('Marker', function() {
+  
+  describe('on a container element', function() {
+    var marker
+
+    beforeEach(function() {
+      marker = draw.marker(10, 12, function(add) {
+        add.rect(10, 12)
+
+        this.ref(5, 6)
+      })
+    })
+
+    it('creates an instance of SVG.Marker', function() {
+      expect(marker instanceof SVG.Marker).toBeTruthy()
+    })
+
+    it('creates marker in defs', function() {
+      expect(marker.parent instanceof SVG.Defs).toBeTruthy()
+    })
+
+    describe('marker()', function() {
+      it('returns the marker element', function() {
+        expect(marker = draw.marker(10, 12)).toBe(marker)
+      })
+      it('sets the refX to half of the given width', function() {
+        marker = draw.marker(10, 12)
+        expect(marker.node.getAttribute('refX')).toBe('5')
+      })
+      it('sets the refY to half of the given height', function() {
+        marker = draw.marker(13, 15)
+        expect(marker.node.getAttribute('refY')).toBe('7.5')
+      })
+    })
+
+  })
+  
+  describe('on a target path', function() {
+    var path, marker
+
+    beforeEach(function() {
+      path = draw.path('M 100 200 C 200 100 300  0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')
+
+      path.marker('mid', 10, 12, function(add) {
+        add.rect(10, 12)
+
+        this.ref(5, 6)
+      })
+
+      marker = path.marker('mid')
+    })
+
+    it('creates an instance of SVG.Marker', function() {
+      expect(path.reference('marker-mid') instanceof SVG.Marker).toBeTruthy()
+    })
+
+    describe('marker()', function() {
+      it('returns the target element', function() {
+        expect(path.marker('start', 10, 12)).toBe(path)
+      })
+      it('creates a marker and applies it to the marker-start attribute', function() {
+        path.marker('start', 10, 12)
+        marker = path.reference('marker-start')
+
+        expect(path.node.getAttribute('marker-start')).toBe(marker.toString())
+      })
+      it('creates a marker and applies it to the marker-mid attribute', function() {
+        path.marker('mid', 10, 12)
+        marker = path.reference('marker-mid')
+
+        expect(path.node.getAttribute('marker-mid')).toBe(marker.toString())
+      })
+      it('creates a marker and applies it to the marker-end attribute', function() {
+        path.marker('end', 10, 12)
+        marker = path.reference('marker-end')
+
+        expect(path.node.getAttribute('marker-end')).toBe(marker.toString())
+      })
+      it('accepts an instance of an existing marker element as the second argument', function() {
+        marker = draw.marker(11, 11)
+        path.marker('mid', marker)
+
+        expect(path.node.getAttribute('marker-mid')).toBe(marker.toString())
+      })
+    })
+  })
+
+
+})
\ No newline at end of file
diff --git a/spec/spec/regex.js b/spec/spec/regex.js
index f64991a..4b36175 100644
--- a/spec/spec/regex.js
+++ b/spec/spec/regex.js
@@ -1,26 +1,37 @@
 describe('Regex', function() {
 
-  describe('unit', function() {
-    it('is true with a positive unit value', function() {
-      expect(SVG.regex.unit.test('10%')).toBeTruthy()
-    })
-    it('is true with a negative unit value', function() {
-      expect(SVG.regex.unit.test('-11%')).toBeTruthy()
-    })
-    it('is false with a positive unit value', function() {
-      expect(SVG.regex.unit.test('NotAUnit')).toBeFalsy()
+  describe('matchers', function() {
+    describe('unit', function() {
+      var match
+
+      it('is true with a positive unit value', function() {
+        match = ('10%').match(SVG.regex.unit)
+        expect(match[1]).toBe('10')
+        expect(match[2]).toBe('%')
+      })
+      it('is true with a negative unit value', function() {
+        match = ('-11%').match(SVG.regex.unit)
+        expect(match[1]).toBe('-11')
+        expect(match[2]).toBe('%')
+      })
+      it('is false with a positive unit value', function() {
+        match = ('NotAUnit').match(SVG.regex.unit)
+        expect(match).toBeNull()
+      })
     })
   })
 
-  describe('isEvent', function() {
-    it('is true with a namespaced and lowercase name', function() {
-      expect(SVG.regex.isEvent.test('my:event')).toBeTruthy()
-    })
-    it('is true with a namespaced and camelCase name', function() {
-      expect(SVG.regex.isEvent.test('mt:fabulousEvent')).toBeTruthy()
-    })
-    it('is false without a namespace', function() {
-      expect(SVG.regex.isEvent.test('idontlinkenamespaces')).toBeFalsy()
+  describe('testers', function() {
+    describe('isEvent', function() {
+      it('is true with a namespaced and lowercase name', function() {
+        expect(SVG.regex.isEvent.test('my:event')).toBeTruthy()
+      })
+      it('is true with a namespaced and camelCase name', function() {
+        expect(SVG.regex.isEvent.test('mt:fabulousEvent')).toBeTruthy()
+      })
+      it('is false without a namespace', function() {
+        expect(SVG.regex.isEvent.test('idontlinkenamespaces')).toBeFalsy()
+      })
     })
   })
 
diff --git a/spec/spec/selector.js b/spec/spec/selector.js
new file mode 100644
index 0000000..4727bfd
--- /dev/null
+++ b/spec/spec/selector.js
@@ -0,0 +1,27 @@
+describe('Selector', function() {
+
+  describe('get()', 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('makes all the element\'s methods available', 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() {
+      var rect = draw.defs().rect(100, 100)
+        , use  = draw.use(rect)
+        , mark = draw.marker(10, 10)
+        , path = draw.path(svgPath).marker('end', mark)
+
+      expect(SVG.get(use.attr('href'))).toBe(rect)
+      expect(SVG.get(path.attr('marker-end'))).toBe(mark)
+    })
+  })
+  
+})
\ No newline at end of file
diff --git a/spec/spec/set.js b/spec/spec/set.js
index 0eb822d..1238ee7 100755
--- a/spec/spec/set.js
+++ b/spec/spec/set.js
@@ -16,7 +16,7 @@ describe('Set', function() {
   })
 
   it('creates the set method on SVG.Container instances', function() {
-    expect(draw.set() instanceof SVG.Set).toBe(true)
+    expect(draw.set() instanceof SVG.Set).toBeTruthy()
   })
 
   describe('add()', function() {
@@ -75,16 +75,30 @@ describe('Set', function() {
   })
 
   describe('get()', function() {
-    it('returns member ar given index', function() {
+    it('returns member at given index', function() {
       set.add(e1).add(e2).add(e3).add(e4).add(e5)
       expect(set.get(2)).toBe(e3)
     })
   })
 
+  describe('first()', function() {
+    it('returns first member', function() {
+      set.add(e1).add(e2).add(e3).add(e4).add(e5)
+      expect(set.first()).toBe(e1)
+    })
+  })
+
+  describe('last()', function() {
+    it('returns last member', function() {
+      set.add(e1).add(e2).add(e3).add(e4).add(e5)
+      expect(set.last()).toBe(e5)
+    })
+  })
+
   describe('has()', function() {
     it('checks if a given element is present in set', function() {
       set.add(e1).add(e2).add(e3).add(e4).add(e5)
-      expect(set.has(e4)).toBe(true)
+      expect(set.has(e4)).toBeTruthy()
     })
   })
 
@@ -120,7 +134,7 @@ describe('Set', function() {
     it('returns an instance of SVG.BBox', function() {
       set.add(e1).add(e2).add(e3).add(e4).add(e5)
 
-      expect(set.bbox() instanceof SVG.BBox).toBe(true)
+      expect(set.bbox() instanceof SVG.BBox).toBeTruthy()
     })
     it('returns an empty bounding box wiht no members', function() {
       var box = set.bbox()
diff --git a/spec/spec/svg.js b/spec/spec/svg.js
index 843bb89..cc9f7be 100755
--- a/spec/spec/svg.js
+++ b/spec/spec/svg.js
@@ -79,19 +79,4 @@ describe('SVG', function() {
     })
   })
   
-  describe('get()', 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('makes have all the element\'s methods available', function() {
-      var element = draw.group()
-        , got = SVG.get(element.attr('id'))
-      
-      expect(got.transform()).toEqual(SVG.defaults.trans())
-      expect(got.attr()).toEqual(element.attr())
-    })
-  })
-  
 })
\ No newline at end of file
diff --git a/spec/spec/symbol.js b/spec/spec/symbol.js
new file mode 100644
index 0000000..39a48db
--- /dev/null
+++ b/spec/spec/symbol.js
@@ -0,0 +1,16 @@
+describe('Symbol', function() {
+  var symbol
+
+  beforeEach(function() {
+    symbol = draw.symbol()
+  })
+
+  it('creates an instance of SVG.Symbol', function() {
+    expect(symbol instanceof SVG.Symbol).toBeTruthy()
+  })
+
+  it('creates symbol in defs', function() {
+    expect(symbol.parent instanceof SVG.Defs).toBeTruthy()
+  })
+
+})
\ No newline at end of file
diff --git a/spec/spec/text.js b/spec/spec/text.js
index 2e373a4..9574b4c 100755
--- a/spec/spec/text.js
+++ b/spec/spec/text.js
@@ -20,12 +20,12 @@ describe('Text', function() {
     it('sets the value of x with the first argument', function() {
       text.x(123)
       var box = text.bbox()
-      expect(box.x).toBe(123)
+      expect(approximately(box.x)).toBe(123)
     })
     it('sets the value of x based on the anchor with the first argument', function() {
       text.x(123, true)
       var box = text.bbox()
-      expect(box.x).toBe(123)
+      expect(approximately(box.x)).toBe(123)
     })
   })
   
@@ -50,17 +50,17 @@ describe('Text', function() {
   describe('cx()', function() {
     it('returns the value of cx without an argument', function() {
       var box = text.bbox()
-      expect(text.cx()).toBe(box.width / 2)
+      expect(approximately(text.cx())).toBe(approximately(box.width / 2))
     })
     it('sets the value of cx with the first argument', function() {
       text.cx(123)
       var box = text.bbox()
-      expect(box.cx).toBe(123)
+      expect(approximately(box.cx)).toBe(123)
     })
     it('sets the value of cx based on the anchor with the first argument', function() {
       text.cx(123, true)
       var box = text.bbox()
-      expect(box.cx).toBe(123)
+      expect(approximately(box.cx)).toBe(123)
     })
   })
   
@@ -80,8 +80,8 @@ describe('Text', function() {
     it('sets the x and y position', function() {
       text.move(123,456)
       var box = text.bbox()
-      expect(box.x).toBe(123)
-      expect(box.y).toBe(456)
+      expect(approximately(box.x)).toBe(123)
+      expect(approximately(box.y)).toBe(456)
     })
   })
   
@@ -89,8 +89,8 @@ describe('Text', function() {
     it('sets the cx and cy position', function() {
       text.center(321,567)
       var box = text.bbox()
-      expect(box.cx).toBe(321)
-      expect(Math.round(box.cy * 10) / 10).toBe(567)
+      expect(approximately(box.cx)).toBe(321)
+      expect(approximately(box.cy)).toBe(567)
     })
   })
   
@@ -199,8 +199,17 @@ describe('Text', function() {
     it('clears the stored content value', function() {
       text.text('Stored locally.')
       expect(text.content).toBe('Stored locally.')
-      text.clear()
-      expect(text.content).toBe('')
+    })
+  })
+
+  describe('length()', function() {
+    it('gets total length of text', function() {
+      text.text(function(add) {
+        add.tspan('The first.')
+        add.tspan('The second.')
+        add.tspan('The third.')
+      })
+      expect(text.length()).toBe(text.lines.get(0).length() + text.lines.get(1).length() + text.lines.get(2).length())
     })
   })