@pixldocs/canvas-renderer 0.3.18 → 0.3.20

package/dist/index.cjs

@@ -2662,6 +2662,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) {
@@ -2671,7 +2682,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)}`;
 }
@@ -10702,6 +10713,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 Promise.resolve().then(() => require("./canvasWatermark-DAZIQ_IR.cjs"));
+      configToRender = injectWatermark(configToRender);
+    }
+    return this.renderAllPageSvgs(configToRender);
+  }
   /**
    * Convenience: fetch by ID with simple flat data and render.
    */
@@ -10737,6 +10800,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;
@@ -10766,6 +10830,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"));
@@ -10775,12 +10858,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;
           }
@@ -10788,6 +10877,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;
         }
@@ -10941,15 +11044,181 @@ 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 = client.createRoot(container);
+      root.render(
+        react.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 });
 }
 exports.PixldocsPreview = PixldocsPreview;
 exports.PixldocsRenderer = PixldocsRenderer;
 exports.applyThemeToConfig = applyThemeToConfig;
 exports.collectFontDescriptorsFromConfig = collectFontDescriptorsFromConfig;
 exports.collectFontsFromConfig = collectFontsFromConfig;
+exports.collectImageUrls = collectImageUrls;
 exports.ensureFontsForResolvedConfig = ensureFontsForResolvedConfig;
 exports.loadGoogleFontCSS = loadGoogleFontCSS;
 exports.normalizeFontFamily = normalizeFontFamily;
 exports.resolveFromForm = resolveFromForm;
 exports.resolveTemplateData = resolveTemplateData;
+exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
+exports.warmTemplateFromForm = warmTemplateFromForm;
 //# sourceMappingURL=index.cjs.map