Merge pull request #7815 from keilogic/fix-scrollzoom-automargin-jitter

Defer automargin during scroll-wheel zoom

Author: emilykl

draftlogs/7815_fix.md

@@ -0,0 +1 @@
+- Defer automargin during scroll-wheel zoom, to prevent erratic jittering while zooming [[#7815](https://github.com/plotly/plotly.js/pull/7815)], with thanks to @keilogic for the contribution!

src/plots/cartesian/dragbox.js

@@ -487,6 +487,10 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             return;
         }
 
+        // Keep automargin from changing plot size while wheel zoom is still
+        // debouncing. The final dragTail relayout will release this guard.
+        gd._fullLayout._replotting = true;
+
         var zoom = Math.exp(-Math.min(Math.max(wheelDelta, -20), 20) / 200);
         var gbb = mainplot.draglayer.select('.nsewdrag').node().getBoundingClientRect();
         var xfrac = (e.clientX - gbb.left) / gbb.width;

test/jasmine/tests/cartesian_interact_test.js

@@ -4,6 +4,7 @@ var d3SelectAll = require('../../strict-d3').selectAll;
 var Plotly = require('../../../lib/index');
 var Lib = require('../../../src/lib');
 var Axes = require('../../../src/plots/cartesian/axes');
+var Plots = require('../../../src/plots/plots');
 var Drawing = require('../../../src/components/drawing');
 var constants = require('../../../src/plots/cartesian/constants');
 
@@ -691,6 +692,36 @@ describe('axis zoom/pan and main plot zoom', function() {
         .then(done, done.fail);
     });
 
+    it('should defer automargin while zooming via mouse wheel', function(done) {
+        var doAutoMarginSpy;
+        var data = [{y: [0, 12]}];
+        var layout = {
+            width: 500,
+            height: 400,
+            yaxis: {automargin: true}
+        };
+
+        Plotly.newPlot(gd, data, layout, {scrollZoom: true})
+        .then(function() {
+            doAutoMarginSpy = spyOn(Plots, 'doAutoMargin').and.callThrough();
+
+            var dragger = getDragger('xy', 'nsew');
+            var coords = getNodeCoords(dragger, 'se');
+
+            mouseEvent('scroll', coords.x, coords.y, {deltaY: 100, element: dragger});
+
+            expect(gd._fullLayout._replotting).toBe(true);
+            expect(doAutoMarginSpy).not.toHaveBeenCalled();
+
+            return delay(constants.REDRAWDELAY + 10)();
+        })
+        .then(function() {
+            expect(gd._fullLayout._replotting).toBe(false);
+            expect(doAutoMarginSpy).toHaveBeenCalled();
+        })
+        .then(done, done.fail);
+    });
+
     it('handles xy, x-only and y-only zoombox updates', function(done) {
         function _assert(msg, xrng, yrng) {
             expect(gd.layout.xaxis.range).toBeCloseToArray(xrng, 2, 'xrng - ' + msg);