sort gl3d primitive object on updates

- ensuring that visibility toggles don't
  reorder the traces

Author: etpinard

src/plots/gl3d/scene.js

@@ -419,6 +419,11 @@ proto.plot = function(sceneData, fullLayout, layout) {
         delete this.traces[traceIds[i]];
     }
 
+    // order object per trace index
+    this.glplot.objects.sort(function(a, b) {
+        return a._trace.data.index - b._trace.data.index;
+    });
+
     // Update ranges (needs to be called *after* objects are added due to updates)
     var sceneBounds = [[0, 0, 0], [0, 0, 0]],
         axisDataRange = [],

src/traces/mesh3d/convert.js

@@ -152,6 +152,7 @@ function createMesh3DTrace(scene, data) {
     var gl = scene.glplot.gl;
     var mesh = createMesh({gl: gl});
     var result = new Mesh3DTrace(scene, mesh, data.uid);
+    mesh._trace = result;
     result.update(data);
     scene.glplot.add(mesh);
     return result;

src/traces/scatter3d/convert.js

@@ -314,6 +314,7 @@ proto.update = function(data) {
         if(this.linePlot) this.linePlot.update(lineOptions);
         else {
             this.linePlot = createLinePlot(lineOptions);
+            this.linePlot._trace = this;
             this.scene.glplot.add(this.linePlot);
         }
     } else if(this.linePlot) {
@@ -345,6 +346,7 @@ proto.update = function(data) {
         if(this.scatterPlot) this.scatterPlot.update(scatterOptions);
         else {
             this.scatterPlot = createScatterPlot(scatterOptions);
+            this.scatterPlot._trace = this;
             this.scatterPlot.highlightScale = 1;
             this.scene.glplot.add(this.scatterPlot);
         }
@@ -375,6 +377,7 @@ proto.update = function(data) {
         if(this.textMarkers) this.textMarkers.update(textOptions);
         else {
             this.textMarkers = createScatterPlot(textOptions);
+            this.textMarkers._trace = this;
             this.textMarkers.highlightScale = 1;
             this.scene.glplot.add(this.textMarkers);
         }
@@ -403,6 +406,7 @@ proto.update = function(data) {
         }
     } else if(options.errorBounds) {
         this.errorBars = createErrorBars(errorOptions);
+        this.errorBars._trace = this;
         this.scene.glplot.add(this.errorBars);
     }
 
@@ -419,6 +423,7 @@ proto.update = function(data) {
         } else {
             delaunayOptions.gl = gl;
             this.delaunayMesh = createMesh(delaunayOptions);
+            this.delaunayMesh._trace = this;
             this.scene.glplot.add(this.delaunayMesh);
         }
     } else if(this.delaunayMesh) {

src/traces/surface/convert.js

@@ -368,6 +368,7 @@ function createSurfaceTrace(scene, data) {
     var gl = scene.glplot.gl;
     var surface = createSurface({ gl: gl });
     var result = new SurfaceTrace(scene, surface, data.uid);
+    surface._trace = result;
     result.update(data);
     scene.glplot.add(surface);
     return result;

test/jasmine/tests/gl_plot_interact_test.js

@@ -217,23 +217,64 @@ describe('Test gl3d plots', function() {
 
     it('should be able to toggle visibility', function(done) {
         var _mock = Lib.extendDeep({}, mock2);
-        var objects;
+        _mock.data[0].x = [0, 1, 3];
+        _mock.data[0].y = [0, 1, 2];
+        _mock.data.push({
+            type: 'surface',
+            z: [[1, 2, 3], [1, 2, 3], [2, 1, 2]]
+        }, {
+            type: 'mesh3d',
+            x: [0, 1, 2, 0], y: [0, 0, 1, 2], z: [0, 2, 0, 1],
+            i: [0, 0, 0, 1], j: [1, 2, 3, 2], k: [2, 3, 1, 3]
+        });
+
+        // scatter3d traces are made of 5 gl-vis objects,
+        // surface and mesh3d are made of 1 gl-vis object each.
+        var order0 = [0, 0, 0, 0, 0, 1, 2];
+
+        function assertObjects(expected) {
+            var objects = gd._fullLayout.scene._scene.glplot.objects;
+            var actual = objects.map(function(o) {
+                return o._trace.data.index;
+            });
+
+            expect(actual).toEqual(expected);
+        }
 
         Plotly.plot(gd, _mock)
         .then(delay)
         .then(function() {
-            objects = gd._fullLayout.scene._scene.glplot.objects;
-            expect(objects.length).toEqual(5);
+            assertObjects(order0);
 
             return Plotly.restyle(gd, 'visible', 'legendonly');
         })
         .then(function() {
-            expect(objects.length).toEqual(0);
+            assertObjects([]);
 
             return Plotly.restyle(gd, 'visible', true);
         })
         .then(function() {
-            expect(objects.length).toEqual(5);
+            assertObjects(order0);
+
+            return Plotly.restyle(gd, 'visible', false, [0]);
+        })
+        .then(function() {
+            assertObjects([1, 2]);
+
+            return Plotly.restyle(gd, 'visible', true, [0]);
+        })
+        .then(function() {
+            assertObjects(order0);
+
+            return Plotly.restyle(gd, 'visible', 'legendonly', [1]);
+        })
+        .then(function() {
+            assertObjects([0, 0, 0, 0, 0, 2]);
+
+            return Plotly.restyle(gd, 'visible', true, [1]);
+        })
+        .then(function() {
+            assertObjects(order0);
         })
         .then(done);
     });