Recycle global canvases properly

Author: dy

src/plot_api/helpers.js

@@ -154,6 +154,7 @@ exports.cleanLayout = function(layout) {
 
         // clean old Camera coords
         var cameraposition = scene.cameraposition;
+
         if(Array.isArray(cameraposition) && cameraposition[0].length === 4) {
             var rotation = cameraposition[0],
                 center = cameraposition[1],

src/plot_api/plot_api.js

@@ -208,7 +208,7 @@ Plotly.plot = function(gd, data, layout, config) {
                 key: 'pickLayer',
                 context: false,
                 pick: true
-            }]);
+            }], function(d) { return d.key; });
 
             fullLayout._glcanvas.enter().append('canvas')
                 .attr('class', function(d) {
@@ -225,8 +225,6 @@ Plotly.plot = function(gd, data, layout, config) {
                 })
                 .attr('width', fullLayout.width)
                 .attr('height', fullLayout.height);
-
-            fullLayout._glcanvas.exit().remove();
         }
 
         return Lib.syncOrAsync([

src/plots/plots.js

@@ -609,6 +609,16 @@ plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayou
 
     var hasPaper = !!oldFullLayout._paper;
     var hasInfoLayer = !!oldFullLayout._infolayer;
+    var hadGl = oldFullLayout._has && oldFullLayout._has('gl');
+    var hasGl = newFullLayout._has && newFullLayout._has('gl');
+
+    if(hadGl && !hasGl) {
+        if(oldFullLayout._glcontainer !== undefined) {
+            oldFullLayout._glcontainer.selectAll('.gl-canvas').data([]).exit().remove();
+            oldFullLayout._glcontainer.remove();
+            oldFullLayout._glcanvas = null;
+        }
+    }
 
     oldLoop:
     for(i = 0; i < oldFullData.length; i++) {
@@ -1322,7 +1332,11 @@ plots.purge = function(gd) {
     // a new plot, and may have been set outside of our scope.
 
     var fullLayout = gd._fullLayout || {};
-    if(fullLayout._glcontainer !== undefined) fullLayout._glcontainer.remove();
+    if(fullLayout._glcontainer !== undefined) {
+        fullLayout._glcontainer.selectAll('.gl-canvas').data([]).exit().remove();
+        fullLayout._glcontainer.remove();
+        fullLayout._glcanvas = null;
+    }
     if(fullLayout._geocontainer !== undefined) fullLayout._geocontainer.remove();
 
     // remove modebar

src/traces/parcoords/parcoords.js

@@ -294,7 +294,7 @@ module.exports = function(root, svg, parcoordsLineLayers, styledData, layout, ca
         .each(function(d) {
             // FIXME: figure out how to handle multiple instances
             d.viewModel = vm[0];
-            d.model = vm[0].model;
+            d.model = d.viewModel ? d.viewModel.model : null;
         });
 
     var tweakables = {renderers: [], dimensions: []};

test/jasmine/tests/gl_plot_interact_test.js

@@ -1302,11 +1302,35 @@ describe('Test gl plot side effects', function() {
 
             return Plotly.deleteTraces(gd, [0]);
         }).then(function() {
-            countCanvases(3);
+            countCanvases(0);
 
             return Plotly.purge(gd);
         }).then(done);
     });
+
+    it('should be able to switch trace type', function(done) {
+        Plotly.newPlot(gd, [{
+            type: 'parcoords',
+            x: [1, 2, 3],
+            y: [2, 1, 2],
+            dimensions: [
+                {
+                    constraintrange: [200, 700],
+                    label: 'Block height',
+                    values: [321, 534, 542, 674, 31, 674, 124, 246, 456, 743]
+                }
+            ]
+        }])
+        .then(function() {
+            expect(d3.selectAll('canvas').size()).toEqual(3);
+
+            return Plotly.restyle(gd, 'type', 'scatter');
+        })
+        .then(function() {
+            expect(d3.selectAll('canvas').size()).toEqual(0);
+        })
+        .then(done);
+    });
 });
 
 describe('Test gl2d interactions', function() {