Drawing bbox fix for window scroll

src/components/drawing/index.js

@@ -589,7 +589,6 @@ drawing.makeTester = function(gd) {
 // always returns a copy of the bbox, so the caller can modify it safely
 var savedBBoxes = [],
     maxSavedBBoxes = 10000;
-
 drawing.bBox = function(node) {
     // cache elements we've already measured so we don't have to
     // remeasure the same thing many times
@@ -598,36 +597,32 @@ drawing.bBox = function(node) {
         return Lib.extendFlat({}, savedBBoxes[saveNum.value]);
     }
 
-    if(!drawing.test3) {
-        drawing.test3 = d3.select('#js-plotly-tester');
-        drawing.tester = drawing.test3.node();
-    }
+    var test3 = d3.select('#js-plotly-tester'),
+        tester = test3.node();
 
     // copy the node to test into the tester
     var testNode = node.cloneNode(true);
-    drawing.tester.appendChild(testNode);
+    tester.appendChild(testNode);
     // standardize its position... do we really want to do this?
     d3.select(testNode).attr({
         x: 0,
         y: 0,
         transform: ''
     });
 
-    var testRect = testNode.getBoundingClientRect();
-    if(!drawing.refRect) {
-        drawing.refRect = drawing.test3.select('.js-reference-point')
+    var testRect = testNode.getBoundingClientRect(),
+        refRect = test3.select('.js-reference-point')
             .node().getBoundingClientRect();
-    }
 
-    drawing.tester.removeChild(testNode);
+    tester.removeChild(testNode);
 
     var bb = {
         height: testRect.height,
         width: testRect.width,
-        left: testRect.left - drawing.refRect.left,
-        top: testRect.top - drawing.refRect.top,
-        right: testRect.right - drawing.refRect.left,
-        bottom: testRect.bottom - drawing.refRect.top
+        left: testRect.left - refRect.left,
+        top: testRect.top - refRect.top,
+        right: testRect.right - refRect.left,
+        bottom: testRect.bottom - refRect.top
     };
 
     // make sure we don't have too many saved boxes,

src/lib/svg_text_utils.js

@@ -19,8 +19,6 @@ var stringMappings = require('../constants/string_mappings');
 
 // Append SVG
 
-var parser = new DOMParser();
-
 d3.selection.prototype.appendSVG = function(_svgString) {
     var skeleton = [
         '<svg xmlns="', xmlnsNamespaces.svg, '" ',
@@ -29,7 +27,7 @@ d3.selection.prototype.appendSVG = function(_svgString) {
         '</svg>'
     ].join('');
 
-    var dom = parser.parseFromString(skeleton, 'application/xml'),
+    var dom = new DOMParser().parseFromString(skeleton, 'application/xml'),
         childNode = dom.documentElement.firstChild;
 
     while(childNode) {

test/jasmine/tests/drawing_test.js

@@ -1,9 +1,6 @@
-var Drawing = require('@src/components/drawing');
-
 var d3 = require('d3');
-
 var Plotly = require('@lib/index');
-
+var Drawing = require('@src/components/drawing');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var fail = require('../assets/fail_test');
@@ -348,6 +345,54 @@ describe('Drawing', function() {
             expect(g.attr('transform')).toEqual('translate(8,9) scale(4,5) translate(-8,-9) translate(1, 2)');
         });
     });
+
+    describe('bBox', function() {
+        afterEach(destroyGraphDiv);
+
+        it('should update bounding box dimension on window scroll', function(done) {
+            var gd = createGraphDiv();
+
+            // allow page to scroll
+            gd.style.position = 'static';
+
+            Plotly.plot(gd, [{
+                y: [1, 2, 1]
+            }], {
+                annotations: [{
+                    text: 'hello'
+                }],
+                height: window.innerHeight * 2,
+                width: 500
+            })
+            .then(function() {
+                var node = d3.select('text.annotation').node();
+                expect(Drawing.bBox(node)).toEqual({
+                    height: 14,
+                    width: 27.671875,
+                    left: -13.671875,
+                    top: -11,
+                    right: 14,
+                    bottom: 3
+                });
+
+                window.scroll(0, 200);
+                return Plotly.relayout(gd, 'annotations[0].text', 'HELLO');
+            })
+            .then(function() {
+                var node = d3.select('text.annotation').node();
+                expect(Drawing.bBox(node)).toEqual({
+                    height: 14,
+                    width: 41.015625,
+                    left: -20.671875,
+                    top: -11,
+                    right: 20.34375,
+                    bottom: 3
+                });
+            })
+            .catch(fail)
+            .then(done);
+        });
+    });
 });
 
 describe('gradients', function() {