@pixldocs/canvas-renderer 0.5.16 → 0.5.18

package/dist/index.d.ts

@@ -369,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

@@ -5670,6 +5670,7 @@ const PageCanvas = forwardRef(
     onDynamicFieldClick,
     canvasUpdateVersion = 0,
     pageChildren,
+    skipFontReadyWait = false,
     onReady
   }, ref) => {
     const isEditorMode = mode === "editor";
@@ -5955,9 +5956,11 @@ const PageCanvas = forwardRef(
               await Promise.all(fontFamilies.map((f) => ensureFontLoaded(f)));
             }
           }
-          await waitForFontsReady();
-          await waitUntilFontsAvailable(fontFamilies, { timeoutMs: 3500, pollIntervalMs: 60 });
-          await new Promise((r) => requestAnimationFrame(() => r()));
+          if (!skipFontReadyWait) {
+            await waitForFontsReady();
+            await waitUntilFontsAvailable(fontFamilies, { timeoutMs: 3500, pollIntervalMs: 60 });
+            await new Promise((r) => requestAnimationFrame(() => r()));
+          }
           clearFabricCharCache();
           clearMeasurementCache();
           setReady(true);
@@ -9394,6 +9397,7 @@ function PreviewCanvas({
   pageIndex = 0,
   zoom = 1,
   absoluteZoom = false,
+  skipFontReadyWait = false,
   className,
   onDynamicFieldClick,
   onReady
@@ -9548,6 +9552,7 @@ function PreviewCanvas({
                 selectedIds: [],
                 activeTool: "select",
                 mode: "preview",
+                skipFontReadyWait,
                 dynamicFieldIds,
                 onDynamicFieldClick: handleDynamicFieldClick,
                 onReady
@@ -12281,6 +12286,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))),
@@ -12388,16 +12436,17 @@ class PixldocsRenderer {
               pageIndex,
               zoom: pixelRatio,
               absoluteZoom: true,
+              skipFontReadyWait: true,
               onReady
             })
           );
           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);
-            await this.waitForStableTextMetrics(container, config);
+            const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
+            await this.waitForCanvasImages(container, expectedImageCount);
             const fabricCanvas = container.querySelector("canvas.upper-canvas, canvas");
             const sourceCanvas = (fabricInstance == null ? void 0 : fabricInstance.lowerCanvasEl) || container.querySelector("canvas.lower-canvas") || fabricCanvas;
             if (!sourceCanvas) {
@@ -12436,6 +12485,7 @@ class PixldocsRenderer {
           pageIndex,
           zoom: pixelRatio,
           absoluteZoom: true,
+          skipFontReadyWait: true,
           onReady
         })
       );
@@ -12482,13 +12532,13 @@ class PixldocsRenderer {
               pageIndex,
               zoom: 1,
               absoluteZoom: true,
+              skipFontReadyWait: true,
               onReady
             })
           );
           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);
@@ -12497,7 +12547,8 @@ class PixldocsRenderer {
               reject(new Error("No Fabric canvas instance found for SVG capture"));
               return;
             }
-            await this.waitForStableTextMetrics(container, config);
+            const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
+            await this.waitForCanvasImages(container, expectedImageCount);
             const prevVPT = fabricInstance.viewportTransform ? [...fabricInstance.viewportTransform] : void 0;
             const prevSvgVPT = fabricInstance.svgViewportTransformation;
             const prevRetina = fabricInstance.enableRetinaScaling;
@@ -12548,6 +12599,7 @@ class PixldocsRenderer {
           zoom: 1,
           // 1:1 — no UI scaling for SVG capture
           absoluteZoom: true,
+          skipFontReadyWait: true,
           onReady
         })
       );
@@ -12621,7 +12673,8 @@ class PixldocsRenderer {
   }
   async waitForStableTextMetrics(container, config) {
     if (typeof document !== "undefined") {
-      await ensureFontsForResolvedConfig(config);
+      void ensureFontsForResolvedConfig(config);
+      await this.waitForRelevantFonts(config);
     }
     const fabricInstance = this.getFabricCanvasFromContainer(container);
     if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;