888: fixed cartesian pan

Author: alexhartstone

src/plots/cartesian/dragbox.js

@@ -90,6 +90,9 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
     var hasScatterGl, hasSplom, hasSVG;
     // collected changes to be made to the plot by relayout at the end
     var updates;
+    // scaling factors from css transform
+    var scaleX;
+    var scaleY;
 
     function recomputeAxisLists() {
         xa0 = plotinfo.xaxis;
@@ -161,6 +164,10 @@ 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]);
+
         if(!allFixedRanges) {
             if(isMainDrag) {
                 // main dragger handles all drag modes, and changes
@@ -331,11 +338,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         x0 = transformedCoords[0];
         y0 = transformedCoords[1];
 
-        var m = gd._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]);
-
-        box = {l: x0, r: x0, w: 0, t: y0, b: y0, h: 0, scaleX: scaleX, scaleY: scaleY};
+        box = {l: x0, r: x0, w: 0, t: y0, b: y0, h: 0};
         lum = gd._hmpixcount ?
             (gd._hmlumcount / gd._hmpixcount) :
             tinycolor(gd._fullLayout.plot_bgcolor).getLuminance();
@@ -352,8 +355,8 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             return false;
         }
 
-        var x1 = Math.max(0, Math.min(pw, box.scaleX * dx0 + x0));
-        var y1 = Math.max(0, Math.min(ph, box.scaleY * dy0 + y0));
+        var x1 = Math.max(0, Math.min(pw, scaleX * dx0 + x0));
+        var y1 = Math.max(0, Math.min(ph, scaleY * dy0 + y0));
         var dx = Math.abs(x1 - x0);
         var dy = Math.abs(y1 - y0);
 
@@ -553,6 +556,8 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 
     // plotDrag: move the plot in response to a drag
     function plotDrag(dx, dy) {
+        dx = dx * scaleX;
+        dy = dy * scaleY;
         // If a transition is in progress, then disable any behavior:
         if(gd._transitioningWithDuration) {
             return;