regl-scatter2d

lib/index.js

@@ -31,6 +31,7 @@ Plotly.register([
     require('./choropleth'),
 
     require('./scattergl'),
+    require('./scatterregl'),
     require('./pointcloud'),
     require('./heatmapgl'),
     require('./parcoords'),

lib/scatterregl.js

@@ -0,0 +1,11 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+module.exports = require('../src/traces/scatterregl');

package.json

@@ -56,6 +56,7 @@
     "3d-view": "^2.0.0",
     "@plotly/d3-sankey": "^0.5.0",
     "alpha-shape": "^1.0.0",
+    "canvas-fit": "^1.5.0",
     "color-rgba": "^1.1.1",
     "convex-hull": "^1.0.3",
     "country-regex": "^1.1.0",
@@ -84,6 +85,7 @@
     "gl-spikes2d": "^1.0.1",
     "gl-surface3d": "^1.3.1",
     "has-hover": "^1.0.1",
+    "kdgrass": "^1.0.1",
     "mapbox-gl": "^0.22.0",
     "matrix-camera-controller": "^2.1.3",
     "mouse-change": "^1.4.0",
@@ -93,12 +95,15 @@
     "ndarray-fill": "^1.0.2",
     "ndarray-homography": "^1.0.0",
     "ndarray-ops": "^1.2.2",
+    "object-assign": "^4.1.1",
     "regl": "^1.3.0",
+    "regl-scatter2d": "^1.0.3",
     "right-now": "^1.0.0",
     "robust-orientation": "^1.1.3",
     "sane-topojson": "^2.0.0",
     "strongly-connected-components": "^1.0.1",
     "superscript-text": "^1.0.0",
+    "svg-path-sdf": "^1.1.1",
     "tinycolor2": "^1.3.0",
     "topojson-client": "^2.1.0",
     "webgl-context": "^2.2.0",

src/components/drawing/index.js

@@ -212,6 +212,7 @@ drawing.symbolNames = [];
 drawing.symbolFuncs = [];
 drawing.symbolNeedLines = {};
 drawing.symbolNoDot = {};
+drawing.symbolNoFill = {};
 drawing.symbolList = [];
 
 Object.keys(SYMBOLDEFS).forEach(function(k) {
@@ -230,6 +231,9 @@ Object.keys(SYMBOLDEFS).forEach(function(k) {
         drawing.symbolList = drawing.symbolList.concat(
             [symDef.n + 200, k + '-dot', symDef.n + 300, k + '-open-dot']);
     }
+    if(symDef.noFill) {
+        drawing.symbolNoFill[symDef.n] = true;
+    }
 });
 var MAXSYMBOL = drawing.symbolNames.length,
     // add a dot in the middle of the symbol

src/components/drawing/symbol_defs.js

@@ -355,7 +355,8 @@ module.exports = {
             return 'M0,' + rc + 'V-' + rc + 'M' + rc + ',0H-' + rc;
         },
         needLine: true,
-        noDot: true
+        noDot: true,
+        noFill: true
     },
     'x-thin': {
         n: 34,
@@ -365,7 +366,8 @@ module.exports = {
                 'M' + rx + ',-' + rx + 'L-' + rx + ',' + rx;
         },
         needLine: true,
-        noDot: true
+        noDot: true,
+        noFill: true
     },
     asterisk: {
         n: 35,
@@ -377,7 +379,8 @@ module.exports = {
                 'M' + rs + ',-' + rs + 'L-' + rs + ',' + rs;
         },
         needLine: true,
-        noDot: true
+        noDot: true,
+        noFill: true
     },
     hash: {
         n: 36,
@@ -389,7 +392,8 @@ module.exports = {
                 'M' + r2 + ',' + r1 + 'H-' + r2 +
                 'm0,-' + r2 + 'H' + r2;
         },
-        needLine: true
+        needLine: true,
+        noFill: true
     },
     'y-up': {
         n: 37,
@@ -400,7 +404,8 @@ module.exports = {
             return 'M-' + x + ',' + y1 + 'L0,0M' + x + ',' + y1 + 'L0,0M0,-' + y0 + 'L0,0';
         },
         needLine: true,
-        noDot: true
+        noDot: true,
+        noFill: true
     },
     'y-down': {
         n: 38,
@@ -411,7 +416,8 @@ module.exports = {
             return 'M-' + x + ',-' + y1 + 'L0,0M' + x + ',-' + y1 + 'L0,0M0,' + y0 + 'L0,0';
         },
         needLine: true,
-        noDot: true
+        noDot: true,
+        noFill: true
     },
     'y-left': {
         n: 39,
@@ -422,7 +428,8 @@ module.exports = {
             return 'M' + x1 + ',' + y + 'L0,0M' + x1 + ',-' + y + 'L0,0M-' + x0 + ',0L0,0';
         },
         needLine: true,
-        noDot: true
+        noDot: true,
+        noFill: true
     },
     'y-right': {
         n: 40,
@@ -433,7 +440,8 @@ module.exports = {
             return 'M-' + x1 + ',' + y + 'L0,0M-' + x1 + ',-' + y + 'L0,0M' + x0 + ',0L0,0';
         },
         needLine: true,
-        noDot: true
+        noDot: true,
+        noFill: true
     },
     'line-ew': {
         n: 41,
@@ -442,7 +450,8 @@ module.exports = {
             return 'M' + rc + ',0H-' + rc;
         },
         needLine: true,
-        noDot: true
+        noDot: true,
+        noFill: true
     },
     'line-ns': {
         n: 42,
@@ -451,7 +460,8 @@ module.exports = {
             return 'M0,' + rc + 'V-' + rc;
         },
         needLine: true,
-        noDot: true
+        noDot: true,
+        noFill: true
     },
     'line-ne': {
         n: 43,
@@ -460,7 +470,8 @@ module.exports = {
             return 'M' + rx + ',-' + rx + 'L-' + rx + ',' + rx;
         },
         needLine: true,
-        noDot: true
+        noDot: true,
+        noFill: true
     },
     'line-nw': {
         n: 44,
@@ -469,6 +480,7 @@ module.exports = {
             return 'M' + rx + ',' + rx + 'L-' + rx + ',-' + rx;
         },
         needLine: true,
-        noDot: true
+        noDot: true,
+        noFill: true
     }
 };

src/fonts/ploticon/config.json

@@ -87,7 +87,7 @@
         "width": 1500
       },
       "search": [
-        "tooltip_basic"
+          "tooltip_basic"
       ]
     },
     {
@@ -1513,4 +1513,4 @@
       "src": "fontawesome"
     }
   ]
-}
+}

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/cartesian/dragbox.js

@@ -526,6 +526,10 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         }
 
         updateSubplots([x0, y0, pw - dx, ph - dy]);
+
+        // FIXME: Etienne I need help with that, ideally we should do event emitter
+        if(plotinfo.ondrag) plotinfo.ondrag.call([x0, y0, pw - dx, ph - dy]);
+
         ticksAndAnnotations(yActive, xActive);
     }
 
@@ -708,7 +712,6 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
         }
 
         for(i = 0; i < subplots.length; i++) {
-
             var subplot = plotinfos[subplots[i]],
                 xa2 = subplot.xaxis,
                 ya2 = subplot.yaxis,
@@ -763,6 +766,16 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             scatterPoints.selectAll('.textpoint')
                 .call(Drawing.setTextPointsScale, xScaleFactor2, yScaleFactor2)
                 .call(Drawing.hideOutsideRangePoints, subplot);
+
+            //scattergl translate
+            if (subplot._scattergl) {
+                // 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._scattergl.updateRange(
+                    [xaRange[0], yaRange[0], xaRange[1], yaRange[1]]
+                )
+            }
         }
     }
 

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