diff --git a/draftlogs/7704_fix.md b/draftlogs/7704_fix.md new file mode 100644 index 00000000000..c7672c90c18 --- /dev/null +++ b/draftlogs/7704_fix.md @@ -0,0 +1 @@ +- Fix visual jumps when zooming/scrolling through plots [[#7704](https://github.com/plotly/plotly.js/pull/7704)] diff --git a/src/plots/cartesian/dragbox.js b/src/plots/cartesian/dragbox.js index f8fa211ad8f..4ae5261becb 100644 --- a/src/plots/cartesian/dragbox.js +++ b/src/plots/cartesian/dragbox.js @@ -467,6 +467,16 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) { return; } + // Store (sub)plot that initiated a scroll + if (gd._currentScrollingSubplot == null) { + gd._currentScrollingSubplot = plotinfo.id; + } + // Early exit to prevent jitters if this subplot didn't initiate the scroll + if (gd._currentScrollingSubplot !== plotinfo.id) { + e.preventDefault(); + return; + } + clearAndResetSelect(); // If a transition is in progress, then disable any behavior: @@ -499,7 +509,8 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) { var axRange = Lib.simpleMap(ax.range, ax.r2l); var v0 = axRange[0] + (axRange[1] - axRange[0]) * centerFraction; function doZoom(v) { return ax.l2r(v0 + (v - v0) * zoom); } - ax.range = axRange.map(doZoom); + ax.range = ax._input.range = axRange.map(doZoom); + ax.setScale(); } if(editX) { @@ -528,6 +539,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) { } // viewbox redraw at first + gd._fullLayout._replotting = true; updateSubplots(scrollViewBox); ticksAndAnnotations(); @@ -537,6 +549,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) { // no more scrolling is coming redrawTimer = setTimeout(function() { if(!gd._fullLayout) return; + gd._currentScrollingSubplot = null; scrollViewBox = [0, 0, pw, ph]; dragTail(); }, REDRAWDELAY); diff --git a/src/plots/plots.js b/src/plots/plots.js index ffbeb132f28..5cce59066f2 100644 --- a/src/plots/plots.js +++ b/src/plots/plots.js @@ -1663,6 +1663,7 @@ plots.purge = function(gd) { delete gd._editing; delete gd._mouseDownTime; delete gd._legendMouseDownTime; + delete gd._currentScrollingSubplot; // remove all event listeners if(gd.removeAllListeners) gd.removeAllListeners();