5291: recalculation of dynamic CSS transforms on hover

src/components/fx/hover.js

@@ -340,6 +340,7 @@ function _hover(gd, evt, subplot, noHoverEvent) {
             xpx = evt.clientX - dbb.left;
             ypx = evt.clientY - dbb.top;
 
+            fullLayout._calcInverseTransform(gd);
             var transformedCoords = Lib.apply3DTransform(fullLayout._inverseTransform)(xpx, ypx);
 
             xpx = transformedCoords[0];

src/lib/dom.js

@@ -150,6 +150,18 @@ function isTransformableElement(element) {
     return element && (element instanceof Element || element instanceof HTMLElement);
 }
 
+function equalDomRects(a, b) {
+    return (
+        a && b &&
+        a.x === b.x &&
+        a.y === b.y &&
+        a.top === b.top &&
+        a.left === b.left &&
+        a.right === b.right &&
+        a.bottom === b.bottom
+    );
+}
+
 module.exports = {
     getGraphDiv: getGraphDiv,
     isPlotDiv: isPlotDiv,
@@ -160,4 +172,5 @@ module.exports = {
     getFullTransformMatrix: getFullTransformMatrix,
     getElementTransformMatrix: getElementTransformMatrix,
     getElementAndAncestors: getElementAndAncestors,
+    equalDomRects: equalDomRects
 };

src/lib/index.js

@@ -151,6 +151,7 @@ lib.deleteRelatedStyleRule = domModule.deleteRelatedStyleRule;
 lib.getFullTransformMatrix = domModule.getFullTransformMatrix;
 lib.getElementTransformMatrix = domModule.getElementTransformMatrix;
 lib.getElementAndAncestors = domModule.getElementAndAncestors;
+lib.equalDomRects = domModule.equalDomRects;
 
 lib.clearResponsive = require('./clear_responsive');
 

src/lib/svg_text_utils.js

@@ -748,9 +748,12 @@ function alignHTMLWith(_base, container, options) {
         var x0 = getLeft() - cRect.left;
         var y0 = getTop() - cRect.top;
         var gd = options.gd || {};
-        var transformedCoords = Lib.apply3DTransform(gd._fullLayout._inverseTransform)(x0, y0);
-        x0 = transformedCoords[0];
-        y0 = transformedCoords[1];
+        if(options.gd) {
+            gd._fullLayout._calcInverseTransform(gd);
+            var transformedCoords = Lib.apply3DTransform(gd._fullLayout._inverseTransform)(x0, y0);
+            x0 = transformedCoords[0];
+            y0 = transformedCoords[1];
+        }
 
         this.style({
             top: y0 + 'px',

src/plot_api/plot_api.js

@@ -3706,17 +3706,28 @@ function purge(gd) {
     return gd;
 }
 
+// determines if the graph div requires a recalculation of its inverse matrix transforms by comparing old + new bounding boxes.
+function calcInverseTransform(gd) {
+    var fullLayout = gd._fullLayout;
+
+    var newBBox = gd.getBoundingClientRect();
+    if(Lib.equalDomRects(newBBox, fullLayout._lastBBox)) return;
+
+    var m = fullLayout._inverseTransform = Lib.inverseTransformMatrix(Lib.getFullTransformMatrix(gd));
+    fullLayout._inverseScaleX = Math.sqrt(m[0][0] * m[0][0] + m[0][1] * m[0][1] + m[0][2] * m[0][2]);
+    fullLayout._inverseScaleY = Math.sqrt(m[1][0] * m[1][0] + m[1][1] * m[1][1] + m[1][2] * m[1][2]);
+    fullLayout._lastBBox = newBBox;
+}
+
 // -------------------------------------------------------
 // makePlotFramework: Create the plot container and axes
 // -------------------------------------------------------
 function makePlotFramework(gd) {
     var gd3 = d3.select(gd);
     var fullLayout = gd._fullLayout;
-    if(fullLayout._inverseTransform === undefined) {
-        var m = fullLayout._inverseTransform = Lib.inverseTransformMatrix(Lib.getFullTransformMatrix(gd));
-        fullLayout._inverseScaleX = Math.sqrt(m[0][0] * m[0][0] + m[0][1] * m[0][1] + m[0][2] * m[0][2]);
-        fullLayout._inverseScaleY = Math.sqrt(m[1][0] * m[1][0] + m[1][1] * m[1][1] + m[1][2] * m[1][2]);
-    }
+
+    fullLayout._calcInverseTransform = calcInverseTransform;
+    fullLayout._calcInverseTransform(gd);
 
     // Plot container
     fullLayout._container = gd3.selectAll('.plot-container').data([0]);
@@ -3856,6 +3867,8 @@ function makePlotFramework(gd) {
         .style('top', '0px')
         .style('right', '0px');
 
+    fullLayout._lastBBox = gd.getBoundingClientRect();
+
     gd.emit('plotly_framework');
 }
 

src/plots/cartesian/dragbox.js

@@ -335,6 +335,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         x0 = startX - dragBBox.left;
         y0 = startY - dragBBox.top;
 
+        gd._fullLayout._calcInverseTransform(gd);
         var transformedCoords = Lib.apply3DTransform(gd._fullLayout._inverseTransform)(x0, y0);
         x0 = transformedCoords[0];
         y0 = transformedCoords[1];

src/plots/cartesian/select.js

@@ -68,6 +68,7 @@ function prepSelect(e, startX, startY, dragOptions, mode) {
     var x0 = startX - dragBBox.left;
     var y0 = startY - dragBBox.top;
 
+    fullLayout._calcInverseTransform(gd);
     var transformedCoords = Lib.apply3DTransform(fullLayout._inverseTransform)(x0, y0);
     x0 = transformedCoords[0];
     y0 = transformedCoords[1];

src/plots/polar/polar.js

@@ -680,8 +680,8 @@ proto.updateMainDrag = function(fullLayout) {
     var chw = constants.cornerHalfWidth;
     var chl = constants.cornerLen / 2;
 
-    var scaleX = gd._fullLayout._inverseScaleX;
-    var scaleY = gd._fullLayout._inverseScaleY;
+    var scaleX;
+    var scaleY;
 
     var mainDrag = dragBox.makeDragger(layers, 'path', 'maindrag', 'crosshair');
 
@@ -943,7 +943,10 @@ proto.updateMainDrag = function(fullLayout) {
         var dragModeNow = gd._fullLayout.dragmode;
 
         var bbox = mainDrag.getBoundingClientRect();
+        gd._fullLayout._calcInverseTransform(gd);
         var inverse = gd._fullLayout._inverseTransform;
+        scaleX = gd._fullLayout._inverseScaleX;
+        scaleY = gd._fullLayout._inverseScaleY;
         var transformedCoords = Lib.apply3DTransform(inverse)(startX - bbox.left, startY - bbox.top);
         x0 = transformedCoords[0];
         y0 = transformedCoords[1];
@@ -1293,6 +1296,7 @@ proto.updateAngularDrag = function(fullLayout) {
         x0 = startX - bbox.left;
         y0 = startY - bbox.top;
 
+        gd._fullLayout._calcInverseTransform(gd);
         var transformedCoords = Lib.apply3DTransform(fullLayout._inverseTransform)(x0, y0);
         x0 = transformedCoords[0];
         y0 = transformedCoords[1];

src/plots/ternary/ternary.js

@@ -582,6 +582,7 @@ proto.initInteractions = function() {
         var inverse = gd._fullLayout._inverseTransform;
         x0 = startX - dragBBox.left;
         y0 = startY - dragBBox.top;
+        gd._fullLayout._calcInverseTransform(gd);
         var transformedCoords = Lib.apply3DTransform(inverse)(x0, y0);
         x0 = transformedCoords[0];
         y0 = transformedCoords[1];

test/jasmine/tests/cartesian_interact_test.js

@@ -2475,9 +2475,10 @@ describe('Cartesian plots with css transforms', function() {
                 });
             }
 
-            transformPlot(gd, transform);
             Plotly.newPlot(gd, Lib.extendDeep({}, mock))
             .then(function() {
+                transformPlot(gd, transform);
+
                 gd.on('plotly_hover', function(d) {
                     eventRecordings[d.points[0].x] = 1;
                 });
@@ -2519,9 +2520,12 @@ describe('Cartesian plots with css transforms', function() {
             var start = [50, 50];
             var end = [150, 150];
 
-            transformPlot(gd, transform);
             Plotly.newPlot(gd, Lib.extendDeep({}, mock))
-            .then(function() {_drag(start, end); })
+            .then(function() {
+                transformPlot(gd, transform);
+
+                _drag(start, end);
+            })
             .then(function() {
                 _assertTransformedZoombox(start, end);
             })
@@ -2547,9 +2551,10 @@ describe('Cartesian plots with css transforms', function() {
             var start = [10, 10];
             var end = [200, 200];
 
-            transformPlot(gd, transform);
             Plotly.newPlot(gd, Lib.extendDeep({}, mock))
             .then(function() {
+                transformPlot(gd, transform);
+
                 return Plotly.relayout(gd, 'dragmode', 'select');
             })
             .then(function() {

test/jasmine/tests/choropleth_test.js

@@ -167,10 +167,6 @@ describe('Test choropleth hover:', function() {
     function run(hasCssTransform, pos, fig, content, style) {
         gd = createGraphDiv();
         var scale = 1;
-        if(hasCssTransform) {
-            scale = 0.5;
-            transformPlot(gd, 'translate(-25%, -25%) scale(0.5)');
-        }
 
         style = style || {
             bgcolor: 'rgb(68, 68, 68)',
@@ -180,7 +176,13 @@ describe('Test choropleth hover:', function() {
             fontFamily: 'Arial'
         };
 
-        return Plotly.plot(gd, fig).then(function() {
+        return Plotly.plot(gd, fig)
+        .then(function() {
+            if(hasCssTransform) {
+                scale = 0.5;
+                transformPlot(gd, 'translate(-25%, -25%) scale(0.5)');
+            }
+
             mouseEvent('mousemove', scale * pos[0], scale * pos[1]);
             assertHoverLabelContent({
                 nums: content[0],

test/jasmine/tests/choroplethmapbox_test.js

@@ -538,7 +538,6 @@ describe('@noCI Test choroplethmapbox hover:', function() {
         var scale = 1;
         if(hasCssTransform) {
             scale = 0.5;
-            transformPlot(gd, 'translate(-25%, -25%) scale(0.5)');
         }
 
         var fig = Lib.extendDeep({},
@@ -556,6 +555,8 @@ describe('@noCI Test choroplethmapbox hover:', function() {
         var pos = s.pos || [270, 220];
 
         return Plotly.plot(gd, fig).then(function() {
+            if(hasCssTransform) transformPlot(gd, 'translate(-25%, -25%) scale(0.5)');
+
             var to = setTimeout(function() {
                 failTest('no event data received');
                 done();

test/jasmine/tests/polar_test.js

@@ -1746,9 +1746,10 @@ describe('Polar plots with css transforms', function() {
         it('hover behaves correctly after css transform: ' + transform, function(done) {
             var hoverEvents = {};
 
-            transformPlot(gd, transform);
             Plotly.newPlot(gd, Lib.extendDeep({}, mock))
             .then(function() {
+                transformPlot(gd, transform);
+
                 gd.on('plotly_hover', function(d) {
                     hoverEvents[d.points[0].pointIndex] = true;
                 });
@@ -1765,10 +1766,11 @@ describe('Polar plots with css transforms', function() {
         });
 
         it('drag-zoom behaves correctly after css transform: ' + transform, function(done) {
-            transformPlot(gd, transform);
             Plotly.newPlot(gd, Lib.extendDeep({}, mock))
 
             .then(function() {
+                transformPlot(gd, transform);
+
                 return _drag([10, 10], [50, 50]);
             })
             .then(function() {
@@ -1789,9 +1791,10 @@ describe('Polar plots with css transforms', function() {
                 }
             }
 
-            transformPlot(gd, transform);
             Plotly.newPlot(gd, Lib.extendDeep({}, mock))
             .then(function() {
+                transformPlot(gd, transform);
+
                 return Plotly.relayout(gd, 'dragmode', 'select');
             })
             .then(function() { return _drag([30, 30], [130, 130]); })

test/jasmine/tests/scattermapbox_test.js

@@ -1099,8 +1099,9 @@ describe('@noCI Test plotly events on a scattermapbox plot when css transform is
         mockCopy.layout.width = 800;
         mockCopy.layout.height = 500;
 
-        transformPlot(gd, 'translate(-25%, -25%) scale(0.5)');
-        Plotly.plot(gd, mockCopy).then(done);
+        Plotly.plot(gd, mockCopy)
+            .then(function() { transformPlot(gd, 'translate(-25%, -25%) scale(0.5)'); })
+            .then(done);
     });
 
     afterEach(destroyGraphDiv);