diff --git a/draftlogs/5954_fix.md b/draftlogs/5954_fix.md new file mode 100644 index 00000000000..3761cc72fb5 --- /dev/null +++ b/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! + diff --git a/src/plots/gl3d/scene.js b/src/plots/gl3d/scene.js index 174d1b30d52..3779cfde67c 100644 --- a/src/plots/gl3d/scene.js +++ b/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); diff --git a/test/jasmine/tests/gl3d_hover_click_test.js b/test/jasmine/tests/gl3d_hover_click_test.js index 9359edd2f28..057324d6a65 100644 --- a/test/jasmine/tests/gl3d_hover_click_test.js +++ b/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() {