@pixldocs/canvas-renderer 0.5.15 → 0.5.17

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.
  */
@@ -370,6 +369,8 @@ export declare class PixldocsRenderer {
     renderAllById(templateId: string, formData?: Record<string, any>, options?: Omit<RenderOptions, 'pageIndex'>): Promise<RenderResult[]>;
     private getExpectedImageCount;
     private waitForCanvasImages;
+    private waitForCanvasScene;
+    private waitForRelevantFonts;
     private getNormalizedGradientStops;
     private paintPageBackground;
     private renderPageViaPreviewCanvas;

package/dist/index.js

@@ -2684,12 +2684,10 @@ const waitForFontsReady = async () => {
   if (!document.fonts) return;
   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}"`)
@@ -11688,18 +11686,16 @@ function normalizeFontFamily(fontStack) {
 }
 const loadedFonts = /* @__PURE__ */ new Set();
 const loadingPromises = /* @__PURE__ */ new Map();
-async function withTimeout(promise, timeoutMs = 4e3) {
+function withTimeout(promise, timeoutMs = 4e3) {
   let timeoutId;
-  try {
-    return await Promise.race([
-      promise,
-      new Promise((resolve) => {
-        timeoutId = setTimeout(resolve, timeoutMs);
-      })
-    ]);
-  } finally {
+  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;
@@ -11721,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 withTimeout(document.fonts.load(`16px "${fontFamily}"`), 2500);
-        await withTimeout(document.fonts.ready, 2500);
-      }
       loadedFonts.add(fontFamily);
     } catch (e) {
       console.warn(`[@pixldocs/canvas-renderer] Font load failed: ${fontFamily}`, e);
@@ -11836,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 withTimeout(Promise.all([...families].map((f) => loadGoogleFontCSS(f))), 8e3);
+  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 withTimeout(Promise.all(loadPromises), 8e3);
-    await withTimeout(document.fonts.ready, 2500);
   }
 }
 function PixldocsPreview(props) {
@@ -12291,6 +12281,49 @@ class PixldocsRenderer {
       setTimeout(check, 0);
     });
   }
+  waitForCanvasScene(container, config, pageIndex, maxWaitMs = 8e3, pollMs = 50) {
+    return new Promise((resolve) => {
+      var _a, _b;
+      const start = Date.now();
+      const pageHasContent = (((_b = (_a = config.pages[pageIndex]) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ?? 0) > 0;
+      const settle = () => requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+      const check = () => {
+        const fabricCanvas = this.getFabricCanvasFromContainer(container);
+        const lowerCanvas = (fabricCanvas == null ? void 0 : fabricCanvas.lowerCanvasEl) || container.querySelector("canvas.lower-canvas, canvas");
+        const objectCount = typeof (fabricCanvas == null ? void 0 : fabricCanvas.getObjects) === "function" ? fabricCanvas.getObjects().length : 0;
+        const ready = !!lowerCanvas && (!pageHasContent || objectCount > 0);
+        if (ready) {
+          console.log(`[canvas-renderer][scene-wait] ready after ${Date.now() - start}ms (objects=${objectCount})`);
+          settle();
+          return;
+        }
+        if (Date.now() - start >= maxWaitMs) {
+          console.warn(`[canvas-renderer][scene-wait-timeout] elapsed=${Date.now() - start}ms objects=${objectCount} pageHasContent=${pageHasContent}`);
+          settle();
+          return;
+        }
+        setTimeout(check, pollMs);
+      };
+      setTimeout(check, 0);
+    });
+  }
+  async waitForRelevantFonts(config, maxWaitMs = 1800) {
+    if (typeof document === "undefined" || !document.fonts) return;
+    const descriptors = collectFontDescriptorsFromConfig(config);
+    if (descriptors.length === 0) return;
+    const loads = Promise.all(
+      descriptors.map((descriptor) => {
+        const stylePrefix = descriptor.style === "italic" ? "italic " : "";
+        const spec = `${stylePrefix}${descriptor.weight} 16px "${descriptor.family}"`;
+        return document.fonts.load(spec).catch(() => []);
+      })
+    ).then(() => void 0);
+    await Promise.race([
+      loads,
+      new Promise((resolve) => setTimeout(resolve, maxWaitMs))
+    ]);
+    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+  }
   getNormalizedGradientStops(gradient) {
     const stops = Array.isArray(gradient == null ? void 0 : gradient.stops) ? gradient.stops.map((stop) => ({
       offset: Math.max(0, Math.min(1, Number((stop == null ? void 0 : stop.offset) ?? 0))),
@@ -12403,10 +12436,11 @@ class PixldocsRenderer {
           );
           return;
         }
-        const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
-        this.waitForCanvasImages(container, expectedImageCount).then(async () => {
+        this.waitForCanvasScene(container, config, pageIndex).then(async () => {
           try {
             const fabricInstance = this.getFabricCanvasFromContainer(container);
+            const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
+            await this.waitForCanvasImages(container, expectedImageCount);
             await this.waitForStableTextMetrics(container, config);
             const fabricCanvas = container.querySelector("canvas.upper-canvas, canvas");
             const sourceCanvas = (fabricInstance == null ? void 0 : fabricInstance.lowerCanvasEl) || container.querySelector("canvas.lower-canvas") || fabricCanvas;
@@ -12497,8 +12531,7 @@ class PixldocsRenderer {
           );
           return;
         }
-        const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
-        this.waitForCanvasImages(container, expectedImageCount).then(async () => {
+        this.waitForCanvasScene(container, config, pageIndex).then(async () => {
           var _a, _b;
           try {
             const fabricInstance = this.getFabricCanvasFromContainer(container);
@@ -12507,6 +12540,8 @@ class PixldocsRenderer {
               reject(new Error("No Fabric canvas instance found for SVG capture"));
               return;
             }
+            const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
+            await this.waitForCanvasImages(container, expectedImageCount);
             await this.waitForStableTextMetrics(container, config);
             const prevVPT = fabricInstance.viewportTransform ? [...fabricInstance.viewportTransform] : void 0;
             const prevSvgVPT = fabricInstance.svgViewportTransformation;
@@ -12630,14 +12665,9 @@ 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 });
-      }
+      void ensureFontsForResolvedConfig(config);
+      await this.waitForRelevantFonts(config);
     }
     const fabricInstance = this.getFabricCanvasFromContainer(container);
     if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
@@ -12647,9 +12677,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);
@@ -12661,8 +12691,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 = [];
@@ -12676,7 +12706,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
@@ -12695,7 +12725,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);
     };