@pixldocs/canvas-renderer 0.5.17 → 0.5.19

package/dist/index.cjs

@@ -5689,6 +5689,7 @@ const PageCanvas = react.forwardRef(
     onDynamicFieldClick,
     canvasUpdateVersion = 0,
     pageChildren,
+    skipFontReadyWait = false,
     onReady
   }, ref) => {
     const isEditorMode = mode === "editor";
@@ -5974,9 +5975,11 @@ const PageCanvas = react.forwardRef(
               await Promise.all(fontFamilies.map((f) => ensureFontLoaded(f)));
             }
           }
-          await waitForFontsReady();
-          await waitUntilFontsAvailable(fontFamilies, { timeoutMs: 3500, pollIntervalMs: 60 });
-          await new Promise((r) => requestAnimationFrame(() => r()));
+          if (!skipFontReadyWait) {
+            await waitForFontsReady();
+            await waitUntilFontsAvailable(fontFamilies, { timeoutMs: 3500, pollIntervalMs: 60 });
+            await new Promise((r) => requestAnimationFrame(() => r()));
+          }
           clearFabricCharCache();
           clearMeasurementCache();
           setReady(true);
@@ -9413,6 +9416,7 @@ function PreviewCanvas({
   pageIndex = 0,
   zoom = 1,
   absoluteZoom = false,
+  skipFontReadyWait = false,
   className,
   onDynamicFieldClick,
   onReady
@@ -9567,6 +9571,7 @@ function PreviewCanvas({
                 selectedIds: [],
                 activeTool: "select",
                 mode: "preview",
+                skipFontReadyWait,
                 dynamicFieldIds,
                 onDynamicFieldClick: handleDynamicFieldClick,
                 onReady
@@ -11999,6 +12004,66 @@ function PixldocsPreview(props) {
     !canvasSettled && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
+const inlinedAssetCache = /* @__PURE__ */ new Map();
+function shouldInlineImageUrl(url) {
+  if (!url || url.startsWith("data:")) return false;
+  if (url.startsWith("blob:")) return true;
+  if (url.startsWith("/") && !url.startsWith("//")) return true;
+  try {
+    const parsed = new URL(url, window.location.href);
+    const current = new URL(window.location.href);
+    const host = parsed.hostname.toLowerCase();
+    return parsed.origin === current.origin || host === "localhost" || host === "127.0.0.1" || host === "0.0.0.0" || host.endsWith(".local") || /^(10\.|192\.168\.|169\.254\.)/.test(host);
+  } catch {
+    return false;
+  }
+}
+async function imageUrlToDataUrl(url) {
+  if (inlinedAssetCache.has(url)) return inlinedAssetCache.get(url) ?? null;
+  try {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const blob = await response.blob();
+    if (blob.type.includes("text/html")) throw new Error("Expected image but got text/html");
+    const dataUrl = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(String(reader.result || ""));
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+    inlinedAssetCache.set(url, dataUrl);
+    return dataUrl;
+  } catch (error) {
+    console.warn("[@pixldocs/canvas-renderer] Failed to inline image asset:", url, error);
+    inlinedAssetCache.set(url, null);
+    return null;
+  }
+}
+async function inlineNodeAssets(node) {
+  if (node.type === "image") {
+    const url = typeof node.src === "string" && node.src.trim() ? node.src.trim() : typeof node.imageUrl === "string" ? node.imageUrl.trim() : "";
+    if (shouldInlineImageUrl(url)) {
+      const dataUrl = await imageUrlToDataUrl(url);
+      if (dataUrl) {
+        node.src = dataUrl;
+        node.imageUrl = dataUrl;
+      }
+    }
+  }
+  if (Array.isArray(node.children)) {
+    await Promise.all(node.children.map(inlineNodeAssets));
+  }
+}
+async function inlineBrowserReachableImageAssets(config) {
+  if (typeof window === "undefined" || typeof fetch === "undefined" || typeof FileReader === "undefined") {
+    return config;
+  }
+  const cloned = JSON.parse(JSON.stringify(config));
+  await Promise.all(
+    (cloned.pages || []).flatMap((page) => (page.children || []).map(inlineNodeAssets))
+  );
+  return cloned;
+}
 class PixldocsRenderer {
   constructor(config) {
     __publicField(this, "config");
@@ -12009,21 +12074,22 @@ class PixldocsRenderer {
    * Mounts a hidden PreviewCanvas component and captures the Fabric canvas output.
    */
   async render(templateConfig, options = {}) {
+    const renderConfig = await inlineBrowserReachableImageAssets(templateConfig);
     const pageIndex = options.pageIndex ?? 0;
     const format = options.format ?? "png";
     const quality = options.quality ?? 0.92;
     const pixelRatio = options.pixelRatio ?? this.config.pixelRatio ?? 2;
-    const canvasWidth = templateConfig.canvas.width;
-    const canvasHeight = templateConfig.canvas.height;
-    const page = templateConfig.pages[pageIndex];
+    const canvasWidth = renderConfig.canvas.width;
+    const canvasHeight = renderConfig.canvas.height;
+    const page = renderConfig.pages[pageIndex];
     if (!page) {
-      throw new Error(`Page index ${pageIndex} not found (template has ${templateConfig.pages.length} pages)`);
+      throw new Error(`Page index ${pageIndex} not found (template has ${renderConfig.pages.length} pages)`);
     }
-    await ensureFontsForResolvedConfig(templateConfig);
+    await ensureFontsForResolvedConfig(renderConfig);
     const { setPackageApiUrl: setPackageApiUrl2 } = await Promise.resolve().then(() => appApi);
     setPackageApiUrl2(this.config.imageProxyUrl);
     const dataUrl = await this.renderPageViaPreviewCanvas(
-      templateConfig,
+      renderConfig,
       pageIndex,
       pixelRatio,
       format,
@@ -12075,16 +12141,17 @@ class PixldocsRenderer {
    * This is the key building block for client-side vector PDF export.
    */
   async renderPageSvg(templateConfig, pageIndex = 0) {
-    const page = templateConfig.pages[pageIndex];
+    const renderConfig = await inlineBrowserReachableImageAssets(templateConfig);
+    const page = renderConfig.pages[pageIndex];
     if (!page) {
-      throw new Error(`Page index ${pageIndex} not found (template has ${templateConfig.pages.length} pages)`);
+      throw new Error(`Page index ${pageIndex} not found (template has ${renderConfig.pages.length} pages)`);
     }
-    await ensureFontsForResolvedConfig(templateConfig);
+    await ensureFontsForResolvedConfig(renderConfig);
     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);
+    const canvasWidth = renderConfig.canvas.width;
+    const canvasHeight = renderConfig.canvas.height;
+    return this.captureSvgViaPreviewCanvas(renderConfig, pageIndex, canvasWidth, canvasHeight);
   }
   /**
    * Render all pages and return SVG strings for each.
@@ -12432,7 +12499,7 @@ class PixldocsRenderer {
         cleanup();
         reject(new Error("Render timeout (30s)"));
       }, 3e4);
-      let stabilizationPass = 0;
+      let finished = false;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -12442,25 +12509,15 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
-        if (stabilizationPass === 0) {
-          stabilizationPass = 1;
-          root.render(
-            react.createElement(PreviewCanvas2, {
-              config,
-              pageIndex,
-              zoom: pixelRatio,
-              absoluteZoom: true,
-              onReady
-            })
-          );
-          return;
-        }
+        if (finished) return;
+        finished = true;
         this.waitForCanvasScene(container, config, pageIndex).then(async () => {
           try {
+            await this.waitForStableTextMetrics(container, config);
+            await this.waitForCanvasScene(container, config, pageIndex, 2500, 50);
             const fabricInstance = this.getFabricCanvasFromContainer(container);
             const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
             await this.waitForCanvasImages(container, expectedImageCount);
-            await this.waitForStableTextMetrics(container, config);
             const fabricCanvas = container.querySelector("canvas.upper-canvas, canvas");
             const sourceCanvas = (fabricInstance == null ? void 0 : fabricInstance.lowerCanvasEl) || container.querySelector("canvas.lower-canvas") || fabricCanvas;
             if (!sourceCanvas) {
@@ -12499,6 +12556,7 @@ class PixldocsRenderer {
           pageIndex,
           zoom: pixelRatio,
           absoluteZoom: true,
+          skipFontReadyWait: true,
           onReady
         })
       );
@@ -12527,7 +12585,7 @@ class PixldocsRenderer {
         cleanup();
         reject(new Error("SVG render timeout (30s)"));
       }, 3e4);
-      let stabilizationPass = 0;
+      let finished = false;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -12537,22 +12595,13 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
-        if (stabilizationPass === 0) {
-          stabilizationPass = 1;
-          root.render(
-            react.createElement(PreviewCanvas2, {
-              config,
-              pageIndex,
-              zoom: 1,
-              absoluteZoom: true,
-              onReady
-            })
-          );
-          return;
-        }
+        if (finished) return;
+        finished = true;
         this.waitForCanvasScene(container, config, pageIndex).then(async () => {
           var _a, _b;
           try {
+            await this.waitForStableTextMetrics(container, config);
+            await this.waitForCanvasScene(container, config, pageIndex, 2500, 50);
             const fabricInstance = this.getFabricCanvasFromContainer(container);
             if (!fabricInstance) {
               cleanup();
@@ -12561,7 +12610,6 @@ class PixldocsRenderer {
             }
             const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
             await this.waitForCanvasImages(container, expectedImageCount);
-            await this.waitForStableTextMetrics(container, config);
             const prevVPT = fabricInstance.viewportTransform ? [...fabricInstance.viewportTransform] : void 0;
             const prevSvgVPT = fabricInstance.svgViewportTransformation;
             const prevRetina = fabricInstance.enableRetinaScaling;
@@ -12612,6 +12660,7 @@ class PixldocsRenderer {
           zoom: 1,
           // 1:1 — no UI scaling for SVG capture
           absoluteZoom: true,
+          skipFontReadyWait: true,
           onReady
         })
       );