@pixldocs/canvas-renderer 0.5.21 → 0.5.23

package/dist/index.d.ts

@@ -100,8 +100,8 @@ export declare function embedFontsInPdf(pdf: jsPDF, fontFamilies: Set<string>, f
  * 1. Walks ALL text nodes (including clones/repeatables) collecting
  *    fontFamily + fontWeight + fontStyle.
  * 2. Loads each unique family via Google Fonts CSS v1 (idempotent).
- * 3. Kicks off each weight+style combo via `document.fonts.load()` without
- *    blocking render completion; late font load reflow handles final metrics.
+ * 3. Waits for each weight+style combo via `document.fonts.load()` so export
+ *    capture never uses fallback font decoration metrics.
  *
  * Idempotent — safe to call multiple times for the same config.
  */

package/dist/index.js

@@ -11833,41 +11833,19 @@ async function ensureFontsForResolvedConfig(config) {
   if (typeof document === "undefined") return;
   const descriptors = collectFontDescriptorsFromConfig(config);
   const families = new Set(descriptors.map((d) => d.family));
-  void withTimeout(Promise.all([...families].map((f) => loadGoogleFontCSS(f))), 2500);
+  await withTimeout(Promise.all([...families].map((f) => loadGoogleFontCSS(f))), 6e3);
   if (document.fonts) {
-    descriptors.forEach((d) => {
+    await withTimeout(Promise.all(descriptors.map((d) => {
       const stylePrefix = d.style === "italic" ? "italic " : "";
       const weightStr = String(d.weight);
       const spec = `${stylePrefix}${weightStr} 16px "${d.family}"`;
-      document.fonts.load(spec).catch(() => {
+      return document.fonts.load(spec).catch(() => {
       });
-    });
+    })), 6e3);
+    await withTimeout(document.fonts.ready, 6e3);
   }
 }
 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 getDecorationPadding(obj) {
-  var _a;
-  const strokeWidth = Number(obj.strokeWidth || 0);
-  const shadowBlur = Number(((_a = obj.shadow) == null ? void 0 : _a.blur) || 0);
-  return Math.max(0, strokeWidth) + Math.max(0, shadowBlur * 0.25);
-}
 function getFabricCanvasFromContainer(container) {
   const registry2 = window.__fabricCanvasRegistry;
   if (registry2 instanceof Map) {
@@ -11914,10 +11892,6 @@ function stabilizeFabricTextObjects(fabricInstance) {
       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 decorationPadding = getDecorationPadding(obj);
-      obj.__lineWidths = getTextLines(obj).map((line) => Math.max(0, measureLineWidth(obj, line) + decorationPadding));
-    }
     obj.dirty = true;
     (_c2 = obj._clearCache) == null ? void 0 : _c2.call(obj);
     (_d = obj.setCoords) == null ? void 0 : _d.call(obj);
@@ -12563,7 +12537,7 @@ class PixldocsRenderer {
       container.style.cssText = `
         position: fixed; left: -99999px; top: -99999px;
         width: ${canvasWidth}px; height: ${canvasHeight}px;
-        overflow: hidden; pointer-events: none; opacity: 0;
+        overflow: hidden; pointer-events: none; visibility: hidden;
       `;
       document.body.appendChild(container);
       const timeout = setTimeout(() => {
@@ -12584,7 +12558,7 @@ class PixldocsRenderer {
         finished = true;
         this.waitForCanvasScene(container, config, pageIndex).then(async () => {
           try {
-            await this.waitForStableTextMetrics(container, config);
+            await this.waitForStableTextMetrics(container, config, true);
             await this.waitForCanvasScene(container, config, pageIndex, 2500, 50);
             const fabricInstance = this.getFabricCanvasFromContainer(container);
             const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
@@ -12648,7 +12622,7 @@ class PixldocsRenderer {
       container.style.cssText = `
         position: fixed; left: -99999px; top: -99999px;
         width: ${canvasWidth}px; height: ${canvasHeight}px;
-        overflow: hidden; pointer-events: none; opacity: 0;
+        overflow: hidden; pointer-events: none; visibility: hidden;
       `;
       document.body.appendChild(container);
       const timeout = setTimeout(() => {
@@ -12670,7 +12644,7 @@ class PixldocsRenderer {
         this.waitForCanvasScene(container, config, pageIndex).then(async () => {
           var _a, _b;
           try {
-            await this.waitForStableTextMetrics(container, config);
+            await this.waitForStableTextMetrics(container, config, true);
             await this.waitForCanvasScene(container, config, pageIndex, 2500, 50);
             const fabricInstance = this.getFabricCanvasFromContainer(container);
             if (!fabricInstance) {
@@ -12792,10 +12766,10 @@ class PixldocsRenderer {
   getFabricCanvasFromContainer(container) {
     return getFabricCanvasFromContainer(container);
   }
-  async waitForStableTextMetrics(container, config) {
+  async waitForStableTextMetrics(container, config, strictFontWait = false) {
     if (typeof document !== "undefined") {
-      void ensureFontsForResolvedConfig(config);
-      await this.waitForRelevantFonts(config);
+      await ensureFontsForResolvedConfig(config);
+      await this.waitForRelevantFonts(config, strictFontWait ? 6e3 : 1800);
     }
     const fabricInstance = this.getFabricCanvasFromContainer(container);
     if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
@@ -14553,19 +14527,21 @@ function convertTextDecorationsToLines(svg) {
       const fontFamily = tspan.getAttribute("font-family") || textEl.getAttribute("font-family") || "sans-serif";
       const fontWeight = tspan.getAttribute("font-weight") || textEl.getAttribute("font-weight") || "normal";
       const fill = tspan.getAttribute("fill") || textEl.getAttribute("fill") || "#000000";
-      let textWidth;
-      if (ctx) {
-        ctx.font = `${fontWeight} ${fontSize}px ${fontFamily.replace(/'/g, "")}`;
-        textWidth = ctx.measureText(content).width;
-      } else {
-        textWidth = content.length * fontSize * 0.6;
-      }
+      let textWidth = 0;
       if (typeof tspan.getComputedTextLength === "function") {
         try {
-          textWidth = Math.max(textWidth, tspan.getComputedTextLength());
+          textWidth = tspan.getComputedTextLength();
         } catch {
         }
       }
+      if (!Number.isFinite(textWidth) || textWidth <= 0) {
+        if (ctx) {
+          ctx.font = `${fontWeight} ${fontSize}px ${fontFamily.replace(/'/g, "")}`;
+          textWidth = ctx.measureText(content).width;
+        } else {
+          textWidth = content.length * fontSize * 0.6;
+        }
+      }
       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");