@pixldocs/canvas-renderer 0.5.14 → 0.5.16

package/dist/index.d.ts

@@ -91,8 +91,7 @@ export declare function embedFontsForConfig(pdf: jsPDF, config: any, fontBaseUrl
 export declare function embedFontsInPdf(pdf: jsPDF, fontFamilies: Set<string>, fontBaseUrl: string): Promise<Set<string>>;
 
 /**
- * Ensure all fonts required by a fully-resolved TemplateConfig are loaded
- * and available to Fabric/Canvas before rendering.
+ * Start loading all fonts required by a fully-resolved TemplateConfig.
  *
  * This is the **single API** consumers (and the renderer internally) should
  * call to guarantee font parity with EC2 `/render-from-form`.
@@ -101,8 +100,8 @@ export declare function embedFontsInPdf(pdf: jsPDF, fontFamilies: Set<string>, f
  * 1. Walks ALL text nodes (including clones/repeatables) collecting
  *    fontFamily + fontWeight + fontStyle.
  * 2. Loads each unique family via Google Fonts CSS v1 (idempotent).
- * 3. Explicitly loads each weight+style combo via `document.fonts.load()`.
- * 4. Awaits `document.fonts.ready` so Fabric never paints with fallback faces.
+ * 3. Kicks off each weight+style combo via `document.fonts.load()` without
+ *    blocking render completion; late font load reflow handles final metrics.
  *
  * Idempotent — safe to call multiple times for the same config.
  */

package/dist/index.js

@@ -2637,6 +2637,19 @@ const FONTS_TO_PRELOAD = [
 ];
 let fontsLoaded = false;
 let fontsLoadingPromise = null;
+const withFontTimeout = async (promise, timeoutMs = 4e3) => {
+  let timeoutId;
+  try {
+    return await Promise.race([
+      promise,
+      new Promise((resolve) => {
+        timeoutId = setTimeout(resolve, timeoutMs);
+      })
+    ]);
+  } finally {
+    if (timeoutId) clearTimeout(timeoutId);
+  }
+};
 const preloadFont = async (fontFamily) => {
   try {
     if (document.fonts) {
@@ -2657,11 +2670,11 @@ const preloadAllFonts = async () => {
   }
   fontsLoadingPromise = (async () => {
     if (document.fonts) {
-      await document.fonts.ready;
+      await withFontTimeout(document.fonts.ready, 2500);
     }
-    await Promise.all(FONTS_TO_PRELOAD.map((font) => preloadFont(font)));
+    await withFontTimeout(Promise.all(FONTS_TO_PRELOAD.map((font) => preloadFont(font))).then(() => void 0), 5e3);
     if (document.fonts) {
-      await document.fonts.ready;
+      await withFontTimeout(document.fonts.ready, 2500);
     }
     fontsLoaded = true;
   })();
@@ -2669,14 +2682,12 @@ const preloadAllFonts = async () => {
 };
 const waitForFontsReady = async () => {
   if (!document.fonts) return;
-  await document.fonts.ready;
+  await withFontTimeout(document.fonts.ready, 2500);
 };
-const DEFAULT_FONT_CHECK_TIMEOUT_MS = 3500;
-const FONT_CHECK_POLL_MS = 60;
 const waitUntilFontsAvailable = async (fontFamilies, options) => {
   if (!document.fonts || fontFamilies.length === 0) return;
-  const timeoutMs = (options == null ? void 0 : options.timeoutMs) ?? DEFAULT_FONT_CHECK_TIMEOUT_MS;
-  const pollMs = (options == null ? void 0 : options.pollIntervalMs) ?? FONT_CHECK_POLL_MS;
+  const timeoutMs = options == null ? void 0 : options.timeoutMs;
+  const pollMs = options == null ? void 0 : options.pollIntervalMs;
   const deadline = Date.now() + timeoutMs;
   const check = () => fontFamilies.every(
     (f) => document.fonts.check(`16px "${f}"`) && document.fonts.check(`bold 16px "${f}"`)
@@ -11675,6 +11686,17 @@ function normalizeFontFamily(fontStack) {
 }
 const loadedFonts = /* @__PURE__ */ new Set();
 const loadingPromises = /* @__PURE__ */ new Map();
+function withTimeout(promise, timeoutMs = 4e3) {
+  let timeoutId;
+  return Promise.race([
+    promise,
+    new Promise((resolve) => {
+      timeoutId = setTimeout(resolve, timeoutMs);
+    })
+  ]).finally(() => {
+    if (timeoutId) clearTimeout(timeoutId);
+  });
+}
 async function loadGoogleFontCSS(rawFontFamily) {
   if (!rawFontFamily || typeof document === "undefined") return;
   const fontFamily = normalizeFontFamily(rawFontFamily);
@@ -11695,10 +11717,6 @@ async function loadGoogleFontCSS(rawFontFamily) {
         link.onerror = () => reject(new Error(`Failed to load font: ${fontFamily}`));
         document.head.appendChild(link);
       });
-      if (document.fonts) {
-        await document.fonts.load(`16px "${fontFamily}"`);
-        await document.fonts.ready;
-      }
       loadedFonts.add(fontFamily);
     } catch (e) {
       console.warn(`[@pixldocs/canvas-renderer] Font load failed: ${fontFamily}`, e);
@@ -11810,17 +11828,15 @@ async function ensureFontsForResolvedConfig(config) {
   if (typeof document === "undefined") return;
   const descriptors = collectFontDescriptorsFromConfig(config);
   const families = new Set(descriptors.map((d) => d.family));
-  await Promise.all([...families].map((f) => loadGoogleFontCSS(f)));
+  void withTimeout(Promise.all([...families].map((f) => loadGoogleFontCSS(f))), 2500);
   if (document.fonts) {
-    const loadPromises = descriptors.map((d) => {
+    descriptors.forEach((d) => {
       const stylePrefix = d.style === "italic" ? "italic " : "";
       const weightStr = String(d.weight);
       const spec = `${stylePrefix}${weightStr} 16px "${d.family}"`;
-      return document.fonts.load(spec).catch(() => {
+      document.fonts.load(spec).catch(() => {
       });
     });
-    await Promise.all(loadPromises);
-    await document.fonts.ready;
   }
 }
 function PixldocsPreview(props) {
@@ -12604,14 +12620,8 @@ class PixldocsRenderer {
     return null;
   }
   async waitForStableTextMetrics(container, config) {
-    var _a;
     if (typeof document !== "undefined") {
       await ensureFontsForResolvedConfig(config);
-      await ((_a = document.fonts) == null ? void 0 : _a.ready);
-      const fontFamilies = [...collectFontsFromConfig(config)].filter(Boolean);
-      if (fontFamilies.length > 0) {
-        await waitUntilFontsAvailable(fontFamilies, { timeoutMs: 4e3, pollIntervalMs: 50 });
-      }
     }
     const fabricInstance = this.getFabricCanvasFromContainer(container);
     if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
@@ -12621,9 +12631,9 @@ class PixldocsRenderer {
       clearMeasurementCache();
     };
     const reflowTextboxes = () => {
-      var _a2, _b, _c;
+      var _a, _b, _c;
       const walk = (obj) => {
-        var _a3, _b2, _c2, _d;
+        var _a2, _b2, _c2, _d;
         if (!obj) return;
         const children = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
         if (children.length) children.forEach(walk);
@@ -12635,8 +12645,8 @@ class PixldocsRenderer {
             scaleY: obj.scaleY
           };
           const resetTextboxLayoutInternals = () => {
-            var _a4;
-            (_a4 = obj._clearCache) == null ? void 0 : _a4.call(obj);
+            var _a3;
+            (_a3 = obj._clearCache) == null ? void 0 : _a3.call(obj);
             obj.__charBounds = [];
             obj.__lineWidths = [];
             obj.__lineHeights = [];
@@ -12650,7 +12660,7 @@ class PixldocsRenderer {
           resetTextboxLayoutInternals();
           obj.initDimensions();
           if (saved.width != null) {
-            (_a3 = obj.set) == null ? void 0 : _a3.call(obj, {
+            (_a2 = obj.set) == null ? void 0 : _a2.call(obj, {
               width: saved.width,
               scaleX: saved.scaleX,
               scaleY: saved.scaleY
@@ -12669,7 +12679,7 @@ class PixldocsRenderer {
         }
       };
       fabricInstance.getObjects().forEach(walk);
-      (_a2 = fabricInstance.calcOffset) == null ? void 0 : _a2.call(fabricInstance);
+      (_a = fabricInstance.calcOffset) == null ? void 0 : _a.call(fabricInstance);
       (_b = fabricInstance.renderAll) == null ? void 0 : _b.call(fabricInstance);
       (_c = fabricInstance.requestRenderAll) == null ? void 0 : _c.call(fabricInstance);
     };