added geometry and positioning methods to `A` (#1110)

2 files changed, 274 insertions, 266 deletions

diff --git a/spec/spec/elements/G.js b/spec/spec/elements/G.js
index 2cd73fe..58dc07d 100644
--- a/spec/spec/elements/G.js
+++ b/spec/spec/elements/G.js
@@ -1,8 +1,8 @@
-/* globals describe, expect, it, jasmine, spyOn, container */
+/* globals describe, expect, it, jasmine, container */
 
-import { Box, G, Rect, SVG } from '../../../src/main.js'
+import { G, SVG } from '../../../src/main.js'
 
-const { any, objectContaining } = jasmine
+const { any } = jasmine
 
 describe('G.js', () => {
 
@@ -26,267 +26,4 @@ describe('G.js', () => {
       })
     })
   })
-
-  describe('dmove()', () => {
-    it('moves the bbox of the group by a certain amount (1)', () => {
-      const canvas = SVG().addTo(container)
-      const g = canvas.group()
-
-      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
-      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
-
-      g.dmove(10, 10)
-
-      const box = g.bbox()
-      expect(box).toEqual(objectContaining({
-        x: 20, y: 30, width: box.width, height: box.height
-      }))
-    })
-
-    it('moves the bbox of the group by a certain amount (2)', () => {
-      const canvas = SVG().addTo(container)
-      const g = canvas.group()
-
-      g.rect(400, 200).move(123, 312).rotate(34).skew(12)
-      g.rect(100, 50).move(11, 43).translate(123, 32).skew(-12)
-      g.rect(400, 200).rotate(90)
-      g.group().rotate(23).group().skew(32).rect(100, 40).skew(11).rotate(12)
-
-      const oldBox = g.bbox()
-
-      g.dmove(10, 10)
-
-      const newBox = g.bbox()
-
-      expect(newBox.x).toBeCloseTo(oldBox.x + 10, 4)
-      expect(newBox.y).toBeCloseTo(oldBox.y + 10, 4)
-      expect(newBox.w).toBeCloseTo(oldBox.w, 4)
-      expect(newBox.h).toBeCloseTo(oldBox.h, 4)
-    })
-  })
-
-  describe('dx()', () => {
-    it('calls dmove with dy=0 and returns itself', () => {
-      const canvas = SVG().addTo(container)
-      const g = canvas.group()
-      const spy = spyOn(g, 'dmove').and.callThrough()
-      expect(g.dx(10)).toBe(g)
-      expect(spy).toHaveBeenCalledWith(10, 0)
-    })
-  })
-
-  describe('dy()', () => {
-    it('calls dmove with dx=0 and returns itself', () => {
-      const canvas = SVG().addTo(container)
-      const g = canvas.group()
-      const spy = spyOn(g, 'dmove').and.callThrough()
-      expect(g.dy(10)).toBe(g)
-      expect(spy).toHaveBeenCalledWith(0, 10)
-    })
-  })
-
-  describe('move()', () => {
-    it('calls dmove() with the correct difference', () => {
-      const canvas = SVG().addTo(container)
-      const g = canvas.group()
-      g.rect(100, 200).move(111, 223)
-
-      spyOn(g, 'dmove')
-
-      g.move(100, 150)
-      expect(g.dmove).toHaveBeenCalledWith(-11, -73)
-    })
-
-    it('defaults to x=0 and y=0', () => {
-      const canvas = SVG().addTo(container)
-      const g = canvas.group()
-      g.rect(100, 200).move(111, 223)
-
-      spyOn(g, 'dmove')
-
-      g.move()
-      expect(g.dmove).toHaveBeenCalledWith(-111, -223)
-    })
-  })
-
-  describe('x()', () => {
-    it('gets the x value of the bbox', () => {
-      const canvas = SVG().addTo(container)
-
-      const g = new G()
-      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
-      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
-
-      g.addTo(canvas)
-
-      expect(g.x()).toBe(g.bbox().x)
-      expect(g.x()).toBe(10)
-    })
-    it('calls move with the paramater as x', () => {
-      const canvas = SVG().addTo(container)
-      const g = canvas.group()
-      g.rect(100, 200).move(111, 223)
-
-      spyOn(g, 'move')
-
-      g.x(100)
-      expect(g.move).toHaveBeenCalledWith(100, g.bbox().y, any(Box))
-    })
-  })
-
-  describe('y()', () => {
-    it('gets the y value of the bbox', () => {
-      const canvas = SVG().addTo(container)
-
-      const g = new G()
-      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
-      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
-
-      g.addTo(canvas)
-
-      expect(g.y()).toBe(g.bbox().y)
-      expect(g.y()).toBe(20)
-    })
-
-    it('calls move with the paramater as y', () => {
-      const canvas = SVG().addTo(container)
-      const g = canvas.group()
-      g.rect(100, 200).move(111, 223)
-
-      spyOn(g, 'move')
-
-      g.y(100)
-      expect(g.move).toHaveBeenCalledWith(g.bbox().x, 100, any(Box))
-    })
-  })
-
-  describe('size()', () => {
-    it('changes the dimensions of the bbox (1)', () => {
-      const canvas = SVG().addTo(container)
-
-      const g = new G()
-      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
-      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
-
-      g.addTo(canvas)
-
-      const oldBox = g.bbox()
-
-      expect(g.size(100, 100)).toBe(g)
-
-      const newBox = g.bbox()
-
-      expect(newBox.x).toBeCloseTo(oldBox.x, 4)
-      expect(newBox.y).toBeCloseTo(oldBox.y, 4)
-      expect(newBox.w).toBeCloseTo(100, 4)
-      expect(newBox.h).toBeCloseTo(100, 4)
-
-      const rbox1 = g.children()[0].rbox()
-      const rbox2 = g.children()[1].rbox()
-
-      expect(rbox1.width).toBeCloseTo(90.9, 1)
-      expect(Math.floor(rbox2.width * 10) / 10).toBeCloseTo(63.6, 1) // Browsers have different opinion on this one (chrome: 63.6, ff: 63.7)
-
-      expect(rbox1.x).toBeCloseTo(10, 1)
-      expect(rbox2.x).toBeCloseTo(46.4, 1)
-      expect(rbox1.height).toBeCloseTo(85.7, 1)
-      expect(rbox2.height).toBeCloseTo(71.4, 1)
-      expect(rbox1.y).toBeCloseTo(20, 1)
-      expect(rbox2.y).toBeCloseTo(48.6, 1)
-    })
-
-    it('changes the dimensions of the bbox (2)', () => {
-      const canvas = SVG().addTo(container)
-      const g = canvas.group()
-
-      g.rect(400, 200).move(123, 312).rotate(34).skew(12)
-      g.rect(100, 50).move(11, 43).translate(123, 32).skew(-12)
-      g.rect(400, 200).rotate(90)
-      g.group().rotate(23).group().skew(32).rect(100, 40).skew(11).rotate(12)
-
-      const oldBox = g.bbox()
-
-      g.size(100, 100)
-
-      const newBox = g.bbox()
-
-      expect(newBox.x).toBeCloseTo(oldBox.x, 4)
-      expect(newBox.y).toBeCloseTo(oldBox.y, 4)
-      expect(newBox.w).toBeCloseTo(100, 4)
-      expect(newBox.h).toBeCloseTo(100, 4)
-    })
-
-  })
-
-  describe('width()', () => {
-    it('gets the width value of the bbox', () => {
-      const canvas = SVG().addTo(container)
-
-      const g = new G()
-      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
-      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
-
-      g.addTo(canvas)
-
-      expect(g.width()).toBe(g.bbox().width)
-      expect(g.width()).toBe(110)
-    })
-    it('sets the width value of the bbox by moving all children', () => {
-      const canvas = SVG().addTo(container)
-
-      const g = new G()
-      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
-      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
-
-      g.addTo(canvas)
-
-      expect(g.width(100)).toBe(g)
-      expect(g.bbox().width).toBe(100)
-
-      const rbox1 = g.children()[0].rbox()
-      const rbox2 = g.children()[1].rbox()
-
-      expect(rbox1.width).toBeCloseTo(90.9, 1)
-      expect(Math.floor(rbox2.width * 10) / 10).toBeCloseTo(63.6, 1) // Browsers have different opinion on this one (chrome: 63.6, ff: 63.7)
-
-      expect(rbox1.x).toBeCloseTo(10, 3)
-      expect(rbox2.x).toBeCloseTo(46.4, 1)
-    })
-  })
-
-  describe('height()', () => {
-    it('gets the height value of the bbox', () => {
-      const canvas = SVG().addTo(container)
-
-      const g = new G()
-      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
-      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
-
-      g.addTo(canvas)
-
-      expect(g.height()).toBe(g.bbox().height)
-      expect(g.height()).toBe(140)
-    })
-    it('sets the height value of the bbox by moving all children', () => {
-      const canvas = SVG().addTo(container)
-
-      const g = new G()
-      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
-      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
-
-      g.addTo(canvas)
-
-      expect(g.height(100)).toBe(g)
-      expect(g.bbox().height).toBeCloseTo(100, 3)
-
-      const rbox1 = g.children()[0].rbox()
-      const rbox2 = g.children()[1].rbox()
-
-      expect(rbox1.height).toBeCloseTo(85.7, 1)
-      expect(rbox2.height).toBeCloseTo(71.4, 1)
-
-      expect(rbox1.y).toBeCloseTo(20, 3)
-      expect(rbox2.y).toBeCloseTo(48.6, 1)
-    })
-  })
 })
diff --git a/spec/spec/modules/core/containerGeometry.js b/spec/spec/modules/core/containerGeometry.js
new file mode 100644
index 0000000..3bdb109
--- /dev/null
+++ b/spec/spec/modules/core/containerGeometry.js
@@ -0,0 +1,271 @@
+/* globals describe, expect, it, jasmine, spyOn, container */
+
+import { Box, G, Rect, SVG } from '../../../../src/main.js'
+
+const { any, objectContaining } = jasmine
+
+describe('containerGeometry.js', () => {
+
+  describe('dmove()', () => {
+    it('moves the bbox of the group by a certain amount (1)', () => {
+      const canvas = SVG().addTo(container)
+      const g = canvas.group()
+
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
+
+      g.dmove(10, 10)
+
+      const box = g.bbox()
+      expect(box).toEqual(objectContaining({
+        x: 20, y: 30, width: box.width, height: box.height
+      }))
+    })
+
+    it('moves the bbox of the group by a certain amount (2)', () => {
+      const canvas = SVG().addTo(container)
+      const g = canvas.group()
+
+      g.rect(400, 200).move(123, 312).rotate(34).skew(12)
+      g.rect(100, 50).move(11, 43).translate(123, 32).skew(-12)
+      g.rect(400, 200).rotate(90)
+      g.group().rotate(23).group().skew(32).rect(100, 40).skew(11).rotate(12)
+
+      const oldBox = g.bbox()
+
+      g.dmove(10, 10)
+
+      const newBox = g.bbox()
+
+      expect(newBox.x).toBeCloseTo(oldBox.x + 10, 4)
+      expect(newBox.y).toBeCloseTo(oldBox.y + 10, 4)
+      expect(newBox.w).toBeCloseTo(oldBox.w, 4)
+      expect(newBox.h).toBeCloseTo(oldBox.h, 4)
+    })
+  })
+
+  describe('dx()', () => {
+    it('calls dmove with dy=0 and returns itself', () => {
+      const canvas = SVG().addTo(container)
+      const g = canvas.group()
+      const spy = spyOn(g, 'dmove').and.callThrough()
+      expect(g.dx(10)).toBe(g)
+      expect(spy).toHaveBeenCalledWith(10, 0)
+    })
+  })
+
+  describe('dy()', () => {
+    it('calls dmove with dx=0 and returns itself', () => {
+      const canvas = SVG().addTo(container)
+      const g = canvas.group()
+      const spy = spyOn(g, 'dmove').and.callThrough()
+      expect(g.dy(10)).toBe(g)
+      expect(spy).toHaveBeenCalledWith(0, 10)
+    })
+  })
+
+  describe('move()', () => {
+    it('calls dmove() with the correct difference', () => {
+      const canvas = SVG().addTo(container)
+      const g = canvas.group()
+      g.rect(100, 200).move(111, 223)
+
+      spyOn(g, 'dmove')
+
+      g.move(100, 150)
+      expect(g.dmove).toHaveBeenCalledWith(-11, -73)
+    })
+
+    it('defaults to x=0 and y=0', () => {
+      const canvas = SVG().addTo(container)
+      const g = canvas.group()
+      g.rect(100, 200).move(111, 223)
+
+      spyOn(g, 'dmove')
+
+      g.move()
+      expect(g.dmove).toHaveBeenCalledWith(-111, -223)
+    })
+  })
+
+  describe('x()', () => {
+    it('gets the x value of the bbox', () => {
+      const canvas = SVG().addTo(container)
+
+      const g = new G()
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
+
+      g.addTo(canvas)
+
+      expect(g.x()).toBe(g.bbox().x)
+      expect(g.x()).toBe(10)
+    })
+    it('calls move with the paramater as x', () => {
+      const canvas = SVG().addTo(container)
+      const g = canvas.group()
+      g.rect(100, 200).move(111, 223)
+
+      spyOn(g, 'move')
+
+      g.x(100)
+      expect(g.move).toHaveBeenCalledWith(100, g.bbox().y, any(Box))
+    })
+  })
+
+  describe('y()', () => {
+    it('gets the y value of the bbox', () => {
+      const canvas = SVG().addTo(container)
+
+      const g = new G()
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
+
+      g.addTo(canvas)
+
+      expect(g.y()).toBe(g.bbox().y)
+      expect(g.y()).toBe(20)
+    })
+
+    it('calls move with the paramater as y', () => {
+      const canvas = SVG().addTo(container)
+      const g = canvas.group()
+      g.rect(100, 200).move(111, 223)
+
+      spyOn(g, 'move')
+
+      g.y(100)
+      expect(g.move).toHaveBeenCalledWith(g.bbox().x, 100, any(Box))
+    })
+  })
+
+  describe('size()', () => {
+    it('changes the dimensions of the bbox (1)', () => {
+      const canvas = SVG().addTo(container)
+
+      const g = new G()
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
+
+      g.addTo(canvas)
+
+      const oldBox = g.bbox()
+
+      expect(g.size(100, 100)).toBe(g)
+
+      const newBox = g.bbox()
+
+      expect(newBox.x).toBeCloseTo(oldBox.x, 4)
+      expect(newBox.y).toBeCloseTo(oldBox.y, 4)
+      expect(newBox.w).toBeCloseTo(100, 4)
+      expect(newBox.h).toBeCloseTo(100, 4)
+
+      const rbox1 = g.children()[0].rbox()
+      const rbox2 = g.children()[1].rbox()
+
+      expect(rbox1.width).toBeCloseTo(90.9, 1)
+      expect(Math.floor(rbox2.width * 10) / 10).toBeCloseTo(63.6, 1) // Browsers have different opinion on this one (chrome: 63.6, ff: 63.7)
+
+      expect(rbox1.x).toBeCloseTo(10, 1)
+      expect(rbox2.x).toBeCloseTo(46.4, 1)
+      expect(rbox1.height).toBeCloseTo(85.7, 1)
+      expect(rbox2.height).toBeCloseTo(71.4, 1)
+      expect(rbox1.y).toBeCloseTo(20, 1)
+      expect(rbox2.y).toBeCloseTo(48.6, 1)
+    })
+
+    it('changes the dimensions of the bbox (2)', () => {
+      const canvas = SVG().addTo(container)
+      const g = canvas.group()
+
+      g.rect(400, 200).move(123, 312).rotate(34).skew(12)
+      g.rect(100, 50).move(11, 43).translate(123, 32).skew(-12)
+      g.rect(400, 200).rotate(90)
+      g.group().rotate(23).group().skew(32).rect(100, 40).skew(11).rotate(12)
+
+      const oldBox = g.bbox()
+
+      g.size(100, 100)
+
+      const newBox = g.bbox()
+
+      expect(newBox.x).toBeCloseTo(oldBox.x, 4)
+      expect(newBox.y).toBeCloseTo(oldBox.y, 4)
+      expect(newBox.w).toBeCloseTo(100, 4)
+      expect(newBox.h).toBeCloseTo(100, 4)
+    })
+
+  })
+
+  describe('width()', () => {
+    it('gets the width value of the bbox', () => {
+      const canvas = SVG().addTo(container)
+
+      const g = new G()
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
+
+      g.addTo(canvas)
+
+      expect(g.width()).toBe(g.bbox().width)
+      expect(g.width()).toBe(110)
+    })
+    it('sets the width value of the bbox by moving all children', () => {
+      const canvas = SVG().addTo(container)
+
+      const g = new G()
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
+
+      g.addTo(canvas)
+
+      expect(g.width(100)).toBe(g)
+      expect(g.bbox().width).toBe(100)
+
+      const rbox1 = g.children()[0].rbox()
+      const rbox2 = g.children()[1].rbox()
+
+      expect(rbox1.width).toBeCloseTo(90.9, 1)
+      expect(Math.floor(rbox2.width * 10) / 10).toBeCloseTo(63.6, 1) // Browsers have different opinion on this one (chrome: 63.6, ff: 63.7)
+
+      expect(rbox1.x).toBeCloseTo(10, 3)
+      expect(rbox2.x).toBeCloseTo(46.4, 1)
+    })
+  })
+
+  describe('height()', () => {
+    it('gets the height value of the bbox', () => {
+      const canvas = SVG().addTo(container)
+
+      const g = new G()
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
+
+      g.addTo(canvas)
+
+      expect(g.height()).toBe(g.bbox().height)
+      expect(g.height()).toBe(140)
+    })
+    it('sets the height value of the bbox by moving all children', () => {
+      const canvas = SVG().addTo(container)
+
+      const g = new G()
+      g.add(new Rect({ width: 100, height: 120, x: 10, y: 20 }))
+      g.add(new Rect({ width: 70, height: 100, x: 50, y: 60 }))
+
+      g.addTo(canvas)
+
+      expect(g.height(100)).toBe(g)
+      expect(g.bbox().height).toBeCloseTo(100, 3)
+
+      const rbox1 = g.children()[0].rbox()
+      const rbox2 = g.children()[1].rbox()
+
+      expect(rbox1.height).toBeCloseTo(85.7, 1)
+      expect(rbox2.height).toBeCloseTo(71.4, 1)
+
+      expect(rbox1.y).toBeCloseTo(20, 3)
+      expect(rbox2.y).toBeCloseTo(48.6, 1)
+    })
+  })
+})