Cross-chart context management

src/plot_api/plot_api.js

@@ -3027,9 +3027,41 @@ 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]);
-    fullLayout._glcontainer.enter().append('div')
-        .classed('gl-container', true);
+        .data([{}]);
+
+    // FIXME: bring this constant to some plotly constants module
+    // it is taken from parcoords lineLayerModel
+    fullLayout._glcanvas = fullLayout._glcontainer.enter().append('div')
+        .classed('gl-container', true)
+        .selectAll('.gl-canvas')
+        .data([{
+            key: 'contextLayer'
+        }, {
+            key: 'focusLayer'
+        }, {
+            key: 'pickLayer'
+        }]);
+
+    // create canvases only in case if there is at least one regl component
+    // FIXME: probably there is a better d3 way of doing so
+    for(var i = 0; i < fullLayout._modules.length; i++) {
+        var module = fullLayout._modules[i];
+        if(module.categories && module.categories.indexOf('gl') >= 0) {
+            fullLayout._glcanvas.enter().append('canvas')
+                .attr('class', function(d) {
+                    return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
+                })
+                .attr('width', fullLayout.width)
+                .attr('height', fullLayout.height)
+                .style('position', 'absolute')
+                .style('top', 0)
+                .style('left', 0)
+                .style('pointer-events', 'none')
+                .style('overflow', 'visible');
+
+            break;
+        }
+    }
 
     fullLayout._paperdiv.selectAll('.main-svg').remove();
 

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
         };
     }