Add two events: init and destroy

Author: flekschas

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## v0.18.2
 
+- Add two events: `init` and `destroy`
 - Fix an issue with normalizing RGBA values
 
 ## v0.18.1

README.md

@@ -572,6 +572,8 @@ scatterplot.set({ showReticle: true, reticleColor: [1, 0, 0, 0.66] });
 
 | Name                 | Trigger                                    | Payload                            |
 | -------------------- | ------------------------------------------ | ---------------------------------- |
+| init                 | when the scatter plot is initialized       | `undefined`                        |
+| destroy              | when the scatter plot is destroyed         | `undefined`                        |
 | backgroundImageReady | when the background image was loaded       | `undefined`                        |
 | pointOver            | when the mouse cursor is over a point      | pointIndex                         |
 | pointOut             | when the mouse cursor moves out of a point | pointIndex                         |

src/index.js

@@ -2573,13 +2573,16 @@ const createScatterplot = (initialProperties = {}) => {
     // setWidth and setHeight can be async when width or height are set to
     // 'auto'. And since draw() would have anyway been async we can just make
     // all calls async.
-    window.requestAnimationFrame(() => {
-      if (!canvas) return; // Instance was destroyed in between
-      updateViewAspectRatio();
-      refresh();
-      draw();
-      drawHandler();
-    });
+    return new Promise((resolve) =>
+      window.requestAnimationFrame(() => {
+        if (!canvas) return; // Instance was destroyed in between
+        updateViewAspectRatio();
+        refresh();
+        draw();
+        drawHandler();
+        resolve();
+      })
+    );
   };
 
   const hover = (point, showReticleOnce = false) => {
@@ -2744,7 +2747,7 @@ const createScatterplot = (initialProperties = {}) => {
     encodingTex = createEncodingTexture();
 
     // Set dimensions
-    set({
+    const whenSet = set({
       backgroundImage,
       width,
       height,
@@ -2764,6 +2767,10 @@ const createScatterplot = (initialProperties = {}) => {
     canvas.addEventListener('mouseleave', mouseLeaveCanvasHandler, false);
     canvas.addEventListener('click', mouseClickHandler, false);
     canvas.addEventListener('dblclick', mouseDblClickHandler, false);
+
+    whenSet.then(() => {
+      pubSub.publish('init');
+    });
   };
 
   const destroy = () => {
@@ -2786,6 +2793,7 @@ const createScatterplot = (initialProperties = {}) => {
     pointConnections.destroy();
     reticleHLine.destroy();
     reticleVLine.destroy();
+    pubSub.publish('destroy');
     pubSub.clear();
   };
 

tests/index.js

@@ -975,6 +975,26 @@ test('set({ showReticle, reticleColor })', async (t) => {
 
 /* ---------------------------------- events -------------------------------- */
 
+test('init and destroy events', async (t) => {
+  const canvas = createCanvas(200, 200);
+  const scatterplot = createScatterplot({ canvas, width: 200, height: 200 });
+
+  const whenInit = new Promise((resolve) =>
+    scatterplot.subscribe('init', resolve, 1)
+  );
+  const whenDestroy = new Promise((resolve) =>
+    scatterplot.subscribe('destroy', resolve, 1)
+  );
+
+  await whenInit;
+
+  scatterplot.destroy();
+
+  await whenDestroy;
+
+  t.equal(true, true, '"init" and "destroy" event fired');
+});
+
 test('tests involving mouse events', async (t2) => {
   await t2.test('draw(), clear(), publish("select")', async (t) => {
     const dim = 200;