diff --git a/package-lock.json b/package-lock.json index e526e0f1af1..7ee7469551e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4975,9 +4975,9 @@ } }, "gl-plot3d": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/gl-plot3d/-/gl-plot3d-2.4.3.tgz", - "integrity": "sha512-CNLB48l1L0EFmf27CvsQzSIqMVDdXeuj/WZeKRHutmx+IeeJF1ueIhYZYzhhTFd5x+/vrVc3fzis33PthTlItQ==", + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/gl-plot3d/-/gl-plot3d-2.4.4.tgz", + "integrity": "sha512-R/V4hSrE2sFD+Xls7D6qCOlWCRmqtUff0sKbeFJdI91HfFzPJPiy9Pqa/Jh2UsvdmwkkSQPNDcBvLd6TvhRC/g==", "requires": { "3d-view": "^2.0.0", "a-big-triangle": "^1.0.3", diff --git a/package.json b/package.json index 33e74b782f9..1ff6cc4a00a 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "gl-mat4": "^1.2.0", "gl-mesh3d": "^2.3.0", "gl-plot2d": "^1.4.3", - "gl-plot3d": "^2.4.3", + "gl-plot3d": "^2.4.4", "gl-pointcloud2d": "^1.0.2", "gl-scatter3d": "^1.2.2", "gl-select-box": "^1.0.3", diff --git a/test/jasmine/tests/gl3d_hover_click_test.js b/test/jasmine/tests/gl3d_hover_click_test.js index 0609080f663..57f74f1b03f 100644 --- a/test/jasmine/tests/gl3d_hover_click_test.js +++ b/test/jasmine/tests/gl3d_hover_click_test.js @@ -750,6 +750,161 @@ describe('Test gl3d trace click/hover:', function() { .then(done); }); + function scroll(target, amt) { + return new Promise(function(resolve) { + target.dispatchEvent(new WheelEvent('wheel', {deltaY: amt || 1, cancelable: true})); + setTimeout(resolve, 0); + }); + } + + var _scroll = function() { + var sceneTarget = gd.querySelector('.svg-container .gl-container #scene canvas'); + return scroll(sceneTarget, -1); + }; + + it('@gl should pick correct points after orthographic scroll zoom - mesh3d case', function(done) { + var fig = { + data: [{ + x: [0, 1, 0, 1, 0, 1, 0, 1], + y: [0, 0, 1, 1, 0, 0, 1, 1], + z: [0, 0, 0, 0, 1, 1, 1, 1], + i: [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7], + j: [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3], + k: [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2], + vertexcolor: ['#000', '#00F', '#0F0', '#0FF', '#F00', '#F0F', '#FF0', '#FFF'], + hovertemplate: 'x: %{x}
y: %{y}
z: %{z}
vertex color: %{vertexcolor}', + flatshading: true, + type: 'mesh3d', + name: 'vertex color' + }], + layout: { + width: 600, + height: 400, + scene: { + camera: { + projection: { type: 'orthographic' }, + eye: { x: 1, y: 1, z: 1 } + } + } + }, + config: { + scrollZoom: 'gl3d' + } + }; + + Plotly.newPlot(gd, fig) + .then(delay(20)) + .then(function() { mouseEvent('mouseover', 300, 200); }) + .then(delay(20)) + .then(function() { + assertHoverText( + 'x: 1', + 'y: 1', + 'z: 1', + 'vertex color: #FFF', + 'vertex color' + ); + }) + .then(_scroll) + .then(_scroll) + .then(delay(20)) + .then(function() { mouseEvent('mouseover', 300, 100); }) + .then(delay(20)) + .then(function() { + assertHoverText( + 'x: 0', + 'y: 0', + 'z: 1', + 'vertex color: #F00', + 'vertex color' + ); + }) + .then(delay(20)) + .then(function() { mouseEvent('mouseover', 300, 300); }) + .then(delay(20)) + .then(function() { + assertHoverText( + 'x: 1', + 'y: 1', + 'z: 0', + 'vertex color: #0FF', + 'vertex color' + ); + }) + .catch(failTest) + .then(done); + }); + + it('@gl should pick correct points after orthographic scroll zoom - scatter3d case', function(done) { + var fig = { + data: [{ + x: [0, 1, 0, 1, 0, 1, 0, 1], + y: [0, 0, 1, 1, 0, 0, 1, 1], + z: [0, 0, 0, 0, 1, 1, 1, 1], + marker: { color: ['#000', '#00F', '#0F0', '#0FF', '#F00', '#F0F', '#FF0', '#FFF'] }, + hovertemplate: 'x: %{x}
y: %{y}
z: %{z}
marker color: %{marker.color}', + type: 'scatter3d', + mode: 'marker', + name: 'marker color' + }], + layout: { + width: 600, + height: 400, + scene: { + camera: { + projection: { type: 'orthographic' }, + eye: { x: 1, y: 1, z: 1 } + } + } + }, + config: { + scrollZoom: 'gl3d' + } + }; + + Plotly.newPlot(gd, fig) + .then(delay(20)) + .then(function() { mouseEvent('mouseover', 300, 200); }) + .then(delay(20)) + .then(function() { + assertHoverText( + 'x: 1', + 'y: 1', + 'z: 1', + 'marker color: #FFF', + 'marker color' + ); + }) + .then(_scroll) + .then(_scroll) + .then(delay(20)) + .then(function() { mouseEvent('mouseover', 300, 100); }) + .then(delay(20)) + .then(function() { + assertHoverText( + 'x: 0', + 'y: 0', + 'z: 1', + 'marker color: #F00', + 'marker color' + ); + }) + .then(delay(20)) + .then(function() { mouseEvent('mouseover', 300, 300); }) + .then(delay(20)) + .then(function() { + assertHoverText( + 'x: 1', + 'y: 1', + 'z: 0', + 'marker color: #0FF', + 'marker color' + ); + }) + .catch(failTest) + .then(done); + }); + it('@gl should pick latest & closest points on hover if two points overlap', function(done) { var _mock = Lib.extendDeep({}, mock4);