Fix a lasso selection issue and improve lasso long press style

Author: flekschas

CHANGELOG.md

@@ -1,3 +1,9 @@
+## v1.6.1
+
+- Update third party libraries
+- Improve lasso long press indicator styling
+- Fix an issue where a lasso with less than three control points
+
 ## v1.6.0
 
 - Add the ability to filter down points via `scatterplot.filter(pointIdxs)`. This can be useful if you need to temporarily need to hide points without having to re-instantiate the regl-scatterplot instance. E.g., when calling `scatterplot.filter([0, 1, 2])`, only the first, second, and third point will remain visible. All other points (and their related point connections) will be visually and interactively hidden.

package-lock.json

@@ -29,12 +29,12 @@
     "prepublishOnly": "npm run test; rm -rf dist/*; npm run build;",
     "prerelease": "rm -rf dist/*; npm run build; zip -r dist.zip dist",
     "pretest": "npm run lint",
-    "start": "vite",
+    "start": "vite --port=3000",
     "test": "rollup -c ./rollup.test.config.mjs | tape-run --render='tap-spec'",
     "watch": "rollup -cw"
   },
   "dependencies": {
-    "@flekschas/utils": "^0.29.0",
+    "@flekschas/utils": "^0.30.1",
     "dom-2d-camera": "~2.2.5",
     "gl-matrix": "~3.4.3",
     "kdbush": "~3.0.0",

package.json

@@ -4,6 +4,7 @@ import createPubSub from 'pub-sub-es';
 import { mat4, vec4 } from 'gl-matrix';
 import createLine from 'regl-line';
 import {
+  hasSameElements,
   identity,
   rangeMap,
   unionIntegers,
@@ -117,6 +118,7 @@ import {
   createTextureFromUrl,
   dist,
   getBBox,
+  isValidBBox,
   isConditionalArray,
   isPositiveNumber,
   isStrictlyPositiveNumber,
@@ -570,6 +572,9 @@ const createScatterplot = (
   const findPointsInLasso = (lassoPolygon) => {
     // get the bounding box of the lasso selection...
     const bBox = getBBox(lassoPolygon);
+
+    if (!isValidBBox(bBox)) return [];
+
     // ...to efficiently preselect potentially selected points
     const pointsInBBox = getPointsInBBox(...bBox);
     // next we test each point in the bounding box if it is in the polygon too
@@ -675,14 +680,28 @@ const createScatterplot = (
    */
   const select = (pointIdxs, { merge = false, preventEvent = false } = {}) => {
     const pointIdxsArr = Array.isArray(pointIdxs) ? pointIdxs : [pointIdxs];
+    const currSelectedPoints = [...selectedPoints];
 
     if (merge) {
       selectedPoints = unionIntegers(selectedPoints, pointIdxsArr);
+      if (currSelectedPoints.length === selectedPoints.length) {
+        draw = true;
+        return;
+      }
     } else {
       // Unset previously highlight point connections
       if (selectedPoints && selectedPoints.length)
         setPointConnectionColorState(selectedPoints, 0);
       selectedPoints = pointIdxsArr;
+      if (currSelectedPoints.length > 0 && selectedPoints.length === 0) {
+        deselect({ preventEvent });
+        return;
+      }
+    }
+
+    if (hasSameElements(currSelectedPoints, selectedPoints)) {
+      draw = true;
+      return;
     }
 
     const selectedPointsBuffer = [];
@@ -935,7 +954,7 @@ const createScatterplot = (
   const mouseMoveHandler = (event) => {
     if (!isInit || (!isMouseInCanvas && !mouseDown)) return;
 
-    getRelativeMousePosition(event);
+    const currentMousePosition = getRelativeMousePosition(event);
 
     // Only ray cast if the mouse cursor is inside
     if (isMouseInCanvas && !lassoActive) {
@@ -945,10 +964,13 @@ const createScatterplot = (
     if (lassoActive) {
       event.preventDefault();
       lassoManager.extend(event, true);
-    } else if (lassoOnLongPress) {
-      lassoManager.hideLongPressIndicator({
-        time: lassoLongPressRevertEffectTime,
-      });
+    } else {
+      const mouseMoveDist = dist(...currentMousePosition, ...mouseDownPosition);
+      if (mouseDown && lassoOnLongPress && mouseMoveDist >= lassoMinDist) {
+        lassoManager.hideLongPressIndicator({
+          time: lassoLongPressRevertEffectTime,
+        });
+      }
     }
 
     if (mouseDownTimeout >= 0) {
@@ -2447,10 +2469,7 @@ const createScatterplot = (
   };
 
   const updateLassoLongPressIndicatorStyle = () => {
-    const v =
-      Math.round(backgroundColorBrightness) > 0.5
-        ? Math.round(backgroundColorBrightness * 255) - 85
-        : Math.round(backgroundColorBrightness * 255) + 85;
+    const v = Math.round(backgroundColorBrightness) > 0.5 ? 0 : 255;
 
     lassoManager.longPressIndicator.style.color = `rgb(${v}, ${v}, ${v})`;
     lassoManager.longPressIndicator.dataset.color = `rgb(${v}, ${v}, ${v})`;

src/index.js

@@ -24,11 +24,17 @@ const getCircleInAnimation = (t, d) =>
 
 const getMainIn = (mainEffectPercent, currentColor, targetColor) => `
   @keyframes mainIn {
+    0% {
+      color: ${currentColor};
+      opacity: 0;
+    }
     0%, ${mainEffectPercent}% {
       color: ${currentColor};
+      opacity: 1;
     }
     100% {
       color: ${targetColor};
+      opacity: 0.8;
     }
   }
 `;

src/lasso-manager/create-long-press-animations.js

@@ -5,17 +5,17 @@ export const createLongPressElements = () => {
     Math.random().toString(36).substring(2, 5);
   longPress.id = `lasso-long-press-${longPressId}`;
   longPress.style.position = 'fixed';
-  longPress.style.width = '1.5rem';
-  longPress.style.height = '1.5rem';
+  longPress.style.width = '1.25rem';
+  longPress.style.height = '1.25rem';
   longPress.style.pointerEvents = 'none';
   longPress.style.transform = 'translate(-50%,-50%)';
 
   const longPressCircle = document.createElement('div');
   longPressCircle.style.position = 'absolute';
   longPressCircle.style.top = 0;
   longPressCircle.style.left = 0;
-  longPressCircle.style.width = '1.5rem';
-  longPressCircle.style.height = '1.5rem';
+  longPressCircle.style.width = '1.25rem';
+  longPressCircle.style.height = '1.25rem';
   longPressCircle.style.clipPath = 'inset(0px 0px 0px 50%)';
   longPressCircle.style.opacity = 0;
   longPress.appendChild(longPressCircle);
@@ -24,10 +24,10 @@ export const createLongPressElements = () => {
   longPressCircleLeft.style.position = 'absolute';
   longPressCircleLeft.style.top = 0;
   longPressCircleLeft.style.left = 0;
-  longPressCircleLeft.style.width = '1rem';
-  longPressCircleLeft.style.height = '1rem';
-  longPressCircleLeft.style.border = '0.25rem solid currentcolor';
-  longPressCircleLeft.style.borderRadius = '1rem';
+  longPressCircleLeft.style.width = '0.8rem';
+  longPressCircleLeft.style.height = '0.8rem';
+  longPressCircleLeft.style.border = '0.2rem solid currentcolor';
+  longPressCircleLeft.style.borderRadius = '0.8rem';
   longPressCircleLeft.style.clipPath = 'inset(0px 50% 0px 0px)';
   longPressCircleLeft.style.transform = 'rotate(0deg)';
   longPressCircle.appendChild(longPressCircleLeft);
@@ -36,10 +36,10 @@ export const createLongPressElements = () => {
   longPressCircleRight.style.position = 'absolute';
   longPressCircleRight.style.top = 0;
   longPressCircleRight.style.left = 0;
-  longPressCircleRight.style.width = '1rem';
-  longPressCircleRight.style.height = '1rem';
-  longPressCircleRight.style.border = '0.25rem solid currentcolor';
-  longPressCircleRight.style.borderRadius = '1rem';
+  longPressCircleRight.style.width = '0.8rem';
+  longPressCircleRight.style.height = '0.8rem';
+  longPressCircleRight.style.border = '0.2rem solid currentcolor';
+  longPressCircleRight.style.borderRadius = '0.8rem';
   longPressCircleRight.style.clipPath = 'inset(0px 50% 0px 0px)';
   longPressCircleRight.style.transform = 'rotate(0deg)';
   longPressCircle.appendChild(longPressCircleRight);
@@ -48,9 +48,9 @@ export const createLongPressElements = () => {
   longPressEffect.style.position = 'absolute';
   longPressEffect.style.top = 0;
   longPressEffect.style.left = 0;
-  longPressEffect.style.width = '1.5rem';
-  longPressEffect.style.height = '1.5rem';
-  longPressEffect.style.borderRadius = '1.5rem';
+  longPressEffect.style.width = '1.25rem';
+  longPressEffect.style.height = '1.25rem';
+  longPressEffect.style.borderRadius = '1.25rem';
   longPressEffect.style.background = 'currentcolor';
   longPressEffect.style.transform = 'scale(0)';
   longPressEffect.style.opacity = 0;

src/lasso-manager/create-long-press-elements.js

@@ -95,6 +95,19 @@ export const getBBox = (positions2d) => {
   return [xMin, yMin, xMax, yMax];
 };
 
+/**
+ * Test whether a bounding box is actually specifying an area
+ * @param   {array}  bBox  The bounding box to be checked
+ * @return  {array}  `true` if the bounding box is valid
+ */
+export const isValidBBox = ([xMin, yMin, xMax, yMax]) =>
+  Number.isFinite(xMin) &&
+  Number.isFinite(yMin) &&
+  Number.isFinite(xMax) &&
+  Number.isFinite(yMax) &&
+  xMax - xMin > 0 &&
+  yMax - yMin > 0;
+
 /**
  * Convert a HEX-encoded color to an RGB-encoded color
  * @param   {string}  hex  HEX-encoded color string.

src/utils.js

@@ -46,7 +46,7 @@ import {
   IMAGE_LOAD_ERROR,
 } from '../src/constants';
 
-import { toRgba, isNormFloatArray } from '../src/utils';
+import { toRgba, isNormFloatArray, isValidBBox } from '../src/utils';
 
 import {
   asyncForEach,
@@ -1983,6 +1983,7 @@ test(
       'should have silently selected three points'
     );
 
+    scatterplot.deselect();
     scatterplot.select([0, 2, 4]);
     scatterplot.deselect({ preventEvent: true });
 
@@ -2365,6 +2366,42 @@ test(
 
 /* --------------------------------- Utils ---------------------------------- */
 
+test(
+  'isValidBBox()',
+  catchError(async (t) => {
+    t.equal(
+      isValidBBox([1, 2, 3, 4]),
+      true,
+      'should recognize valid bounding box'
+    );
+    t.equal(
+      isValidBBox([1, 2, 1, 4]),
+      false,
+      'should recognize invalid bounding box (x range is zero)'
+    );
+    t.equal(
+      isValidBBox([1, 2, 3, 2]),
+      false,
+      'should recognize invalid bounding box (y range is zero)'
+    );
+    t.equal(
+      isValidBBox([1, Infinity, 3, 2]),
+      false,
+      'should recognize invalid bounding box (infinity is not allowed)'
+    );
+    t.equal(
+      isValidBBox([1, -Infinity, 3, 2]),
+      false,
+      'should recognize invalid bounding box (-infinity is not allowed)'
+    );
+    t.equal(
+      isValidBBox([1, Number.NaN, 3, 2]),
+      false,
+      'should recognize invalid bounding box (NaN is not allowed)'
+    );
+  })
+);
+
 test(
   'isNormFloatArray()',
   catchError(async (t) => {