Merge pull request #4096 from plotly/gl3d-pick-opacity-depth

Gl3d hover bug fix - pick most recent point if two share identical position

Author: archmoj

package-lock.json

@@ -80,7 +80,7 @@
     "gl-mat4": "^1.2.0",
     "gl-mesh3d": "^2.1.1",
     "gl-plot2d": "^1.4.2",
-    "gl-plot3d": "^2.2.1",
+    "gl-plot3d": "^2.2.2",
     "gl-pointcloud2d": "^1.0.2",
     "gl-scatter3d": "^1.2.2",
     "gl-select-box": "^1.0.3",

package.json

@@ -0,0 +1,107 @@
+{
+    "data": [
+        {
+            "x": [
+                0,
+                1,
+                1,
+                0,
+                0,
+                1,
+                1,
+                0
+            ],
+            "y": [
+                0,
+                0,
+                1,
+                1,
+                0,
+                0,
+                1,
+                1
+            ],
+            "z": [
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+                0
+            ],
+            "text": [
+                "first below",
+                "second below",
+                "third below",
+                "fourth below",
+                "first above",
+                "second above",
+                "third above",
+                "fourth above"
+            ],
+            "type": "scatter3d",
+            "opacity": 0.5,
+            "marker": {
+                "opacity": 0.5,
+                "size": 50
+            }
+        },
+        {
+            "x": [
+                0,
+                1,
+                1,
+                0,
+                0,
+                1,
+                1,
+                0
+            ],
+            "y": [
+                0,
+                0,
+                1,
+                1,
+                0,
+                0,
+                1,
+                1
+            ],
+            "z": [
+                1,
+                1,
+                1,
+                1,
+                1,
+                1,
+                1,
+                1
+            ],
+            "text": [
+                "first below",
+                "second below",
+                "third below",
+                "fourth below",
+                "first above",
+                "second above",
+                "third above",
+                "fourth above"
+            ],
+            "type": "scatter3d",
+            "opacity": 0.5,
+            "marker": {
+                "opacity": 0.5,
+                "size": 50
+            }
+        }
+    ],
+    "layout": {
+        "width": 400,
+        "height": 400,
+        "title": {
+            "text": "hover should generally pick latest<br>points on the same position<br>and display above not below"
+        }
+    }
+}

test/image/baselines/gl3d_transparent_same-depth.png

@@ -24,6 +24,7 @@ mock2.data[0].surfaceaxis = 2;
 mock2.layout.showlegend = true;
 
 var mock3 = require('@mocks/gl3d_autocolorscale');
+var mock4 = require('@mocks/gl3d_transparent_same-depth.json');
 
 describe('Test gl3d trace click/hover:', function() {
     var gd, ptData;
@@ -39,13 +40,16 @@ describe('Test gl3d trace click/hover:', function() {
         destroyGraphDiv();
     });
 
-    function assertHoverText(xLabel, yLabel, zLabel, textLabel) {
+    function assertHoverText(xLabel, yLabel, zLabel, textLabel, traceName) {
         var content = [];
         if(xLabel) content.push(xLabel);
         if(yLabel) content.push(yLabel);
         if(zLabel) content.push(zLabel);
         if(textLabel) content.push(textLabel);
-        assertHoverLabelContent({nums: content.join('\n')});
+        assertHoverLabelContent({
+            name: traceName,
+            nums: content.join('\n')
+        });
     }
 
     function assertEventData(x, y, z, curveNumber, pointNumber, extra) {
@@ -539,4 +543,29 @@ describe('Test gl3d trace click/hover:', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('@gl should pick latest & closest points on hover if two points overlap', function(done) {
+        var _mock = Lib.extendDeep({}, mock4);
+
+        function _hover() {
+            mouseEvent('mouseover', 0, 0);
+            mouseEvent('mouseover', 200, 200);
+        }
+
+        Plotly.plot(gd, _mock)
+        .then(delay(20))
+        .then(function() {
+            gd.on('plotly_hover', function(eventData) {
+                ptData = eventData.points[0];
+            });
+        })
+        .then(delay(20))
+        .then(_hover)
+        .then(delay(20))
+        .then(function() {
+            assertHoverText('x: 1', 'y: 1', 'z: 1', 'third above', 'trace 1');
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });