@pixldocs/canvas-renderer 0.3.15 → 0.3.17

package/dist/index.d.ts

@@ -179,11 +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.
-     * Checks both DOM <img> elements AND Fabric canvas image objects to ensure
-     * all async assets are fully painted before capture.
-     */
+    private getExpectedImageCount;
     private waitForCanvasImages;
     private getNormalizedGradientStops;
     private paintPageBackground;
@@ -207,6 +203,8 @@ export declare interface RenderFromFormOptions extends Omit<RenderOptions, 'page
     formSchemaId: string;
     sectionState: SectionFormState;
     themeId?: string;
+    /** Whether to inject watermark on preview. Default: auto (true for paid templates, false for free). */
+    watermark?: boolean;
 }
 
 export declare interface RenderOptions {
@@ -239,6 +237,8 @@ export declare interface ResolvedTemplate {
     config: TemplateConfig;
     templateName: string;
     templateId: string;
+    /** Template price — 0 = free, >0 = paid (watermark applies) */
+    price: number;
 }
 
 /**

package/dist/index.js

@@ -10074,7 +10074,7 @@ async function resolveTemplateData(options) {
   const defaultData = template.default_data;
   if (defaultData) config = applyFormDataSimple(config, defaultData);
   if (formData && Object.keys(formData).length > 0) config = applyFormDataSimple(config, formData);
-  return { config, templateName: template.name || "Untitled", templateId };
+  return { config, templateName: template.name || "Untitled", templateId, price: template.price ?? 0 };
 }
 async function resolveFromForm(options) {
   var _a, _b, _c, _d;
@@ -10215,7 +10215,8 @@ async function resolveFromForm(options) {
   return {
     config: resolvedConfig,
     templateName: templateRow.name || "Untitled",
-    templateId
+    templateId,
+    price: templateRow.price ?? 0
   };
 }
 function flattenAll(nodes) {
@@ -10665,7 +10666,7 @@ class PixldocsRenderer {
    * This is the primary external API for the package.
    */
   async renderFromForm(options) {
-    const { templateId, formSchemaId, sectionState, themeId, ...renderOpts } = options;
+    const { templateId, formSchemaId, sectionState, themeId, watermark, ...renderOpts } = options;
     const resolved = await resolveFromForm({
       templateId,
       formSchemaId,
@@ -10674,7 +10675,13 @@ class PixldocsRenderer {
       supabaseUrl: this.config.supabaseUrl,
       supabaseAnonKey: this.config.supabaseAnonKey
     });
-    return this.renderAllPages(resolved.config, renderOpts);
+    const shouldWatermark = watermark ?? resolved.price > 0;
+    let configToRender = resolved.config;
+    if (shouldWatermark) {
+      const { injectWatermark } = await import("./canvasWatermark-BgiyK4gu.js");
+      configToRender = injectWatermark(configToRender);
+    }
+    return this.renderAllPages(configToRender, renderOpts);
   }
   /**
    * Convenience: fetch by ID with simple flat data and render.
@@ -10689,50 +10696,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.
-   * 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) {
+  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) {
-          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;
-              }
-            }
+        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 (allLoaded || Date.now() - start > maxWaitMs) {
-          requestAnimationFrame(() => setTimeout(resolve, 400));
+        if (elapsed >= maxWaitMs) {
+          settle();
           return;
         }
         setTimeout(check, pollMs);
       };
-      setTimeout(check, 500);
+      setTimeout(check, 0);
     });
   }
   getNormalizedGradientStops(gradient) {
@@ -10833,7 +10875,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) {