@pixldocs/canvas-renderer 0.5.16 → 0.5.17

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

@@ -12281,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))),
@@ -12393,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;
@@ -12487,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);
@@ -12497,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;
@@ -12621,7 +12666,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;