5291: recalculation of dynamic CSS transforms on hover

src/components/fx/hover.js

@@ -23,6 +23,7 @@ var Color = require('../color');
 var dragElement = require('../dragelement');
 var Axes = require('../../plots/cartesian/axes');
 var Registry = require('../../registry');
+var plotApi = require('../../plot_api/plot_api');
 
 var helpers = require('./helpers');
 var constants = require('./constants');
@@ -339,7 +340,8 @@ function _hover(gd, evt, subplot, noHoverEvent) {
 
             xpx = evt.clientX - dbb.left;
             ypx = evt.clientY - dbb.top;
-
+
+            plotApi.recalculateTransformInverseIfNecessary(gd);
             var transformedCoords = Lib.apply3DTransform(fullLayout._inverseTransform)(xpx, ypx);
 
             xpx = transformedCoords[0];

src/lib/dom.js

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

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.domRectsAreEqual = domModule.domRectsAreEqual;
 
 lib.clearResponsive = require('./clear_responsive');
 

src/plot_api/plot_api.js

@@ -3712,11 +3712,7 @@ function purge(gd) {
 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]);
-    }
+    recalculateTransformInverseIfNecessary(gd);
 
     // Plot container
     fullLayout._container = gd3.selectAll('.plot-container').data([0]);
@@ -3856,9 +3852,25 @@ function makePlotFramework(gd) {
         .style('top', '0px')
         .style('right', '0px');
 
+    fullLayout._lastBBox = gd.getBoundingClientRect();
+
     gd.emit('plotly_framework');
 }
 
+// determines if the graph div requires a recalculation of its inverse matrix transforms by comparing old + new bounding boxes.
+function recalculateTransformInverseIfNecessary(gd, newBBox = null) {
+    gd = Lib.getGraphDiv(gd);
+    var fullLayout = gd._fullLayout;
+    if (!newBBox)
+        newBBox = gd.getBoundingClientRect();
+    if (Lib.domRectsAreEqual(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 = gd.getBoundingClientRect();
+}
+
 exports.animate = animate;
 exports.addFrames = addFrames;
 exports.deleteFrames = deleteFrames;
@@ -3886,4 +3898,6 @@ exports._guiRelayout = guiEdit(relayout);
 exports._guiRestyle = guiEdit(restyle);
 exports._guiUpdate = guiEdit(update);
 
+exports.recalculateTransformInverseIfNecessary = recalculateTransformInverseIfNecessary;
+
 exports._storeDirectGUIEdit = _storeDirectGUIEdit;