speed up zoom function for non-FF Browser

2 files changed, 45 insertions, 32 deletions

diff --git a/spec/spec/elements/G.js b/spec/spec/elements/G.js
index 385419e..0d8952e 100644
--- a/spec/spec/elements/G.js
+++ b/spec/spec/elements/G.js
@@ -148,15 +148,18 @@ describe('G.js', () => {
       expect(newBox.w).toBeCloseTo(100, 4)
       expect(newBox.h).toBeCloseTo(100, 4)
 
-      expect(g.children()[0].width()).toBeCloseTo(90.909, 3)
-      expect(g.children()[1].width()).toBeCloseTo(63.636, 3)
-
-      expect(g.children()[0].x()).toBeCloseTo(10, 3)
-      expect(g.children()[1].x()).toBeCloseTo(46.364, 3)
-      expect(g.children()[0].height()).toBeCloseTo(85.714, 3)
-      expect(g.children()[1].height()).toBeCloseTo(71.429, 3)
-      expect(g.children()[0].y()).toBeCloseTo(20, 3)
-      expect(g.children()[1].y()).toBeCloseTo(48.571, 3)
+      const rbox1 = g.children()[0].rbox()
+      const rbox2 = g.children()[1].rbox()
+
+      expect(rbox1.width).toBeCloseTo(90.9, 1)
+      expect(rbox2.width).toBeCloseTo(63.6, 1)
+
+      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)', () => {
@@ -207,11 +210,15 @@ describe('G.js', () => {
 
       expect(g.width(100)).toBe(g)
       expect(g.bbox().width).toBe(100)
-      expect(g.children()[0].width()).toBeCloseTo(90.909, 3)
-      expect(g.children()[1].width()).toBeCloseTo(63.636, 3)
 
-      expect(g.children()[0].x()).toBeCloseTo(10, 3)
-      expect(g.children()[1].x()).toBeCloseTo(46.364, 3)
+      const rbox1 = g.children()[0].rbox()
+      const rbox2 = g.children()[1].rbox()
+
+      expect(rbox1.width).toBeCloseTo(90.9, 1)
+      expect(rbox2.width).toBeCloseTo(63.6, 1)
+
+      expect(rbox1.x).toBeCloseTo(10, 3)
+      expect(rbox2.x).toBeCloseTo(46.4, 1)
     })
   })
 
@@ -238,12 +245,16 @@ describe('G.js', () => {
       g.addTo(canvas)
 
       expect(g.height(100)).toBe(g)
-      expect(g.bbox().height).toBe(100)
-      expect(g.children()[0].height()).toBeCloseTo(85.714, 3)
-      expect(g.children()[1].height()).toBeCloseTo(71.429, 3)
+      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(g.children()[0].y()).toBeCloseTo(20, 3)
-      expect(g.children()[1].y()).toBeCloseTo(48.571, 3)
+      expect(rbox1.y).toBeCloseTo(20, 3)
+      expect(rbox2.y).toBeCloseTo(48.6, 1)
     })
   })
 })
diff --git a/src/types/Box.js b/src/types/Box.js
index 90979d2..190d60d 100644
--- a/src/types/Box.js
+++ b/src/types/Box.js
@@ -159,30 +159,32 @@ registerMethods({
     },
 
     zoom (level, point) {
-      var style = window.getComputedStyle(this.node)
-
-      var width = parseFloat(style.getPropertyValue('width'))
-
-      var height = parseFloat(style.getPropertyValue('height'))
-
-      var v = this.viewbox()
-
-      var zoomX = width / v.width
-
-      var zoomY = height / v.height
+      let width = this.node.clientWidth
+      let height = this.node.clientHeight
+      const v = this.viewbox()
+
+      // Firefox does not support clientHeight and returns 0
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=874811
+      if (!width && !height) {
+        var style = window.getComputedStyle(this.node)
+        width = parseFloat(style.getPropertyValue('width'))
+        height = parseFloat(style.getPropertyValue('height'))
+      }
 
-      var zoom = Math.min(zoomX, zoomY)
+      const zoomX = width / v.width
+      const zoomY = height / v.height
+      const zoom = Math.min(zoomX, zoomY)
 
       if (level == null) {
         return zoom
       }
 
-      var zoomAmount = zoom / level
+      let zoomAmount = zoom / level
       if (zoomAmount === Infinity) zoomAmount = Number.MIN_VALUE
 
       point = point || new Point(width / 2 / zoomX + v.x, height / 2 / zoomY + v.y)
 
-      var box = new Box(v).transform(
+      const box = new Box(v).transform(
         new Matrix({ scale: zoomAmount, origin: point })
       )