DRY and small pref boost for scattergl

- DRY using .plot & .cleear with getViewport helper fn
- Dry .plot and .update with repeat helper fn
- compute viewport only once per subplot, as opposed to
  once per trace.

Author: etpinard

src/traces/scattergl/index.js

@@ -122,16 +122,17 @@ function calc(gd, trace) {
     scene.textOptions.push(opts.text);
     scene.textSelectedOptions.push(opts.textSel);
     scene.textUnselectedOptions.push(opts.textUnsel);
-    scene.count++;
 
     // stash scene ref
     stash._scene = scene;
-    stash.index = scene.count - 1;
+    stash.index = scene.count;
     stash.x = x;
     stash.y = y;
     stash.positions = positions;
     stash.count = count;
 
+    scene.count++;
+
     gd.firstscatter = false;
     return [{x: false, y: false, t: stash, trace: trace}];
 }
@@ -230,19 +231,16 @@ function sceneUpdate(gd, subplot) {
 
         // apply new option to all regl components (used on drag)
         scene.update = function update(opt) {
-            var i;
-            var opts = new Array(scene.count);
-            for(i = 0; i < scene.count; i++) {
-                opts[i] = opt;
-            }
+            var opts = repeat(opt, scene.count);
+
             if(scene.fill2d) scene.fill2d.update(opts);
             if(scene.scatter2d) scene.scatter2d.update(opts);
             if(scene.line2d) scene.line2d.update(opts);
             if(scene.error2d) scene.error2d.update(opts.concat(opts));
             if(scene.select2d) scene.select2d.update(opts);
             if(scene.glText) {
-                for(i = 0; i < scene.count; i++) {
-                    scene.glText[i].update(opts[i]);
+                for(var i = 0; i < scene.count; i++) {
+                    scene.glText[i].update(opt);
                 }
             }
 
@@ -290,18 +288,7 @@ function sceneUpdate(gd, subplot) {
         };
 
         scene.clear = function clear() {
-            var fullLayout = gd._fullLayout;
-            var vpSize = fullLayout._size;
-            var width = fullLayout.width;
-            var height = fullLayout.height;
-            var xaxis = subplot.xaxis;
-            var yaxis = subplot.yaxis;
-            var vp = [
-                vpSize.l + xaxis.domain[0] * vpSize.w,
-                vpSize.b + yaxis.domain[0] * vpSize.h,
-                (width - vpSize.r) - (1 - xaxis.domain[1]) * vpSize.w,
-                (height - vpSize.t) - (1 - yaxis.domain[1]) * vpSize.h
-            ];
+            var vp = getViewport(gd._fullLayout, subplot.xaxis, subplot.yaxis);
 
             if(scene.select2d) {
                 clearViewport(scene.select2d, vp);
@@ -352,6 +339,18 @@ function sceneUpdate(gd, subplot) {
     return scene;
 }
 
+function getViewport(fullLayout, xaxis, yaxis) {
+    var gs = fullLayout._size;
+    var width = fullLayout.width;
+    var height = fullLayout.height;
+    return [
+        gs.l + xaxis.domain[0] * gs.w,
+        gs.b + yaxis.domain[0] * gs.h,
+        (width - gs.r) - (1 - xaxis.domain[1]) * gs.w,
+        (height - gs.t) - (1 - yaxis.domain[1]) * gs.h
+    ];
+}
+
 function clearViewport(comp, vp) {
     var gl = comp.regl._gl;
     gl.enable(gl.SCISSOR_TEST);
@@ -360,22 +359,26 @@ function clearViewport(comp, vp) {
     gl.clear(gl.COLOR_BUFFER_BIT);
 }
 
+function repeat(opt, cnt) {
+    var opts = new Array(cnt);
+    for(var i = 0; i < cnt; i++) {
+        opts[i] = opt;
+    }
+    return opts;
+}
+
 function plot(gd, subplot, cdata) {
     if(!cdata.length) return;
 
-    var i;
-
     var fullLayout = gd._fullLayout;
-    var scene = cdata[0][0].t._scene;
-    var dragmode = fullLayout.dragmode;
+    var scene = subplot._scene;
+    var xaxis = subplot.xaxis;
+    var yaxis = subplot.yaxis;
+    var i, j;
 
     // we may have more subplots than initialized data due to Axes.getSubplots method
     if(!scene) return;
 
-    var vpSize = fullLayout._size;
-    var width = fullLayout.width;
-    var height = fullLayout.height;
-
     var success = prepareRegl(gd, ['ANGLE_instanced_arrays', 'OES_element_index_uint']);
     if(!success) {
         scene.init();
@@ -516,38 +519,20 @@ function plot(gd, subplot, cdata) {
         }
     }
 
-    var selectMode = dragmode === 'lasso' || dragmode === 'select';
+    // form batch arrays, and check for selected points
     scene.selectBatch = null;
     scene.unselectBatch = null;
+    var dragmode = fullLayout.dragmode;
+    var selectMode = dragmode === 'lasso' || dragmode === 'select';
 
-    // provide viewport and range
-    var vpRange = cdata.map(function(cdscatter) {
-        if(!cdscatter || !cdscatter[0] || !cdscatter[0].trace) return;
-        var cd = cdscatter[0];
-        var trace = cd.trace;
-        var stash = cd.t;
-        var id = stash.index;
+    for(i = 0; i < cdata.length; i++) {
+        var cd0 = cdata[i][0];
+        var trace = cd0.trace;
+        var stash = cd0.t;
+        var index = stash.index;
         var x = stash.x;
         var y = stash.y;
 
-        var xaxis = subplot.xaxis || AxisIDs.getFromId(gd, trace.xaxis || 'x');
-        var yaxis = subplot.yaxis || AxisIDs.getFromId(gd, trace.yaxis || 'y');
-        var i;
-
-        var range = [
-            (xaxis._rl || xaxis.range)[0],
-            (yaxis._rl || yaxis.range)[0],
-            (xaxis._rl || xaxis.range)[1],
-            (yaxis._rl || yaxis.range)[1]
-        ];
-
-        var viewport = [
-            vpSize.l + xaxis.domain[0] * vpSize.w,
-            vpSize.b + yaxis.domain[0] * vpSize.h,
-            (width - vpSize.r) - (1 - xaxis.domain[1]) * vpSize.w,
-            (height - vpSize.t) - (1 - yaxis.domain[1]) * vpSize.h
-        ];
-
         if(trace.selectedpoints || selectMode) {
             if(!selectMode) selectMode = true;
 
@@ -558,37 +543,35 @@ function plot(gd, subplot, cdata) {
 
             // regenerate scene batch, if traces number changed during selection
             if(trace.selectedpoints) {
-                var selPts = scene.selectBatch[id] = Lib.selIndices2selPoints(trace);
+                var selPts = scene.selectBatch[index] = Lib.selIndices2selPoints(trace);
 
                 var selDict = {};
-                for(i = 0; i < selPts.length; i++) {
-                    selDict[selPts[i]] = 1;
+                for(j = 0; j < selPts.length; j++) {
+                    selDict[selPts[j]] = 1;
                 }
                 var unselPts = [];
-                for(i = 0; i < stash.count; i++) {
-                    if(!selDict[i]) unselPts.push(i);
+                for(j = 0; j < stash.count; j++) {
+                    if(!selDict[j]) unselPts.push(j);
                 }
-                scene.unselectBatch[id] = unselPts;
+                scene.unselectBatch[index] = unselPts;
             }
 
             // precalculate px coords since we are not going to pan during select
-            var xpx = new Array(stash.count);
-            var ypx = new Array(stash.count);
-            for(i = 0; i < stash.count; i++) {
-                xpx[i] = xaxis.c2p(x[i]);
-                ypx[i] = yaxis.c2p(y[i]);
+            // TODO, could do better here e.g.
+            // - spin that in a webworker
+            // - compute selection from polygons in data coordinates
+            //   (maybe just for linear axes)
+            var xpx = stash.xpx = new Array(stash.count);
+            var ypx = stash.ypx = new Array(stash.count);
+            for(j = 0; j < stash.count; j++) {
+                xpx[j] = xaxis.c2p(x[j]);
+                ypx[j] = yaxis.c2p(y[j]);
             }
-            stash.xpx = xpx;
-            stash.ypx = ypx;
-        }
-        else {
+        } else {
             stash.xpx = stash.ypx = null;
         }
+    }
 
-        return trace.visible ?
-            {viewport: viewport, range: range} :
-            null;
-    });
 
     if(selectMode) {
         // create select2d
@@ -618,6 +601,19 @@ function plot(gd, subplot, cdata) {
         }
     }
 
+    // provide viewport and range
+    var vpRange0 = {
+        viewport: getViewport(fullLayout, xaxis, yaxis),
+        // TODO do we need those fallbacks?
+        range: [
+            (xaxis._rl || xaxis.range)[0],
+            (yaxis._rl || yaxis.range)[0],
+            (xaxis._rl || xaxis.range)[1],
+            (yaxis._rl || yaxis.range)[1]
+        ]
+    };
+    var vpRange = repeat(vpRange0, scene.count);
+
     // upload viewport/range data to GPU
     if(scene.fill2d) {
         scene.fill2d.update(vpRange);
@@ -635,14 +631,10 @@ function plot(gd, subplot, cdata) {
         scene.select2d.update(vpRange);
     }
     if(scene.glText) {
-        scene.glText.forEach(function(text, i) {
-            text.update(vpRange[i]);
-        });
+        scene.glText.forEach(function(text) { text.update(vpRange0); });
     }
 
     scene.draw();
-
-    return;
 }