@pixldocs/canvas-renderer 0.3.14 → 0.3.15

package/dist/index.d.ts

@@ -181,7 +181,8 @@ export declare class PixldocsRenderer {
     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.
+     * Checks both DOM <img> elements AND Fabric canvas image objects to ensure
+     * all async assets are fully painted before capture.
      */
     private waitForCanvasImages;
     private getNormalizedGradientStops;

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");
@@ -10696,7 +10691,8 @@ class PixldocsRenderer {
   // ─── 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.
+   * Checks both DOM <img> elements AND Fabric canvas image objects to ensure
+   * all async assets are fully painted before capture.
    */
   waitForCanvasImages(container, maxWaitMs = 15e3, pollMs = 200) {
     return new Promise((resolve) => {
@@ -10707,6 +10703,29 @@ class PixldocsRenderer {
         images.forEach((img) => {
           if (!img.complete) allLoaded = false;
         });
+        if (allLoaded) {
+          const canvasEl = container.querySelector("canvas.lower-canvas, canvas");
+          const fabricCanvas = canvasEl && canvasEl.__fabric;
+          if (fabricCanvas && typeof fabricCanvas.getObjects === "function") {
+            for (const obj of fabricCanvas.getObjects()) {
+              const el = obj._element || obj._originalElement;
+              if (el instanceof HTMLImageElement && !el.complete) {
+                allLoaded = false;
+                break;
+              }
+              if (obj._objects) {
+                for (const child of obj._objects) {
+                  const childEl = child._element || child._originalElement;
+                  if (childEl instanceof HTMLImageElement && !childEl.complete) {
+                    allLoaded = false;
+                    break;
+                  }
+                }
+                if (!allLoaded) break;
+              }
+            }
+          }
+        }
         if (allLoaded || Date.now() - start > maxWaitMs) {
           requestAnimationFrame(() => setTimeout(resolve, 400));
           return;