Merge pull request #8 from flekschas/improve-lasso

Improve lasso

Author: flekschas

CHANGELOG.md

@@ -1,3 +1,8 @@
+**v0.7.4**
+
+- Fix a rare glitch in the lasso selection where the lasso would be drawn with a far away point
+- Smoothify lasso by lowering the min delay and min dist
+
 **v0.7.3**
 
 - Fix glitch in the npm release of `v0.7.2`.

src/constants.js

@@ -5,8 +5,8 @@ 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 = 15;
-export const LASSO_MIN_DIST = 4;
+export const LASSO_MIN_DELAY = 10;
+export const LASSO_MIN_DIST = 3;
 
 // Default attribute
 export const DEFAULT_DATA_ASPECT_RATIO = 1;

src/index.js

@@ -211,8 +211,8 @@ const createScatterplot = ({
     const currMousePos = getMousePos();
 
     if (!lassoPrevMousePos) {
-      lassoPos.push(...getMouseGlPos(currMousePos));
-      lassoScatterPos.push(...getScatterGlPos(currMousePos));
+      lassoPos = [...getMouseGlPos(currMousePos)];
+      lassoScatterPos = [...getScatterGlPos(currMousePos)];
       lassoPrevMousePos = currMousePos;
     } else {
       const d = dist(...currMousePos, ...lassoPrevMousePos);
@@ -227,7 +227,7 @@ const createScatterplot = ({
       }
     }
   };
-  let lassoExtendDb = withThrottle(lassoExtend, lassoMinDelay, true);
+  let lassoExtendDb = withThrottle(lassoExtend, lassoMinDelay);
 
   const findPointsInLasso = lassoPolygon => {
     // get the bounding box of the lasso selection...
@@ -296,8 +296,12 @@ const createScatterplot = ({
     mouseDownPosition = getRelativeMousePosition(event);
     mouseDownShift = event.shiftKey;
 
-    // fix camera
-    if (mouseDownShift) camera.config({ isFixed: true });
+    if (mouseDownShift) {
+      // Fix camera for the lasso selection
+      camera.config({ isFixed: true });
+      // Make sure we start a new lasso selection
+      lassoPrevMousePos = undefined;
+    }
   };
 
   const mouseUpHandler = () => {
@@ -753,7 +757,7 @@ const createScatterplot = ({
     if (!+newLassoMinDelay) return;
 
     lassoMinDelay = +newLassoMinDelay;
-    lassoExtendDb = withThrottle(lassoExtend, lassoMinDelay, true);
+    lassoExtendDb = withThrottle(lassoExtend, lassoMinDelay);
   };
 
   const setLassoMinDist = newLassoMinDist => {