fix: drawing a single connecting line between points

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 - Add missing `filteredPoints` type definition. [#139](https://github.com/flekschas/regl-scatterplot/pull/139)
 - Add missing `selectedPoints` type definition.
+- Fix drawing a single connecting line between points [#125](https://github.com/flekschas/regl-scatterplot/issues/125)
+- Fix `draw()`'s promise resolution when `showPointConnections` is `true`. The promise is now resolved after both, the points and point connections, have been drawn.
 - Set minimum Node version to `16` and minimum npm version to `7`. You might still be able to use `regl-scatterplot` with older version but it's not advised.
 
 ## 1.6.10

src/index.js

@@ -1978,11 +1978,16 @@ const createScatterplot = (
         }).then((curvePoints) => {
           setPointConnectionMap(curvePoints);
           const curvePointValues = Object.values(curvePoints);
-          pointConnections.setPoints(curvePointValues, {
-            colorIndices: getPointConnectionColorIndices(curvePointValues),
-            opacities: getPointConnectionOpacities(curvePointValues),
-            widths: getPointConnectionWidths(curvePointValues),
-          });
+          pointConnections.setPoints(
+            curvePointValues.length === 1
+              ? curvePointValues[0]
+              : curvePointValues,
+            {
+              colorIndices: getPointConnectionColorIndices(curvePointValues),
+              opacities: getPointConnectionOpacities(curvePointValues),
+              widths: getPointConnectionWidths(curvePointValues),
+            }
+          );
           computingPointConnectionCurves = false;
           resolve();
         });
@@ -2284,6 +2289,12 @@ const createScatterplot = (
             isPointsFiltered = false;
             filteredPointsSet.clear();
           }
+
+          const drawPointConnections =
+            points &&
+            hasPointConnections(points[0]) &&
+            (showPointConnections || options.showPointConnectionsOnce);
+
           if (points) {
             if (options.transition) {
               if (points.length === numPoints) {
@@ -2294,12 +2305,10 @@ const createScatterplot = (
                 );
               }
             }
+
             setPoints(points);
-            if (
-              showPointConnections ||
-              (options.showPointConnectionsOnce &&
-                hasPointConnections(points[0]))
-            ) {
+
+            if (drawPointConnections) {
               setPointConnections(points).then(() => {
                 pubSub.publish('pointConnectionsDraw');
                 draw = true;
@@ -2309,24 +2318,57 @@ const createScatterplot = (
           }
 
           if (options.transition && pointsCached) {
-            pubSub.subscribe(
-              'transitionEnd',
-              () => {
-                // Point connects cannot be transitioned yet so we hide them during
-                // the transition. Hence, we need to make sure we call `draw()` once
-                // the transition has ended.
-                draw = true;
-                drawReticleOnce = options.showReticleOnce;
-                resolve();
-              },
-              1
-            );
+            if (drawPointConnections) {
+              Promise.all([
+                new Promise((resolveTransition) => {
+                  pubSub.subscribe(
+                    'transitionEnd',
+                    () => {
+                      // Point connects cannot be transitioned yet so we hide them during
+                      // the transition. Hence, we need to make sure we call `draw()` once
+                      // the transition has ended.
+                      draw = true;
+                      drawReticleOnce = options.showReticleOnce;
+                      resolveTransition();
+                    },
+                    1
+                  );
+                }),
+                new Promise((resolveDraw) => {
+                  pubSub.subscribe('pointConnectionsDraw', resolveDraw, 1);
+                }),
+              ]).then(resolve);
+            } else {
+              pubSub.subscribe(
+                'transitionEnd',
+                () => {
+                  // Point connects cannot be transitioned yet so we hide them during
+                  // the transition. Hence, we need to make sure we call `draw()` once
+                  // the transition has ended.
+                  draw = true;
+                  drawReticleOnce = options.showReticleOnce;
+                  resolve();
+                },
+                1
+              );
+            }
             startTransition({
               duration: options.transitionDuration,
               easing: options.transitionEasing,
             });
           } else {
-            pubSub.subscribe('draw', resolve, 1);
+            if (drawPointConnections) {
+              Promise.all([
+                new Promise((resolveDraw) => {
+                  pubSub.subscribe('draw', resolveDraw, 1);
+                }),
+                new Promise((resolveDraw) => {
+                  pubSub.subscribe('pointConnectionsDraw', resolveDraw, 1);
+                }),
+              ]).then(resolve);
+            } else {
+              pubSub.subscribe('draw', resolve, 1);
+            }
             draw = true;
             drawReticleOnce = options.showReticleOnce;
           }

tests/index.js

@@ -1226,6 +1226,43 @@ test(
   })
 );
 
+test(
+  'test drawing point connections via `showLineConnections`',
+  catchError(async (t) => {
+    const scatterplot = createScatterplot({
+      canvas: createCanvas(200, 200),
+      width: 200,
+      height: 200,
+      showPointConnections: true,
+    });
+
+    let numConnectionsDraws = 0;
+    scatterplot.subscribe('pointConnectionsDraw', () => {
+      ++numConnectionsDraws;
+    });
+
+    await scatterplot.draw(
+      new Array(10)
+        .fill()
+        .map((_, i) => [-1 + (i / 6) * 2, -1 + Math.random() * 2, i, 1, 0])
+    );
+    await wait(0);
+
+    t.equal(numConnectionsDraws, 1, 'should have drawn the connections once');
+
+    await scatterplot.draw(
+      new Array(10)
+        .fill()
+        .map((e, i) => [-1 + (i / 6) * 2, -1 + Math.random() * 2, i, 1, i % 5])
+    );
+    await wait(0);
+
+    t.equal(numConnectionsDraws, 2, 'should have drawn the connections once');
+
+    scatterplot.destroy();
+  })
+);
+
 test('tests involving mouse events', async (t2) => {
   await t2.test(
     'draw(), clear(), publish("select")',