Refactor scattergl selection

package.json

@@ -57,6 +57,7 @@
  "3d-view": "^2.0.0",
  "@plotly/d3-sankey": "^0.5.0",
  "alpha-shape": "^1.0.0",
+ "array-range": "^1.0.1",
  "bubleify": "^1.0.0",
  "canvas-fit": "^1.5.0",
  "color-normalize": "^1.0.3",
@@ -98,7 +99,7 @@
  "regl": "^1.3.1",
  "regl-error2d": "^2.0.3",
  "regl-line2d": "^2.1.2",
- "regl-scatter2d": "^2.1.12",
+ "regl-scatter2d": "^2.1.13",
  "right-now": "^1.0.0",
  "robust-orientation": "^1.1.3",
  "sane-topojson": "^2.0.0",

src/plots/cartesian/select.js

@@ -278,7 +278,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
  else {
  // TODO: remove in v2 - this was probably never intended to work as it does,
  // but in case anyone depends on it we don't want to break it now.
- gd.emit('plotly_selected', undefined);
+ gd.emit('plotly_selected', {points: [], range: null});
  }
 
  Fx.click(gd, evt);

src/traces/scattergl/index.js

@@ -28,6 +28,7 @@ var createError = require('regl-error2d');
 var rgba = require('color-normalize');
 var svgSdf = require('svg-path-sdf');
 var createRegl = require('regl');
+var arrayRange = require('array-range');
 var fillHoverText = require('../scatter/fill_hover_text');
 var isNumeric = require('fast-isnumeric');
 
@@ -122,7 +123,6 @@ function calc(container, trace) {
  }
  }
 
-
  calcColorscales(trace);
 
  var options = sceneOptions(container, subplot, trace, positions);
@@ -599,6 +599,7 @@ function sceneUpdate(container, subplot) {
  scene.error2d.draw(i);
  scene.error2d.draw(i + scene.count);
  }
+
  if(scene.scatter2d && !scene.selectBatch) {
  scene.scatter2d.draw(i);
  }
@@ -740,8 +741,9 @@ function plot(container, subplot, cdata) {
  if(!cdata.length) return;
 
  var layout = container._fullLayout;
- var stash = cdata[0][0].t;
- var scene = stash.scene;
+ var scene = cdata[0][0].t.scene;
+ var i;
+ var dragmode = layout.dragmode;
 
  // we may have more subplots than initialized data due to Axes.getSubplots method
  if(!scene) return;
@@ -782,6 +784,7 @@ function plot(container, subplot, cdata) {
  scene.fill2d = createLine(regl);
  }
 
+ // update main marker options
  if(scene.line2d) {
  scene.line2d.update(scene.lineOptions);
  }
@@ -790,13 +793,7 @@ function plot(container, subplot, cdata) {
  scene.error2d.update(errorBatch);
  }
  if(scene.scatter2d) {
- if(!scene.selectBatch) {
- scene.scatter2d.update(scene.markerOptions);
- }
- else {
- scene.scatter2d.update(scene.unselectedOptions);
- scene.select2d.update(scene.selectedOptions);
- }
+ scene.scatter2d.update(scene.markerOptions);
  }
  // fill requires linked traces, so we generate it's positions here
  if(scene.fill2d) {
@@ -886,17 +883,77 @@ function plot(container, subplot, cdata) {
 
  scene.fill2d.update(scene.fillOptions);
  }
- }
 
- // make sure selection layer is initialized if we require selection
- var dragmode = layout.dragmode;
 
- if(dragmode === 'lasso' || dragmode === 'select') {
- if(scene.select2d && scene.selectBatch) {
- scene.scatter2d.update(scene.unselectedOptions);
+ // update selection
+ var hasSelectedPoints = false;
+ for(i = 0; i < cdata.length; i++) {
+ if(cdata[i][0].trace.selectedpoints) {
+ hasSelectedPoints = true;
+ break;
+ }
+ }
+
+ if(scene.selectBatch || dragmode === 'lasso' || dragmode === 'select' || hasSelectedPoints) {
+ var newSelectBatch, newUnselectBatch;
+
+ // create select2d
+ if(!scene.select2d) {
+ // create scatter instance by cloning scatter2d
+ scene.select2d = createScatter(layout._glcanvas.data()[1].regl, {clone: scene.scatter2d});
+ }
+
+ // regenerate scene batch, if traces number changed during selection
+ if(scene.selectBatch || hasSelectedPoints) {
+ if(!scene.selectBatch) scene.selectBatch = [];
+ if(!scene.unselectBatch) scene.unselectBatch = [];
+
+ newSelectBatch = Array(scene.count);
+ newUnselectBatch = Array(scene.count);
+
+ for(var j = 0; j < newSelectBatch.length; j++) {
+ var trace = cdata[j][0].trace;
+ var stash = cdata[j][0].t;
+ var id = stash.index;
+
+ // form unselected batch
+ if(!scene.unselectBatch[id]) {
+ if(trace.selectedpoints) {
+ newSelectBatch[id] = trace.selectedpoints;
+ var selPts = trace.selectedpoints;
+ var selDict = {};
+ for(i = 0; i < selPts.length; i++) {
+ selDict[selPts[i]] = true;
+ }
+ var unselPts = [];
+ for(i = 0; i < stash.count; i++) {
+ if(!selDict[i]) unselPts.push(i);
+ }
+ newUnselectBatch[id] = unselPts;
+ }
+ else {
+ newSelectBatch[id] = [];
+ newUnselectBatch[id] = arrayRange(stash.count);
+ }
+ }
+ else {
+ newSelectBatch[id] = scene.selectBatch[id];
+ newUnselectBatch[id] = scene.unselectBatch[id];
+ }
+ }
+
+ scene.selectBatch = newSelectBatch;
+ scene.unselectBatch = newUnselectBatch;
+
+ scene.scatter2d.update(scene.unselectedOptions);
+ }
+
+ scene.select2d.update(scene.markerOptions);
+ scene.select2d.update(scene.selectedOptions);
  }
  }
 
+
  // provide viewport and range
  var vpRange = cdata.map(function(cdscatter) {
  if(!cdscatter || !cdscatter[0] || !cdscatter[0].trace) return;
@@ -925,41 +982,6 @@ function plot(container, subplot, cdata) {
  ];
 
  if(trace.selectedpoints || dragmode === 'lasso' || dragmode === 'select') {
- // create select2d
- if(!scene.select2d && scene.scatter2d) {
- var selectRegl = layout._glcanvas.data()[1].regl;
-
- // create scatter instance by cloning scatter2d
- scene.select2d = createScatter(selectRegl, {clone: scene.scatter2d});
- scene.select2d.update(scene.selectedOptions);
-
- // create selection style once we have something selected
- if(trace.selectedpoints && !scene.selectBatch) {
- scene.selectBatch = Array(scene.count);
- scene.unselectBatch = Array(scene.count);
- scene.scatter2d.update(scene.unselectedOptions);
- }
- }
- else {
- // update selection positions, since they may have changed by panning or alike
- scene.select2d.update(scene.selectedOptions);
- }
-
- // form unselected batch
- if(trace.selectedpoints && !scene.unselectBatch[stash.index]) {
- scene.selectBatch[stash.index] = trace.selectedpoints;
- var selPts = trace.selectedpoints;
- var selDict = {};
- for(i = 0; i < selPts.length; i++) {
- selDict[selPts[i]] = true;
- }
- var unselPts = [];
- for(i = 0; i < stash.count; i++) {
- if(!selDict[i]) unselPts.push(i);
- }
- scene.unselectBatch[stash.index] = unselPts;
- }
-
  // precalculate px coords since we are not going to pan during select
  var xpx = Array(stash.count), ypx = Array(stash.count);
  for(i = 0; i < stash.count; i++) {
@@ -1193,18 +1215,18 @@ function selectPoints(searchInfo, polygon) {
  }
  }
  else {
- unels = Array(stash.count);
- for(i = 0; i < stash.count; i++) {
- unels[i] = i;
- }
+ unels = arrayRange(stash.count);
  }
 
- // create selection style once we have something selected
+ // make sure selectBatch is created
  if(!scene.selectBatch) {
- scene.selectBatch = Array(scene.count);
- scene.unselectBatch = Array(scene.count);
+ scene.selectBatch = [];
+ scene.unselectBatch = [];
+
+ // we should turn scatter2d into unselected once we have any points selected
  scene.scatter2d.update(scene.unselectedOptions);
  }
+
  scene.selectBatch[stash.index] = els;
  scene.unselectBatch[stash.index] = unels;