Make draw() return a promise

Author: flekschas

README.md

@@ -113,7 +113,13 @@ _DEPRECATED! Use [`scatterplot.createTextureFromUrl()`](#scatterplot.createTextu
 
 <a name="scatterplot.draw" href="#scatterplot.draw">#</a> scatterplot.<b>draw</b>(<i>points</i>)
 
-Sets and draws `points`, which must be an array of points where a point is interpreted as a quadruple of form `[x, y, category, value]`.
+Sets and draws `points`. Note that repeatedly calling this method without specifying `points` will not clear previously set points. To clear points use [`scatterplot.clear()`](#scatterplot.clear)
+
+**Arguments:**
+
+- `points` is an array of quadruples defining the point data. Each quadruple must be of the form `[x, y, category, value]` where `category` and `value` are optional and can be used for [coloring the points](#color-by-value-or-category).
+
+**Returns:** a Promise object that resolves once the points have been drawn.
 
 **Examples:**
 
@@ -140,17 +146,24 @@ scatterplot.draw(points);
 scatterplot.draw();
 
 // Lets actively unset the points. Since `draw()` assumes that you want to
-// redraw existing points you have to actively pass in an empty array
+// redraw existing points you have to actively pass in an empty array.
+// Alternatively, call `scatterplot.clear()`
 scatterplot.draw([]);
 ```
 
+<a name="scatterplot.clear" href="#scatterplot.clear">#</a> scatterplot.<b>clear</b>()
+
+Clears previously drawn points.
+
 <a name="scatterplot.get" href="#scatterplot.set">#</a> scatterplot.<b>get</b>(<i>property</i>)
 
 **Returns:** one of the properties documented in [`set()`](#scatterplotset)
 
 <a name="scatterplot.set" href="#scatterplot.set">#</a> scatterplot.<b>set</b>(<i>properties = {}</i>)
 
-**Arguments:** `properties` is an object of key-value pairs. The list of all understood properties is given below.
+**Arguments:**
+
+- `properties` is an object of key-value pairs. The list of all understood properties is given below.
 
 **Properties:**
 

src/index.js

@@ -879,12 +879,16 @@ const createScatterplot = (initialProperties = {}) => {
     if (isViewChanged) pubSub.publish('view', camera.view);
   };
 
-  const drawRaf = withRaf(draw);
+  const drawHandler = () => pubSub.publish('draw');
 
-  const publicDraw = (newPoints, showRecticleOnce = false) => {
-    if (newPoints) setPoints(newPoints);
-    drawRaf(showRecticleOnce);
-  };
+  const drawRaf = withRaf(draw, drawHandler);
+
+  const publicDraw = (newPoints, showRecticleOnce = false) =>
+    new Promise((resolve) => {
+      if (newPoints) setPoints(newPoints);
+      pubSub.subscribe('draw', resolve, 1);
+      drawRaf(showRecticleOnce);
+    });
 
   const withDraw = (f) => (...args) => {
     const out = f(...args);
@@ -1150,7 +1154,7 @@ const createScatterplot = (initialProperties = {}) => {
     if (!camera) camera = createDom2dCamera(canvas);
 
     if (initialCameraView || initialView) {
-      camera.set(mat4.clone(initialCameraView || initialView));
+      camera.setView(mat4.clone(initialCameraView || initialView));
     } else if (
       initialCameraTarget ||
       initialTarget ||
@@ -1165,7 +1169,7 @@ const createScatterplot = (initialProperties = {}) => {
         initialCameraRotation || initialRotation || DEFAULT_ROTATION
       );
     } else {
-      camera.set(mat4.clone(DEFAULT_VIEW));
+      camera.setView(mat4.clone(DEFAULT_VIEW));
     }
   };
 

tests/index.js

@@ -717,15 +717,15 @@ test('draw(), clear(), publish("select")', async (t) => {
     [-1, -1],
     [-1, 1],
   ];
-  scatterplot.draw(points);
+  await scatterplot.draw(points);
   // The second draw call should not block the drawing of the points!
   // This test is related to a previous issue caused by `drawRaf` as `withRaf`
   // overwrites previous arguments. While that is normally expected, this
   // should not overwrite the points from above
-  scatterplot.draw();
+  await scatterplot.draw();
 
   // TODO: fix this!
-  await wait(250);
+  // await wait(250);
 
   let selectedPoints = [];
   const selectHandler = ({ points: newSelectedPoints }) => {
@@ -781,10 +781,10 @@ test('lasso selection with publish("select")', async (t) => {
     [-1, -1],
     [-1, 1],
   ];
-  scatterplot.draw(points);
+  await scatterplot.draw(points);
 
   // TODO: fix this!
-  await wait(250);
+  // await wait(250);
 
   let selectedPoints = [];
   const selectHandler = ({ points: newSelectedPoints }) => {
@@ -843,10 +843,10 @@ test('point hover with publish("pointover") and publish("pointout")', async (t)
     [-1, -1],
     [-1, 1],
   ];
-  scatterplot.draw(points);
+  await scatterplot.draw(points);
 
   // TODO: fix this!
-  await wait(250);
+  // await wait(250);
 
   let hoveredPoint = null;
   const pointoverHandler = (point) => {
@@ -913,10 +913,11 @@ test('select()', async (t) => {
     [-1, -1],
     [-1, 1],
   ];
-  scatterplot.draw(points);
+
+  await scatterplot.draw(points);
 
   // TODO: fix this!
-  await wait(250);
+  // await wait(250);
 
   let selectedPoints = [];
   const selectHandler = ({ points: newSelectedPoints }) => {