add elements as early as possible

JosuaKrause · Aug 6, 2023 · 982088d · 982088d
1 parent 0798b74
commit 982088d
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 65 deletions.
diff --git a/js/app.js b/js/app.js
@@ -99,16 +99,14 @@ export default class App extends PixelCanvas {
     }
   }
 
-  async setup() {
+  async setupBeforeCanvas() {
     const urlParams = new URLSearchParams(window.location.search);
-    const watermark = await loadImage('./img/watermark.png');
     const settings = this.settings;
     const distanceFn = DFS.indexOf(settings.distanceFn);
     const dfs = settings.metrics;
 
     this.addHeaderAndFooter(settings, urlParams);
 
-    this.addValue('wm', 'uWM', 'image', watermark);
     this.addValue('areaMode', 'uAreaMode', 'bool', false);
     this.addValue('showGrid', 'uShowGrid', 'bool', false);
     this.addValue('showCursor', 'uShowCursor', 'bool', false);
@@ -121,6 +119,7 @@ export default class App extends PixelCanvas {
     this.addValue('outline', 'uOutline', 'array2d', []);
     this.addValue('outlineCenter', 'uOutlineCenter', '2d', [0, 0]);
     this.addValue('outlineScale', 'uOutlineScale', 'float', 1);
+
     this.addPrerenderHook((values) => {
       values.outline = this.ch.createLinesArray(values.points);
       const centerVals = values.outline.reduce(
@@ -174,58 +173,6 @@ export default class App extends PixelCanvas {
     window.addEventListener('keydown', onShift);
     window.addEventListener('keyup', onShift);
 
-    const canvas = this.getCanvas();
-    canvas.addEventListener('touchmove', (e) => {
-      const values = this.getValues();
-      const refPosition = convertTouchPosition(
-        this.getCanvas(),
-        this.getMeasures(),
-        values.showGrid,
-        e,
-      );
-      this.updateValue({
-        refPosition,
-      });
-      e.preventDefault();
-    });
-    canvas.addEventListener('mousemove', (e) => {
-      const values = this.getValues();
-      const refPosition = convertMousePosition(
-        this.getCanvas(),
-        this.getMeasures(),
-        values.showGrid,
-        e,
-      );
-      this.updateValue({
-        refPosition,
-      });
-    });
-    canvas.addEventListener('click', (e) => {
-      const values = this.getValues();
-      const refPosition = convertMousePosition(
-        this.getCanvas(),
-        this.getMeasures(),
-        values.showGrid,
-        e,
-      );
-      const points = [...values.points];
-      if (values.areaMode) {
-        const [_, ix] = this.getClosest(
-          DFS[values.distanceFn],
-          values.points,
-          refPosition,
-          this.getRenderValues(),
-        );
-        points.splice(ix, 1);
-      } else if (points.length < MAX_POINTS) {
-        points.push(refPosition);
-      }
-      this.updateValue({
-        points,
-        refPosition,
-      });
-    });
-
     if (dfs.length > 1) {
       this.addControl('distanceFn', 'Metric:', {
         options: dfs.map((dfName) => ({
@@ -279,7 +226,66 @@ export default class App extends PixelCanvas {
 
     this.addVisibilityCheck();
 
-    await super.setup();
+    await super.setupBeforeCanvas();
+  }
+
+  async setupAfterCanvas() {
+    const watermark = await loadImage('./img/watermark.png');
+    this.addValue('wm', 'uWM', 'image', watermark);
+
+    const canvas = this.getCanvas();
+    canvas.addEventListener('touchmove', (e) => {
+      const values = this.getValues();
+      const refPosition = convertTouchPosition(
+        this.getCanvas(),
+        this.getMeasures(),
+        values.showGrid,
+        e,
+      );
+      this.updateValue({
+        refPosition,
+      });
+      e.preventDefault();
+    });
+    canvas.addEventListener('mousemove', (e) => {
+      const values = this.getValues();
+      const refPosition = convertMousePosition(
+        this.getCanvas(),
+        this.getMeasures(),
+        values.showGrid,
+        e,
+      );
+      this.updateValue({
+        refPosition,
+      });
+    });
+    canvas.addEventListener('click', (e) => {
+      const values = this.getValues();
+      const refPosition = convertMousePosition(
+        this.getCanvas(),
+        this.getMeasures(),
+        values.showGrid,
+        e,
+      );
+      const points = [...values.points];
+      if (values.areaMode) {
+        const [_, ix] = this.getClosest(
+          DFS[values.distanceFn],
+          values.points,
+          refPosition,
+          this.getRenderValues(),
+        );
+        points.splice(ix, 1);
+      } else if (points.length < MAX_POINTS) {
+        points.push(refPosition);
+      }
+      this.updateValue({
+        points,
+        refPosition,
+      });
+    });
+
+    await super.setupAfterCanvas();
   }
 
   getDistance(distanceFn, vecA, vecB, values) {

diff --git a/js/pixelcanvas.js b/js/pixelcanvas.js
@@ -47,7 +47,8 @@ export default class PixelCanvas {
     this.prerender = [];
     this.postrender = [];
     this.recordingState = NO_RECORDING;
-    this.isSetup = false;
+    this.isSetupBeforeCanvas = false;
+    this.isSetupAfterCanvas = false;
     this.isDrawing = false;
     this.hidden = false;
     this.requestClear = false;
@@ -72,9 +73,14 @@ export default class PixelCanvas {
     });
   }
 
-  async setup() {
-    // overwrite in sub-class and call `await super.setup()` at the end
-    this.isSetup = true;
+  async setupBeforeCanvas() {
+    // overwrite in sub-class and call `await super.setupBeforeCanvas()` at the end
+    this.isSetupBeforeCanvas = true;
+  }
+
+  async setupAfterCanvas() {
+    // overwrite in sub-class and call `await super.setupAfterCanvas()` at the end
+    this.isSetupAfterCanvas = true;
   }
 
   isHidden() {
@@ -149,6 +155,14 @@ export default class PixelCanvas {
     };
 
     const run = async () => {
+      if (!this.isSetupBeforeCanvas) {
+        await this.setupBeforeCanvas();
+        if (!this.isSetupBeforeCanvas) {
+          throw new Error(
+            'must call `await super.setupBeforeCanvas()` at end of setup!',
+          );
+        }
+      }
       if (this.canvas === null) {
         const canvasDiv = document.querySelector(this.canvasId);
         if (canvasDiv === null) {
@@ -169,10 +183,12 @@ export default class PixelCanvas {
       if (needsSceneSetup) {
         await this.initScene();
       }
-      if (!this.isSetup) {
-        await this.setup();
-        if (!this.isSetup) {
-          throw new Error('must call `await super.setup()` at end of setup!');
+      if (!this.isSetupAfterCanvas) {
+        await this.setupAfterCanvas();
+        if (!this.isSetupAfterCanvas) {
+          throw new Error(
+            'must call `await super.setupAfterCanvas()` at end of setup!',
+          );
         }
       }
       if (needsSceneSetup) {
@@ -190,7 +206,12 @@ export default class PixelCanvas {
       console.error(err);
       this.writeError(err);
     };
-    if (this.canvas !== null && this.gl !== null && this.isSetup) {
+    if (
+      this.canvas !== null &&
+      this.gl !== null &&
+      this.isSetupBeforeCanvas &&
+      this.isSetupAfterCanvas
+    ) {
       // fast path
       try {
         draw();