adapt polar main drag to dragElement updates (+ tests)

Author: etpinard

src/plots/polar/polar.js

@@ -679,13 +679,10 @@ proto.updateMainDrag = function(fullLayout, polarLayout) {
         dimmed = true;
     }
 
-    function zoomDone(dragged, numClicks) {
+    function zoomDone() {
         dragBox.removeZoombox(gd);
 
-        if(r0 === null || r1 === null) {
-            if(numClicks === 2) doubleClick();
-            return;
-        }
+        if(r0 === null || r1 === null) return;
 
         dragBox.showDoubleClickNotifier(gd);
 
@@ -756,32 +753,16 @@ proto.updateMainDrag = function(fullLayout, polarLayout) {
         }
     }
 
-    function panDone(dragged, numClicks) {
-        if(dragged) {
-            var updateObj = {};
-            updateObj[_this.id + '.angularaxis.rotation'] = rot1;
-            Plotly.relayout(gd, updateObj);
-        } else if(numClicks === 2) {
-            doubleClick();
-        }
+    function panDone() {
+        var updateObj = {};
+        updateObj[_this.id + '.angularaxis.rotation'] = rot1;
+        Plotly.relayout(gd, updateObj);
     }
 
     function zoomWheel() {
         // TODO
     }
 
-    function doubleClick() {
-        gd.emit('plotly_doubleclick', null);
-        // TODO double once vs twice logic (autorange vs fixed range)
-
-        var updateObj = {};
-        for(var k in _this.viewInitial) {
-            updateObj[_this.id + '.' + k] = _this.viewInitial[k];
-        }
-
-        Plotly.relayout(gd, updateObj);
-    }
-
     dragOpts.prepFn = function(evt, startX, startY) {
         var dragModeNow = gd._fullLayout.dragmode;
 
@@ -807,6 +788,23 @@ proto.updateMainDrag = function(fullLayout, polarLayout) {
         }
     };
 
+    dragOpts.clickFn = function(numClicks, evt) {
+        dragBox.removeZoombox(gd);
+
+        // TODO double once vs twice logic (autorange vs fixed range)
+        if(numClicks === 2) {
+            var updateObj = {};
+            for(var k in _this.viewInitial) {
+                updateObj[_this.id + '.' + k] = _this.viewInitial[k];
+            }
+
+            gd.emit('plotly_doubleclick', null);
+            Plotly.relayout(gd, updateObj);
+        }
+
+        Fx.click(gd, evt, _this.id);
+    };
+
     mainDrag.onmousemove = function(evt) {
         Fx.hover(gd, evt, _this.id);
         gd._fullLayout._lasthover = mainDrag;
@@ -818,10 +816,6 @@ proto.updateMainDrag = function(fullLayout, polarLayout) {
         dragElement.unhover(gd, evt);
     };
 
-    mainDrag.onclick = function(evt) {
-        Fx.click(gd, evt, _this.id);
-    };
-
     if(gd._context.scaleZoom) {
         dragBox.attachWheelEventHandler(mainDrag, zoomWheel);
     }

test/jasmine/tests/polar_test.js

@@ -7,6 +7,9 @@ var d3 = require('d3');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var fail = require('../assets/fail_test');
+var mouseEvent = require('../assets/mouse_event');
+var click = require('../assets/click');
+var doubleClick = require('../assets/double_click');
 
 describe('Test legacy polar plots logs:', function() {
     var gd;
@@ -496,3 +499,153 @@ describe('Test relayout on polar subplots:', function() {
         .then(done);
     });
 });
+
+describe('Test polar interactions:', function() {
+    var gd;
+    var eventData;
+    var eventCnts;
+
+    var eventNames = [
+        'plotly_hover', 'plotly_unhover',
+        'plotly_click', 'plotly_doubleclick',
+        'plotly_relayout'
+    ];
+
+    beforeEach(function() {
+        eventData = '';
+        eventCnts = {};
+        gd = createGraphDiv();
+    });
+
+    afterEach(destroyGraphDiv);
+
+    function _plot(fig) {
+        return Plotly.plot(gd, fig).then(function() {
+            eventNames.forEach(function(k) {
+                eventCnts[k] = 0;
+                gd.on(k, function(d) {
+                    eventData = d;
+                    eventCnts[k]++;
+                    Lib.clearThrottle();
+                });
+            });
+        });
+    }
+
+    function assertEventPointData(expected, msg) {
+        var actual = eventData.points || [];
+
+        expect(actual.length)
+            .toBe(expected.length, msg + ' same number of pts');
+
+        expected.forEach(function(e, i) {
+            var a = actual[i];
+            var m = msg + ' (pt ' + i + ')';
+
+            for(var k in e) {
+                expect(a[k]).toBeCloseTo(e[k], 1, m + ' ' + k);
+            }
+        });
+    }
+
+    function assertEventCnt(expected, msg) {
+        eventNames.forEach(function(k) {
+            var m = msg + ' event cnt for ' + k;
+
+            if(k in expected) {
+                expect(eventCnts[k]).toBe(expected[k], m);
+            } else {
+                expect(eventCnts[k]).toBe(0, m);
+            }
+        });
+    }
+
+    function _hover(pos) {
+        eventData = '';
+        mouseEvent('mousemove', pos[0], pos[1]);
+    }
+
+    function _unhover(pos) {
+        eventData = '';
+        mouseEvent('mouseout', pos[0], pos[1]);
+    }
+
+    function _click(pos) {
+        eventData = '';
+        gd._mouseDownTime = 0;
+        click(pos[0], pos[1]);
+    }
+
+    function _doubleClick(pos) {
+        gd._mouseDownTime = 0;
+        eventData = '';
+        return doubleClick(pos[0], pos[1]);
+    }
+
+    it('should trigger hover/unhover/click/doubleclick events', function(done) {
+        var fig = Lib.extendDeep({}, require('@mocks/polar_scatter.json'));
+        var ptPos = [250, 200];
+        var blankPos = [200, 120];
+        var marginPos = [20, 20];
+
+        function _assert(ptExpectation, cntExpecation, msg) {
+            if(Array.isArray(ptExpectation)) {
+                assertEventPointData(ptExpectation, msg);
+            } else {
+                expect(eventData).toBe(ptExpectation, msg);
+            }
+            assertEventCnt(cntExpecation, msg);
+        }
+
+        _plot(fig)
+        .then(function() { _hover(ptPos); })
+        .then(function() {
+            _assert([{
+                r: 3.26,
+                theta: 68.08
+            }], {
+                plotly_hover: 1
+            }, 'after hover on pt');
+        })
+        .then(function() { _unhover(blankPos);})
+        .then(function() {
+            _assert([{
+                r: 3.26,
+                theta: 68.08
+            }], {
+                plotly_hover: 1,
+                plotly_unhover: 1
+            }, 'after unhover off pt');
+        })
+        .then(function() { _hover(marginPos);})
+        .then(function() {
+            _assert('', {
+                plotly_hover: 1,
+                plotly_unhover: 1,
+            }, 'after hovering in margin');
+        })
+        .then(function() { _click(ptPos); })
+        .then(function() {
+            _assert([{
+                r: 3.26,
+                theta: 68.08
+            }], {
+                plotly_hover: 2,
+                plotly_unhover: 1,
+                plotly_click: 1
+            }, 'after click');
+        })
+        .then(function() { return _doubleClick(ptPos); })
+        .then(function() {
+            assertEventCnt({
+                plotly_hover: 2,
+                plotly_unhover: 1,
+                plotly_click: 3,
+                plotly_doubleclick: 1,
+                plotly_relayout: 1
+            }, 'after doubleclick');
+        })
+        .catch(fail)
+        .then(done);
+    });
+});