add regl_utils lib module

... exposing prepare and clear methods

Author: etpinard

src/lib/regl_utils.js

@@ -0,0 +1,52 @@
+/**
+* Copyright 2012-2018, 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';
+
+var createRegl = require('regl');
+
+/**
+ * Idempotent version of createRegl. Create regl instances
+ * in the correct canvases with the correct attributes and
+ * options
+ *
+ * @param {DOM node or object} gd : graph div object
+ * @param {array} extensions : list of extension to pass to createRegl
+ */
+exports.prepare = function prepare(gd, extensions) {
+    gd._fullLayout._glcanvas.each(function(d) {
+        if(d.regl) return;
+
+        d.regl = createRegl({
+            canvas: this,
+            attributes: {
+                antialias: !d.pick,
+                preserveDrawingBuffer: true
+            },
+            pixelRatio: gd._context.plotGlPixelRatio || global.devicePixelRatio,
+            extensions: extensions || []
+        });
+    });
+};
+
+/**
+ * Clear gl frame (if any). This is a common pattern as
+ * we usually set `preserveDrawingBuffer: true` during
+ * gl context creation (e.g. via `reglUtils.prepare`).
+ *
+ * @param {DOM node or object} gd : graph div object
+ */
+exports.clear = function clear(gd) {
+    var fullLayout = gd._fullLayout;
+
+    if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
+        fullLayout._glcanvas.each(function(d) {
+            if(d.regl) d.regl.clear({color: true});
+        });
+    }
+};

src/plots/cartesian/dragbox.js

@@ -16,6 +16,7 @@ var supportsPassive = require('has-passive-events');
 var Registry = require('../../registry');
 var Lib = require('../../lib');
 var svgTextUtils = require('../../lib/svg_text_utils');
+var reglUtils = require('../../lib/regl_utils');
 var Color = require('../../components/color');
 var Drawing = require('../../components/drawing');
 var Fx = require('../../components/fx');
@@ -713,14 +714,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             return ax._length * (1 - scaleFactor) * FROM_TL[ax.constraintoward || 'middle'];
         }
 
-        // clear gl frame, if any, since we preserve drawing buffer
-        // FIXME: code duplication with cartesian.plot
-        // TODO DRY this up!!
-        if(fullLayout._glcanvas && fullLayout._glcanvas.size()) {
-            fullLayout._glcanvas.each(function(d) {
-                if(d.regl) d.regl.clear({color: true});
-            });
-        }
+        reglUtils.clear(gd);
 
         for(i = 0; i < subplots.length; i++) {
             var subplot = plotinfos[subplots[i]],

src/traces/parcoords/plot.js

@@ -9,26 +9,15 @@
 'use strict';
 
 var parcoords = require('./parcoords');
-var createRegl = require('regl');
+var reglUtils = require('../../lib/regl_utils');
 
 module.exports = function plot(gd, cdparcoords) {
     var fullLayout = gd._fullLayout;
     var svg = fullLayout._toppaper;
     var root = fullLayout._paperdiv;
     var container = fullLayout._glcontainer;
 
-    // make sure proper regl instances are created
-    fullLayout._glcanvas.each(function(d) {
-        if(d.regl) return;
-        d.regl = createRegl({
-            canvas: this,
-            attributes: {
-                antialias: !d.pick,
-                preserveDrawingBuffer: true
-            },
-            pixelRatio: gd._context.plotGlPixelRatio || global.devicePixelRatio
-        });
-    });
+    reglUtils.prepare(gd);
 
     var gdDimensions = {};
     var gdDimensionsOriginalOrder = {};

src/traces/scattergl/index.js

@@ -8,7 +8,6 @@
 
 'use strict';
 
-var createRegl = require('regl');
 var createScatter = require('regl-scatter2d');
 var createLine = require('regl-line2d');
 var createError = require('regl-error2d');
@@ -17,6 +16,7 @@ var arrayRange = require('array-range');
 
 var Registry = require('../../registry');
 var Lib = require('../../lib');
+var reglUtils = require('../../lib/regl_utils');
 var AxisIDs = require('../../plots/cartesian/axis_ids');
 
 var subTypes = require('../scatter/subtypes');
@@ -336,20 +336,7 @@ function plot(gd, subplot, cdata) {
     var width = fullLayout.width;
     var height = fullLayout.height;
 
-    // make sure proper regl instances are created
-    fullLayout._glcanvas.each(function(d) {
-        if(d.regl || d.pick) return;
-        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
-        });
-    });
-
+    reglUtils.prepare(gd, ['ANGLE_instanced_arrays', 'OES_element_index_uint']);
     var regl = fullLayout._glcanvas.data()[0].regl;
 
     // that is needed for fills

src/traces/splom/base_plot.js

@@ -8,11 +8,11 @@
 
 'use strict';
 
-var createRegl = require('regl');
 var createLine = require('regl-line2d');
 
 var Registry = require('../../registry');
 var Lib = require('../../lib');
+var reglUtils = require('../../lib/regl_utils');
 var getModuleCalcData = require('../../plots/get_data').getModuleCalcData;
 var Cartesian = require('../../plots/cartesian');
 var AxisIDs = require('../../plots/cartesian/axis_ids');
@@ -31,19 +31,7 @@ function plot(gd) {
         });
     }
 
-    // make sure proper regl instances are created
-    fullLayout._glcanvas.each(function(d) {
-        if(d.regl || d.pick) return;
-        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
-        });
-    });
+    reglUtils.prepare(gd, ['ANGLE_instanced_arrays', 'OES_element_index_uint']);
 
     if(fullLayout._hasOnlyLargeSploms) {
         drawGrid(gd);