Merge pull request #5954 from dwoznicki/fix-scatter3d-unhover

Fix unhover event data for gl3d subplots

Author: archmoj

draftlogs/5954_fix.md

@@ -0,0 +1,3 @@
+ - Fix unhover event data for gl3d subplots [[#5954](https://github.com/plotly/plotly.js/pull/5954)],
+   with thanks to @dwoznicki for the contribution!
+

src/plots/gl3d/scene.js

@@ -332,8 +332,6 @@ proto.render = function() {
         return Axes.hoverLabelText(ax, val, hoverformat);
     }
 
-    var oldEventData;
-
     if(lastPicked !== null) {
         var pdata = project(scene.glplot.cameraParams, selection.dataCoordinate);
         trace = lastPicked.data;
@@ -456,10 +454,11 @@ proto.render = function() {
             gd.emit('plotly_hover', eventData);
         }
 
-        oldEventData = eventData;
+        this.oldEventData = eventData;
     } else {
         Fx.loneUnhover(svgContainer);
-        gd.emit('plotly_unhover', oldEventData);
+        if(this.oldEventData) gd.emit('plotly_unhover', this.oldEventData);
+        this.oldEventData = undefined;
     }
 
     scene.drawAnnotations(scene);

test/jasmine/tests/gl3d_hover_click_test.js

@@ -1268,6 +1268,81 @@ describe('Test gl3d trace click/hover:', function() {
             });
         });
     });
+
+    it('@gl should emit correct event data on unhover', function(done) {
+        var _mock = Lib.extendDeep({}, mock2);
+        var x = 655;
+        var y = 221;
+
+        function _hover() {
+            mouseEvent('mouseover', x, y);
+        }
+
+        function _unhover() {
+            return new Promise(function(resolve) {
+                var x0 = x;
+                var y0 = y;
+                var initialElement = document.elementFromPoint(x0, y0);
+                var canceler = setInterval(function() {
+                    x0 -= 2;
+                    y0 -= 2;
+                    mouseEvent('mouseover', x0, y0);
+
+                    var nowElement = document.elementFromPoint(x0, y0);
+                    if(nowElement !== initialElement) {
+                        mouseEvent('mouseout', x0, y0, {element: initialElement});
+                    }
+                }, 10);
+
+                gd.on('plotly_unhover', function(eventData) {
+                    clearInterval(canceler);
+                    resolve(eventData);
+                });
+
+                setTimeout(function() {
+                    clearInterval(canceler);
+                    resolve(null);
+                }, 350);
+            });
+        }
+
+        Plotly.newPlot(gd, _mock)
+        .then(delay(20))
+        .then(function() {
+            gd.on('plotly_hover', function(eventData) {
+                ptData = eventData.points[0];
+            });
+            gd.on('plotly_unhover', function(eventData) {
+                if(eventData) {
+                    ptData = eventData.points[0];
+                } else {
+                    ptData = {};
+                }
+            });
+        })
+        .then(delay(20))
+        .then(_hover)
+        .then(delay(20))
+        .then(function() {
+            assertEventData(100.75, -102.63, -102.63, 0, 0, {
+                'marker.symbol': 'circle',
+                'marker.size': 10,
+                'marker.color': 'blue',
+                'marker.line.color': 'black'
+            });
+        })
+        .then(_unhover)
+        .then(delay(20))
+        .then(function() {
+            assertEventData(100.75, -102.63, -102.63, 0, 0, {
+                'marker.symbol': 'circle',
+                'marker.size': 10,
+                'marker.color': 'blue',
+                'marker.line.color': 'black'
+            });
+        })
+        .then(done, done.fail);
+    });
 });
 
 describe('hover on traces with (x|y|z|u|v|w)hoverformat and valuehoverformat', function() {