Shared canvases

src/plot_api/plot_api.js

@@ -194,6 +194,30 @@ Plotly.plot = function(gd, data, layout, config) {
             }
         }
 
+        fullLayout._glcanvas = fullLayout._glcontainer.selectAll('.gl-canvas').data(fullLayout._hasCategory('gl') ? [{
+            key: 'contextLayer'
+        }, {
+            key: 'focusLayer'
+        }, {
+            key: 'pickLayer'
+        }] : []);
+
+        fullLayout._glcanvas.enter().append('canvas')
+            .attr('class', function(d) {
+                return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
+            })
+            .style('position', 'absolute')
+            .style('top', 0)
+            .style('left', 0)
+            .style('width', '100%')
+            .style('height', '100%')
+            .style('pointer-events', 'none')
+            .style('overflow', 'visible')
+            .attr('width', fullLayout.width)
+            .attr('height', fullLayout.height);
+
+        fullLayout._glcanvas.exit().remove();
+
         return Lib.syncOrAsync([
             subroutines.layoutStyles
         ], gd);
@@ -3027,10 +3051,14 @@ function makePlotFramework(gd) {
     // TODO: sort out all the ordering so we don't have to
     // explicitly delete anything
     fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container')
-        .data([0]);
+        .data([{}]);
+
     fullLayout._glcontainer.enter().append('div')
         .classed('gl-container', true);
 
+    // That is initialized in drawFramework if there are `gl` traces
+    fullLayout._glcanvas = null;
+
     fullLayout._paperdiv.selectAll('.main-svg').remove();
 
     fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child')

src/plots/gl2d/scene2d.js

@@ -111,7 +111,7 @@ proto.makeFramework = function() {
         this.gl = STATIC_CONTEXT;
     }
     else {
-        var liveCanvas = document.createElement('canvas');
+        var liveCanvas = this.container.querySelector('.gl-canvas-focus');
 
         var gl = getContext({
             canvas: liveCanvas,
@@ -139,7 +139,7 @@ proto.makeFramework = function() {
     // disabling user select on the canvas
     // sanitizes double-clicks interactions
     // ref: https://github.com/plotly/plotly.js/issues/744
-    canvas.className += 'user-select-none';
+    canvas.className += ' user-select-none';
 
     // create SVG container for hover text
     var svgContainer = this.svgContainer = document.createElementNS(
@@ -158,7 +158,6 @@ proto.makeFramework = function() {
 
     // append canvas, hover svg and mouse div to container
     var container = this.container;
-    container.appendChild(canvas);
     container.appendChild(svgContainer);
     container.appendChild(mouseContainer);
 
@@ -369,7 +368,6 @@ proto.destroy = function() {
 
     this.glplot.dispose();
 
-    if(!this.staticPlot) this.container.removeChild(this.canvas);
     this.container.removeChild(this.svgContainer);
     this.container.removeChild(this.mouseContainer);
 

src/plots/plots.js

@@ -458,6 +458,7 @@ plots.supplyDefaults = function(gd) {
 
     // attach helper method to check whether a plot type is present on graph
     newFullLayout._has = plots._hasPlotType.bind(newFullLayout);
+    newFullLayout._hasCategory = plots._hasCategory.bind(newFullLayout);
 
     // special cases that introduce interactions between traces
     var _modules = newFullLayout._modules;
@@ -576,6 +577,21 @@ plots._hasPlotType = function(category) {
     return false;
 };
 
+// check whether trace has a category
+plots._hasCategory = function(category) {
+    var modules = this._modules || [];
+
+    // create canvases only in case if there is at least one regl component
+    for(var i = 0; i < modules.length; i++) {
+        var _ = modules[i];
+        if(_.categories && _.categories.indexOf(category) >= 0) {
+            return true;
+        }
+    }
+
+    return false;
+};
+
 plots.cleanPlot = function(newFullData, newFullLayout, oldFullData, oldFullLayout) {
     var i, j;
 

src/traces/contourgl/index.js

@@ -21,7 +21,7 @@ ContourGl.plot = require('./convert');
 ContourGl.moduleType = 'trace';
 ContourGl.name = 'contourgl';
 ContourGl.basePlotModule = require('../../plots/gl2d');
-ContourGl.categories = ['gl2d', '2dMap'];
+ContourGl.categories = ['gl', 'gl2d', '2dMap'];
 ContourGl.meta = {
     description: [
         'WebGL contour (beta)'

src/traces/heatmapgl/index.js

@@ -21,7 +21,7 @@ HeatmapGl.plot = require('./convert');
 HeatmapGl.moduleType = 'trace';
 HeatmapGl.name = 'heatmapgl';
 HeatmapGl.basePlotModule = require('../../plots/gl2d');
-HeatmapGl.categories = ['gl2d', '2dMap'];
+HeatmapGl.categories = ['gl', 'gl2d', '2dMap'];
 HeatmapGl.meta = {
     description: [
         'WebGL version of the heatmap trace type.'

src/traces/parcoords/attributes.js

@@ -18,7 +18,6 @@ var extendDeep = require('../../lib/extend').extendDeep;
 var extendFlat = require('../../lib/extend').extendFlat;
 
 module.exports = {
-
     domain: {
         x: {
             valType: 'info_array',
@@ -120,36 +119,26 @@ module.exports = {
         description: 'The dimensions (variables) of the parallel coordinates chart. 2..60 dimensions are supported.'
     },
 
-    line: extendFlat({},
-
+    line: extendFlat(
         // the default autocolorscale isn't quite usable for parcoords due to context ambiguity around 0 (grey, off-white)
-        // autocolorscale therefore defaults to false too, to avoid being overridden by the  blue-white-red autocolor palette
+        // autocolorscale therefore defaults to false too, to avoid being overridden by the blue-white-red autocolor palette
         extendDeep(
-            {},
             colorAttributes('line'),
             {
-                colorscale: extendDeep(
-                    {},
-                    colorAttributes('line').colorscale,
-                    {dflt: colorscales.Viridis}
-                ),
-                autocolorscale: extendDeep(
-                    {},
-                    colorAttributes('line').autocolorscale,
-                    {
-                        dflt: false,
-                        description: [
-                            'Has an effect only if line.color` is set to a numerical array.',
-                            'Determines whether the colorscale is a default palette (`autocolorscale: true`)',
-                            'or the palette determined by `line.colorscale`.',
-                            'In case `colorscale` is unspecified or `autocolorscale` is true, the default ',
-                            'palette will be chosen according to whether numbers in the `color` array are',
-                            'all positive, all negative or mixed.',
-                            'The default value is false, so that `parcoords` colorscale can default to `Viridis`.'
-                        ].join(' ')
-                    }
-                )
 
+                colorscale: {dflt: colorscales.Viridis},
+                autocolorscale: {
+                    dflt: false,
+                    description: [
+                        'Has an effect only if line.color` is set to a numerical array.',
+                        'Determines whether the colorscale is a default palette (`autocolorscale: true`)',
+                        'or the palette determined by `line.colorscale`.',
+                        'In case `colorscale` is unspecified or `autocolorscale` is true, the default ',
+                        'palette will be chosen according to whether numbers in the `color` array are',
+                        'all positive, all negative or mixed.',
+                        'The default value is false, so that `parcoords` colorscale can default to `Viridis`.'
+                    ].join(' ')
+                }
             }
         ),
 

src/traces/parcoords/base_plot.js

@@ -12,7 +12,6 @@ var d3 = require('d3');
 var Plots = require('../../plots/plots');
 var parcoordsPlot = require('./plot');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
-var c = require('./constants');
 
 exports.name = 'parcoords';
 
@@ -28,8 +27,6 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
     var hasParcoords = (newFullLayout._has && newFullLayout._has('parcoords'));
 
     if(hadParcoords && !hasParcoords) {
-        oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
-        oldFullLayout._paperdiv.selectAll('.parcoords-line-layers').remove();
         oldFullLayout._paperdiv.selectAll('.parcoords').remove();
         oldFullLayout._paperdiv.selectAll('.parcoords').remove();
         oldFullLayout._glimages.selectAll('*').remove();
@@ -41,23 +38,21 @@ exports.toSVG = function(gd) {
     var imageRoot = gd._fullLayout._glimages;
     var root = d3.select(gd).selectAll('.svg-container');
     var canvases = root.filter(function(d, i) {return i === root.size() - 1;})
-        .selectAll('.parcoords-lines.context, .parcoords-lines.focus');
+        .selectAll('.gl-canvas-context, .gl-canvas-focus');
 
-    function canvasToImage(d) {
+    function canvasToImage() {
         var canvas = this;
         var imageData = canvas.toDataURL('image/png');
         var image = imageRoot.append('svg:image');
-        var size = gd._fullLayout._size;
-        var domain = gd._fullData[d.model.key].domain;
 
         image.attr({
             xmlns: xmlnsNamespaces.svg,
             'xlink:href': imageData,
-            x: size.l + size.w * domain.x[0] - c.overdrag,
-            y: size.t + size.h * (1 - domain.y[1]),
-            width: (domain.x[1] - domain.x[0]) * size.w + 2 * c.overdrag,
-            height: (domain.y[1] - domain.y[0]) * size.h,
-            preserveAspectRatio: 'none'
+            preserveAspectRatio: 'none',
+            x: 0,
+            y: 0,
+            width: canvas.width,
+            height: canvas.height
         });
     }
 

src/traces/parcoords/lines.js

@@ -10,7 +10,7 @@
 
 var createREGL = require('regl');
 var glslify = require('glslify');
-var verticalPadding = require('./constants').verticalPadding;
+var c = require('./constants');
 var vertexShaderSource = glslify('./shaders/vertex.glsl');
 var pickVertexShaderSource = glslify('./shaders/pick_vertex.glsl');
 var fragmentShaderSource = glslify('./shaders/fragment.glsl');
@@ -56,7 +56,8 @@ function renderBlock(regl, glAes, renderState, blockLineCount, sampleCount, item
         item.offset = sectionVertexCount * blockNumber * blockLineCount;
         item.count = sectionVertexCount * count;
         if(blockNumber === 0) {
-            window.cancelAnimationFrame(renderState.currentRafs[rafKey]); // stop drawing possibly stale glyphs before clearing
+            // stop drawing possibly stale glyphs before clearing
+            window.cancelAnimationFrame(renderState.currentRafs[rafKey]);
             delete renderState.currentRafs[rafKey];
             clear(regl, item.scissorX, item.scissorY, item.scissorWidth, item.viewBoxSize[1]);
         }
@@ -165,7 +166,19 @@ function valid(i, offset, panelCount) {
     return i + offset <= panelCount;
 }
 
-module.exports = function(canvasGL, lines, canvasWidth, canvasHeight, initialDimensions, initialPanels, unitToColor, context, pick, scatter) {
+module.exports = function(canvasGL, d, scatter) {
+    var model = d.model,
+        vm = d.viewModel,
+        domain = model.domain;
+
+    var lines = model.lines,
+        canvasWidth = model.canvasWidth,
+        canvasHeight = model.canvasHeight,
+        initialDimensions = vm.dimensions,
+        initialPanels = vm.panels,
+        unitToColor = model.unitToColor,
+        context = d.context,
+        pick = d.pick;
 
     var renderState = {
         currentRafs: {},
@@ -248,6 +261,13 @@ module.exports = function(canvasGL, lines, canvasWidth, canvasHeight, initialDim
             }
         },
 
+        viewport: {
+            x: regl.prop('viewportX'),
+            y: regl.prop('viewportY'),
+            width: regl.prop('viewportWidth'),
+            height: regl.prop('viewportHeight')
+        },
+
         dither: false,
 
         vert: pick ? pickVertexShaderSource : vertexShaderSource,
@@ -297,7 +317,7 @@ module.exports = function(canvasGL, lines, canvasWidth, canvasHeight, initialDim
     function makeItem(i, ii, x, y, panelSizeX, canvasPanelSizeY, crossfilterDimensionIndex, scatter, I, leftmost, rightmost) {
         var loHi, abcd, d, index;
         var leftRight = [i, ii];
-        var filterEpsilon = verticalPadding / canvasPanelSizeY;
+        var filterEpsilon = c.verticalPadding / canvasPanelSizeY;
 
         var dims = [0, 1].map(function() {return [0, 1, 2, 3].map(function() {return new Float32Array(16);});});
         var lims = [0, 1].map(function() {return [0, 1, 2, 3].map(function() {return new Float32Array(16);});});
@@ -341,10 +361,16 @@ module.exports = function(canvasGL, lines, canvasWidth, canvasHeight, initialDim
 
             colorClamp: colorClamp,
             scatter: scatter || 0,
-            scissorX: I === leftmost ? 0 : x + overdrag,
+
+            scissorX: (I === leftmost ? 0 : x + overdrag) + (model.pad.l - overdrag) + model.layoutWidth * domain.x[0],
             scissorWidth: (I === rightmost ? canvasWidth - x + overdrag : panelSizeX + 0.5) + (I === leftmost ? x + overdrag : 0),
-            scissorY: y,
-            scissorHeight: canvasPanelSizeY
+            scissorY: y + model.pad.b + model.layoutHeight * domain.y[0],
+            scissorHeight: canvasPanelSizeY,
+
+            viewportX: model.pad.l - overdrag + model.layoutWidth * domain.x[0],
+            viewportY: model.pad.b + model.layoutHeight * domain.y[0],
+            viewportWidth: canvasWidth,
+            viewportHeight: canvasHeight
         };
     }