5291: recalculation of dynamic CSS transforms on hover

src/components/fx/hover.js

@@ -339,7 +339,8 @@ function _hover(gd, evt, subplot, noHoverEvent) {
 
             xpx = evt.clientX - dbb.left;
             ypx = evt.clientY - dbb.top;
-
+
+            fullLayout._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/lib/svg_text_utils.js

@@ -748,6 +748,7 @@ function alignHTMLWith(_base, container, options) {
         var x0 = getLeft() - cRect.left;
         var y0 = getTop() - cRect.top;
         var gd = options.gd || {};
+        gd._fullLayout._recalculateTransformInverseIfNecessary(gd);
         var transformedCoords = Lib.apply3DTransform(gd._fullLayout._inverseTransform)(x0, y0);
         x0 = transformedCoords[0];
         y0 = transformedCoords[1];

src/plot_api/plot_api.js

@@ -3706,17 +3706,29 @@ 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 recalculateTransformInverseIfNecessary(gd, newBBox) {
+    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();
+}
+
 // -------------------------------------------------------
 // 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._recalculateTransformInverseIfNecessary = recalculateTransformInverseIfNecessary;
+    fullLayout._recalculateTransformInverseIfNecessary(gd);
 
     // Plot container
     fullLayout._container = gd3.selectAll('.plot-container').data([0]);
@@ -3856,6 +3868,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._recalculateTransformInverseIfNecessary(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._recalculateTransformInverseIfNecessary(gd);
     var transformedCoords = Lib.apply3DTransform(fullLayout._inverseTransform)(x0, y0);
     x0 = transformedCoords[0];
     y0 = transformedCoords[1];

src/plots/polar/polar.js

@@ -944,6 +944,7 @@ proto.updateMainDrag = function(fullLayout) {
 
         var bbox = mainDrag.getBoundingClientRect();
         var inverse = gd._fullLayout._inverseTransform;
+        gd._fullLayout._recalculateTransformInverseIfNecessary(gd);
         var transformedCoords = Lib.apply3DTransform(inverse)(startX - bbox.left, startY - bbox.top);
         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._recalculateTransformInverseIfNecessary(gd);
         var transformedCoords = Lib.apply3DTransform(inverse)(x0, y0);
         x0 = transformedCoords[0];
         y0 = transformedCoords[1];