@pixldocs/canvas-renderer 0.3.14 → 0.3.16

package/dist/index.d.ts

@@ -179,10 +179,7 @@ export declare class PixldocsRenderer {
      * Convenience: fetch by ID with simple flat data and render.
      */
     renderById(templateId: string, formData?: Record<string, any>, options?: RenderOptions): Promise<RenderResult>;
-    /**
-     * Wait until every image on the Fabric canvas inside the container has loaded.
-     * Polls img elements since we can't hook into Fabric's internal load events.
-     */
+    private getExpectedImageCount;
     private waitForCanvasImages;
     private getNormalizedGradientStops;
     private paintPageBackground;

package/dist/index.js

@@ -10383,12 +10383,7 @@ async function loadGoogleFontCSS(rawFontFamily) {
   const existing = loadingPromises.get(fontFamily);
   if (existing) return existing;
   const promise = (async () => {
-    var _a;
     try {
-      if ((_a = document.fonts) == null ? void 0 : _a.check(`16px "${fontFamily}"`)) {
-        loadedFonts.add(fontFamily);
-        return;
-      }
       const encoded = encodeURIComponent(fontFamily);
       const url = `https://fonts.googleapis.com/css?family=${encoded}:300,400,500,600,700&display=swap`;
       const link = document.createElement("link");
@@ -10694,26 +10689,85 @@ class PixldocsRenderer {
     return this.render(resolved.config, options);
   }
   // ─── Internal: render a page using the full PreviewCanvas engine ───
-  /**
-   * Wait until every image on the Fabric canvas inside the container has loaded.
-   * Polls img elements since we can't hook into Fabric's internal load events.
-   */
-  waitForCanvasImages(container, maxWaitMs = 15e3, pollMs = 200) {
+  getExpectedImageCount(config, pageIndex) {
+    const page = config.pages[pageIndex];
+    if (!(page == null ? void 0 : page.children)) return 0;
+    let count = 0;
+    const walk = (nodes) => {
+      for (const node of nodes) {
+        if (!node || node.visible === false) continue;
+        const src = typeof node.src === "string" ? node.src.trim() : "";
+        const imageUrl = typeof node.imageUrl === "string" ? node.imageUrl.trim() : "";
+        if (node.type === "image" && (src || imageUrl)) count += 1;
+        if (Array.isArray(node.children) && node.children.length > 0) {
+          walk(node.children);
+        }
+      }
+    };
+    walk(page.children);
+    return count;
+  }
+  waitForCanvasImages(container, expectedImageCount, maxWaitMs = 15e3, pollMs = 120) {
     return new Promise((resolve) => {
       const start = Date.now();
+      let stableFrames = 0;
+      const isRenderableImage = (value) => value instanceof HTMLImageElement && value.complete && value.naturalWidth > 0 && value.naturalHeight > 0;
+      const collectRenderableImages = (obj, seen) => {
+        if (!obj || typeof obj !== "object") return;
+        const candidates = [obj._element, obj._originalElement, obj._filteredEl, obj._cacheCanvasEl];
+        for (const candidate of candidates) {
+          if (isRenderableImage(candidate)) {
+            seen.add(candidate);
+          } else if (candidate instanceof HTMLImageElement) {
+            return false;
+          }
+        }
+        const nested = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
+        for (const child of nested) {
+          if (collectRenderableImages(child, seen) === false) return false;
+        }
+        return true;
+      };
+      const getFabricCanvas = () => {
+        const registry2 = window.__fabricCanvasRegistry;
+        if (registry2 instanceof Map) {
+          for (const entry of registry2.values()) {
+            const canvas = entry == null ? void 0 : entry.canvas;
+            const el = (canvas == null ? void 0 : canvas.lowerCanvasEl) || (canvas == null ? void 0 : canvas.upperCanvasEl);
+            if (el && container.contains(el)) return canvas;
+          }
+        }
+        return null;
+      };
+      const settle = () => requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
       const check = () => {
-        const images = container.querySelectorAll("img");
-        let allLoaded = true;
-        images.forEach((img) => {
-          if (!img.complete) allLoaded = false;
-        });
-        if (allLoaded || Date.now() - start > maxWaitMs) {
-          requestAnimationFrame(() => setTimeout(resolve, 400));
+        const elapsed = Date.now() - start;
+        const domImages = Array.from(container.querySelectorAll("img"));
+        const allDomLoaded = domImages.every((img) => img.complete && img.naturalWidth > 0 && img.naturalHeight > 0);
+        const fabricCanvas = getFabricCanvas();
+        const fabricObjects = fabricCanvas && typeof fabricCanvas.getObjects === "function" ? fabricCanvas.getObjects() : [];
+        const renderableImages = /* @__PURE__ */ new Set();
+        const fabricReady = fabricObjects.every((obj) => collectRenderableImages(obj, renderableImages) !== false);
+        const actualImageCount = Math.max(domImages.length, renderableImages.size);
+        !!fabricCanvas && !!(fabricCanvas.lowerCanvasEl || fabricCanvas.upperCanvasEl);
+        const hasExpectedAssets = expectedImageCount === 0 ? true : actualImageCount >= expectedImageCount;
+        const ready = allDomLoaded && fabricReady && hasExpectedAssets;
+        if (ready) {
+          stableFrames += 1;
+          if (stableFrames >= 2) {
+            settle();
+            return;
+          }
+        } else {
+          stableFrames = 0;
+        }
+        if (elapsed >= maxWaitMs) {
+          settle();
           return;
         }
         setTimeout(check, pollMs);
       };
-      setTimeout(check, 500);
+      setTimeout(check, 0);
     });
   }
   getNormalizedGradientStops(gradient) {
@@ -10814,7 +10868,8 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
-        this.waitForCanvasImages(container).then(() => {
+        const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
+        this.waitForCanvasImages(container, expectedImageCount).then(() => {
           try {
             const fabricCanvas = container.querySelector("canvas.upper-canvas, canvas");
             if (!fabricCanvas) {