🔪 2*MINDRAG requirement for zoomboxes to lead to relayout

- this requirement can lead to visible 1d or 2d zoomboxes
  that do not lead to an axis range relayout, leading to
  confusing behaviour
- lock this down in a test making sure small zoomboxes lead are
  followed by relayout calls.

Author: etpinard

src/plots/cartesian/dragbox.js

@@ -429,14 +429,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
     }
 
     function zoomDone() {
-        // more strict than dragged, which allows you to come back to where you started
-        // and still count as dragged
-        if(Math.min(box.h, box.w) < MINDRAG * 2) {
-            return removeZoombox(gd);
-        }
-
         computeZoomUpdates();
-
         removeZoombox(gd);
         dragTail();
         showDoubleClickNotifier(gd);

test/jasmine/tests/cartesian_interact_test.js

@@ -1914,6 +1914,66 @@ describe('axis zoom/pan and main plot zoom', function() {
             .then(done);
         });
     });
+
+    it('zoomboxes during small drag motions', function(done) {
+        var MINDRAG = constants.MINDRAG;
+        var eventData = {};
+
+        function _run(msg, dpos, exp) {
+            return function() {
+                var node = getDragger('xy', 'nsew');
+                var fns = drag.makeFns({node: node, pos0: [200, 200], dpos: dpos});
+
+                return fns.start().then(function() {
+                    var zl = d3.select(gd).select('g.zoomlayer');
+                    var d = zl.select('.zoombox-corners').attr('d');
+                    if(exp === 'nozoom') {
+                        expect(d).toBe('M0,0Z', 'blank path | ' + msg);
+                    } else {
+                        var actual = (d.match(/Z/g) || []).length;
+                        if(exp === 'x-zoom' || exp === 'y-zoom') {
+                            expect(actual).toBe(2, 'two corners | ' + msg);
+                        } else if(exp === 'xy-zoom') {
+                            expect(actual).toBe(4, 'four corners | ' + msg);
+                        } else {
+                            fail('wrong expectation str.');
+                        }
+                    }
+                })
+                .then(fns.end)
+                .then(function() {
+                    var keys = Object.keys(eventData);
+                    if(exp === 'nozoom') {
+                        expect(keys.length).toBe(0, 'no event data | ' + msg);
+                    } else if(exp === 'x-zoom') {
+                        expect(keys).withContext('relayout xaxis rng | ' + msg)
+                            .toEqual(['xaxis.range[0]', 'xaxis.range[1]']);
+                    } else if(exp === 'y-zoom') {
+                        expect(keys).withContext('relayout yaxis rng | ' + msg)
+                            .toEqual(['yaxis.range[0]', 'yaxis.range[1]']);
+                    } else if(exp === 'xy-zoom') {
+                        expect(keys.length).toBe(4, 'x and y relayout | ' + msg);
+                    } else {
+                        fail('wrong expectation str.');
+                    }
+                    eventData = {};
+                });
+            };
+        }
+
+        Plotly.plot(gd, [{y: [1, 2, 1]}], {width: 400, height: 400})
+        .then(function() {
+            gd.on('plotly_relayout', function(d) { eventData = d; });
+        })
+        .then(_run('dx < MINDRAG', [MINDRAG - 2, 0], 'nozoom'))
+        .then(_run('dx > MINDRAG', [MINDRAG + 2, 0], 'x-zoom'))
+        .then(_run('dy < MINDRAG', [0, MINDRAG - 2], 'nozoom'))
+        .then(_run('dy > MINDRAG', [0, MINDRAG + 2], 'y-zoom'))
+        .then(_run('(dx,dy) < MINDRAG', [MINDRAG - 2, MINDRAG - 2], 'nozoom'))
+        .then(_run('(dx,dy) > MINDRAG', [MINDRAG + 2, MINDRAG + 2], 'xy-zoom'))
+        .catch(failTest)
+        .then(done);
+    });
 });
 
 describe('Event data:', function() {