@shotstack/shotstack-canvas 1.6.3 → 1.6.5

package/dist/entry.node.cjs

@@ -414,10 +414,63 @@ var FontRegistry = class _FontRegistry {
   wasmBaseURL;
   initPromise;
   emojiFallbackDesc;
+  static sharedInstance = null;
+  static refCount = 0;
+  static sharedInitPromise = null;
   static fallbackLoader;
   static setFallbackLoader(loader) {
     _FontRegistry.fallbackLoader = loader;
   }
+  static async getSharedInstance(wasmBaseURL) {
+    if (_FontRegistry.sharedInitPromise) {
+      const instance = await _FontRegistry.sharedInitPromise;
+      _FontRegistry.refCount++;
+      return instance;
+    }
+    if (_FontRegistry.sharedInstance) {
+      _FontRegistry.refCount++;
+      return _FontRegistry.sharedInstance;
+    }
+    _FontRegistry.sharedInitPromise = (async () => {
+      const instance = new _FontRegistry(wasmBaseURL);
+      await instance.init();
+      _FontRegistry.sharedInstance = instance;
+      _FontRegistry.refCount = 1;
+      return instance;
+    })();
+    try {
+      const instance = await _FontRegistry.sharedInitPromise;
+      return instance;
+    } finally {
+      _FontRegistry.sharedInitPromise = null;
+    }
+  }
+  static getRefCount() {
+    return _FontRegistry.refCount;
+  }
+  static hasSharedInstance() {
+    return _FontRegistry.sharedInstance !== null;
+  }
+  release() {
+    if (this !== _FontRegistry.sharedInstance) {
+      this.destroy();
+      return;
+    }
+    _FontRegistry.refCount--;
+    if (_FontRegistry.refCount <= 0) {
+      this.destroy();
+      _FontRegistry.sharedInstance = null;
+      _FontRegistry.refCount = 0;
+    }
+  }
+  static resetSharedInstance() {
+    if (_FontRegistry.sharedInstance) {
+      _FontRegistry.sharedInstance.destroy();
+      _FontRegistry.sharedInstance = null;
+    }
+    _FontRegistry.refCount = 0;
+    _FontRegistry.sharedInitPromise = null;
+  }
   setEmojiFallback(desc) {
     this.emojiFallbackDesc = desc;
   }
@@ -879,42 +932,42 @@ async function buildDrawOps(p) {
   const scale = p.font.size / upem;
   const numLines = p.lines.length;
   const lineHeightPx = p.font.size * p.style.lineHeight;
-  const textOffsetY = borderWidth + padding.top;
   let blockY;
   switch (p.align.vertical) {
     case "top":
-      blockY = p.font.size + textOffsetY;
+      blockY = p.font.size;
       break;
     case "bottom":
-      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + textOffsetY;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
       break;
     case "middle":
     default:
       const capHeightRatio = 0.35;
       const visualOffset = p.font.size * capHeightRatio;
-      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + textOffsetY;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
       break;
   }
+  blockY += borderWidth + padding.top;
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
   const textOps = [];
   const highlighterOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
-    const textOffsetX = borderWidth + padding.left;
     let lineX;
     switch (p.align.horizontal) {
       case "left":
-        lineX = textOffsetX;
+        lineX = 0;
         break;
       case "right":
-        lineX = p.textRect.width - line.width + textOffsetX;
+        lineX = p.textRect.width - line.width;
         break;
       case "center":
       default:
-        lineX = (p.textRect.width - line.width) / 2 + textOffsetX;
+        lineX = (p.textRect.width - line.width) / 2;
         break;
     }
+    lineX += borderWidth + padding.left;
     let xCursor = lineX;
     const lineIndex = p.lines.indexOf(line);
     const baselineY = blockY + lineIndex * lineHeightPx;
@@ -2386,16 +2439,16 @@ async function createTextEngine(opts = {}) {
   const pixelRatio = opts.pixelRatio ?? CANVAS_CONFIG.DEFAULTS.pixelRatio;
   const fps = opts.fps ?? 30;
   const wasmBaseURL = opts.wasmBaseURL;
-  const fonts = new FontRegistry(wasmBaseURL);
-  const layout = new LayoutEngine(fonts);
-  const videoGenerator = new VideoGenerator();
+  let fonts;
   try {
-    await fonts.init();
+    fonts = await FontRegistry.getSharedInstance(wasmBaseURL);
   } catch (err) {
     throw new Error(
       `Failed to initialize font registry: ${err instanceof Error ? err.message : String(err)}`
     );
   }
+  const layout = new LayoutEngine(fonts);
+  const videoGenerator = new VideoGenerator();
   async function ensureFonts(asset) {
     try {
       if (asset.customFonts) {
@@ -2628,7 +2681,7 @@ async function createTextEngine(opts = {}) {
     },
     destroy() {
       try {
-        fonts.destroy();
+        fonts.release();
       } catch (err) {
         console.error(`Error during cleanup: ${err instanceof Error ? err.message : String(err)}`);
       }

package/dist/entry.node.js

@@ -375,10 +375,63 @@ var FontRegistry = class _FontRegistry {
   wasmBaseURL;
   initPromise;
   emojiFallbackDesc;
+  static sharedInstance = null;
+  static refCount = 0;
+  static sharedInitPromise = null;
   static fallbackLoader;
   static setFallbackLoader(loader) {
     _FontRegistry.fallbackLoader = loader;
   }
+  static async getSharedInstance(wasmBaseURL) {
+    if (_FontRegistry.sharedInitPromise) {
+      const instance = await _FontRegistry.sharedInitPromise;
+      _FontRegistry.refCount++;
+      return instance;
+    }
+    if (_FontRegistry.sharedInstance) {
+      _FontRegistry.refCount++;
+      return _FontRegistry.sharedInstance;
+    }
+    _FontRegistry.sharedInitPromise = (async () => {
+      const instance = new _FontRegistry(wasmBaseURL);
+      await instance.init();
+      _FontRegistry.sharedInstance = instance;
+      _FontRegistry.refCount = 1;
+      return instance;
+    })();
+    try {
+      const instance = await _FontRegistry.sharedInitPromise;
+      return instance;
+    } finally {
+      _FontRegistry.sharedInitPromise = null;
+    }
+  }
+  static getRefCount() {
+    return _FontRegistry.refCount;
+  }
+  static hasSharedInstance() {
+    return _FontRegistry.sharedInstance !== null;
+  }
+  release() {
+    if (this !== _FontRegistry.sharedInstance) {
+      this.destroy();
+      return;
+    }
+    _FontRegistry.refCount--;
+    if (_FontRegistry.refCount <= 0) {
+      this.destroy();
+      _FontRegistry.sharedInstance = null;
+      _FontRegistry.refCount = 0;
+    }
+  }
+  static resetSharedInstance() {
+    if (_FontRegistry.sharedInstance) {
+      _FontRegistry.sharedInstance.destroy();
+      _FontRegistry.sharedInstance = null;
+    }
+    _FontRegistry.refCount = 0;
+    _FontRegistry.sharedInitPromise = null;
+  }
   setEmojiFallback(desc) {
     this.emojiFallbackDesc = desc;
   }
@@ -840,42 +893,42 @@ async function buildDrawOps(p) {
   const scale = p.font.size / upem;
   const numLines = p.lines.length;
   const lineHeightPx = p.font.size * p.style.lineHeight;
-  const textOffsetY = borderWidth + padding.top;
   let blockY;
   switch (p.align.vertical) {
     case "top":
-      blockY = p.font.size + textOffsetY;
+      blockY = p.font.size;
       break;
     case "bottom":
-      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + textOffsetY;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
       break;
     case "middle":
     default:
       const capHeightRatio = 0.35;
       const visualOffset = p.font.size * capHeightRatio;
-      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + textOffsetY;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
       break;
   }
+  blockY += borderWidth + padding.top;
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
   const textOps = [];
   const highlighterOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
-    const textOffsetX = borderWidth + padding.left;
     let lineX;
     switch (p.align.horizontal) {
       case "left":
-        lineX = textOffsetX;
+        lineX = 0;
         break;
       case "right":
-        lineX = p.textRect.width - line.width + textOffsetX;
+        lineX = p.textRect.width - line.width;
         break;
       case "center":
       default:
-        lineX = (p.textRect.width - line.width) / 2 + textOffsetX;
+        lineX = (p.textRect.width - line.width) / 2;
         break;
     }
+    lineX += borderWidth + padding.left;
     let xCursor = lineX;
     const lineIndex = p.lines.indexOf(line);
     const baselineY = blockY + lineIndex * lineHeightPx;
@@ -2347,16 +2400,16 @@ async function createTextEngine(opts = {}) {
   const pixelRatio = opts.pixelRatio ?? CANVAS_CONFIG.DEFAULTS.pixelRatio;
   const fps = opts.fps ?? 30;
   const wasmBaseURL = opts.wasmBaseURL;
-  const fonts = new FontRegistry(wasmBaseURL);
-  const layout = new LayoutEngine(fonts);
-  const videoGenerator = new VideoGenerator();
+  let fonts;
   try {
-    await fonts.init();
+    fonts = await FontRegistry.getSharedInstance(wasmBaseURL);
   } catch (err) {
     throw new Error(
       `Failed to initialize font registry: ${err instanceof Error ? err.message : String(err)}`
     );
   }
+  const layout = new LayoutEngine(fonts);
+  const videoGenerator = new VideoGenerator();
   async function ensureFonts(asset) {
     try {
       if (asset.customFonts) {
@@ -2589,7 +2642,7 @@ async function createTextEngine(opts = {}) {
     },
     destroy() {
       try {
-        fonts.destroy();
+        fonts.release();
       } catch (err) {
         console.error(`Error during cleanup: ${err instanceof Error ? err.message : String(err)}`);
       }

package/dist/entry.web.js

@@ -385,6 +385,56 @@ var _FontRegistry = class _FontRegistry {
   static setFallbackLoader(loader) {
     _FontRegistry.fallbackLoader = loader;
   }
+  static async getSharedInstance(wasmBaseURL) {
+    if (_FontRegistry.sharedInitPromise) {
+      const instance = await _FontRegistry.sharedInitPromise;
+      _FontRegistry.refCount++;
+      return instance;
+    }
+    if (_FontRegistry.sharedInstance) {
+      _FontRegistry.refCount++;
+      return _FontRegistry.sharedInstance;
+    }
+    _FontRegistry.sharedInitPromise = (async () => {
+      const instance = new _FontRegistry(wasmBaseURL);
+      await instance.init();
+      _FontRegistry.sharedInstance = instance;
+      _FontRegistry.refCount = 1;
+      return instance;
+    })();
+    try {
+      const instance = await _FontRegistry.sharedInitPromise;
+      return instance;
+    } finally {
+      _FontRegistry.sharedInitPromise = null;
+    }
+  }
+  static getRefCount() {
+    return _FontRegistry.refCount;
+  }
+  static hasSharedInstance() {
+    return _FontRegistry.sharedInstance !== null;
+  }
+  release() {
+    if (this !== _FontRegistry.sharedInstance) {
+      this.destroy();
+      return;
+    }
+    _FontRegistry.refCount--;
+    if (_FontRegistry.refCount <= 0) {
+      this.destroy();
+      _FontRegistry.sharedInstance = null;
+      _FontRegistry.refCount = 0;
+    }
+  }
+  static resetSharedInstance() {
+    if (_FontRegistry.sharedInstance) {
+      _FontRegistry.sharedInstance.destroy();
+      _FontRegistry.sharedInstance = null;
+    }
+    _FontRegistry.refCount = 0;
+    _FontRegistry.sharedInitPromise = null;
+  }
   setEmojiFallback(desc) {
     this.emojiFallbackDesc = desc;
   }
@@ -597,6 +647,9 @@ var _FontRegistry = class _FontRegistry {
     }
   }
 };
+__publicField(_FontRegistry, "sharedInstance", null);
+__publicField(_FontRegistry, "refCount", 0);
+__publicField(_FontRegistry, "sharedInitPromise", null);
 __publicField(_FontRegistry, "fallbackLoader");
 var FontRegistry = _FontRegistry;
 
@@ -845,42 +898,42 @@ async function buildDrawOps(p) {
   const scale = p.font.size / upem;
   const numLines = p.lines.length;
   const lineHeightPx = p.font.size * p.style.lineHeight;
-  const textOffsetY = borderWidth + padding.top;
   let blockY;
   switch (p.align.vertical) {
     case "top":
-      blockY = p.font.size + textOffsetY;
+      blockY = p.font.size;
       break;
     case "bottom":
-      blockY = p.textRect.height - (numLines - 1) * lineHeightPx + textOffsetY;
+      blockY = p.textRect.height - (numLines - 1) * lineHeightPx;
       break;
     case "middle":
     default:
       const capHeightRatio = 0.35;
       const visualOffset = p.font.size * capHeightRatio;
-      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset + textOffsetY;
+      blockY = (p.textRect.height - (numLines - 1) * lineHeightPx) / 2 + visualOffset;
       break;
   }
+  blockY += borderWidth + padding.top;
   const fill = p.style.gradient ? gradientSpecFrom(p.style.gradient, 1) : { kind: "solid", color: p.font.color, opacity: p.font.opacity };
   const decoColor = p.style.gradient ? p.style.gradient.stops[p.style.gradient.stops.length - 1]?.color ?? p.font.color : p.font.color;
   const textOps = [];
   const highlighterOps = [];
   let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity;
   for (const line of p.lines) {
-    const textOffsetX = borderWidth + padding.left;
     let lineX;
     switch (p.align.horizontal) {
       case "left":
-        lineX = textOffsetX;
+        lineX = 0;
         break;
       case "right":
-        lineX = p.textRect.width - line.width + textOffsetX;
+        lineX = p.textRect.width - line.width;
         break;
       case "center":
       default:
-        lineX = (p.textRect.width - line.width) / 2 + textOffsetX;
+        lineX = (p.textRect.width - line.width) / 2;
         break;
     }
+    lineX += borderWidth + padding.left;
     let xCursor = lineX;
     const lineIndex = p.lines.indexOf(line);
     const baselineY = blockY + lineIndex * lineHeightPx;
@@ -2013,23 +2066,23 @@ async function createTextEngine(opts = {}) {
   const height = opts.height ?? CANVAS_CONFIG.DEFAULTS.height;
   const pixelRatio = opts.pixelRatio ?? CANVAS_CONFIG.DEFAULTS.pixelRatio;
   const wasmBaseURL = "https://shotstack-ingest-api-dev-sources.s3.ap-southeast-2.amazonaws.com/euo5r93oyr/zzz01k9h-yycyx-2x2y6-qx9bj-7n567b/source.wasm";
-  const fonts = new FontRegistry(wasmBaseURL);
-  const layout = new LayoutEngine(fonts);
+  FontRegistry.setFallbackLoader(async (desc) => {
+    const family = (desc.family ?? "Roboto").toLowerCase();
+    const weight = `${desc.weight ?? "400"}`;
+    if (family === "roboto" && weight === "400") {
+      return fetchToArrayBuffer(DEFAULT_ROBOTO_URL);
+    }
+    return void 0;
+  });
+  let fonts;
   try {
-    FontRegistry.setFallbackLoader(async (desc) => {
-      const family = (desc.family ?? "Roboto").toLowerCase();
-      const weight = `${desc.weight ?? "400"}`;
-      if (family === "roboto" && weight === "400") {
-        return fetchToArrayBuffer(DEFAULT_ROBOTO_URL);
-      }
-      return void 0;
-    });
-    await fonts.init();
+    fonts = await FontRegistry.getSharedInstance(wasmBaseURL);
   } catch (err) {
     throw new Error(
       `Failed to initialize font registry: ${err instanceof Error ? err.message : String(err)}`
     );
   }
+  const layout = new LayoutEngine(fonts);
   async function ensureFonts(asset) {
     try {
       if (asset.customFonts) {
@@ -2067,9 +2120,7 @@ async function createTextEngine(opts = {}) {
               weight: "400"
             });
           } else {
-            throw new Error(
-              `Font not registered for ${desc.family}__${desc.weight}`
-            );
+            throw new Error(`Font not registered for ${desc.family}__${desc.weight}`);
           }
         }
       };
@@ -2149,7 +2200,12 @@ async function createTextEngine(opts = {}) {
             emojiAvailable = true;
           } catch {
           }
-          const padding2 = asset.padding ? typeof asset.padding === "number" ? { top: asset.padding, right: asset.padding, bottom: asset.padding, left: asset.padding } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
+          const padding2 = asset.padding ? typeof asset.padding === "number" ? {
+            top: asset.padding,
+            right: asset.padding,
+            bottom: asset.padding,
+            left: asset.padding
+          } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
           lines = await layout.layout({
             text: asset.text,
             width: (asset.width ?? width) - padding2.left - padding2.right,
@@ -2165,7 +2221,12 @@ async function createTextEngine(opts = {}) {
             `Failed to layout text: ${err instanceof Error ? err.message : String(err)}`
           );
         }
-        const padding = asset.padding ? typeof asset.padding === "number" ? { top: asset.padding, right: asset.padding, bottom: asset.padding, left: asset.padding } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
+        const padding = asset.padding ? typeof asset.padding === "number" ? {
+          top: asset.padding,
+          right: asset.padding,
+          bottom: asset.padding,
+          left: asset.padding
+        } : asset.padding : { top: 0, right: 0, bottom: 0, left: 0 };
         const borderWidth = asset.border?.width ?? 0;
         const canvasW = (asset.width ?? width) + borderWidth * 2;
         const canvasH = (asset.height ?? height) + borderWidth * 2;
@@ -2252,7 +2313,7 @@ async function createTextEngine(opts = {}) {
     },
     destroy() {
       try {
-        fonts.destroy();
+        fonts.release();
       } catch (err) {
         console.error(`Error during cleanup: ${err instanceof Error ? err.message : String(err)}`);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shotstack/shotstack-canvas",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "Text layout & animation engine (HarfBuzz) for Node & Web - fully self-contained.",
   "type": "module",
   "main": "./dist/entry.node.cjs",