Introduce better regl management

src/plot_api/plot_api.js

@@ -13,6 +13,7 @@
 var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 var hasHover = require('has-hover');
+var createRegl = require('regl');
 
 var Plotly = require('../plotly');
 var Lib = require('../lib');
@@ -3021,6 +3022,14 @@ function makePlotFramework(gd) {
         .classed('svg-container', true)
         .style('position', 'relative');
 
+    // regl traces stubs get initialized by condition
+    fullLayout._reglFront;
+    fullLayout._reglBack;
+    fullLayout._reglPick;
+    fullLayout._glFrontCanvas;
+    fullLayout._glBackCanvas;
+    fullLayout._glPickCanvas;
+
     // Make the graph containers
     // start fresh each time we get here, so we know the order comes out
     // right, rather than enter/exit which can muck up the order
@@ -3029,8 +3038,20 @@ function makePlotFramework(gd) {
     fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container')
         .data([0]);
     fullLayout._glcontainer.enter().append('div')
+        .each(function() {
+            initRegl(gd, this);
+        })
         .classed('gl-container', true);
 
+    // update sizes
+    fullLayout._glPickCanvas.width =
+    fullLayout._glBackCanvas.width =
+    fullLayout._glFrontCanvas.width = fullLayout.width;
+
+    fullLayout._glPickCanvas.height =
+    fullLayout._glBackCanvas.height =
+    fullLayout._glFrontCanvas.height = fullLayout.height;
+
     fullLayout._paperdiv.selectAll('.main-svg').remove();
 
     fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child')
@@ -3110,3 +3131,65 @@ function makePlotFramework(gd) {
 
     gd.emit('plotly_framework');
 }
+
+
+// If there are modules with `regl` category, we make sure
+// main, secondary and pick regl-canvases created
+// TODO: make gl- components use that
+function initRegl(gd, container) {
+    var fullLayout = gd._fullLayout;
+    var frontCanvas = fullLayout._glFrontCanvas,
+        backCanvas = fullLayout._glBackCanvas,
+        pickCanvas = fullLayout._glPickCanvas;
+
+    if(frontCanvas) return;
+
+    for(var i = 0; i < fullLayout._modules.length; i++) {
+        var module = fullLayout._modules[i];
+        if(module.categories && module.categories.indexOf('regl') >= 0) {
+            var extensions = [
+                'ANGLE_instanced_arrays',
+                'OES_element_index_uint'
+            ];
+
+            // FIXME: is it fine creating elements like that in plotly?
+            frontCanvas = fullLayout._glFrontCanvas = container.appendChild(document.createElement('canvas'));
+            backCanvas = fullLayout._glBackCanvas = container.appendChild(document.createElement('canvas'));
+            pickCanvas = fullLayout._glPickCanvas = document.createElement('canvas');
+
+            frontCanvas.style.width = backCanvas.style.width = '100%';
+            frontCanvas.style.height = backCanvas.style.height = '100%';
+            frontCanvas.style.position = backCanvas.style.position = 'absolute';
+            frontCanvas.style.top = backCanvas.style.top = '0px';
+            frontCanvas.style.left = backCanvas.style.left = '0px';
+            frontCanvas.style.pointerEvents = backCanvas.style.pointerEvents = 'none';
+
+            // FIXME: handle pixelRatios
+            fullLayout._reglFront = createRegl({
+                canvas: frontCanvas,
+                attributes: {
+                    preserveDrawingBuffer: true,
+                    antialias: true
+                },
+                extensions: extensions
+            });
+            fullLayout._reglBack = createRegl({
+                canvas: backCanvas,
+                attributes: {
+                    preserveDrawingBuffer: true,
+                    antialias: true
+                },
+                extensions: extensions
+            });
+
+            fullLayout._reglPick = createRegl({
+                canvas: pickCanvas,
+                attributes: {
+                    preserveDrawingBuffer: true,
+                    antialias: false
+                },
+                extensions: extensions
+            });
+        }
+    }
+}

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/parcoords.js

@@ -254,7 +254,6 @@ function styleExtentTexts(selection) {
 }
 
 module.exports = function(root, svg, styledData, layout, callbacks) {
-
     var domainBrushing = false;
     var linePickActive = true;