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);