@pixldocs/canvas-renderer 0.5.18 → 0.5.20

package/dist/index.cjs

@@ -11863,6 +11863,83 @@ async function ensureFontsForResolvedConfig(config) {
     });
   }
 }
+const TEXT_TYPES = /* @__PURE__ */ new Set(["textbox", "text", "i-text"]);
+function getTextLines(obj) {
+  const lines = Array.isArray(obj.textLines) && obj.textLines.length ? obj.textLines : String(obj.text || "").split("\n");
+  return lines.map((line) => Array.isArray(line) ? line.join("") : String(line ?? ""));
+}
+function measureLineWidth(obj, line) {
+  if (typeof document === "undefined") return 0;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return 0;
+  const fontStyle = obj.fontStyle || "normal";
+  const fontWeight = obj.fontWeight || 400;
+  const fontSize = obj.fontSize || 16;
+  const fontFamily = obj.fontFamily || "sans-serif";
+  ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+  const charSpacing = Number(obj.charSpacing || 0) / 1e3 * fontSize;
+  return ctx.measureText(line).width + Math.max(0, line.length - 1) * charSpacing;
+}
+function 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 stabilizeFabricTextObjects(fabricInstance) {
+  var _a, _b, _c;
+  if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
+  clearFabricCharCache();
+  clearMeasurementCache();
+  const walk = (obj) => {
+    var _a2, _b2, _c2, _d;
+    if (!obj) return;
+    const children = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
+    if (children.length) children.forEach(walk);
+    const isTextObject = typeof obj.text === "string" && typeof obj.initDimensions === "function" && (TEXT_TYPES.has(obj.type) || obj.isEditing !== void 0);
+    if (!isTextObject) return;
+    const saved = { width: obj.width, scaleX: obj.scaleX, scaleY: obj.scaleY };
+    const reset = () => {
+      var _a3;
+      (_a3 = obj._clearCache) == null ? void 0 : _a3.call(obj);
+      obj.__charBounds = [];
+      obj.__lineWidths = [];
+      obj.__lineHeights = [];
+      obj.__graphemeLines = [];
+      obj._textLines = [];
+      obj.textLines = [];
+      obj._styleMap = null;
+      obj.styleMap = null;
+      obj.dirty = true;
+    };
+    reset();
+    obj.initDimensions();
+    if (saved.width != null) {
+      (_a2 = obj.set) == null ? void 0 : _a2.call(obj, { width: saved.width, scaleX: saved.scaleX, scaleY: saved.scaleY });
+      reset();
+      obj.initDimensions();
+      (_b2 = obj.set) == null ? void 0 : _b2.call(obj, { width: saved.width, scaleX: saved.scaleX, scaleY: saved.scaleY });
+    }
+    if (obj.underline || obj.linethrough) {
+      const lineWidths = Array.isArray(obj.__lineWidths) ? obj.__lineWidths : [];
+      obj.__lineWidths = getTextLines(obj).map((line, index) => Math.max(lineWidths[index] || 0, measureLineWidth(obj, line)));
+    }
+    obj.dirty = true;
+    (_c2 = obj._clearCache) == null ? void 0 : _c2.call(obj);
+    (_d = obj.setCoords) == null ? void 0 : _d.call(obj);
+  };
+  fabricInstance.getObjects().forEach(walk);
+  (_a = fabricInstance.calcOffset) == null ? void 0 : _a.call(fabricInstance);
+  (_b = fabricInstance.renderAll) == null ? void 0 : _b.call(fabricInstance);
+  (_c = fabricInstance.requestRenderAll) == null ? void 0 : _c.call(fabricInstance);
+}
 function PixldocsPreview(props) {
   const {
     pageIndex = 0,
@@ -11959,6 +12036,13 @@ function PixldocsPreview(props) {
     () => `${pageIndex}-${fontsReadyVersion}-${stabilizationPass}`,
     [pageIndex, fontsReadyVersion, stabilizationPass]
   );
+  const previewWrapRef = react.useCallback((node) => {
+    if (!node || !config) return;
+    requestAnimationFrame(() => {
+      const fabricCanvas = getFabricCanvasFromContainer(node);
+      if (fabricCanvas) stabilizeFabricTextObjects(fabricCanvas);
+    });
+  }, [config, previewKey]);
   react.useEffect(() => {
     if (isResolveMode) return;
     if (!config) {
@@ -11989,7 +12073,7 @@ function PixldocsPreview(props) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...style, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...style, position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { visibility: canvasSettled ? "visible" : "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: previewWrapRef, style: { visibility: canvasSettled ? "visible" : "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(
       PreviewCanvas,
       {
         config,
@@ -12004,6 +12088,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");
@@ -12014,21 +12158,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,
@@ -12080,16 +12225,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.
@@ -12437,7 +12583,7 @@ class PixldocsRenderer {
         cleanup();
         reject(new Error("Render timeout (30s)"));
       }, 3e4);
-      let stabilizationPass = 0;
+      let finished = false;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -12447,22 +12593,12 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
-        if (stabilizationPass === 0) {
-          stabilizationPass = 1;
-          root.render(
-            react.createElement(PreviewCanvas2, {
-              config,
-              pageIndex,
-              zoom: pixelRatio,
-              absoluteZoom: true,
-              skipFontReadyWait: 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);
@@ -12533,7 +12669,7 @@ class PixldocsRenderer {
         cleanup();
         reject(new Error("SVG render timeout (30s)"));
       }, 3e4);
-      let stabilizationPass = 0;
+      let finished = false;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -12543,23 +12679,13 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
-        if (stabilizationPass === 0) {
-          stabilizationPass = 1;
-          root.render(
-            react.createElement(PreviewCanvas2, {
-              config,
-              pageIndex,
-              zoom: 1,
-              absoluteZoom: true,
-              skipFontReadyWait: 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();
@@ -12679,16 +12805,7 @@ class PixldocsRenderer {
    * 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;
+    return getFabricCanvasFromContainer(container);
   }
   async waitForStableTextMetrics(container, config) {
     if (typeof document !== "undefined") {
@@ -12702,59 +12819,7 @@ class PixldocsRenderer {
       clearFabricCharCache();
       clearMeasurementCache();
     };
-    const reflowTextboxes = () => {
-      var _a, _b, _c;
-      const walk = (obj) => {
-        var _a2, _b2, _c2, _d;
-        if (!obj) return;
-        const children = Array.isArray(obj._objects) ? obj._objects : Array.isArray(obj.objects) ? obj.objects : [];
-        if (children.length) children.forEach(walk);
-        const isTextObject = typeof obj.text === "string" && typeof obj.initDimensions === "function" && (obj.type === "textbox" || obj.type === "text" || obj.type === "i-text" || obj.isEditing !== void 0);
-        if (isTextObject) {
-          const saved = {
-            width: obj.width,
-            scaleX: obj.scaleX,
-            scaleY: obj.scaleY
-          };
-          const resetTextboxLayoutInternals = () => {
-            var _a3;
-            (_a3 = obj._clearCache) == null ? void 0 : _a3.call(obj);
-            obj.__charBounds = [];
-            obj.__lineWidths = [];
-            obj.__lineHeights = [];
-            obj.__graphemeLines = [];
-            obj._textLines = [];
-            obj.textLines = [];
-            obj._styleMap = null;
-            obj.styleMap = null;
-            obj.dirty = true;
-          };
-          resetTextboxLayoutInternals();
-          obj.initDimensions();
-          if (saved.width != null) {
-            (_a2 = obj.set) == null ? void 0 : _a2.call(obj, {
-              width: saved.width,
-              scaleX: saved.scaleX,
-              scaleY: saved.scaleY
-            });
-            resetTextboxLayoutInternals();
-            obj.initDimensions();
-          }
-          (_b2 = obj.set) == null ? void 0 : _b2.call(obj, {
-            width: saved.width,
-            scaleX: saved.scaleX,
-            scaleY: saved.scaleY,
-            dirty: true
-          });
-          (_c2 = obj._clearCache) == null ? void 0 : _c2.call(obj);
-          (_d = obj.setCoords) == null ? void 0 : _d.call(obj);
-        }
-      };
-      fabricInstance.getObjects().forEach(walk);
-      (_a = fabricInstance.calcOffset) == null ? void 0 : _a.call(fabricInstance);
-      (_b = fabricInstance.renderAll) == null ? void 0 : _b.call(fabricInstance);
-      (_c = fabricInstance.requestRenderAll) == null ? void 0 : _c.call(fabricInstance);
-    };
+    const reflowTextboxes = () => stabilizeFabricTextObjects(fabricInstance);
     clearTextMetricCaches();
     await waitForPaint();
     reflowTextboxes();
@@ -14510,6 +14575,12 @@ function convertTextDecorationsToLines(svg) {
       } else {
         textWidth = content.length * fontSize * 0.6;
       }
+      if (typeof tspan.getComputedTextLength === "function") {
+        try {
+          textWidth = Math.max(textWidth, tspan.getComputedTextLength());
+        } catch {
+        }
+      }
       const underlineY = y + fontSize * 0.15;
       const thickness = Math.max(0.5, fontSize * 0.066667);
       const line = doc.createElementNS("http://www.w3.org/2000/svg", "line");