@shotstack/shotstack-canvas 1.0.7 → 1.0.8

package/dist/entry.web.js

@@ -155,13 +155,32 @@ var FontRegistry = class {
     __publicField(this, "fonts", /* @__PURE__ */ new Map());
     __publicField(this, "blobs", /* @__PURE__ */ new Map());
     __publicField(this, "wasmBaseURL");
+    __publicField(this, "initPromise");
     this.wasmBaseURL = wasmBaseURL;
   }
   async init() {
-    if (!this.hb) this.hb = await initHB(this.wasmBaseURL);
+    if (this.initPromise) {
+      await this.initPromise;
+      return;
+    }
+    if (this.hb) {
+      return;
+    }
+    this.initPromise = this._doInit();
+    await this.initPromise;
+  }
+  async _doInit() {
+    try {
+      this.hb = await initHB(this.wasmBaseURL);
+    } catch (error) {
+      this.initPromise = void 0;
+      throw error;
+    }
   }
-  getHB() {
-    if (!this.hb) throw new Error("FontRegistry not initialized - call init() first");
+  async getHB() {
+    if (!this.hb) {
+      await this.init();
+    }
     return this.hb;
   }
   key(desc) {
@@ -180,23 +199,24 @@ var FontRegistry = class {
     this.faces.set(k, face);
     this.fonts.set(k, font);
   }
-  getFont(desc) {
+  async getFont(desc) {
+    if (!this.hb) await this.init();
     const k = this.key(desc);
     const f = this.fonts.get(k);
     if (!f) throw new Error(`Font not registered for ${k}`);
     return f;
   }
-  getFace(desc) {
+  async getFace(desc) {
+    if (!this.hb) await this.init();
     const k = this.key(desc);
     return this.faces.get(k);
   }
-  /** NEW: expose units-per-em for scaling glyph paths to px */
-  getUnitsPerEm(desc) {
-    const face = this.getFace(desc);
+  async getUnitsPerEm(desc) {
+    const face = await this.getFace(desc);
     return face?.upem || 1e3;
   }
-  glyphPath(desc, glyphId) {
-    const font = this.getFont(desc);
+  async glyphPath(desc, glyphId) {
+    const font = await this.getFont(desc);
     const path = font.glyphToPath(glyphId);
     return path && path !== "" ? path : "M 0 0";
   }
@@ -207,6 +227,8 @@ var FontRegistry = class {
     this.fonts.clear();
     this.faces.clear();
     this.blobs.clear();
+    this.hb = void 0;
+    this.initPromise = void 0;
   }
 };
 
@@ -227,13 +249,13 @@ var LayoutEngine = class {
         return t;
     }
   }
-  shapeFull(text, desc) {
-    const hb = this.fonts.getHB();
+  async shapeFull(text, desc) {
+    const hb = await this.fonts.getHB();
     const buffer = hb.createBuffer();
     buffer.addText(text);
     buffer.guessSegmentProperties();
-    const font = this.fonts.getFont(desc);
-    const face = this.fonts.getFace(desc);
+    const font = await this.fonts.getFont(desc);
+    const face = await this.fonts.getFace(desc);
     const upem = face?.upem || 1e3;
     font.setScale(upem, upem);
     hb.shape(font, buffer);
@@ -241,17 +263,17 @@ var LayoutEngine = class {
     buffer.destroy();
     return result;
   }
-  layout(params) {
+  async layout(params) {
     const { textTransform, desc, fontSize, letterSpacing, width } = params;
     const input = this.transformText(params.text, textTransform);
     if (!input || input.length === 0) {
       return [];
     }
-    const shaped = this.shapeFull(input, desc);
-    const face = this.fonts.getFace(desc);
+    const shaped = await this.shapeFull(input, desc);
+    const face = await this.fonts.getFace(desc);
     const upem = face?.upem || 1e3;
     const scale = fontSize / upem;
-    const glyphs = shaped.map((g, i) => {
+    const glyphs = shaped.map((g) => {
       const charIndex = g.cl;
       let char;
       if (charIndex >= 0 && charIndex < input.length) {
@@ -355,7 +377,7 @@ function decorationGeometry(kind, p) {
 }
 
 // src/core/drawops.ts
-function buildDrawOps(p) {
+async function buildDrawOps(p) {
   const ops = [];
   ops.push({
     op: "BeginFrame",
@@ -366,7 +388,7 @@ function buildDrawOps(p) {
     bg: p.background ? { color: p.background.color, opacity: p.background.opacity, radius: p.background.borderRadius } : void 0
   });
   if (p.lines.length === 0) return ops;
-  const upem = Math.max(1, p.getUnitsPerEm?.() ?? 1e3);
+  const upem = Math.max(1, await p.getUnitsPerEm());
   const scale = p.font.size / upem;
   const blockHeight = p.lines[p.lines.length - 1].y;
   let blockY;
@@ -402,7 +424,7 @@ function buildDrawOps(p) {
     let xCursor = lineX;
     const baselineY = blockY + line.y - p.font.size;
     for (const glyph of line.glyphs) {
-      const path = p.glyphPathProvider(glyph.id);
+      const path = await p.glyphPathProvider(glyph.id);
       if (!path || path === "M 0 0") {
         xCursor += glyph.xAdvance;
         continue;
@@ -1180,6 +1202,7 @@ async function createTextEngine(opts = {}) {
   const wasmBaseURL = opts.wasmBaseURL;
   const fonts = new FontRegistry(wasmBaseURL);
   const layout = new LayoutEngine(fonts);
+  await fonts.init();
   async function ensureFonts(asset) {
     if (asset.customFonts) {
       for (const cf of asset.customFonts) {
@@ -1226,7 +1249,7 @@ async function createTextEngine(opts = {}) {
     async renderFrame(asset, tSeconds) {
       const main = await ensureFonts(asset);
       const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
-      const lines = layout.layout({
+      const lines = await layout.layout({
         text: asset.text,
         width: asset.width ?? width,
         letterSpacing: asset.style?.letterSpacing ?? 0,
@@ -1236,7 +1259,7 @@ async function createTextEngine(opts = {}) {
         textTransform: asset.style?.textTransform ?? "none"
       });
       const textRect = { x: 0, y: 0, width: asset.width ?? width, height: asset.height ?? height };
-      const ops0 = buildDrawOps({
+      const ops0 = await buildDrawOps({
         canvas: { width, height, pixelRatio },
         textRect,
         lines,
@@ -1258,7 +1281,6 @@ async function createTextEngine(opts = {}) {
         align: asset.align ?? { horizontal: "left", vertical: "middle" },
         background: asset.background,
         glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
-        /** NEW: provide UPEM so drawops can compute scale */
         getUnitsPerEm: () => fonts.getUnitsPerEm(desc)
       });
       const ops = applyAnimation(ops0, lines, {
@@ -1276,6 +1298,9 @@ async function createTextEngine(opts = {}) {
     },
     createRenderer(canvas) {
       return createWebPainter(canvas);
+    },
+    destroy() {
+      fonts.destroy();
     }
   };
 }