@pixldocs/canvas-renderer 0.3.18 → 0.3.20

package/dist/index.d.ts

@@ -43,6 +43,15 @@ export declare function collectFontDescriptorsFromConfig(config: TemplateConfig)
  */
 export declare function collectFontsFromConfig(config: TemplateConfig): Set<string>;
 
+/**
+ * Collect all image asset URLs from a TemplateConfig that the Fabric canvas
+ * will request during rendering. This is the canonical list — the same logic
+ * that `getExpectedImageCount` uses, but returning URLs instead of a count.
+ *
+ * Walks **all pages** and recurses into children / groups.
+ */
+export declare function collectImageUrls(config: TemplateConfig): string[];
+
 export declare interface DynamicField {
     id: string;
     label: string;
@@ -175,6 +184,19 @@ 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.
      */
@@ -184,6 +206,12 @@ export declare class PixldocsRenderer {
     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 {
@@ -282,6 +310,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;
@@ -316,4 +357,53 @@ export declare interface ThemeVariables {
     [variableName: string]: string;
 }
 
+export declare interface WarmOptions {
+    /** AbortSignal to cancel in-flight prefetches (e.g. on route change). */
+    signal?: AbortSignal;
+    /** Image proxy base URL. Falls back to the value set via `setPackageApiUrl`. */
+    imageProxyUrl?: string;
+}
+
+/**
+ * Warm fonts **and** image assets for a fully-resolved `TemplateConfig`.
+ *
+ * Call this on idle / in the background before rendering so that `render()`
+ * resolves from browser caches instead of hitting the network.
+ *
+ * **Idempotent** — repeated calls for the same config are near-instant
+ * (fonts deduplicate internally; `fetch` hits HTTP cache).
+ *
+ * Does **not** mount a canvas or require React.
+ *
+ * @example
+ * ```ts
+ * import { warmResolvedTemplateForPreview } from '@pixldocs/canvas-renderer';
+ *
+ * const controller = new AbortController();
+ * await warmResolvedTemplateForPreview(resolvedConfig, { signal: controller.signal });
+ * // Later: renderer.render(resolvedConfig) — fonts & images are cached
+ * ```
+ */
+export declare function warmResolvedTemplateForPreview(config: TemplateConfig, options?: WarmOptions): Promise<void>;
+
+/**
+ * Convenience: resolve a template from the database **and** warm its assets
+ * in a single call. Combines `resolveFromForm` + `warmResolvedTemplateForPreview`.
+ *
+ * @example
+ * ```ts
+ * import { warmTemplateFromForm } from '@pixldocs/canvas-renderer';
+ *
+ * await warmTemplateFromForm({
+ *   templateId: 'dc3fbb17-...',
+ *   formSchemaId: 'b04cd362-...',
+ *   sectionState: { ... },
+ *   supabaseUrl: '...',
+ *   supabaseAnonKey: '...',
+ *   signal: controller.signal,
+ * });
+ * ```
+ */
+export declare function warmTemplateFromForm(options: ResolveFromFormOptions & WarmOptions): Promise<void>;
+
 export { }

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.
    */
@@ -10718,6 +10781,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 +10811,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 +10839,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 +10858,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 +11025,169 @@ 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 = [];
+  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") {
+        const url = src || imageUrl;
+        if (url) urls.push(url);
+      }
+      if (Array.isArray(node.children) && node.children.length > 0) {
+        walk(node.children);
+      }
+    }
+  };
+  for (const page of config.pages || []) {
+    walk(page.children || []);
+  }
+  return urls;
+}
+function normalizeAssetUrl(rawUrl, imageProxyUrl) {
+  if (!rawUrl) return null;
+  if (rawUrl.startsWith("data:") || rawUrl.startsWith("blob:")) return null;
+  try {
+    const h = new URL(rawUrl).hostname.toLowerCase();
+    if (h === "localhost" || h === "127.0.0.1" || h === "0.0.0.0" || h.endsWith(".local") || /^(10\.|192\.168\.|169\.254\.)/.test(h)) {
+      return null;
+    }
+  } catch {
+    return null;
+  }
+  const supabaseUrl = typeof globalThis.__VITE_SUPABASE_URL === "string" ? globalThis.__VITE_SUPABASE_URL : "";
+  if (supabaseUrl && rawUrl.includes(supabaseUrl)) {
+    const signedMatch = rawUrl.match(/\/storage\/v1\/object\/sign\/([^?]+)/);
+    if (signedMatch) return `${supabaseUrl}/storage/v1/object/public/${signedMatch[1]}`;
+    if (rawUrl.includes("/storage/v1/object/public/")) return rawUrl;
+  }
+  const proxyBase = imageProxyUrl ? imageProxyUrl.replace(/\/image-proxy(?:\?.*)?$/, "") : API_URL;
+  if (proxyBase) {
+    return `${proxyBase}/image-proxy?url=${encodeURIComponent(rawUrl)}`;
+  }
+  return rawUrl;
+}
+const CONCURRENCY = 6;
+async function prefetchUrls(urls, signal) {
+  const unique = [...new Set(urls)];
+  if (unique.length === 0) return;
+  let i = 0;
+  const next = async () => {
+    while (i < unique.length) {
+      if (signal == null ? void 0 : signal.aborted) return;
+      const url = unique[i++];
+      try {
+        await fetch(url, { signal, mode: "cors", credentials: "omit" });
+      } catch {
+      }
+    }
+  };
+  const workers = Array.from({ length: Math.min(CONCURRENCY, unique.length) }, () => next());
+  await Promise.all(workers);
+}
+async function warmResolvedTemplateForPreview(config, options) {
+  const { signal, imageProxyUrl } = options ?? {};
+  await ensureFontsForResolvedConfig(config);
+  if (signal == null ? void 0 : signal.aborted) return;
+  const rawUrls = collectImageUrls(config);
+  const resolvedUrls = rawUrls.map((u) => normalizeAssetUrl(u, imageProxyUrl)).filter((u) => u !== null);
+  await prefetchUrls(resolvedUrls, signal);
+}
+async function warmTemplateFromForm(options) {
+  const { signal, imageProxyUrl, ...resolveOpts } = options;
+  const resolved = await resolveFromForm(resolveOpts);
+  if (signal == null ? void 0 : signal.aborted) return;
+  await warmResolvedTemplateForPreview(resolved.config, { signal, imageProxyUrl });
 }
 export {
   PixldocsPreview,
@@ -10929,10 +11195,13 @@ export {
   applyThemeToConfig,
   collectFontDescriptorsFromConfig,
   collectFontsFromConfig,
+  collectImageUrls,
   ensureFontsForResolvedConfig,
   loadGoogleFontCSS,
   normalizeFontFamily,
   resolveFromForm,
-  resolveTemplateData
+  resolveTemplateData,
+  warmResolvedTemplateForPreview,
+  warmTemplateFromForm
 };
 //# sourceMappingURL=index.js.map