plotly_relayouting for cartesian plots

Author: antoinerg

src/plots/cartesian/dragbox.js

@@ -85,7 +85,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
     // graph-wide optimization flags
     var hasScatterGl, hasSplom, hasSVG;
     // collected changes to be made to the plot by relayout at the end
-    var updates;
+    var updates = {};
 
     function recomputeAxisLists() {
         xa0 = plotinfo.xaxis;
@@ -409,18 +409,12 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         gd._dragged = zoomDragged;
 
         updateZoombox(zb, corners, box, path0, dimmed, lum);
+        computeZoomUpdates();
+        gd.emit('plotly_relayouting', updates);
         dimmed = true;
     }
 
-    function zoomDone() {
-        updates = {};
-
-        // 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);
-        }
-
+    function computeZoomUpdates() {
         // TODO: edit linked axes in zoomAxRanges and in dragTail
         if(zoomMode === 'xy' || zoomMode === 'x') {
             zoomAxRanges(xaxes, box.l / pw, box.r / pw, updates, links.xaxes);
@@ -430,6 +424,18 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             zoomAxRanges(yaxes, (ph - box.b) / ph, (ph - box.t) / ph, updates, links.yaxes);
             updateMatchedAxRange('y', updates);
         }
+    }
+
+    function zoomDone() {
+        updates = {};
+
+        // 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();
@@ -515,6 +521,8 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         updateSubplots(scrollViewBox);
         ticksAndAnnotations();
 
+        gd.emit('plotly_relayouting', updates);
+
         // then replot after a delay to make sure
         // no more scrolling is coming
         redrawTimer = setTimeout(function() {
@@ -552,6 +560,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             }
             updateSubplots([xActive ? -dx : 0, yActive ? -dy : 0, pw, ph]);
             ticksAndAnnotations();
+            gd.emit('plotly_relayouting', updates);
             return;
         }
 
@@ -626,6 +635,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         updateMatchedAxRange('y');
         updateSubplots([xStart, yStart, pw - dx, ph - dy]);
         ticksAndAnnotations();
+        gd.emit('plotly_relayouting', updates);
     }
 
     function updateMatchedAxRange(axLetter, out) {

test/jasmine/tests/cartesian_interact_test.js

@@ -188,6 +188,48 @@ describe('main plot pan', function() {
         .then(done);
     });
 
+    it('should emit plotly_relayouting events during pan interactions', function(done) {
+        var mock = require('@mocks/10.json');
+
+        function _drag(x0, y0, x1, y1, n) {
+            mouseEvent('mousedown', x0, y0);
+            var dx = (x1 - x0) / n;
+            var dy = (y1 - y0) / n;
+            for(var i = 0; i <= n; i++) {
+                mouseEvent('mousemove', x0 + dx * i, y0 + dy * i);
+            }
+            mouseEvent('mouseup', x1, y1);
+        }
+
+        var nsteps = 10; var events = []; var relayoutCallback;
+        Plotly.plot(gd, mock.data, mock.layout).then(function() {
+            // Switch to pan mode
+            modeBar = gd._fullLayout._modeBar;
+            var buttonPan = selectButton(modeBar, 'pan2d');
+            buttonPan.click();
+            expect(buttonPan.isActive()).toBe(true); // switched on dragmode
+        })
+        .then(function() {
+            relayoutCallback = jasmine.createSpy('relayoutCallback');
+            gd.on('plotly_relayout', relayoutCallback);
+            gd.on('plotly_relayouting', function(e) {
+                events.push(e);
+            });
+            _drag(100, 150, 220, 250, nsteps);
+        })
+        .then(function() {
+            expect(events.length).toEqual(nsteps);
+            var first = events.splice(0, 1)[0];
+            var last = events.splice(-1, 1)[0];
+            expect(first['xaxis.range[1]'] - first['xaxis.range[0]']).toBeCloseTo(6, 0);
+            expect(last['xaxis.range[1]'] - last['xaxis.range[0]']).toBeCloseTo(6, 0);
+
+            expect(first['xaxis.range[1]'] - last['xaxis.range[1]']).toBeCloseTo(1, 0);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
     it('should show/hide `cliponaxis: false` pts according to range', function(done) {
         function _assert(markerDisplay, textDisplay, barTextDisplay) {
             var gd3 = d3.select(gd);
@@ -289,10 +331,10 @@ describe('axis zoom/pan and main plot zoom', function() {
         return document.querySelector('.' + directions + 'drag[data-subplot="' + subplot + '"]');
     }
 
-    function doDrag(subplot, directions, dx, dy) {
+    function doDrag(subplot, directions, dx, dy, nsteps) {
         return function() {
             var dragger = getDragger(subplot, directions);
-            return drag(dragger, dx, dy);
+            return drag(dragger, dx, dy, undefined, undefined, undefined, nsteps);
         };
     }
 
@@ -311,7 +353,11 @@ describe('axis zoom/pan and main plot zoom', function() {
             var dy = opts.dy || 0;
             var dragger = getDragger(subplot, directions);
             var coords = getNodeCoords(dragger, edge);
-            mouseEvent('scroll', coords.x + dx, coords.y + dy, {deltaY: deltaY, element: dragger});
+            var nsteps = opts.nsteps || 1;
+
+            for(var i = 1; i <= nsteps; i++) {
+                mouseEvent('scroll', coords.x + dx, coords.y + dy, {deltaY: deltaY / nsteps * i, element: dragger});
+            }
             return delay(constants.REDRAWDELAY + 10)();
         };
     }
@@ -629,6 +675,44 @@ describe('axis zoom/pan and main plot zoom', function() {
         .then(done);
     });
 
+    it('should emit plotly_relayouting events when drawing zoom selection', function(done) {
+        var nsteps = 10; var events = []; var relayoutCallback;
+        Plotly.plot(gd, [{ y: [1, 2, 1] }])
+        .then(function() {
+            relayoutCallback = jasmine.createSpy('relayoutCallback');
+            gd.on('plotly_relayout', relayoutCallback);
+            gd.on('plotly_relayouting', function(e) {
+                events.push(e);
+            });
+        })
+        .then(doDrag('xy', 'nsew', 100, 100, nsteps))
+        .then(function() {
+            expect(events.length).toEqual(nsteps);
+            expect(relayoutCallback).toHaveBeenCalledTimes(1);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
+    it('should emit plotly_relayouting events when zooming via mouse wheel', function(done) {
+        var nsteps = 10; var events = []; var relayoutCallback;
+        Plotly.plot(gd, [{ y: [1, 2, 1] }], {}, {scrollZoom: true})
+        .then(function() {
+            relayoutCallback = jasmine.createSpy('relayoutCallback');
+            gd.on('plotly_relayout', relayoutCallback);
+            gd.on('plotly_relayouting', function(e) {
+                events.push(e);
+            });
+        })
+        .then(doScroll('xy', 'nsew', 100, {edge: 'se', nsteps: nsteps}))
+        .then(function() {
+            expect(events.length).toEqual(nsteps);
+            expect(relayoutCallback).toHaveBeenCalledTimes(1);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
     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);