From cc9b69593b0acb41615e932be7a637c2ec869c32 Mon Sep 17 00:00:00 2001 From: dwoznicki Date: Tue, 28 Sep 2021 16:03:16 -0700 Subject: [PATCH 1/7] Fixed a bug where event data in scatter3d charts was always undefined --- src/plots/gl3d/scene.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/plots/gl3d/scene.js b/src/plots/gl3d/scene.js index 174d1b30d52..efc3db97778 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); + gd.emit('plotly_unhover', this.oldEventData); + this.oldEventData = undefined; } scene.drawAnnotations(scene); From 12fc1f74cebb575d6cb480523b70bdc5b809af2d Mon Sep 17 00:00:00 2001 From: dwoznicki Date: Thu, 30 Sep 2021 14:08:56 -0700 Subject: [PATCH 2/7] Added test to make sure gl3d unhover event data is correct --- test/jasmine/tests/gl3d_hover_click_test.js | 71 +++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/test/jasmine/tests/gl3d_hover_click_test.js b/test/jasmine/tests/gl3d_hover_click_test.js index 9359edd2f28..df16bfbcea0 100644 --- a/test/jasmine/tests/gl3d_hover_click_test.js +++ b/test/jasmine/tests/gl3d_hover_click_test.js @@ -550,6 +550,77 @@ describe('Test gl3d trace click/hover:', function() { .then(done, done.fail); }); + fit('@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) { + ptData = eventData.points[0]; + }); + }) + .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); + }); + it('@gl should display correct face colors', function(done) { var fig = mesh3dcoloringMock; From 0ef9afdb241dc498256c277de2108828b9bf19f1 Mon Sep 17 00:00:00 2001 From: dwoznicki Date: Thu, 30 Sep 2021 14:13:13 -0700 Subject: [PATCH 3/7] Removed `fit` to make jasmine run single unhover test --- test/jasmine/tests/gl3d_hover_click_test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/jasmine/tests/gl3d_hover_click_test.js b/test/jasmine/tests/gl3d_hover_click_test.js index df16bfbcea0..f0a97b1381f 100644 --- a/test/jasmine/tests/gl3d_hover_click_test.js +++ b/test/jasmine/tests/gl3d_hover_click_test.js @@ -550,7 +550,7 @@ describe('Test gl3d trace click/hover:', function() { .then(done, done.fail); }); - fit('@gl should emit correct event data on unhover', function(done) { + it('@gl should emit correct event data on unhover', function(done) { var _mock = Lib.extendDeep({}, mock2); var x = 655; var y = 221; From 3ae7ef17dd2d468afa6ec1c96f1ff7e6a724ee20 Mon Sep 17 00:00:00 2001 From: dwoznicki Date: Mon, 4 Oct 2021 11:30:12 -0700 Subject: [PATCH 4/7] WIP Fixed a null pointer in the test, but the underlying issue of unhover being called without even data remains --- test/jasmine/tests/gl3d_hover_click_test.js | 147 ++++++++++---------- 1 file changed, 76 insertions(+), 71 deletions(-) diff --git a/test/jasmine/tests/gl3d_hover_click_test.js b/test/jasmine/tests/gl3d_hover_click_test.js index f0a97b1381f..821a5d452cd 100644 --- a/test/jasmine/tests/gl3d_hover_click_test.js +++ b/test/jasmine/tests/gl3d_hover_click_test.js @@ -550,77 +550,6 @@ describe('Test gl3d trace click/hover:', function() { .then(done, done.fail); }); - 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) { - ptData = eventData.points[0]; - }); - }) - .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); - }); - it('@gl should display correct face colors', function(done) { var fig = mesh3dcoloringMock; @@ -1339,6 +1268,82 @@ 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() { From 46c5b8ff4be062e18d8d3be2c4b49e73d2506a0f Mon Sep 17 00:00:00 2001 From: dwoznicki Date: Mon, 11 Oct 2021 10:46:54 -0700 Subject: [PATCH 5/7] Updated gl3d scene to only fire plotly_unhover event when event data is present --- src/plots/gl3d/scene.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plots/gl3d/scene.js b/src/plots/gl3d/scene.js index efc3db97778..3779cfde67c 100644 --- a/src/plots/gl3d/scene.js +++ b/src/plots/gl3d/scene.js @@ -457,7 +457,7 @@ proto.render = function() { this.oldEventData = eventData; } else { Fx.loneUnhover(svgContainer); - gd.emit('plotly_unhover', this.oldEventData); + if(this.oldEventData) gd.emit('plotly_unhover', this.oldEventData); this.oldEventData = undefined; } From bac873721705e05768047dd6e22cb9b8c0fad3db Mon Sep 17 00:00:00 2001 From: dwoznicki Date: Mon, 11 Oct 2021 10:49:24 -0700 Subject: [PATCH 6/7] Added draftlog --- draftlogs/5954_fix.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 draftlogs/5954_fix.md 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! + From 6d3b3c02f5e98da1518387556b7a91f0dba24901 Mon Sep 17 00:00:00 2001 From: dwoznicki Date: Tue, 12 Oct 2021 10:57:22 -0700 Subject: [PATCH 7/7] Fixed a couple formatting issues in the new test --- test/jasmine/tests/gl3d_hover_click_test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/jasmine/tests/gl3d_hover_click_test.js b/test/jasmine/tests/gl3d_hover_click_test.js index 821a5d452cd..057324d6a65 100644 --- a/test/jasmine/tests/gl3d_hover_click_test.js +++ b/test/jasmine/tests/gl3d_hover_click_test.js @@ -1313,7 +1313,7 @@ describe('Test gl3d trace click/hover:', function() { ptData = eventData.points[0]; }); gd.on('plotly_unhover', function(eventData) { - if (eventData) { + if(eventData) { ptData = eventData.points[0]; } else { ptData = {}; @@ -1343,7 +1343,6 @@ describe('Test gl3d trace click/hover:', function() { }) .then(done, done.fail); }); - }); describe('hover on traces with (x|y|z|u|v|w)hoverformat and valuehoverformat', function() {