test dynamic axis ranging with and without constraints

plus a couple small bugfixes encountered in the process

Author: alexcjohnson

src/plot_api/plot_api.js

@@ -153,10 +153,6 @@ Plotly.plot = function(gd, data, layout, config) {
         makePlotFramework(gd);
     }
 
-    // save initial axis range once per graph
-    if(graphWasEmpty) Plotly.Axes.saveRangeInitial(gd);
-
-
     // prepare the data and find the autorange
 
     // generate calcdata, if we need to
@@ -272,6 +268,10 @@ Plotly.plot = function(gd, data, layout, config) {
         }
 
         enforceAxisConstraints(gd);
+
+        // store initial ranges *after* enforcing constraints, otherwise
+        // we will never look like we're at the initial ranges
+        if(graphWasEmpty) Plotly.Axes.saveRangeInitial(gd);
     }
 
     // draw ticks, titles, and calculate axis scaling (._b, ._m)

src/plots/cartesian/constraints.js

@@ -67,17 +67,7 @@ module.exports = function enforceAxisConstraints(gd) {
             normScale = normScales[axisID];
 
             if(normScale !== matchScale) {
-                ax = axes[axisID];
-                // if range matches _rangeInitial before the constraint is applied,
-                // change _rangeInitial to the new range - otherwise a doubleclick
-                // will never autorange because we're not starting at the reset point.
-                var wasAtInitial = (ax._rangeInitial &&
-                    ax.range[0] === ax._rangeInitial[0] &&
-                    ax.range[1] === ax._rangeInitial[1]);
-
-                scaleZoom(ax, normScale / matchScale);
-
-                if(wasAtInitial) ax._rangeInitial = ax.range.slice();
+                scaleZoom(axes[axisID], normScale / matchScale);
             }
         }
     }

src/plots/cartesian/dragbox.js

@@ -151,6 +151,12 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             if(dragModeNow === 'zoom') {
                 dragOptions.moveFn = zoomMove;
                 dragOptions.doneFn = zoomDone;
+
+                // zoomMove takes care of the threshold, but we need to
+                // minimize this so that constrained zoom boxes will flip
+                // orientation at the right place
+                dragOptions.minDrag = 1;
+
                 zoomPrep(e, startX, startY);
             }
             else if(dragModeNow === 'pan') {

test/image/mocks/axes_scaleanchor.json

@@ -12,7 +12,7 @@
     "xaxis": {"nticks": 10, "domain": [0, 0.45], "title": "shared X axis"},
     "yaxis": {"scaleanchor": "x", "domain": [0, 0.45], "title": "1:1"},
     "yaxis2": {"scaleanchor": "x", "scaleratio": 0.2, "domain": [0.55,1], "title": "1:5"},
-    "xaxis2": {"type": "log", "domain": [0.55, 1], "title": "unconstrained log X"},
+    "xaxis2": {"type": "log", "domain": [0.55, 1], "anchor": "y3", "title": "unconstrained log X"},
     "yaxis3": {"domain": [0, 0.45], "anchor": "x2", "title": "Scale matches ->"},
     "yaxis4": {"scaleanchor": "y3", "domain": [0.55, 1], "anchor": "x2", "title": "Scale matches <-"},
     "showlegend": false

test/jasmine/assets/double_click.js

@@ -1,7 +1,19 @@
 var click = require('./click');
+var getNodeCoords = require('./get_node_coords');
 var DBLCLICKDELAY = require('@src/constants/interactions').DBLCLICKDELAY;
 
+/*
+ * double click on a point.
+ * you can either specify x,y as pixels, or
+ * you can specify node and optionally an edge ('n', 'se', 'w' etc)
+ * to grab it by an edge or corner (otherwise the middle is used)
+ */
 module.exports = function doubleClick(x, y) {
+    if(typeof x === 'object') {
+        var coords = getNodeCoords(x, y);
+        x = coords.x;
+        y = coords.y;
+    }
     return new Promise(function(resolve) {
         click(x, y);
 

test/jasmine/assets/drag.js

@@ -1,4 +1,5 @@
-var mouseEvent = require('../assets/mouse_event');
+var mouseEvent = require('./mouse_event');
+var getNodeCoords = require('./get_node_coords');
 
 /*
  * drag: grab a node and drag it (dx, dy) pixels
@@ -7,21 +8,12 @@ var mouseEvent = require('../assets/mouse_event');
  */
 module.exports = function(node, dx, dy, edge) {
 
-    edge = edge || '';
-    var bbox = node.getBoundingClientRect(),
-        fromX, fromY;
+    var coords = getNodeCoords(node, edge);
+    var fromX = coords.x;
+    var fromY = coords.y;
 
-    if(edge.indexOf('n') !== -1) fromY = bbox.top;
-    else if(edge.indexOf('s') !== -1) fromY = bbox.bottom;
-    else fromY = (bbox.bottom + bbox.top) / 2;
-
-    if(edge.indexOf('w') !== -1) fromX = bbox.left;
-    else if(edge.indexOf('e') !== -1) fromX = bbox.right;
-    else fromX = (bbox.left + bbox.right) / 2;
-
-
-    var toX = fromX + dx,
-        toY = fromY + dy;
+    var toX = fromX + dx;
+    var toY = fromY + dy;
 
     mouseEvent('mousemove', fromX, fromY, {element: node});
     mouseEvent('mousedown', fromX, fromY, {element: node});

test/jasmine/assets/get_node_coords.js

@@ -0,0 +1,20 @@
+/*
+ * get the pixel coordinates of a node on screen
+ * optionally specify an edge ('n', 'se', 'w' etc)
+ * to return an edge or corner (otherwise the middle is used)
+ */
+module.exports = function(node, edge) {
+    edge = edge || '';
+    var bbox = node.getBoundingClientRect(),
+        x, y;
+
+    if(edge.indexOf('n') !== -1) y = bbox.top;
+    else if(edge.indexOf('s') !== -1) y = bbox.bottom;
+    else y = (bbox.bottom + bbox.top) / 2;
+
+    if(edge.indexOf('w') !== -1) x = bbox.left;
+    else if(edge.indexOf('e') !== -1) x = bbox.right;
+    else x = (bbox.left + bbox.right) / 2;
+
+    return {x: x, y: y};
+};

test/jasmine/assets/mouse_event.js

@@ -14,7 +14,7 @@ module.exports = function(type, x, y, opts) {
         ev;
 
     if(type === 'scroll') {
-        ev = new window.WheelEvent('wheel', opts);
+        ev = new window.WheelEvent('wheel', Object.assign({}, fullOpts, opts));
     } else {
         ev = new window.MouseEvent(type, fullOpts);
     }