@pixldocs/canvas-renderer 0.3.19 → 0.3.21

package/dist/index.d.ts

@@ -184,15 +184,38 @@ export declare class PixldocsRenderer {
      * This is the primary external API for the package.
      */
     renderFromForm(options: RenderFromFormOptions): Promise<RenderResult[]>;
+    /**
+     * Render a page and capture the Fabric canvas SVG output (vector, not raster).
+     * This is the key building block for client-side vector PDF export.
+     */
+    renderPageSvg(templateConfig: TemplateConfig, pageIndex?: number): Promise<SvgRenderResult>;
+    /**
+     * Render all pages and return SVG strings for each.
+     */
+    renderAllPageSvgs(templateConfig: TemplateConfig): Promise<SvgRenderResult[]>;
+    /**
+     * Resolve from V2 sectionState and return SVGs for all pages (for server vector PDF).
+     */
+    renderSvgsFromForm(options: Omit<RenderFromFormOptions, 'format' | 'quality' | 'scale' | 'pixelRatio'>): Promise<SvgRenderResult[]>;
     /**
      * Convenience: fetch by ID with simple flat data and render.
      */
     renderById(templateId: string, formData?: Record<string, any>, options?: RenderOptions): Promise<RenderResult>;
+    /**
+     * Convenience: fetch by ID with flat data and render ALL pages.
+     */
+    renderAllById(templateId: string, formData?: Record<string, any>, options?: Omit<RenderOptions, 'pageIndex'>): Promise<RenderResult[]>;
     private getExpectedImageCount;
     private waitForCanvasImages;
     private getNormalizedGradientStops;
     private paintPageBackground;
     private renderPageViaPreviewCanvas;
+    private captureSvgViaPreviewCanvas;
+    /**
+     * Find the Fabric.Canvas instance that belongs to a given container element,
+     * using the global __fabricCanvasRegistry (set by PageCanvas).
+     */
+    private getFabricCanvasFromContainer;
 }
 
 export declare interface RendererConfig {
@@ -291,6 +314,19 @@ export { SmartElementProps }
 
 export { SmartElementType }
 
+export declare interface SvgRenderResult {
+    /** Raw SVG string from Fabric's toSVG() — clean, no viewport transforms */
+    svg: string;
+    /** Page width in CSS pixels */
+    width: number;
+    /** Page height in CSS pixels */
+    height: number;
+    /** Background color of the page */
+    backgroundColor: string;
+    /** Background gradient (if any) */
+    backgroundGradient?: any;
+}
+
 export declare interface TemplateConfig {
     version?: string;
     name?: string;

package/dist/index.js

@@ -2643,6 +2643,17 @@ function isPrivateUrl(url) {
   }
 }
 function toPublicStorageUrl(url) {
+  try {
+    const parsed = new URL(url);
+    const origin = parsed.origin;
+    const signedMatch = parsed.pathname.match(/\/storage\/v1\/object\/sign\/([^?]+)/);
+    if (signedMatch) {
+      return `${origin}/storage/v1/object/public/${signedMatch[1]}`;
+    }
+    if (parsed.pathname.includes("/storage/v1/object/public/")) return url;
+  } catch {
+    return null;
+  }
   return null;
 }
 function getProxiedImageUrl(imageUrl) {
@@ -2652,7 +2663,7 @@ function getProxiedImageUrl(imageUrl) {
     console.warn("[image-proxy] Skipping private URL:", imageUrl.substring(0, 80));
     return "";
   }
-  const publicUrl = toPublicStorageUrl();
+  const publicUrl = toPublicStorageUrl(imageUrl);
   if (publicUrl) return publicUrl;
   return `${API_URL}/image-proxy?url=${encodeURIComponent(imageUrl)}`;
 }
@@ -10683,6 +10694,58 @@ class PixldocsRenderer {
     }
     return this.renderAllPages(configToRender, renderOpts);
   }
+  /**
+   * Render a page and capture the Fabric canvas SVG output (vector, not raster).
+   * This is the key building block for client-side vector PDF export.
+   */
+  async renderPageSvg(templateConfig, pageIndex = 0) {
+    const page = templateConfig.pages[pageIndex];
+    if (!page) {
+      throw new Error(`Page index ${pageIndex} not found (template has ${templateConfig.pages.length} pages)`);
+    }
+    await ensureFontsForResolvedConfig(templateConfig);
+    const { setPackageApiUrl: setPackageApiUrl2 } = await Promise.resolve().then(() => appApi);
+    setPackageApiUrl2(this.config.imageProxyUrl);
+    const canvasWidth = templateConfig.canvas.width;
+    const canvasHeight = templateConfig.canvas.height;
+    return this.captureSvgViaPreviewCanvas(templateConfig, pageIndex, canvasWidth, canvasHeight);
+  }
+  /**
+   * Render all pages and return SVG strings for each.
+   */
+  async renderAllPageSvgs(templateConfig) {
+    await ensureFontsForResolvedConfig(templateConfig);
+    const { setPackageApiUrl: setPackageApiUrl2 } = await Promise.resolve().then(() => appApi);
+    setPackageApiUrl2(this.config.imageProxyUrl);
+    const results = [];
+    for (let i = 0; i < templateConfig.pages.length; i++) {
+      const canvasWidth = templateConfig.canvas.width;
+      const canvasHeight = templateConfig.canvas.height;
+      results.push(await this.captureSvgViaPreviewCanvas(templateConfig, i, canvasWidth, canvasHeight));
+    }
+    return results;
+  }
+  /**
+   * Resolve from V2 sectionState and return SVGs for all pages (for server vector PDF).
+   */
+  async renderSvgsFromForm(options) {
+    const { templateId, formSchemaId, sectionState, themeId, watermark } = options;
+    const resolved = await resolveFromForm({
+      templateId,
+      formSchemaId,
+      sectionState,
+      themeId,
+      supabaseUrl: this.config.supabaseUrl,
+      supabaseAnonKey: this.config.supabaseAnonKey
+    });
+    const shouldWatermark = watermark ?? resolved.price > 0;
+    let configToRender = resolved.config;
+    if (shouldWatermark) {
+      const { injectWatermark } = await import("./canvasWatermark-CM85x4k7.js");
+      configToRender = injectWatermark(configToRender);
+    }
+    return this.renderAllPageSvgs(configToRender);
+  }
   /**
    * Convenience: fetch by ID with simple flat data and render.
    */
@@ -10695,6 +10758,18 @@ class PixldocsRenderer {
     });
     return this.render(resolved.config, options);
   }
+  /**
+   * Convenience: fetch by ID with flat data and render ALL pages.
+   */
+  async renderAllById(templateId, formData, options) {
+    const resolved = await resolveTemplateData({
+      templateId,
+      formData,
+      supabaseUrl: this.config.supabaseUrl,
+      supabaseAnonKey: this.config.supabaseAnonKey
+    });
+    return this.renderAllPages(resolved.config, options);
+  }
   // ─── Internal: render a page using the full PreviewCanvas engine ───
   getExpectedImageCount(config, pageIndex) {
     const page = config.pages[pageIndex];
@@ -10718,6 +10793,7 @@ class PixldocsRenderer {
     return new Promise((resolve) => {
       const start = Date.now();
       let stableFrames = 0;
+      let lastSummary = "";
       const isRenderableImage = (value) => value instanceof HTMLImageElement && value.complete && value.naturalWidth > 0 && value.naturalHeight > 0;
       const collectRenderableImages = (obj, seen) => {
         if (!obj || typeof obj !== "object") return;
@@ -10747,6 +10823,25 @@ class PixldocsRenderer {
         return null;
       };
       const settle = () => requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+      const getImageDebugInfo = (obj, bucket) => {
+        if (!obj || typeof obj !== "object") return;
+        const candidates = [obj._element, obj._originalElement, obj._filteredEl, obj._cacheCanvasEl];
+        for (const candidate of candidates) {
+          if (candidate instanceof HTMLImageElement) {
+            bucket.push({
+              id: obj.__docuforgeId || obj.id || "unknown",
+              src: (candidate.currentSrc || candidate.src || "").slice(0, 240),
+              complete: candidate.complete,
+              naturalWidth: candidate.naturalWidth,
+              naturalHeight: candidate.naturalHeight
+            });
+          }
+        }
+        const nested = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
+        for (const child of nested) {
+          getImageDebugInfo(child, bucket);
+        }
+      };
       const check = () => {
         const elapsed = Date.now() - start;
         const domImages = Array.from(container.querySelectorAll("img"));
@@ -10756,12 +10851,18 @@ class PixldocsRenderer {
         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 canvasReady = !!fabricCanvas && !!(fabricCanvas.lowerCanvasEl || fabricCanvas.upperCanvasEl);
         const hasExpectedAssets = expectedImageCount === 0 ? true : actualImageCount >= expectedImageCount;
         const ready = allDomLoaded && fabricReady && hasExpectedAssets;
+        const summary = `expected=${expectedImageCount} actual=${actualImageCount} dom=${domImages.length} fabricReady=${fabricReady} domReady=${allDomLoaded} canvasReady=${canvasReady}`;
+        if (summary !== lastSummary) {
+          lastSummary = summary;
+          console.log(`[canvas-renderer][asset-wait] ${summary}`);
+        }
         if (ready) {
           stableFrames += 1;
           if (stableFrames >= 2) {
+            console.log(`[canvas-renderer][asset-wait] ready after ${elapsed}ms (${summary})`);
             settle();
             return;
           }
@@ -10769,6 +10870,20 @@ class PixldocsRenderer {
           stableFrames = 0;
         }
         if (elapsed >= maxWaitMs) {
+          const fabricImageDebug = [];
+          for (const obj of fabricObjects) {
+            getImageDebugInfo(obj, fabricImageDebug);
+          }
+          const domImageDebug = domImages.map((img, index) => ({
+            index,
+            src: (img.currentSrc || img.src || "").slice(0, 240),
+            complete: img.complete,
+            naturalWidth: img.naturalWidth,
+            naturalHeight: img.naturalHeight
+          }));
+          console.warn(`[canvas-renderer][asset-wait-timeout] elapsed=${elapsed}ms ${summary}`);
+          console.warn("[canvas-renderer][asset-wait-timeout][dom-images]", domImageDebug);
+          console.warn("[canvas-renderer][asset-wait-timeout][fabric-images]", fabricImageDebug);
           settle();
           return;
         }
@@ -10922,6 +11037,93 @@ class PixldocsRenderer {
       );
     });
   }
+  // ─── Internal: capture SVG from a rendered Fabric canvas ───
+  captureSvgViaPreviewCanvas(config, pageIndex, canvasWidth, canvasHeight) {
+    return new Promise(async (resolve, reject) => {
+      const { PreviewCanvas: PreviewCanvas2 } = await Promise.resolve().then(() => PreviewCanvas$1);
+      const container = document.createElement("div");
+      container.style.cssText = `
+        position: fixed; left: -99999px; top: -99999px;
+        width: ${canvasWidth}px; height: ${canvasHeight}px;
+        overflow: hidden; pointer-events: none; opacity: 0;
+      `;
+      document.body.appendChild(container);
+      const timeout = setTimeout(() => {
+        cleanup();
+        reject(new Error("SVG render timeout (30s)"));
+      }, 3e4);
+      const cleanup = () => {
+        clearTimeout(timeout);
+        try {
+          root.unmount();
+        } catch {
+        }
+        container.remove();
+      };
+      const onReady = () => {
+        const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
+        this.waitForCanvasImages(container, expectedImageCount).then(() => {
+          var _a, _b;
+          try {
+            const fabricInstance = this.getFabricCanvasFromContainer(container);
+            if (!fabricInstance) {
+              cleanup();
+              reject(new Error("No Fabric canvas instance found for SVG capture"));
+              return;
+            }
+            const prevVPT = fabricInstance.viewportTransform ? [...fabricInstance.viewportTransform] : void 0;
+            const prevSvgVPT = fabricInstance.svgViewportTransformation;
+            fabricInstance.viewportTransform = [1, 0, 0, 1, 0, 0];
+            fabricInstance.svgViewportTransformation = false;
+            const svgString = fabricInstance.toSVG();
+            if (prevVPT) fabricInstance.viewportTransform = prevVPT;
+            fabricInstance.svgViewportTransformation = prevSvgVPT;
+            const page = config.pages[pageIndex];
+            const backgroundColor = ((_a = page == null ? void 0 : page.settings) == null ? void 0 : _a.backgroundColor) || "#ffffff";
+            const backgroundGradient = (_b = page == null ? void 0 : page.settings) == null ? void 0 : _b.backgroundGradient;
+            cleanup();
+            resolve({
+              svg: svgString,
+              width: canvasWidth,
+              height: canvasHeight,
+              backgroundColor,
+              backgroundGradient
+            });
+          } catch (err) {
+            cleanup();
+            reject(err);
+          }
+        });
+      };
+      const root = createRoot(container);
+      root.render(
+        createElement(PreviewCanvas2, {
+          config,
+          pageIndex,
+          zoom: 1,
+          // 1:1 — no scaling for SVG capture
+          absoluteZoom: true,
+          onReady
+        })
+      );
+    });
+  }
+  /**
+   * Find the Fabric.Canvas instance that belongs to a given container element,
+   * using the global __fabricCanvasRegistry (set by PageCanvas).
+   */
+  getFabricCanvasFromContainer(container) {
+    const registry2 = window.__fabricCanvasRegistry;
+    if (registry2 instanceof Map) {
+      for (const entry of registry2.values()) {
+        const canvas = (entry == null ? void 0 : entry.canvas) || entry;
+        if (!canvas || typeof canvas.toSVG !== "function") continue;
+        const el = canvas.lowerCanvasEl || canvas.upperCanvasEl;
+        if (el && container.contains(el)) return canvas;
+      }
+    }
+    return null;
+  }
 }
 function collectImageUrls(config) {
   const urls = [];