Introduce global contexts

dy · dy · commit e6fcbf51de4b · 2017-11-14T15:32:05.000-05:00
diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
@@ -42,6 +42,8 @@ var enforceAxisConstraints = axisConstraints.enforce;
 var cleanAxisConstraints = axisConstraints.clean;
 var axisIds = require('../plots/cartesian/axis_ids');
 
+var createRegl = require('regl');
+
 
 /**
  * Main plot-creation function
@@ -195,6 +197,51 @@ Plotly.plot = function(gd, data, layout, config) {
             }
         }
 
+        if(!fullLayout._glcanvas && fullLayout._has('gl')) {
+            fullLayout._glcanvas = fullLayout._glcontainer.selectAll('.gl-canvas').data([{
+                key: 'contextLayer',
+                context: true,
+                pick: false
+            }, {
+                key: 'focusLayer',
+                context: false,
+                pick: false
+            }, {
+                key: 'pickLayer',
+                context: false,
+                pick: true
+            }]);
+
+            fullLayout._glcanvas.enter().append('canvas')
+                .each(function(d) {
+                    d.regl = createRegl({
+                        canvas: this,
+                        attributes: {
+                            antialias: !d.pick,
+                            preserveDrawingBuffer: true
+                        },
+                        extensions: ['ANGLE_instanced_arrays', 'OES_element_index_uint'],
+                        pixelRatio: gd._context.plotGlPixelRatio || global.devicePixelRatio
+                    });
+                })
+                .attr('class', function(d) {
+                    return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
+                })
+                .style({
+                    'position': 'absolute',
+                    'top': 0,
+                    'left': 0,
+                    'width': '100%',
+                    'height': '100%',
+                    'pointer-events': 'none',
+                    'overflow': 'visible'
+                })
+                .attr('width', fullLayout.width)
+                .attr('height', fullLayout.height);
+
+            fullLayout._glcanvas.exit().remove();
+        }
+
         return Lib.syncOrAsync([
             subroutines.layoutStyles
         ], gd);
@@ -1993,7 +2040,7 @@ function _relayout(gd, aobj) {
             else flags.plot = true;
         }
         else {
-            if(fullLayout._has('gl2d') &&
+            if((fullLayout._has('gl2d') || fullLayout._has('regl')) &&
                 (ai === 'dragmode' &&
                 (vi === 'lasso' || vi === 'select') &&
                 !(vOld === 'lasso' || vOld === 'select'))
@@ -2754,7 +2801,7 @@ function makePlotFramework(gd) {
         .classed('plotly', true);
 
     // Make the svg container
-    fullLayout._paperdiv = fullLayout._container.selectAll('.svg-container').data([0]);
+    fullLayout._paperdiv = fullLayout._container.selectAll('.svg-container').data([{}]);
     fullLayout._paperdiv.enter().append('div')
         .classed('svg-container', true)
         .style('position', 'relative');
@@ -2765,10 +2812,13 @@ 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')
diff --git a/src/plots/cartesian/dragbox.js b/src/plots/cartesian/dragbox.js
@@ -711,14 +711,33 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             return ax._length * (1 - scaleFactor) * FROM_TL[ax.constraintoward || 'middle'];
         }
 
-        for(i = 0; i < subplots.length; i++) {
+        // clear gl frame, if any, since we preserve drawing buffer
+        // FIXME: code duplication with cartesian.plot
+        if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
+            fullLayout._glcanvas.each(function(d) {
+                d.regl.clear({
+                    color: true
+                });
+            });
+        }
 
+        for(i = 0; i < subplots.length; i++) {
             var subplot = plotinfos[subplots[i]],
                 xa2 = subplot.xaxis,
                 ya2 = subplot.yaxis,
                 editX2 = editX && !xa2.fixedrange && (xa.indexOf(xa2) !== -1),
                 editY2 = editY && !ya2.fixedrange && (ya.indexOf(ya2) !== -1);
 
+            // scattergl translate
+            if(subplot._scene && subplot._scene.update) {
+                // FIXME: possibly we could update axis internal _r and _rl here
+                var xaRange = Lib.simpleMap(xa2.range, xa2.r2l),
+                    yaRange = Lib.simpleMap(ya2.range, ya2.r2l);
+                subplot._scene.update(
+                    {range: [xaRange[0], yaRange[0], xaRange[1], yaRange[1]]}
+                );
+            }
+
             if(editX2) {
                 xScaleFactor2 = xScaleFactor;
                 clipDx = ew ? viewBox[0] : getShift(xa2, xScaleFactor2);
diff --git a/src/plots/cartesian/index.js b/src/plots/cartesian/index.js
@@ -48,6 +48,15 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
         }
     }
 
+    // clear gl frame, if any, since we preserve drawing buffer
+    if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
+        fullLayout._glcanvas.each(function(d) {
+            d.regl.clear({
+                color: true
+            });
+        });
+    }
+
     for(i = 0; i < subplots.length; i++) {
         var subplot = subplots[i],
             subplotInfo = fullLayout._plots[subplot];
diff --git a/src/plots/gl2d/scene2d.js b/src/plots/gl2d/scene2d.js
@@ -112,7 +112,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,
@@ -140,7 +140,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(
@@ -159,7 +159,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);
 
@@ -370,7 +369,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);
 
diff --git a/src/plots/plots.js b/src/plots/plots.js
@@ -569,15 +569,29 @@ plots.createTransitionData = function(gd) {
 
 // helper function to be bound to fullLayout to check
 // whether a certain plot type is present on plot
+// or trace has a category
 plots._hasPlotType = function(category) {
+    // check plot
+
     var basePlotModules = this._basePlotModules || [];
+    var i;
 
-    for(var i = 0; i < basePlotModules.length; i++) {
+    for(i = 0; i < basePlotModules.length; i++) {
         var _module = basePlotModules[i];
 
         if(_module.name === category) return true;
     }
 
+    // check trace
+    var modules = this._modules || [];
+
+    for(i = 0; i < modules.length; i++) {
+        var _ = modules[i];
+        if(_.categories && _.categories.indexOf(category) >= 0) {
+            return true;
+        }
+    }
+
     return false;
 };
 
@@ -1319,6 +1333,9 @@ plots.purge = function(gd) {
         }
     }
 
+    // remove any planned throttles
+    Lib.clearThrottle();
+
     // data and layout
     delete gd.data;
     delete gd.layout;
diff --git a/src/traces/contourgl/index.js b/src/traces/contourgl/index.js
@@ -23,7 +23,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)'
diff --git a/src/traces/heatmapgl/index.js b/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.'
diff --git a/src/traces/parcoords/base_plot.js b/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,9 +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,22 +37,20 @@ 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,
+            x: 0,
+            y: 0,
+            width: canvas.width,
+            height: canvas.height,
             preserveAspectRatio: 'none'
         });
     }
diff --git a/src/traces/parcoords/index.js b/src/traces/parcoords/index.js
@@ -19,7 +19,7 @@ Parcoords.colorbar = require('./colorbar');
 Parcoords.moduleType = 'trace';
 Parcoords.name = 'parcoords';
 Parcoords.basePlotModule = require('./base_plot');
-Parcoords.categories = ['gl', 'noOpacity'];
+Parcoords.categories = ['gl', 'regl', 'noOpacity'];
 Parcoords.meta = {
     description: [
         'Parallel coordinates for multidimensional exploratory data analysis.',
diff --git a/src/traces/parcoords/lines.js b/src/traces/parcoords/lines.js
@@ -8,9 +8,8 @@
 
 'use strict';
 
-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');
@@ -165,7 +164,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 = 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: {},
@@ -189,13 +200,7 @@ module.exports = function(canvasGL, lines, canvasWidth, canvasHeight, initialDim
     var points = makePoints(sampleCount, dimensionCount, initialDims, color);
     var attributes = makeAttributes(sampleCount, points);
 
-    var regl = createREGL({
-        canvas: canvasGL,
-        attributes: {
-            preserveDrawingBuffer: true,
-            antialias: !pick
-        }
-    });
+    var regl = d.regl;
 
     var paletteTexture = regl.texture({
         shape: [256, 1],
@@ -248,6 +253,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 +309,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 +353,15 @@ 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
         };
     }
 
@@ -413,11 +430,15 @@ module.exports = function(canvasGL, lines, canvasWidth, canvasHeight, initialDim
         return pixelArray;
     }
 
+    function destroy() {
+        paletteTexture.destroy();
+    }
+
     return {
         setColorDomain: setColorDomain,
         render: renderGLParcoords,
         readPixel: readPixel,
         readPixels: readPixels,
-        destroy: regl.destroy
+        destroy: destroy
     };
 };
diff --git a/src/traces/parcoords/parcoords.js b/src/traces/parcoords/parcoords.js
diff --git a/src/traces/parcoords/plot.js b/src/traces/parcoords/plot.js
diff --git a/src/traces/pointcloud/index.js b/src/traces/pointcloud/index.js
diff --git a/src/traces/scattergl/index.js b/src/traces/scattergl/index.js
diff --git a/test/image/baselines/gl2d_parcoords_2.png b/test/image/baselines/gl2d_parcoords_2.png
