Use loaded promise in control

demo/assets/js/control.js

@@ -1,3 +1,4 @@
+import { loaded } from "./loading.js";
 import { listenPassive } from "./shared.js";
 
 export class Control extends HTMLElement {
@@ -21,7 +22,9 @@ export class Control extends HTMLElement {
     const listen = listenPassive.bind(this, input);
     listen("input", this._handleChange);
 
-    this._emitChange(input);
+    loaded.then(() => {
+      this._emitChange(input);
+    });
   }
 
   /**

demo/assets/js/loading.js

@@ -9,20 +9,24 @@ export async function load() {
     loadPaintWorklet(),
     loadComponents(),
   ]);
+  console.log("loaded");
   resolve(undefined);
 }
 
 async function loadComponents() {
-  const modules = await Promise.all([
+  const promises = [
     import("./tester.js"),
     import("./drag-area.js"),
     import("./control.js"),
     import("./corner.js"),
-  ]);
-  for (const module of modules) {
-    const { NAME, Component } = module;
-    customElements.define(NAME, Component);
-  }
+  ].map((promise) =>
+    promise.then(({ NAME, Component }) => {
+      console.log(NAME);
+      customElements.define(NAME, Component);
+    }),
+  );
+  await Promise.all(promises);
+  console.log("loaded components");
 }
 
 async function loadPaintWorklet() {
@@ -31,6 +35,7 @@ async function loadPaintWorklet() {
     "https://unpkg.com/[email protected]/index.mjs"
   );
   register("https://unpkg.com/[email protected]/worklet.min.js");
+  console.log("Loaded worklet");
 }
 
 async function loadSquircleComponent() {
@@ -39,4 +44,5 @@ async function loadSquircleComponent() {
     : import("./squircle-canvas.js");
   const module = await promise;
   customElements.define("th-squircle", module.default);
+  console.log("Loaded squircle");
 }

demo/assets/js/squircle-canvas.js

@@ -1,15 +1,10 @@
-import { paint } from "https://unpkg.com/[email protected].6/index.mjs";
+import { paint } from "https://unpkg.com/[email protected].7/index.mjs";
 
 export default class SquircleCanvas extends HTMLElement {
-  /** @type {number} */
   _radius = 0;
-  /** @type {string} */
   _fill = "transparent";
-  /** @type {number} */
   _borderWidth = 0;
-  /** @type {string} */
   _borderColor = "transparent";
-  /** @type {number} */
   _animationFrame = -1;
   /** @type {CanvasRenderingContext2D?} */
   _context = null;
@@ -132,12 +127,12 @@ export default class SquircleCanvas extends HTMLElement {
     ctx.reset();
 
     if (bc !== "transparent" && bw > 0) {
-      ctx.fillStyle = this._borderColor;
       paint(ctx, 0, 0, w, h, r);
+      ctx.fillStyle = this._borderColor;
+      ctx.fill();
     }
 
     if (fill !== "transparent") {
-      ctx.fillStyle = fill;
       paint(
         ctx,
         bw,
@@ -146,6 +141,8 @@ export default class SquircleCanvas extends HTMLElement {
         h - bw * 2,
         r - this._borderWidth / Math.SQRT2,
       );
+      ctx.fillStyle = fill;
+      ctx.fill();
     }
   }
 }