unified all boxes (#634)

unified all boxes

- SVG.Box for everything
- bbox, rbox and viewbox as methods
- boxes can be created with string, array, object, list...
- added helper to simplify boxes code

5 files changed, 147 insertions, 265 deletions

diff --git a/spec/SpecRunner.html b/spec/SpecRunner.html
index 52f156b..0dd3315 100644
--- a/spec/SpecRunner.html
+++ b/spec/SpecRunner.html
@@ -99,7 +99,6 @@
   <script src="spec/number.js"></script>
   <script src="spec/array.js"></script>
   <script src="spec/hyperlink.js"></script>
-  <script src="spec/viewbox.js"></script>
   <script src="spec/sugar.js"></script>
   <script src="spec/fx.js"></script>
   <script src="spec/utils.js"></script>
diff --git a/spec/spec/boxes.js b/spec/spec/boxes.js
index 9e9fc73..16dddb9 100644
--- a/spec/spec/boxes.js
+++ b/spec/spec/boxes.js
@@ -1,29 +1,81 @@
 describe('Box', function() {
-  it('creates a new instance without passing anything', function() {
-    var box = new SVG.Box
+  describe('initialization', function() {
+    var box
 
-    expect(box instanceof SVG.Box).toBe(true)
-    expect(box).toEqual(jasmine.objectContaining({
-      x:0, y:0, cx:0, cy:0, width:0, height:0
-    }))
-  })
+    it('creates a new box with default values', function() {
+      box = new SVG.Box
 
-  it('creates a new instance with 4 arguments given', function() {
-    var box = new SVG.Box(10, 20, 100, 50)
+      expect(box instanceof SVG.Box).toBe(true)
+      expect(box).toEqual(jasmine.objectContaining({
+        x:0, y:0, cx:0, cy:0, width:0, height:0
+      }))
+    })
 
-    expect(box instanceof SVG.Box).toBe(true)
-    expect(box).toEqual(jasmine.objectContaining({
-      x:10, y:20, cx:60, cy:45, width:100, height:50
-    }))
-  })
+    it('creates a new box from parsed string', function() {
+      box = new SVG.Box('10. 100 200 300')
+      expect(box.x).toBe(10)
+      expect(box.y).toBe(100)
+      expect(box.width).toBe(200)
+      expect(box.height).toBe(300)
+      expect(box.cx).toBe(110)
+      expect(box.cy).toBe(250)
+      expect(box.x2).toBe(210)
+      expect(box.y2).toBe(400)
+    })
+
+    it('creates a new box from parsed string with comma as delimiter', function() {
+      box = new SVG.Box('10,100, 200  , 300')
+      expect(box.x).toBe(10)
+      expect(box.y).toBe(100)
+      expect(box.width).toBe(200)
+      expect(box.height).toBe(300)
+    })
+
+    it('creates a new box from array', function() {
+      box = new SVG.Box([10, 100, 200, 300])
+
+      expect(box.x).toBe(10)
+      expect(box.y).toBe(100)
+      expect(box.width).toBe(200)
+      expect(box.height).toBe(300)
+    })
+
+    it('creates a new box from object', function() {
+      box = new SVG.Box({x:10, y:100, width:200, height:300})
+
+      expect(box.x).toBe(10)
+      expect(box.y).toBe(100)
+      expect(box.width).toBe(200)
+      expect(box.height).toBe(300)
+    })
+
+    it('creates a new box from object width left and top instead of x and y', function() {
+      box = new SVG.Box({left:10, top:100, width:200, height:300})
+
+      expect(box.x).toBe(10)
+      expect(box.y).toBe(100)
+      expect(box.width).toBe(200)
+      expect(box.height).toBe(300)
+    })
 
-  it('creates a new instance with object given', function() {
-    var box = new SVG.Box({x:10, y:20, width: 100, height:50})
+    it('creates a new viewbox from 4 arguments', function() {
+      box = new SVG.Box(10, 100, 200, 300)
+
+      expect(box.x).toBe(10)
+      expect(box.y).toBe(100)
+      expect(box.width).toBe(200)
+      expect(box.height).toBe(300)
+    })
+
+    it('creates a new box from parsed string with exponential values', function() {
+      box = new SVG.Box('-1.12e1 1e-2 +2e2 +.3e+4')
+
+      expect(box.x).toBe(-11.2)
+      expect(box.y).toBe(0.01)
+      expect(box.width).toBe(200)
+      expect(box.height).toBe(3000)
+    })
 
-    expect(box instanceof SVG.Box).toBe(true)
-    expect(box).toEqual(jasmine.objectContaining({
-      x:10, y:20, cx:60, cy:45, width:100, height:50
-    }))
   })
 
   describe('merge()', function() {
@@ -32,7 +84,7 @@ describe('Box', function() {
       var box2 = new SVG.Box(300, 400, 100, 100)
       var box3 = new SVG.Box(500, 100, 100, 100)
       var merged = box1.merge(box2).merge(box3)
-      
+
       expect(merged).toEqual(jasmine.objectContaining({
         x: 50, y: 50, cx: 325, cy: 275, width: 550, height: 450
       }))
@@ -43,110 +95,68 @@ describe('Box', function() {
       var merged = box1.merge(box2)
       expect(box1).not.toBe(merged)
       expect(box2).not.toBe(merged)
-      
+
       expect(merged instanceof SVG.Box).toBe(true)
     })
   })
-  
+
   describe('transform()', function() {
     it('transforms the box with given matrix', function() {
       var box1 = new SVG.Box(50, 50, 100, 100).transform(new SVG.Matrix(1,0,0,1,20,20))
       var box2 = new SVG.Box(50, 50, 100, 100).transform(new SVG.Matrix(2,0,0,2,0,0))
       var box3 = new SVG.Box(-200, -200, 100, 100).transform(new SVG.Matrix(1,0,0,1,-20,-20))
-      
+
       expect(box1).toEqual(jasmine.objectContaining({
         x: 70, y: 70, cx: 120, cy: 120, width: 100, height: 100
       }))
-      
+
       expect(box2).toEqual(jasmine.objectContaining({
         x: 100, y: 100, cx: 200, cy: 200, width: 200, height: 200
       }))
-      
+
       expect(box3).toEqual(jasmine.objectContaining({
         x: -220, y: -220, cx: -170, cy: -170, width: 100, height: 100
       }))
     })
   })
-})
-
-describe('BBox', function() {
 
-  afterEach(function() {
-    draw.clear()
-  })
+  describe('morph()', function() {
+    it('stores a given box for morphing', function() {
+      var box1 = new SVG.Box(10, 100, 200, 300)
+        , box2 = new SVG.Box(50, -100, 300, 300)
 
-  it('creates a new instance from an element', function() {
-    var rect = draw.rect(100, 100).move(100, 25)
-    var box = new SVG.BBox(rect)
+      box1.morph(box2)
 
-    expect(box).toEqual(jasmine.objectContaining({
-      x: 100, y: 25, cx: 150, cy: 75, width: 100, height: 100
-    }))
-  })
-  
-  describe('merge()', function() {
-    it('returns an instance of SVG.BBox', function() {
-      var box1 = new SVG.BBox(50, 50, 100, 100)
-      var box2 = new SVG.BBox(300, 400, 100, 100)
-      var merged = box1.merge(box2)
-      
-      expect(merged instanceof SVG.BBox).toBe(true)
+      expect(box1.destination).toEqual(box2)
     })
-  })
-
-})
-
-describe('TBox', function() {
-
-  afterEach(function() {
-    draw.clear()
-  })
-
-  it('should map to RBox and be removed in 3.x', function() {
-    var rect = draw.rect(100, 100).move(100, 25)
-    var tbox = rect.tbox()
+    it('stores a clone, not the given viewbox itself', function() {
+      var box1 = new SVG.Box(10, 100, 200, 300)
+        , box2 = new SVG.Box(50, -100, 300, 300)
 
-    expect(tbox.x).toBe(100)
-    expect(tbox.y).toBe(25)
+      box1.morph(box2)
 
-    rect.transform({ scale: 1.5 })
-    tbox = rect.tbox()
-    expect(tbox.x).toBe(75)
-    expect(tbox.y).toBe(0)
-
-    rect.transform({ skewX: 5 })
-    tbox = rect.tbox()
-    expect(tbox.x|0).toBe(68)
-    expect(tbox.y|0).toBe(0)
+      expect(box1.destination).not.toBe(box2)
+    })
   })
 
-})
-
-describe('RBox', function() {
+  describe('at()', function() {
+    it('returns a morphed box at a given position', function() {
+      var box1 = new SVG.Box(10, 100, 200, 300)
+        , box2 = new SVG.Box(50, -100, 300, 300)
+        , box3 = box1.morph(box2).at(0.5)
 
-  afterEach(function() {
-    draw.clear()
-  })
-
-  it('creates a new instance from an element', function() {
-    var rect = draw.rect(100, 100).move(100, 25)
-    var box = new SVG.RBox(rect).transform(rect.doc().screenCTM().inverse()).addOffset()
-    expect(box).toEqual(jasmine.objectContaining({
-      x: 100, y: 25, cx: 150, cy: 75, width: 100, height: 100
-    }))
-  })
-  
-  describe('merge()', function() {
-    it('returns an instance of SVG.RBox', function() {
-      var box1 = new SVG.RBox(50, 50, 100, 100)
-      var box2 = new SVG.RBox(300, 400, 100, 100)
-      var merged = box1.merge(box2)
-      
-      expect(merged instanceof SVG.RBox).toBe(true)
+      expect(box1.toString()).toBe('10 100 200 300')
+      expect(box2.toString()).toBe('50 -100 300 300')
+      expect(box3.toString()).toBe('30 0 250 300')
+    })
+    it('returns itself when no destination given', function() {
+      var box = new SVG.Box(10, 100, 200, 300)
+      expect(box.at(0.5)).toBe(box)
     })
   })
 })
 
+
 describe('Boxes', function() {
   var rect, nested, offset
 
@@ -161,8 +171,8 @@ describe('Boxes', function() {
   })
 
   describe('bbox()', function() {
-    it('returns an instance of SVG.BBox', function() {
-      expect(rect.bbox() instanceof SVG.BBox).toBeTruthy()
+    it('returns an instance of SVG.Box', function() {
+      expect(rect.bbox() instanceof SVG.Box).toBeTruthy()
     })
     it('matches the size of the target element, ignoring transformations', function() {
       var box = rect.bbox()
@@ -194,8 +204,8 @@ describe('Boxes', function() {
   })
 
   describe('rbox()', function() {
-    it('returns an instance of SVG.RBox', function() {
-      expect(rect.rbox() instanceof SVG.RBox).toBeTruthy()
+    it('returns an instance of SVG.Box', function() {
+      expect(rect.rbox() instanceof SVG.Box).toBeTruthy()
     })
 
     it('returns the elements box in absolute screen coordinates by default', function() {
@@ -224,6 +234,41 @@ describe('Boxes', function() {
     })
   })
 
+  describe('viewbox()', function() {
+
+    beforeEach(function() {
+      draw.attr('viewBox', null)
+    })
+
+    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')
+    })
+    it('should set the viewbox when an object is provided as first argument', function() {
+      draw.viewbox({ x: 0, y: 0, width: 50, height: 50 })
+      expect(draw.node.getAttribute('viewBox')).toBe('0 0 50 50')
+    })
+    it('should set the viewbox when a string is provided as first argument', function() {
+      draw.viewbox('0 0 50 50')
+      expect(draw.node.getAttribute('viewBox')).toBe('0 0 50 50')
+    })
+    it('should set the viewbox when an array is provided as first argument', function() {
+      draw.viewbox([0, 0, 50, 50])
+      expect(draw.node.getAttribute('viewBox')).toBe('0 0 50 50')
+    })
+    it('should accept negative values', function() {
+      draw.size(100,100).viewbox(-100, -100, 50, 50)
+      expect(draw.node.getAttribute('viewBox')).toEqual('-100 -100 50 50')
+    })
+    it('should get the viewbox if no arguments are given', function() {
+      draw.viewbox(0, 0, 100, 100)
+      expect(draw.viewbox()).toEqual(new SVG.Box(0,0,100,100))
+    })
+    it('should get a nulled viewbox when no viewbox attribute is set', function() {
+      expect(draw.viewbox()).toEqual(new SVG.Box())
+    })
+  })
+
 })
 
 
diff --git a/spec/spec/element.js b/spec/spec/element.js
index 7f7cd95..7afd791 100644
--- a/spec/spec/element.js
+++ b/spec/spec/element.js
@@ -571,9 +571,9 @@ describe('Element', function() {
   })
 
   describe('rbox()', function() {
-    it('returns an instance of SVG.RBox', function() {
+    it('returns an instance of SVG.Box', function() {
       var rect = draw.rect(100,100)
-      expect(rect.rbox() instanceof SVG.RBox).toBe(true)
+      expect(rect.rbox() instanceof SVG.Box).toBe(true)
     })
     it('returns the correct rectangular box', function() {
       var rect = draw.size(200, 150).viewbox(0, 0, 200, 150).rect(105, 210).move(2, 12)
diff --git a/spec/spec/set.js b/spec/spec/set.js
index 50c3126..0e0db1c 100644
--- a/spec/spec/set.js
+++ b/spec/spec/set.js
@@ -144,12 +144,12 @@ describe('Set', function() {
       expect(box.width).toBeCloseTo(300)
       expect(box.height).toBeCloseTo(350)
     })
-    it('returns an instance of SVG.RBox', function() {
+    it('returns an instance of SVG.Box', function() {
       set.add(e1).add(e2).add(e3).add(e4).add(e5)
 
-      expect(set.bbox() instanceof SVG.RBox).toBeTruthy()
+      expect(set.bbox() instanceof SVG.Box).toBeTruthy()
     })
-    it('returns an empty bounding box wiht no members', function() {
+    it('returns an empty bounding box with no members', function() {
       var box = set.bbox()
 
       expect(box.x).toBe(0)
diff --git a/spec/spec/viewbox.js b/spec/spec/viewbox.js
deleted file mode 100644
index cf6ec5c..0000000
--- a/spec/spec/viewbox.js
+++ /dev/null
@@ -1,162 +0,0 @@
-describe('Viewbox', function() {
-  var viewbox
-
-  beforeEach(function() {
-    draw.clear()
-  })
-
-  describe('initialization', function() {
-
-
-    it('creates a new viewbox with default values', function() {
-      viewbox = new SVG.ViewBox()
-
-      expect(viewbox.x).toBe(0)
-      expect(viewbox.y).toBe(0)
-      expect(viewbox.width).toBe(0)
-      expect(viewbox.height).toBe(0)
-    })
-
-
-
-    it('creates a new viewbox from parsed string', function() {
-      viewbox = new SVG.ViewBox('10. 100 200 300')
-
-      expect(viewbox.x).toBe(10)
-      expect(viewbox.y).toBe(100)
-      expect(viewbox.width).toBe(200)
-      expect(viewbox.height).toBe(300)
-    })
-
-
-
-    it('creates a new viewbox from array', function() {
-      viewbox = new SVG.ViewBox([10, 100, 200, 300])
-
-      expect(viewbox.x).toBe(10)
-      expect(viewbox.y).toBe(100)
-      expect(viewbox.width).toBe(200)
-      expect(viewbox.height).toBe(300)
-    })
-
-
-
-    it('creates a new viewbox from object', function() {
-      viewbox = new SVG.ViewBox({x:10, y:100, width:200, height:300})
-
-      expect(viewbox.x).toBe(10)
-      expect(viewbox.y).toBe(100)
-      expect(viewbox.width).toBe(200)
-      expect(viewbox.height).toBe(300)
-    })
-
-
-
-    it('creates a new viewbox from 4 arguments given', function() {
-      viewbox = new SVG.ViewBox(10, 100, 200, 300)
-
-      expect(viewbox.x).toBe(10)
-      expect(viewbox.y).toBe(100)
-      expect(viewbox.width).toBe(200)
-      expect(viewbox.height).toBe(300)
-    })
-
-
-    it('creates a new viewbox from parsed string with exponential values', function() {
-      viewbox = new SVG.ViewBox('-1.12e1 1e-2 +2e2 +.3e+4')
-
-      expect(viewbox.x).toBe(-11.2)
-      expect(viewbox.y).toBe(0.01)
-      expect(viewbox.width).toBe(200)
-      expect(viewbox.height).toBe(3000)
-    })
-
-    it('creates a new viewbox with element given', function() {
-      draw.attr('viewBox', '-1.12e1 1e-2 +2e2 +.3e+4')
-      viewbox = new SVG.ViewBox(draw)
-
-      expect(viewbox.x).toBe(-11.2)
-      expect(viewbox.y).toBe(0.01)
-      expect(viewbox.width).toBe(200)
-      expect(viewbox.height).toBe(3000)
-    })
-
-  })
-
-
-  describe('viewbox()', function() {
-
-    beforeEach(function() {
-      draw.attr('viewBox', null)
-    })
-    afterEach(function() {
-      draw.attr('viewBox', null)
-    })
-
-    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')
-    })
-    it('should set the viewbox when an object is provided as first argument', function() {
-      draw.viewbox({ x: 0, y: 0, width: 50, height: 50 })
-      expect(draw.node.getAttribute('viewBox')).toBe('0 0 50 50')
-    })
-    it('should set the viewbox when a string is provided as first argument', function() {
-      draw.viewbox('0 0 50 50')
-      expect(draw.node.getAttribute('viewBox')).toBe('0 0 50 50')
-    })
-    it('should set the viewbox when an array is provided as first argument', function() {
-      draw.viewbox([0, 0, 50, 50])
-      expect(draw.node.getAttribute('viewBox')).toBe('0 0 50 50')
-    })
-    it('should accept negative values', function() {
-      draw.size(100,100).viewbox(-100, -100, 50, 50)
-      expect(draw.node.getAttribute('viewBox')).toEqual('-100 -100 50 50')
-    })
-    it('should get the viewbox if no arguments are given', function() {
-      draw.viewbox(0, 0, 100, 100)
-      expect(draw.viewbox()).toEqual(new SVG.ViewBox(draw))
-    })
-    it('should define the zoom of the viewbox in relation to the canvas size', function() {
-      draw.size(100,100).viewbox(0,0,50,50)
-      expect(draw.viewbox().zoom).toEqual(100 / 50)
-    })
-
-  })
-
-  describe('morph()', function() {
-    it('stores a given viewbox for morphing', function() {
-      var viewbox1 = new SVG.ViewBox(10, 100, 200, 300)
-        , viewbox2 = new SVG.ViewBox(50, -100, 300, 300)
-
-      viewbox1.morph(viewbox2)
-
-      expect(viewbox1.destination).toEqual(viewbox2)
-    })
-    it('stores a clone, not the given viewbox itself', function() {
-      var viewbox1 = new SVG.ViewBox(10, 100, 200, 300)
-        , viewbox2 = new SVG.ViewBox(50, -100, 300, 300)
-
-      viewbox1.morph(viewbox2)
-
-      expect(viewbox1.destination).not.toBe(viewbox2)
-    })
-  })
-
-  describe('at()', function() {
-    it('returns a morphed viewbox at a given position', function() {
-      var viewbox1 = new SVG.ViewBox(10, 100, 200, 300)
-        , viewbox2 = new SVG.ViewBox(50, -100, 300, 300)
-        , viewbox3 = viewbox1.morph(viewbox2).at(0.5)
-
-      expect(viewbox1.toString()).toBe('10 100 200 300')
-      expect(viewbox2.toString()).toBe('50 -100 300 300')
-      expect(viewbox3.toString()).toBe('30 0 250 300')
-    })
-    it('returns itself when no destination given', function() {
-      var viewbox = new SVG.ViewBox(10, 100, 200, 300)
-      expect(viewbox.at(0.5)).toBe(viewbox)
-    })
-  })
-
-})
\ No newline at end of file