Merge pull request #1466 from plotly/gl3d-ordering

Preserving gl3d trace ordering on restyle

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_basic_test.js

@@ -49,11 +49,10 @@ function verifyInteractionEffects(tuple) {
 }
 
 function testEvents(plot) {
-    return plot
-        .then(function(graphDiv) {
-            var tuple = addEventCallback(graphDiv); // TODO disuse tuple with ES6
-            verifyInteractionEffects(tuple);
-        });
+    return plot.then(function(graphDiv) {
+        var tuple = addEventCallback(graphDiv);
+        verifyInteractionEffects(tuple);
+    });
 }
 
 describe('gl3d plots', function() {
@@ -71,13 +70,13 @@ describe('gl3d plots', function() {
 
     it('should respond to drag interactions with mock of unset camera', function(done) {
         testEvents(makePlot(gd, require('@mocks/gl3d_scatter3d-connectgaps.json')))
-            .then(null, failTest) // current linter balks on .catch with 'dot-notation'; fixme a linter
+            .catch(failTest)
             .then(done);
     });
 
     it('should respond to drag interactions with mock of partially set camera', function(done) {
         testEvents(makePlot(gd, require('@mocks/gl3d_errorbars_zx.json')))
-            .then(null, failTest)
+            .catch(failTest)
             .then(done);
     });
 });