fix: regression from #208 where new points properly set (#215)

* Fix: a regression from #208 where new colors wouldn't be set properly

Fix #214

* test: test adding a new point color

* test: add direct test for `isSameRgbas()`

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.13.1
+
+- Fix: an issue where new colors wouldn't be set properly ([#214](https://github.com/flekschas/regl-scatterplot/issues/214))
+
 ## 1.13.0
 
 - Feat: add support for two new lasso types: `'rectangle'` and `'brush'`. The lasso type can be changed via `lassoType`. Additionally, for the brush lasso, you can adjust the brush size via `lassoBrushSize`. The default lasso type is `'freeform'`. ([#186](https://github.com/flekschas/regl-scatterplot/issues/186))

src/utils.js

@@ -320,13 +320,25 @@ export const isSameElements = (a, b) =>
 /**
  * Test if two arrays contain the same RGBA quadruples
  */
-export const isSameRgbas = (a, b) =>
-  Array.isArray(a) &&
-  Array.isArray(b) &&
-  a.every(([r1, g1, b1, a1], i) => {
+export const isSameRgbas = (a, b) => {
+  if (!(Array.isArray(a) && Array.isArray(b)) || a.length !== b.length) {
+    return false;
+  }
+
+  if (a.length === 0) {
+    return true;
+  }
+
+  // We need to test whether a and b are arrays of RGBA quadruples
+  if (!(Array.isArray(a[0]) && Array.isArray(b[0]))) {
+    return false;
+  }
+
+  return a.every(([r1, g1, b1, a1], i) => {
     const [r2, g2, b2, a2] = b[i];
     return r1 === r2 && g1 === g2 && b1 === b2 && a1 === a2;
   });
+};
 
 /**
  * Fast version of `Math.max`. Based on

tests/get-set.test.js

@@ -411,6 +411,18 @@ test(
         )
     ).toBe(true);
 
+    // Add another point color to the existing point colors
+    const newPointColors = [...pointColor, [1, 0, 1, 1]];
+    scatterplot.set({
+      pointColor: newPointColors,
+    });
+
+    expect(
+      scatterplot
+        .get('pointColor')
+        .every((color, i) => color.every((c, j) => c === newPointColors[i][j]))
+    ).toBe(true);
+
     scatterplot.set({
       pointConnectionColor: ['#ff0000', '#ff00ff'],
       pointConnectionColorActive: ['#ffff00', '#0000ff'],

tests/utils.test.js

@@ -5,7 +5,12 @@ import { expect, test } from 'vitest';
 
 import { checkSupport } from '../src';
 
-import { toRgba, isNormFloatArray, isValidBBox } from '../src/utils';
+import {
+  toRgba,
+  isNormFloatArray,
+  isValidBBox,
+  isSameRgbas,
+} from '../src/utils';
 
 const EPS = 1e-7;
 
@@ -51,3 +56,13 @@ test('toRgba()', () => {
 test('checkSupport()', () => {
   expect(checkSupport() === true || checkSupport() === false).toBe(true);
 });
+
+test('isSameRgbas()', () => {
+  expect(isSameRgbas('#ff0000', [[0, 1, 1, 1]])).toBe(false);
+  expect(isSameRgbas([[0, 1, 1, 1]], '#ff0000')).toBe(false);
+  expect(isSameRgbas([0, 1, 1, 1], [0, 1, 1, 1])).toBe(false);
+  expect(isSameRgbas([[0, 1, 1, 1], [1, 1, 0, 0]], [[0, 1, 1, 1]])).toBe(false);
+  expect(isSameRgbas([[0, 1, 1, 1]], [[0, 1, 1, 1], [1, 1, 0, 0]])).toBe(false);
+  expect(isSameRgbas([[0, 1, 1, 1]], [[1, 1, 1, 1]])).toBe(false);
+  expect(isSameRgbas([[0, 1, 1, 1]], [[0, 1, 1, 1]])).toBe(true);
+});