888: assign scales at makePlotFramework

Author: alexhartstone

src/components/fx/hover.js

@@ -192,7 +192,9 @@ exports.loneHover = function loneHover(hoverItems, opts) {
             d.offset -= anchor;
         });
 
-    alignHoverText(hoverLabel, fullOpts.rotateLabels, opts.gd._fullLayout._inverseTransform);
+    var scaleX = opts.gd._fullLayout._inverseScaleX;
+    var scaleY = opts.gd._fullLayout._inverseScaleY;
+    alignHoverText(hoverLabel, fullOpts.rotateLabels, scaleX, scaleY);
 
     return multiHover ? hoverLabel : hoverLabel.node();
 };
@@ -721,10 +723,8 @@ function _hover(gd, evt, subplot, noHoverEvent) {
 
     if(!helpers.isUnifiedHover(hovermode)) {
         hoverAvoidOverlaps(hoverLabels, rotateLabels ? 'xa' : 'ya', fullLayout);
-        alignHoverText(hoverLabels, rotateLabels, fullLayout._inverseTransform);
-    }
-
-    // TODO: tagName hack is needed to appease geo.js's hack of using evt.target=true
+        alignHoverText(hoverLabels, rotateLabels, fullLayout._inverseScaleX, fullLayout._inverseScaleY);
+    }    // TODO: tagName hack is needed to appease geo.js's hack of using evt.target=true
     // we should improve the "fx" API so other plots can use it without these hack.
     if(evt.target && evt.target.tagName) {
         var hasClickToShow = Registry.getComponentMethod('annotations', 'hasClickToShow')(gd, newhoverdata);
@@ -1482,10 +1482,7 @@ function hoverAvoidOverlaps(hoverLabels, axKey, fullLayout) {
     }
 }
 
-function alignHoverText(hoverLabels, rotateLabels, inverseTransform) {
-    var m = inverseTransform;
-    var scaleX = Math.sqrt(m[0][0] * m[0][0] + m[0][1] * m[0][1]);
-    var scaleY = Math.sqrt(m[1][0] * m[1][0] + m[1][1] * m[1][1]);
+function alignHoverText(hoverLabels, rotateLabels, scaleX, scaleY) {
     var pX = function(x) { return x * scaleX; };
     var pY = function(y) { return y * scaleY; };
 

src/plot_api/plot_api.js

@@ -3716,6 +3716,9 @@ function makePlotFramework(gd) {
     var fullLayout = gd._fullLayout;
     if(fullLayout._inverseTransform === undefined) {
         fullLayout._inverseTransform = Lib.inverseTransformMatrix(Lib.getFullTransformMatrix(gd));
+        var m = fullLayout._inverseTransform;
+        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]);
     }
 
     // Plot container

src/plots/cartesian/dragbox.js

@@ -164,9 +164,8 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 
         recomputeAxisLists();
 
-        var m = gd._fullLayout._inverseTransform;
-        scaleX = Math.sqrt(m[0][0] * m[0][0] + m[0][1] * m[0][1]);
-        scaleY = Math.sqrt(m[1][0] * m[1][0] + m[1][1] * m[1][1]);
+        scaleX = gd._fullLayout._inverseScaleX;
+        scaleY = gd._fullLayout._inverseScaleY;
 
         if(!allFixedRanges) {
             if(isMainDrag) {

src/plots/cartesian/select.js

@@ -71,9 +71,8 @@ function prepSelect(e, startX, startY, dragOptions, mode) {
     var transformedCoords = Lib.apply3DTransform(fullLayout._inverseTransform)(x0, y0);
     x0 = transformedCoords[0];
     y0 = transformedCoords[1];
-    var m = fullLayout._inverseTransform;
-    var scaleX = Math.sqrt(m[0][0] * m[0][0] + m[0][1] * m[0][1] + m[0][2] * m[0][2]);
-    var scaleY = Math.sqrt(m[1][0] * m[1][0] + m[1][1] * m[1][1] + m[1][2] * m[1][2]);
+    var scaleX = fullLayout._inverseScaleX;
+    var scaleY = fullLayout._inverseScaleY;
 
     var x1 = x0;
     var y1 = y0;

src/plots/gl3d/scene.js

@@ -296,9 +296,8 @@ proto.render = function() {
     // update size of svg container
     var svgContainer = scene.svgContainer;
     var clientRect = scene.container.getBoundingClientRect();
-    var m = gd._fullLayout._inverseTransform;
-    var scaleX = Math.sqrt(m[0][0] * m[0][0] + m[0][1] * m[0][1]);
-    var scaleY = Math.sqrt(m[1][0] * m[1][0] + m[1][1] * m[1][1]);
+    var scaleX = gd._fullLayout._inverseScaleX;
+    var scaleY = gd._fullLayout._inverseScaleY;
     var width = clientRect.width * scaleX;
     var height = clientRect.height * scaleY;
     svgContainer.setAttributeNS(null, 'viewBox', '0 0 ' + width + ' ' + height);

src/plots/polar/polar.js

@@ -678,9 +678,8 @@ proto.updateMainDrag = function(fullLayout) {
     var chw = constants.cornerHalfWidth;
     var chl = constants.cornerLen / 2;
 
-    var m = gd._fullLayout._inverseTransform;
-    var scaleX = Math.sqrt(m[0][0] * m[0][0] + m[0][1] * m[0][1]);
-    var scaleY = Math.sqrt(m[1][0] * m[1][0] + m[1][1] * m[1][1]);
+    var scaleX = gd._fullLayout._inverseScaleX;
+    var scaleY = gd._fullLayout._inverseScaleY;
 
     var mainDrag = dragBox.makeDragger(layers, 'path', 'maindrag', 'crosshair');
 

src/plots/ternary/ternary.js

@@ -502,6 +502,8 @@ proto.initInteractions = function() {
     var dragger = _this.layers.plotbg.select('path').node();
     var gd = _this.graphDiv;
     var zoomLayer = gd._fullLayout._zoomlayer;
+    var scaleX;
+    var scaleY;
 
     // use plotbg for the main interactions
     this.dragOptions = {
@@ -520,6 +522,9 @@ proto.initInteractions = function() {
             _this.dragOptions.xaxes = [_this.xaxis];
             _this.dragOptions.yaxes = [_this.yaxis];
 
+            scaleX = gd._fullLayout._inverseScaleX;
+            scaleY = gd._fullLayout._inverseScaleY;
+
             var dragModeNow = _this.dragOptions.dragmode = gd._fullLayout.dragmode;
 
             if(freeMode(dragModeNow)) _this.dragOptions.minDrag = 1;
@@ -573,8 +578,13 @@ proto.initInteractions = function() {
 
     function zoomPrep(e, startX, startY) {
         var dragBBox = dragger.getBoundingClientRect();
+        var inverse = gd._fullLayout._inverseTransform;
         x0 = startX - dragBBox.left;
         y0 = startY - dragBBox.top;
+        var transformedCoords = Lib.apply3DTransform(inverse)(x0, y0);
+        x0 = transformedCoords[0];
+        y0 = transformedCoords[1];
+
         mins0 = {
             a: _this.aaxis.range[0],
             b: _this.baxis.range[1],
@@ -614,8 +624,8 @@ proto.initInteractions = function() {
     function getCFrac(x, y) { return ((x - (_this.h - y) / Math.sqrt(3)) / _this.w); }
 
     function zoomMove(dx0, dy0) {
-        var x1 = x0 + dx0;
-        var y1 = y0 + dy0;
+        var x1 = x0 + dx0 * scaleX;
+        var y1 = y0 + dy0 * scaleY;
         var afrac = Math.max(0, Math.min(1, getAFrac(x0, y0), getAFrac(x1, y1)));
         var bfrac = Math.max(0, Math.min(1, getBFrac(x0, y0), getBFrac(x1, y1)));
         var cfrac = Math.max(0, Math.min(1, getCFrac(x0, y0), getCFrac(x1, y1)));