Add lassoLineWidth and remove OES_standard_derivatives GL extension

Author: flekschas

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## v0.18.2
 
 - Add two events: `init` and `destroy`
+- Add `lassoLineWidth` to allow adjusting the lasso line width
 - Fix an issue with normalizing RGBA values
 
 ## v0.18.1

README.md

@@ -383,6 +383,7 @@ can be read and written via [`scatterplot.get()`](#scatterplot.get) and [`scatte
 | pointConnectionMaxIntPointsPerSegment | int             | `100`                               |                                                                 | `true`   | `false`     |
 | pointConnectionTolerance              | float           | `0.002`                             |                                                                 | `true`   | `false`     |
 | lassoColor                            | quadruple       | rgba(0, 0.667, 1, 1)                | hex, rgb, rgba                                                  | `true`   | `false`     |
+| lassoLineWidth                        | float           | 2                                   | >= 1                                                            | `true`   | `false`     |
 | lassoMinDelay                         | int             | 15                                  | >= 0                                                            | `true`   | `false`     |
 | lassoMinDist                          | int             | 4                                   | >= 0                                                            | `true`   | `false`     |
 | lassoClearEvent                       | string          | `'lassoEnd'`                        | `'lassoEnd'` or `'deselect'`                                    | `true`   | `false`     |

src/constants.js

@@ -14,11 +14,7 @@ export const COLOR_HOVER_IDX = 2;
 export const COLOR_BG_IDX = 3;
 export const COLOR_NUM_STATES = 4;
 export const FLOAT_BYTES = Float32Array.BYTES_PER_ELEMENT;
-export const GL_EXTENSIONS = [
-  'OES_standard_derivatives',
-  'OES_texture_float',
-  'OES_element_index_uint',
-];
+export const GL_EXTENSIONS = ['OES_texture_float', 'OES_element_index_uint'];
 
 export const MOUSE_MODE_PANZOOM = 'panZoom';
 export const MOUSE_MODE_LASSO = 'lasso';
@@ -46,6 +42,8 @@ export const DEFAULT_EASING = cubicInOut;
 export const LASSO_CLEAR_ON_DESELECT = 'deselect';
 export const LASSO_CLEAR_ON_END = 'lassoEnd';
 export const LASSO_CLEAR_EVENTS = [LASSO_CLEAR_ON_DESELECT, LASSO_CLEAR_ON_END];
+export const DEFAULT_LASSO_COLOR = [0, 0.666666667, 1, 1];
+export const DEFAULT_LASSO_LINE_WIDTH = 2;
 export const DEFAULT_LASSO_INITIATOR = false;
 export const DEFAULT_LASSO_INITIATOR_BACKGROUND = 'rgba(255, 255, 255, 0.1)';
 export const DEFAULT_LASSO_MIN_DELAY = 10;
@@ -121,7 +119,6 @@ export const DEFAULT_VIEW = new Float32Array([
 
 // Default misc
 export const DEFAULT_BACKGROUND_IMAGE = null;
-export const DEFAULT_LASSO_COLOR = [0, 0.666666667, 1, 1];
 export const DEFAULT_SHOW_RETICLE = false;
 export const DEFAULT_RETICLE_COLOR = [1, 1, 1, 0.5];
 export const DEFAULT_DESELECT_ON_DBL_CLICK = true;

src/index.js

@@ -42,6 +42,7 @@ import {
   DEFAULT_EASING,
   DEFAULT_HEIGHT,
   DEFAULT_LASSO_COLOR,
+  DEFAULT_LASSO_LINE_WIDTH,
   DEFAULT_LASSO_MIN_DELAY,
   DEFAULT_LASSO_MIN_DIST,
   DEFAULT_LASSO_CLEAR_EVENT,
@@ -204,6 +205,7 @@ const createScatterplot = (initialProperties = {}) => {
     deselectOnDblClick = DEFAULT_DESELECT_ON_DBL_CLICK,
     deselectOnEscape = DEFAULT_DESELECT_ON_ESCAPE,
     lassoColor = DEFAULT_LASSO_COLOR,
+    lassoLineWidth = DEFAULT_LASSO_LINE_WIDTH,
     lassoMinDelay = DEFAULT_LASSO_MIN_DELAY,
     lassoMinDist = DEFAULT_LASSO_MIN_DIST,
     lassoClearEvent = DEFAULT_LASSO_CLEAR_EVENT,
@@ -2034,6 +2036,14 @@ const createScatterplot = (initialProperties = {}) => {
     lasso.setStyle({ color: lassoColor });
   };
 
+  const setLassoLineWidth = (newLassoLineWidth) => {
+    if (Number.isNaN(+newLassoLineWidth) || +newLassoLineWidth < 1) return;
+
+    lassoLineWidth = +newLassoLineWidth;
+
+    lasso.setStyle({ width: lassoLineWidth });
+  };
+
   const setLassoMinDelay = (newLassoMinDelay) => {
     if (!+newLassoMinDelay) return;
 
@@ -2290,6 +2300,7 @@ const createScatterplot = (initialProperties = {}) => {
     if (property === 'deselectOnEscape') return deselectOnEscape;
     if (property === 'height') return height;
     if (property === 'lassoColor') return lassoColor;
+    if (property === 'lassoLineWidth') return lassoLineWidth;
     if (property === 'lassoMinDelay') return lassoMinDelay;
     if (property === 'lassoMinDist') return lassoMinDist;
     if (property === 'lassoClearEvent') return lassoClearEvent;
@@ -2494,6 +2505,10 @@ const createScatterplot = (initialProperties = {}) => {
       setLassoColor(properties.lassoColor);
     }
 
+    if (properties.lassoLineWidth !== undefined) {
+      setLassoLineWidth(properties.lassoLineWidth);
+    }
+
     if (properties.lassoMinDelay !== undefined) {
       setLassoMinDelay(properties.lassoMinDelay);
     }
@@ -2708,7 +2723,11 @@ const createScatterplot = (initialProperties = {}) => {
     initCamera();
     updateScales();
 
-    lasso = createLine(regl, { color: lassoColor, width: 3, is2d: true });
+    lasso = createLine(regl, {
+      color: lassoColor,
+      width: lassoLineWidth,
+      is2d: true,
+    });
     pointConnections = createLine(regl, {
       color: pointConnectionColor,
       colorHover: pointConnectionColorHover,