plotly_relayouting for polar plots

Author: antoinerg

src/plots/polar/polar.js

@@ -836,6 +836,10 @@ proto.updateMainDrag = function(fullLayout) {
         corners.attr('d', cpath);
         dragBox.transitionZoombox(zb, corners, dimmed, lum);
         dimmed = true;
+
+        var updateObj = {};
+        computeZoomUpdates(updateObj);
+        gd.emit('plotly_relayouting', updateObj);
     }
 
     function zoomMove(dx, dy) {
@@ -889,16 +893,22 @@ proto.updateMainDrag = function(fullLayout) {
         dragBox.removeZoombox(gd);
 
         if(r0 === null || r1 === null) return;
+        var updateObj = {};
+        computeZoomUpdates(updateObj);
 
         dragBox.showDoubleClickNotifier(gd);
 
+        Registry.call('_guiRelayout', gd, updateObj);
+    }
+
+    function computeZoomUpdates(update) {
         var rl = radialAxis._rl;
         var m = (rl[1] - rl[0]) / (1 - innerRadius / radius) / radius;
         var newRng = [
             rl[0] + (r0 - innerRadius) * m,
             rl[0] + (r1 - innerRadius) * m
         ];
-        Registry.call('_guiRelayout', gd, _this.id + '.radialaxis.range', newRng);
+        update[_this.id + '.radialaxis.range'] = newRng;
     }
 
     function zoomClick(numClicks, evt) {
@@ -1236,18 +1246,25 @@ proto.updateAngularDrag = function(fullLayout) {
             clearGlCanvases(gd);
             redrawReglTraces(gd);
         }
-    }
 
-    function doneFn() {
-        scatterTextPoints.select('text').attr('transform', null);
+        var update = {};
+        computeRotationUpdates(update);
+        gd.emit('plotly_relayouting', update);
+    }
 
-        var updateObj = {};
+    function computeRotationUpdates(updateObj) {
         updateObj[_this.id + '.angularaxis.rotation'] = rot1;
 
         if(_this.vangles) {
             updateObj[_this.id + '.radialaxis.angle'] = rrot1;
         }
+    }
 
+    function doneFn() {
+        scatterTextPoints.select('text').attr('transform', null);
+
+        var updateObj = {};
+        computeRotationUpdates(updateObj);
         Registry.call('_guiRelayout', gd, updateObj);
     }
 

test/jasmine/tests/polar_test.js

@@ -1247,6 +1247,70 @@ describe('Test polar interactions:', function() {
             });
         });
     });
+
+    describe('plotly_relayouting', function() {
+        afterEach(destroyGraphDiv);
+
+        ['zoom'].forEach(function(dragmode) {
+            function _drag(p0, dp, nsteps) {
+                var node = d3.select('.polar > .draglayer > .maindrag').node();
+                return drag(node, dp[0], dp[1], null, p0[0], p0[1], nsteps);
+            }
+
+            it('should emit plotly_relayouting events on ' + dragmode, function(done) {
+                var events = []; var path = [[150, 250], [175, 250]]; var relayoutCallback;
+                var fig = Lib.extendDeep({}, require('@mocks/polar_scatter.json'));
+                fig.layout.dragmode = dragmode;
+
+                var gd = createGraphDiv();
+                Plotly.plot(gd, fig)
+                .then(function() {
+                    relayoutCallback = jasmine.createSpy('relayoutCallback');
+                    gd.on('plotly_relayout', relayoutCallback);
+                    gd.on('plotly_relayouting', function(e) {
+                        events.push(e);
+                    });
+                    return _drag(path[0], path[1]);
+                })
+                .then(function() {
+                    expect(events.length).toEqual(path.length - 1);
+                    expect(events[0]['polar.radialaxis.range']).toBeCloseToArray([6, 11], 0.1);
+                    expect(relayoutCallback).toHaveBeenCalledTimes(1);
+                })
+                .catch(failTest)
+                .then(done);
+            });
+        });
+        it('should emit plotly_relayouting events on angular drag', function(done) {
+            var events = []; var relayoutCallback;
+            var fig = Lib.extendDeep({}, require('@mocks/polar_scatter.json'));
+
+            function _drag(p0, dp, nsteps) {
+                var node = d3.select('.polar > .draglayer > .angulardrag').node();
+                return drag(node, dp[0], dp[1], null, p0[0], p0[1], nsteps);
+            }
+
+            var dragPos0 = [360, 180];
+
+            var gd = createGraphDiv();
+            Plotly.plot(gd, fig)
+            .then(function() {
+                relayoutCallback = jasmine.createSpy('relayoutCallback');
+                gd.on('plotly_relayout', relayoutCallback);
+                gd.on('plotly_relayouting', function(e) {
+                    events.push(e);
+                });
+                return _drag(dragPos0, [0, -110], 10);
+            })
+            .then(function() {
+                expect(events.length).toEqual(10);
+                expect(events.splice(-1, 1)[0]['polar.angularaxis.rotation']).toBeCloseTo(29, 0);
+                expect(relayoutCallback).toHaveBeenCalledTimes(1);
+            })
+            .catch(failTest)
+            .then(done);
+        });
+    });
 });
 
 describe('Test polar *gridshape linear* interactions', function() {