@shotstack/shotstack-canvas 1.1.1 → 1.1.3

package/dist/entry.web.js

@@ -157,7 +157,7 @@ async function initHB(wasmBaseURL) {
 }
 
 // src/core/font-registry.ts
-var FontRegistry = class {
+var _FontRegistry = class _FontRegistry {
   constructor(wasmBaseURL) {
     __publicField(this, "hb");
     __publicField(this, "faces", /* @__PURE__ */ new Map());
@@ -167,14 +167,15 @@ var FontRegistry = class {
     __publicField(this, "initPromise");
     this.wasmBaseURL = wasmBaseURL;
   }
+  static setFallbackLoader(loader) {
+    _FontRegistry.fallbackLoader = loader;
+  }
   async init() {
     if (this.initPromise) {
       await this.initPromise;
       return;
     }
-    if (this.hb) {
-      return;
-    }
+    if (this.hb) return;
     this.initPromise = this._doInit();
     try {
       await this.initPromise;
@@ -226,11 +227,35 @@ var FontRegistry = class {
       );
     }
   }
+  async tryFallbackInstall(desc) {
+    const loader = _FontRegistry.fallbackLoader;
+    if (!loader) return false;
+    try {
+      const bytes = await loader({
+        family: desc.family,
+        weight: desc.weight ?? "400",
+        style: desc.style ?? "normal"
+      });
+      if (!bytes) return false;
+      await this.registerFromBytes(bytes, {
+        family: desc.family,
+        weight: desc.weight ?? "400",
+        style: desc.style ?? "normal"
+      });
+      return true;
+    } catch {
+      return false;
+    }
+  }
   async getFont(desc) {
     try {
       if (!this.hb) await this.init();
       const k = this.key(desc);
-      const f = this.fonts.get(k);
+      let f = this.fonts.get(k);
+      if (!f) {
+        const installed = await this.tryFallbackInstall(desc);
+        f = installed ? this.fonts.get(k) : void 0;
+      }
       if (!f) throw new Error(`Font not registered for ${k}`);
       return f;
     } catch (err) {
@@ -246,7 +271,12 @@ var FontRegistry = class {
     try {
       if (!this.hb) await this.init();
       const k = this.key(desc);
-      return this.faces.get(k);
+      let face = this.faces.get(k);
+      if (!face) {
+        const installed = await this.tryFallbackInstall(desc);
+        face = installed ? this.faces.get(k) : void 0;
+      }
+      return face;
     } catch (err) {
       throw new Error(
         `Failed to get face for "${desc.family}": ${err instanceof Error ? err.message : String(err)}`
@@ -315,6 +345,8 @@ var FontRegistry = class {
     }
   }
 };
+__publicField(_FontRegistry, "fallbackLoader");
+var FontRegistry = _FontRegistry;
 
 // src/core/layout.ts
 var LayoutEngine = class {
@@ -502,7 +534,7 @@ async function buildDrawOps(p) {
     height: p.canvas.height,
     pixelRatio: p.canvas.pixelRatio,
     clear: true,
-    bg: p.background ? { color: p.background.color, opacity: p.background.opacity, radius: p.background.borderRadius } : void 0
+    bg: p.background && p.background.color ? { 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, await p.getUnitsPerEm());
@@ -1133,9 +1165,13 @@ function createWebPainter(canvas) {
             canvas.width = Math.floor(w * dpr);
             canvas.height = Math.floor(h * dpr);
           }
+          if ("style" in canvas) {
+            canvas.style.width = `${w}px`;
+            canvas.style.height = `${h}px`;
+          }
           ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
           if (op.clear) ctx.clearRect(0, 0, w, h);
-          if (op.bg) {
+          if (op.bg && op.bg.color) {
             const { color, opacity, radius } = op.bg;
             if (color) {
               const c = parseHex6(color, opacity);
@@ -1365,6 +1401,7 @@ var isGlyphFill2 = (op) => {
 };
 
 // src/env/entry.web.ts
+var DEFAULT_ROBOTO_URL = "https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf";
 async function createTextEngine(opts = {}) {
   const width = opts.width ?? CANVAS_CONFIG.DEFAULTS.width;
   const height = opts.height ?? CANVAS_CONFIG.DEFAULTS.height;
@@ -1373,6 +1410,15 @@ async function createTextEngine(opts = {}) {
   const fonts = new FontRegistry(wasmBaseURL);
   const layout = new LayoutEngine(fonts);
   try {
+    FontRegistry.setFallbackLoader(async (desc) => {
+      const family = (desc.family ?? "Roboto").toLowerCase();
+      const weight = `${desc.weight ?? "400"}`;
+      const style = desc.style ?? "normal";
+      if (family === "roboto" && weight === "400" && style === "normal") {
+        return fetchToArrayBuffer(DEFAULT_ROBOTO_URL);
+      }
+      return void 0;
+    });
     await fonts.init();
   } catch (err) {
     throw new Error(
@@ -1405,11 +1451,30 @@ async function createTextEngine(opts = {}) {
         color: "#000000",
         opacity: 1
       };
+      const desc = { family: main.family, weight: `${main.weight}`, style: main.style };
+      const ensureFace = async () => {
+        try {
+          await fonts.getFace(desc);
+        } catch {
+          const wantsDefaultRoboto = (main.family || "Roboto").toLowerCase() === "roboto" && `${main.weight}` === "400" && main.style === "normal";
+          if (wantsDefaultRoboto) {
+            const bytes = await fetchToArrayBuffer(DEFAULT_ROBOTO_URL);
+            await fonts.registerFromBytes(bytes, {
+              family: "Roboto",
+              weight: "400",
+              style: "normal"
+            });
+          } else {
+            throw new Error(
+              `Font not registered for ${desc.family}__${desc.weight}__${desc.style}`
+            );
+          }
+        }
+      };
+      await ensureFace();
       return main;
     } catch (err) {
-      if (err instanceof Error) {
-        throw err;
-      }
+      if (err instanceof Error) throw err;
       throw new Error(`Failed to ensure fonts: ${String(err)}`);
     }
   }
@@ -1495,10 +1560,13 @@ async function createTextEngine(opts = {}) {
           width: asset.width ?? width,
           height: asset.height ?? height
         };
+        const canvasW = asset.width ?? width;
+        const canvasH = asset.height ?? height;
+        const canvasPR = asset.pixelRatio ?? pixelRatio;
         let ops0;
         try {
           ops0 = await buildDrawOps({
-            canvas: { width, height, pixelRatio },
+            canvas: { width: canvasW, height: canvasH, pixelRatio: canvasPR },
             textRect,
             lines,
             font: {
@@ -1516,7 +1584,7 @@ async function createTextEngine(opts = {}) {
             },
             stroke: asset.stroke,
             shadow: asset.shadow,
-            align: asset.align ?? { horizontal: "left", vertical: "middle" },
+            align: asset.align ?? { horizontal: "center", vertical: "middle" },
             background: asset.background,
             glyphPathProvider: (gid) => fonts.glyphPath(desc, gid),
             getUnitsPerEm: () => fonts.getUnitsPerEm(desc)