Merge pull request #5407 from rreusser/unhoverfix

Fire unhover when dragging plot
plotly · Jan 26, 2021 · 499c079 · 499c079
2 parents c8e969b + a2f7bd5
commit 499c079
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/src/components/dragelement/index.js b/src/components/dragelement/index.js
@@ -180,7 +180,7 @@ dragElement.init = function init(options) {
 
         if(dx || dy) {
             gd._dragged = true;
-            dragElement.unhover(gd);
+            dragElement.unhover(gd, e);
         }
 
         if(gd._dragged && options.moveFn && !rightClick) {

diff --git a/src/components/dragelement/unhover.js b/src/components/dragelement/unhover.js
@@ -34,7 +34,7 @@ unhover.raw = function raw(gd, evt) {
     var oldhoverdata = gd._hoverdata;
 
     if(!evt) evt = {};
-    if(evt.target &&
+    if(evt.target && !gd._dragged &&
        Events.triggerHandler(gd, 'plotly_beforehover', evt) === false) {
         return;
     }

diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js
@@ -3632,6 +3632,55 @@ describe('hover updates', function() {
         })
         .then(done, done.fail);
     });
+
+    it('drag should trigger unhover', function(done) {
+        var data = [{y: [1]}];
+
+        var layout = {
+            hovermode: 'x',
+            width: 400,
+            height: 200,
+            margin: {l: 0, t: 0, r: 0, b: 0},
+            showlegend: false
+        };
+
+        var gd = createGraphDiv();
+
+        var hoverHandler = jasmine.createSpy('hover');
+        var unhoverHandler = jasmine.createSpy('unhover');
+
+        var hoverPt = [200, 100];
+        var dragPt = [210, 100];
+
+        function hover() {
+            mouseEvent('mousemove', hoverPt[0], hoverPt[1]);
+            Lib.clearThrottle();
+        }
+
+        function drag() {
+            mouseEvent('mousedown', hoverPt[0], hoverPt[1]);
+            mouseEvent('mousemove', dragPt[0], dragPt[1]);
+            mouseEvent('mouseup', dragPt[0], dragPt[1]);
+            Lib.clearThrottle();
+        }
+
+        Plotly.react(gd, data, layout)
+            .then(function() {
+                gd.on('plotly_hover', hoverHandler);
+                gd.on('plotly_unhover', unhoverHandler);
+            })
+            .then(hover)
+            .then(function() {
+                expect(hoverHandler).toHaveBeenCalled();
+                expect(unhoverHandler).not.toHaveBeenCalled();
+            })
+            .then(drag)
+            .then(function() {
+                expect(hoverHandler).toHaveBeenCalled();
+                expect(unhoverHandler).toHaveBeenCalled();
+            })
+            .then(done, done.fail);
+    });
 });
 
 describe('Test hover label custom styling:', function() {