Merge pull request #2159 from plotly/global-context

Introduce global contexts

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

@@ -195,6 +195,43 @@ 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
+            }], function(d) { return d.key; });
+
+            fullLayout._glcanvas.enter().append('canvas')
+                .attr('class', function(d) {
+                    return 'gl-canvas gl-canvas-' + d.key.replace('Layer', '');
+                })
+                .style({
+                    'position': 'absolute',
+                    'top': 0,
+                    'left': 0,
+                    'width': '100%',
+                    'height': '100%',
+                    'overflow': 'visible'
+                })
+                .attr('width', fullLayout.width)
+                .attr('height', fullLayout.height);
+
+            fullLayout._glcanvas.filter(function(d) {
+                return !d.pick;
+            }).style({
+                'pointer-events': 'none'
+            });
+        }
+
         return Lib.syncOrAsync([
             subroutines.layoutStyles
         ], gd);
@@ -1993,7 +2030,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'))
@@ -2764,11 +2801,15 @@ function makePlotFramework(gd) {
     // right, rather than enter/exit which can muck up the order
     // TODO: sort out all the ordering so we don't have to
     // explicitly delete anything
+    // FIXME: parcoords reuses this object, not the best pattern
     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/cartesian/dragbox.js

@@ -711,14 +711,35 @@ 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) {
+                if(d.regl) {
+                    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);

src/plots/cartesian/index.js

@@ -48,6 +48,17 @@ 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) {
+            if(d.regl) {
+                d.regl.clear({
+                    color: true
+                });
+            }
+        });
+    }
+
     for(i = 0; i < subplots.length; i++) {
         var subplot = subplots[i],
             subplotInfo = fullLayout._plots[subplot];

src/plots/cartesian/select.js

@@ -262,7 +262,6 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
 
         throttle.done(throttleID).then(function() {
             throttle.clear(throttleID);
-
             if(!dragged && numclicks === 2) {
                 // clear selection on doubleclick
                 outlines.remove();

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(
@@ -157,9 +157,11 @@ proto.makeFramework = function() {
     mouseContainer.style.position = 'absolute';
     mouseContainer.style['pointer-events'] = 'auto';
 
+    this.pickCanvas = this.container.querySelector('.gl-canvas-pick');
+
+
     // append canvas, hover svg and mouse div to container
     var container = this.container;
-    container.appendChild(canvas);
     container.appendChild(svgContainer);
     container.appendChild(mouseContainer);
 
@@ -370,7 +372,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);
 
@@ -533,8 +534,10 @@ proto.updateTraces = function(fullData, calcData) {
 proto.updateFx = function(dragmode) {
     // switch to svg interactions in lasso/select mode
     if(dragmode === 'lasso' || dragmode === 'select') {
+        this.pickCanvas.style['pointer-events'] = 'none';
         this.mouseContainer.style['pointer-events'] = 'none';
     } else {
+        this.pickCanvas.style['pointer-events'] = 'auto';
         this.mouseContainer.style['pointer-events'] = 'auto';
     }
 

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;
 };
 
@@ -595,6 +609,15 @@ 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').remove();
+            oldFullLayout._glcanvas = null;
+        }
+    }
 
     oldLoop:
     for(i = 0; i < oldFullData.length; i++) {
@@ -1308,7 +1331,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').remove();
+        fullLayout._glcontainer.remove();
+        fullLayout._glcanvas = null;
+    }
     if(fullLayout._geocontainer !== undefined) fullLayout._geocontainer.remove();
 
     // remove modebar
@@ -1326,6 +1353,9 @@ plots.purge = function(gd) {
         }
     }
 
+    // remove any planned throttles
+    Lib.clearThrottle();
+
     // data and layout
     delete gd.data;
     delete gd.layout;

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)'

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/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'
         });
     }