Add preventEvent to select() and deselect(). Refactor lasso props.

Author: flekschas

README.md

@@ -64,9 +64,9 @@ Regl-scatterplot supports two color modes: coloring by value or coloring by cate
 ```javascript
 scatterplot.draw([
   // x, y, category, value
-   0.2, -0.1, 0, 0.1337,
-   0.3,  0.1, 0, 0.3371,
-  -0.9,  0.8, 1, 0.3713,
+  [0.2, -0.1, 0, 0.1337],
+  [0.3, 0.1, 0, 0.3371],
+  [-0.9, 0.8, 1, 0.3713],
 ]);
 ```
 
@@ -281,14 +281,38 @@ scatterplot.set({
 scatterplot.set({ showRecticle: true, recticleColor: [1, 0, 0, 0.66] });
 ```
 
-<a name="scatterplot.select" href="#scatterplot.select">#</a> scatterplot.<b>select</b>()
+<a name="scatterplot.select" href="#scatterplot.select">#</a> scatterplot.<b>select</b>(<i>points</i>, <i>options = {}</i>)
 
-Select some points, such that they get visually highlighted. This will trigger
-a `select` event.
+Select some points, such that they get visually highlighted. This will trigger a `select` event unless `options.preventEvent === true`.
 
-<a name="scatterplot.deselect" href="#scatterplot.deselect">#</a> scatterplot.<b>deselect</b>()
+**Arguments:**
 
-Deselect all selected points. This will trigger a `deselect` event.
+- `points` is an array of point indices.
+- `options` [optional] is an object with the following properties:
+  - `preventEvent`: if `true` the `select` will not be published.
+
+**Examples:**
+
+```javascript
+// Let's say we have three points
+scatterplot.draw([
+  [0.1, 0.1],
+  [0.2, 0.2],
+  [0.3, 0.3],
+]);
+
+// To select the first and second point we have to do
+scatterplot.select([0, 1]);
+```
+
+<a name="scatterplot.deselect" href="#scatterplot.deselect">#</a> scatterplot.<b>deselect</b>(<i>options = {}</i>)
+
+Deselect all selected points. This will trigger a `deselect` event unless `options.preventEvent === true`.
+
+**Arguments:**
+
+- `options` [optional] is an object with the following properties:
+  - `preventEvent`: if `true` the `deselect` will not be published.
 
 <a name="scatterplot.destroy" href="#scatterplot.destroy">#</a> scatterplot.<b>destroy</b>()
 

src/constants.js

@@ -5,8 +5,10 @@ export const COLOR_NORMAL_IDX = 0;
 export const COLOR_NUM_STATES = 4;
 export const FLOAT_BYTES = Float32Array.BYTES_PER_ELEMENT;
 export const GL_EXTENSIONS = ['OES_standard_derivatives', 'OES_texture_float'];
-export const LASSO_MIN_DELAY = 10;
-export const LASSO_MIN_DIST = 3;
+
+// Default lasso
+export const DEFAULT_LASSO_MIN_DELAY = 10;
+export const DEFAULT_LASSO_MIN_DIST = 3;
 
 // Default attribute
 export const DEFAULT_DATA_ASPECT_RATIO = 1;

src/index.js

@@ -27,6 +27,8 @@ import {
   DEFAULT_DISTANCE,
   DEFAULT_HEIGHT,
   DEFAULT_LASSO_COLOR,
+  DEFAULT_LASSO_MIN_DELAY,
+  DEFAULT_LASSO_MIN_DIST,
   DEFAULT_SHOW_RECTICLE,
   DEFAULT_RECTICLE_COLOR,
   DEFAULT_POINT_OUTLINE_WIDTH,
@@ -37,8 +39,6 @@ import {
   DEFAULT_VIEW,
   DEFAULT_WIDTH,
   FLOAT_BYTES,
-  LASSO_MIN_DELAY,
-  LASSO_MIN_DIST,
 } from './constants';
 
 import {
@@ -94,8 +94,8 @@ const createScatterplot = (initialProperties = {}) => {
     canvas: initialCanvas = document.createElement('canvas'),
     colorBy: initialColorBy = DEFAULT_COLOR_BY,
     lassoColor: initialLassoColor = DEFAULT_LASSO_COLOR,
-    lassoMinDelay: initialLassoMinDelay = LASSO_MIN_DELAY,
-    lassoMinDist: initialLassoMinDist = LASSO_MIN_DIST,
+    lassoMinDelay: initialLassoMinDelay = DEFAULT_LASSO_MIN_DELAY,
+    lassoMinDist: initialLassoMinDist = DEFAULT_LASSO_MIN_DIST,
     showRecticle: initialShowRecticle = DEFAULT_SHOW_RECTICLE,
     recticleColor: initialRecticleColor = DEFAULT_RECTICLE_COLOR,
     pointColor: initialPointColor = DEFAULT_COLOR_NORMAL,
@@ -296,15 +296,15 @@ const createScatterplot = (initialProperties = {}) => {
     return pointsInPolygon;
   };
 
-  const deselect = () => {
+  const deselect = ({ preventEvent = false } = {}) => {
     if (selection.length) {
-      pubSub.publish('deselect');
+      if (!preventEvent) pubSub.publish('deselect');
       selection = [];
       drawRaf(); // eslint-disable-line no-use-before-define
     }
   };
 
-  const select = (points) => {
+  const select = (points, { preventEvent = false } = {}) => {
     selection = points;
 
     selectedPointsIndexBuffer({
@@ -313,9 +313,7 @@ const createScatterplot = (initialProperties = {}) => {
       data: new Float32Array(selection),
     });
 
-    pubSub.publish('select', {
-      points: selection,
-    });
+    if (!preventEvent) pubSub.publish('select', { points: selection });
 
     drawRaf(); // eslint-disable-line no-use-before-define
   };
@@ -329,7 +327,16 @@ const createScatterplot = (initialProperties = {}) => {
     return [...mousePosition];
   };
 
+  const lassoStart = () => {
+    // Fix camera for the lasso selection
+    camera.config({ isFixed: true });
+    // Make sure we start a new lasso selection
+    lassoPrevMousePos = undefined;
+    lasso.clear();
+  };
+
   const lassoEnd = () => {
+    camera.config({ isFixed: false });
     // const t0 = performance.now();
     const pointsInLasso = findPointsInLasso(lassoScatterPos);
     // console.log(`found ${pointsInLasso.length} in ${performance.now() - t0} msec`);
@@ -349,12 +356,7 @@ const createScatterplot = (initialProperties = {}) => {
     mouseDownPosition = getRelativeMousePosition(event);
     mouseDownShift = event.shiftKey;
 
-    if (mouseDownShift) {
-      // Fix camera for the lasso selection
-      camera.config({ isFixed: true });
-      // Make sure we start a new lasso selection
-      lassoPrevMousePos = undefined;
-    }
+    if (mouseDownShift) lassoStart();
   };
 
   const mouseUpHandler = () => {
@@ -364,7 +366,6 @@ const createScatterplot = (initialProperties = {}) => {
 
     if (mouseDownShift) {
       mouseDownShift = false;
-      camera.config({ isFixed: false });
       lassoEnd();
     }
   };
@@ -375,7 +376,7 @@ const createScatterplot = (initialProperties = {}) => {
     const currentMousePosition = getRelativeMousePosition(event);
     const clickDist = dist(...currentMousePosition, ...mouseDownPosition);
 
-    if (clickDist >= LASSO_MIN_DIST) return;
+    if (clickDist >= lassoMinDist) return;
 
     const clostestPoint = raycast();
     if (clostestPoint >= 0) select([clostestPoint]);
@@ -972,6 +973,8 @@ const createScatterplot = (initialProperties = {}) => {
     if (property === 'colorBy') return colorBy;
     if (property === 'height') return height;
     if (property === 'lassoColor') return lassoColor;
+    if (property === 'lassoMinDelay') return lassoMinDelay;
+    if (property === 'lassoMinDist') return lassoMinDist;
     if (property === 'opacity') return opacity;
     if (property === 'pointColor')
       return pointColors.length === 1 ? pointColors[0] : pointColors;

tests/index.js

@@ -20,8 +20,8 @@ import {
   DEFAULT_POINT_SIZE,
   DEFAULT_POINT_SIZE_SELECTED,
   DEFAULT_WIDTH,
-  LASSO_MIN_DELAY,
-  LASSO_MIN_DIST,
+  DEFAULT_LASSO_MIN_DELAY,
+  DEFAULT_LASSO_MIN_DIST,
 } from '../src/constants';
 
 import {
@@ -502,33 +502,69 @@ test('set({ opacity })', async (t) => {
   );
 });
 
-test('set({ lassoColor })', async (t) => {
+test('set({ lassoColor, lassoMinDist, lassoMinDelay })', async (t) => {
   const scatterplot = createScatterplot({ canvas: createCanvas() });
 
-  // Check default lasso color
+  // Check default lasso color, min distance, and min delay
   t.equal(
     scatterplot.get('lassoColor'),
     DEFAULT_LASSO_COLOR,
     `lassoColor should be set to ${DEFAULT_LASSO_COLOR}`
   );
+  t.equal(
+    scatterplot.get('lassoMinDist'),
+    DEFAULT_LASSO_MIN_DIST,
+    `lassoMinDist should be set to ${DEFAULT_LASSO_MIN_DIST}`
+  );
+  t.equal(
+    scatterplot.get('lassoMinDelay'),
+    DEFAULT_LASSO_MIN_DELAY,
+    `lassoMinDelay should be set to ${DEFAULT_LASSO_MIN_DELAY}`
+  );
 
   const lassoColor = [1, 0, 0, 1];
+  const lassoMinDist = 10;
+  const lassoMinDelay = 150;
 
-  scatterplot.set({ lassoColor });
+  scatterplot.set({ lassoColor, lassoMinDist, lassoMinDelay });
 
   t.equal(
     scatterplot.get('lassoColor'),
     lassoColor,
     `lassoColor should be set to ${lassoColor}`
   );
+  t.equal(
+    scatterplot.get('lassoMinDist'),
+    lassoMinDist,
+    `lassoMinDist should be set to ${lassoMinDist}`
+  );
+  t.equal(
+    scatterplot.get('lassoMinDelay'),
+    lassoMinDelay,
+    `lassoMinDelay should be set to ${lassoMinDelay}`
+  );
 
-  scatterplot.set({ lassoColor: null });
+  scatterplot.set({
+    lassoColor: null,
+    lassoMinDist: null,
+    lassoMinDelay: null,
+  });
 
   t.equal(
     scatterplot.get('lassoColor'),
     lassoColor,
     'lassoColor should not be nullifyable'
   );
+  t.equal(
+    scatterplot.get('lassoMinDist'),
+    lassoMinDist,
+    'lassoMinDist should not be nullifyable'
+  );
+  t.equal(
+    scatterplot.get('lassoMinDelay'),
+    lassoMinDelay,
+    'lassoMinDelay should not be nullifyable'
+  );
 });
 
 test('set({ pointOutlineWidth })', async (t) => {
@@ -696,10 +732,10 @@ test('draw(), clear(), publish("select")', async (t) => {
   t.equal(selectedPoints.length, 0, 'should have deselected one point');
 
   // Test that mousedown + mousemove + click is not interpreted as a click when
-  // the cursor moved more than `LASSO_MIN_DIST` in between mousedown and
+  // the cursor moved more than `DEFAULT_LASSO_MIN_DIST` in between mousedown and
   // mouseup
   canvas.dispatchEvent(
-    createMouseEvent('mousedown', hdim - LASSO_MIN_DIST, hdim)
+    createMouseEvent('mousedown', hdim - DEFAULT_LASSO_MIN_DIST, hdim)
   );
   canvas.dispatchEvent(createMouseEvent('click', hdim, hdim));
 
@@ -763,7 +799,7 @@ test('lasso selection with publish("select")', async (t) => {
 
   await asyncForEach(mousePositions, async (mousePosition) => {
     window.dispatchEvent(createMouseEvent('mousemove', ...mousePosition));
-    await wait(LASSO_MIN_DELAY + 5);
+    await wait(DEFAULT_LASSO_MIN_DELAY + 5);
   });
 
   window.dispatchEvent(createMouseEvent('mouseup'));
@@ -846,3 +882,66 @@ test('point hover with publish("pointover") and publish("pointout")', async (t)
 //     'should have published the translated view'
 //   );
 // });
+
+/* ----------------------------- Other Methods ------------------------------ */
+
+test('select()', async (t) => {
+  const scatterplot = createScatterplot({ canvas: createCanvas() });
+
+  const points = [
+    [0, 0],
+    [1, 1],
+    [1, -1],
+    [-1, -1],
+    [-1, 1],
+  ];
+  scatterplot.draw(points);
+
+  // TODO: fix this!
+  await wait(250);
+
+  let selectedPoints = [];
+  const selectHandler = ({ points: newSelectedPoints }) => {
+    selectedPoints = [...newSelectedPoints];
+  };
+  const deselectHandler = () => {
+    selectedPoints = [];
+  };
+  scatterplot.subscribe('select', selectHandler);
+  scatterplot.subscribe('deselect', deselectHandler);
+
+  scatterplot.select([0, 2, 4]);
+
+  await wait(0);
+
+  t.ok(
+    flatArrayEqual([0, 2, 4], selectedPoints),
+    'should have selected point 0, 2, and 4'
+  );
+
+  scatterplot.deselect();
+
+  await wait(0);
+
+  t.equal(selectedPoints.length, 0, 'should have deselected all points');
+
+  scatterplot.select([0, 2, 4], { preventEvent: true });
+
+  await wait(0);
+
+  t.equal(
+    selectedPoints.length,
+    0,
+    'should have silently selected three points'
+  );
+
+  scatterplot.select([0, 2, 4]);
+  scatterplot.deselect({ preventEvent: true });
+
+  await wait(0);
+
+  t.ok(
+    flatArrayEqual([0, 2, 4], selectedPoints),
+    'should have silently deselected points'
+  );
+});