first cut Plots.redrag

- setup in a similar way to Plots.rehover
- stash drag dx/dy values on gd._dragdata,
  call drag handler `moveFn` after redraw
- 🔪 gd._replotPending logic !
- 🔪 gd._dragging Promise.reject !

Author: etpinard

src/components/dragelement/index.js

@@ -13,7 +13,6 @@ var mouseOffset = require('mouse-event-offset');
 var hasHover = require('has-hover');
 var supportsPassive = require('has-passive-events');
 
-var Registry = require('../../registry');
 var Lib = require('../../lib');
 
 var constants = require('../../plots/cartesian/constants');
@@ -191,12 +190,21 @@ dragElement.init = function init(options) {
             dragElement.unhover(gd);
         }
 
-        if(gd._dragged && options.moveFn && !rightClick) options.moveFn(dx, dy);
+        if(gd._dragged && options.moveFn && !rightClick) {
+            gd._dragdata = {
+                element: element,
+                dx: dx,
+                dy: dy
+            };
+            options.moveFn(dx, dy);
+        }
 
         return;
     }
 
     function onDone(e) {
+        delete gd._dragdata;
+
         if(options.dragmode !== false) {
             e.preventDefault();
             document.removeEventListener('mousemove', onMove);
@@ -258,10 +266,8 @@ dragElement.init = function init(options) {
             }
         }
 
-        finishDrag(gd);
-
+        gd._dragging = false;
         gd._dragged = false;
-
         return;
     }
 };
@@ -286,11 +292,6 @@ function coverSlip() {
 
 dragElement.coverSlip = coverSlip;
 
-function finishDrag(gd) {
-    gd._dragging = false;
-    if(gd._replotPending) Registry.call('plot', gd);
-}
-
 function pointerOffset(e) {
     return mouseOffset(
         e.changedTouches ? e.changedTouches[0] : e,

src/plot_api/plot_api.js

@@ -139,18 +139,6 @@ exports.plot = function(gd, data, layout, config) {
         gd.layout = helpers.cleanLayout(layout);
     }
 
-    // if the user is trying to drag the axes, allow new data and layout
-    // to come in but don't allow a replot.
-    if(gd._dragging && !gd._transitioning) {
-        // signal to drag handler that after everything else is done
-        // we need to replot, because something has changed
-        gd._replotPending = true;
-        return Promise.reject();
-    } else {
-        // we're going ahead with a replot now
-        gd._replotPending = false;
-    }
-
     Plots.supplyDefaults(gd);
 
     var fullLayout = gd._fullLayout;
@@ -386,6 +374,7 @@ exports.plot = function(gd, data, layout, config) {
         initInteractions,
         Plots.addLinks,
         Plots.rehover,
+        Plots.redrag,
         // TODO: doAutoMargin is only needed here for axis automargin, which
         // happens outside of marginPushers where all the other automargins are
         // calculated. Would be much better to separate margin calculations from
@@ -1404,7 +1393,7 @@ function restyle(gd, astr, val, _traces) {
         seq.push(emitAfterPlot);
     }
 
-    seq.push(Plots.rehover);
+    seq.push(Plots.rehover, Plots.redrag);
 
     Queue.add(gd,
         restyle, [gd, specs.undoit, specs.traces],
@@ -1913,7 +1902,7 @@ function relayout(gd, astr, val) {
         seq.push(emitAfterPlot);
     }
 
-    seq.push(Plots.rehover);
+    seq.push(Plots.rehover, Plots.redrag);
 
     Queue.add(gd,
         relayout, [gd, specs.undoit],
@@ -2446,7 +2435,7 @@ function update(gd, traceUpdate, layoutUpdate, _traces) {
         seq.push(emitAfterPlot);
     }
 
-    seq.push(Plots.rehover);
+    seq.push(Plots.rehover, Plots.redrag);
 
     Queue.add(gd,
         update, [gd, restyleSpecs.undoit, relayoutSpecs.undoit, restyleSpecs.traces],
@@ -2849,7 +2838,7 @@ exports.react = function(gd, data, layout, config) {
             seq.push(emitAfterPlot);
         }
 
-        seq.push(Plots.rehover);
+        seq.push(Plots.rehover, Plots.redrag);
 
         plotDone = Lib.syncOrAsync(seq, gd);
         if(!plotDone || !plotDone.then) plotDone = Promise.resolve(gd);

src/plots/cartesian/dragbox.js

@@ -6,7 +6,6 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var d3 = require('d3');
@@ -38,7 +37,6 @@ var constants = require('./constants');
 var MINDRAG = constants.MINDRAG;
 var MINZOOM = constants.MINZOOM;
 
-
 // flag for showing "doubleclick to zoom out" only at the beginning
 var SHOWZOOMOUTTIP = true;
 
@@ -216,6 +214,20 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
                 }
             }
         }
+
+        gd._fullLayout._redrag = function() {
+            var dragDataNow = gd._dragdata;
+
+            if(dragDataNow && dragDataNow.element === dragger) {
+                var dragModeNow = gd._fullLayout.dragmode;
+
+                if(!isSelectOrLasso(dragModeNow)) {
+                    recomputeAxisLists();
+                    updateSubplots([0, 0, pw, ph]);
+                    dragOptions.moveFn(dragDataNow.dx, dragDataNow.dy);
+                }
+            }
+        };
     };
 
     function clearAndResetSelect() {

src/plots/plots.js

@@ -1679,10 +1679,10 @@ plots.purge = function(gd) {
     // themselves, but may not if there was an error
     delete gd._dragging;
     delete gd._dragged;
+    delete gd._dragdata;
     delete gd._hoverdata;
     delete gd._snapshotInProgress;
     delete gd._editing;
-    delete gd._replotPending;
     delete gd._mouseDownTime;
     delete gd._legendMouseDownTime;
 
@@ -2907,6 +2907,12 @@ plots.rehover = function(gd) {
     }
 };
 
+plots.redrag = function(gd) {
+    if(gd._fullLayout._redrag) {
+        gd._fullLayout._redrag();
+    }
+};
+
 plots.generalUpdatePerTraceModule = function(gd, subplot, subplotCalcData, subplotLayout) {
     var traceHashOld = subplot.traceHash;
     var traceHash = {};

test/jasmine/tests/plot_promise_test.js

@@ -62,32 +62,6 @@ describe('Plotly.___ methods', function() {
         });
     });
 
-    describe('Plotly.plot promise', function() {
-        var gd;
-        var promise;
-        var promiseRejected = false;
-
-        beforeEach(function(done) {
-            var data = [{ x: [1, 2, 3], y: [4, 5, 6] }];
-
-            gd = createGraphDiv();
-
-            gd._dragging = true;
-
-            promise = Plotly.plot(gd, data, {});
-
-            promise.then(null, function() {
-                promiseRejected = true;
-                done();
-            });
-        });
-
-
-        it('should reject the promise when graph is being dragged', function() {
-            expect(promiseRejected).toBe(true);
-        });
-    });
-
     describe('Plotly.redraw promise', function() {
         var promise;
         var promiseGd;

test/jasmine/tests/plots_test.js

@@ -405,10 +405,10 @@ describe('Test Plots', function() {
             // because _dragging and _dragged were not cleared by purge.
             gd._dragging = true;
             gd._dragged = true;
+            gd._dragdata = true;
             gd._hoverdata = true;
             gd._snapshotInProgress = true;
             gd._editing = true;
-            gd._replotPending = true;
             gd._mouseDownTime = true;
             gd._legendMouseDownTime = true;
         });
@@ -427,8 +427,8 @@ describe('Test Plots', function() {
                 'empty', 'fid', 'undoqueue', 'undonum', 'autoplay', 'changed',
                 '_promises', '_redrawTimer', 'firstscatter',
                 '_transitionData', '_transitioning', '_hmpixcount', '_hmlumcount',
-                '_dragging', '_dragged', '_hoverdata', '_snapshotInProgress', '_editing',
-                '_replotPending', '_mouseDownTime', '_legendMouseDownTime'
+                '_dragging', '_dragged', '_dragdata', '_hoverdata', '_snapshotInProgress', '_editing',
+                '_mouseDownTime', '_legendMouseDownTime'
             ];
 
             Plots.purge(gd);