@pixldocs/canvas-renderer 0.5.57 → 0.5.59

package/dist/index.d.ts

@@ -25,6 +25,19 @@ export declare function applyThemeToConfig(config: TemplateConfig, themeOverride
  */
 export declare function assemblePdfFromSvgs(svgResults: SvgRenderResult[], options?: PdfAssemblyOptions): Promise<PdfRenderResult>;
 
+/**
+ * Block until the webfonts referenced by `config` have actually loaded
+ * (or `maxWaitMs` elapses). Stronger than `ensureFontsForResolvedConfig`
+ * which only fire-and-forget queues `document.fonts.load()`.
+ *
+ * Use this BEFORE mounting `PreviewCanvas` so the synchronous
+ * `createText` auto-shrink loop measures against real font metrics
+ * instead of system fallback ones (which are typically narrower → loop
+ * decides "fits, no shrink needed" → text overflows once the real font
+ * swaps in).
+ */
+export declare function awaitFontsForConfig(config: TemplateConfig, maxWaitMs: number): Promise<void>;
+
 export declare interface CanvasNode {
     id: string;
     name?: string;
@@ -64,6 +77,16 @@ export declare function collectFontsFromConfig(config: TemplateConfig): Set<stri
  */
 export declare function collectImageUrls(config: TemplateConfig): string[];
 
+/**
+ * Returns true when any text node in `config` uses
+ * `overflowPolicy: 'auto-shrink'`. The synchronous shrink loop in
+ * `createText` measures with whatever font Fabric can resolve at mount
+ * time, so for these configs the consumer MUST block on real font load
+ * before mounting (otherwise it shrinks against fallback metrics and
+ * overflows once the real font swaps in).
+ */
+export declare function configHasAutoShrinkText(config: TemplateConfig | null | undefined): boolean;
+
 export declare interface DynamicField {
     id: string;
     label: string;
@@ -231,7 +254,7 @@ export declare function normalizeFontFamily(fontStack: string): string;
  * Package version banner. Bump alongside package.json so we can confirm
  * (via browser:log) that the deployed bundle matches the expected build.
  */
-export declare const PACKAGE_VERSION = "0.5.57";
+export declare const PACKAGE_VERSION = "0.5.59";
 
 export declare interface PageSettings {
     backgroundColor?: string;

package/dist/index.js

@@ -245,6 +245,57 @@ const WIDTH_BUCKET_PX = 8;
 function bucketWidth(w) {
   return Math.round(w / WIDTH_BUCKET_PX) * WIDTH_BUCKET_PX;
 }
+let measureCanvas = null;
+function getMeasureContext() {
+  if (typeof document === "undefined") return null;
+  measureCanvas ?? (measureCanvas = document.createElement("canvas"));
+  return measureCanvas.getContext("2d");
+}
+function lineToString(line) {
+  return Array.isArray(line) ? line.join("") : String(line ?? "");
+}
+function measureTextLineWithCanvas(textbox, lineText, lineIndex) {
+  var _a, _b, _c, _d, _e;
+  if (!lineText) return 0;
+  const ctx = getMeasureContext();
+  if (!ctx) return null;
+  const tb = textbox;
+  const fontSize = Number(((_a = tb.getValueOfPropertyAt) == null ? void 0 : _a.call(tb, lineIndex, 0, "fontSize")) ?? textbox.fontSize ?? 16);
+  const fontStyle = String(((_b = tb.getValueOfPropertyAt) == null ? void 0 : _b.call(tb, lineIndex, 0, "fontStyle")) ?? textbox.fontStyle ?? "normal");
+  const fontWeight = String(((_c = tb.getValueOfPropertyAt) == null ? void 0 : _c.call(tb, lineIndex, 0, "fontWeight")) ?? textbox.fontWeight ?? "400");
+  const fontFamily = String(((_d = tb.getValueOfPropertyAt) == null ? void 0 : _d.call(tb, lineIndex, 0, "fontFamily")) ?? textbox.fontFamily ?? "Open Sans");
+  const charSpacing = Number(((_e = tb.getValueOfPropertyAt) == null ? void 0 : _e.call(tb, lineIndex, 0, "charSpacing")) ?? textbox.charSpacing ?? 0);
+  ctx.save();
+  ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px ${fontFamily}`;
+  const measured = ctx.measureText(lineText).width;
+  ctx.restore();
+  const graphemeCount = Array.from(lineText).length;
+  const spacingWidth = graphemeCount > 1 ? charSpacing / 1e3 * fontSize * (graphemeCount - 1) : 0;
+  return Math.max(0, measured + spacingWidth);
+}
+function getCanvasMeasuredTextboxLineWidths(textbox) {
+  const rawLines = textbox._textLines ?? textbox.textLines ?? [];
+  const fallback = textbox.__lineWidths ?? [];
+  if (!rawLines.length) return fallback;
+  const measured = rawLines.map((line, index) => measureTextLineWithCanvas(textbox, lineToString(line), index));
+  if (measured.some((w) => w == null || Number.isNaN(w))) return fallback;
+  return measured;
+}
+function getTextboxWidthFitMetrics(textbox, targetWidth) {
+  const actualTextboxWidth = Number(textbox.width ?? targetWidth);
+  const dynamicMinWidth = Number(textbox.dynamicMinWidth ?? 0);
+  const lineWidths = getCanvasMeasuredTextboxLineWidths(textbox);
+  const maxLineWidth = lineWidths.length > 0 ? Math.max(...lineWidths) : 0;
+  const grownWidth = Math.max(actualTextboxWidth, dynamicMinWidth);
+  const widthDidGrow = grownWidth > targetWidth + 0.5;
+  return {
+    actualTextboxWidth,
+    dynamicMinWidth,
+    maxLineWidth,
+    widthDidGrow,
+    fitsWidth: !widthDidGrow && maxLineWidth <= targetWidth + 1
+  };
+}
 function getCacheKey(element) {
   const widthPx = typeof element.width === "number" ? element.width : 200;
   return JSON.stringify({
@@ -301,11 +352,7 @@ function measureTextHeight(element) {
         const renderedLineCount = ((_a = testTb.textLines) == null ? void 0 : _a.length) || 1;
         const hasNoImplicitWrap = renderedLineCount <= explicitLineCount;
         const fitsHeight = !baseHeight || textHeight <= baseHeight;
-        const actualTextboxWidth = testTb.width ?? measureWidth;
-        const widthDidGrow = actualTextboxWidth > measureWidth + 0.5;
-        const lineWidths = testTb.__lineWidths;
-        const maxLineWidth = lineWidths && lineWidths.length > 0 ? Math.max(...lineWidths) : 0;
-        const fitsWidth = !widthDidGrow && maxLineWidth <= measureWidth + 1;
+        const { fitsWidth } = getTextboxWidthFitMetrics(testTb, measureWidth);
         if (hasNoImplicitWrap && fitsHeight && fitsWidth) break;
         fontSize--;
       }
@@ -5290,20 +5337,16 @@ function createText(element) {
       const renderedLineCount = ((_a = testTextbox.textLines) == null ? void 0 : _a.length) || 1;
       const hasNoImplicitWrap = renderedLineCount <= explicitLineCount;
       const fitsHeight = !baseHeight || textHeight <= baseHeight;
-      const actualTextboxWidth = testTextbox.width ?? fixedWidth;
-      const widthDidGrow = actualTextboxWidth > fixedWidth + 0.5;
-      const lineWidths = testTextbox.__lineWidths;
-      const maxLineWidth = lineWidths && lineWidths.length > 0 ? Math.max(...lineWidths) : 0;
-      const fitsWidth = !widthDidGrow && maxLineWidth <= fixedWidth + 1;
+      const widthMetrics = getTextboxWidthFitMetrics(testTextbox, fixedWidth);
+      const { fitsWidth } = widthMetrics;
       if (debugAutoShrink) {
         lastIter = {
           fontSize,
           renderedLineCount,
           explicitLineCount,
           textHeight,
-          maxLineWidth,
+          ...widthMetrics,
           fixedWidth,
-          widthDidGrow,
           hasNoImplicitWrap,
           fitsHeight,
           fitsWidth
@@ -8854,11 +8897,7 @@ const PageCanvas = forwardRef(
             const renderedLineCount = ((_b = testTextbox.textLines) == null ? void 0 : _b.length) || 1;
             const hasNoImplicitWrap = renderedLineCount <= explicitLineCount;
             const fitsHeight = rH <= 0 || textHeight <= rH;
-            const actualTextboxWidth = testTextbox.width ?? fixedWidth;
-            const widthDidGrow = actualTextboxWidth > fixedWidth + 0.5;
-            const lineWidths = testTextbox.__lineWidths;
-            const maxLineWidth = lineWidths && lineWidths.length > 0 ? Math.max(...lineWidths) : 0;
-            const fitsWidth = !widthDidGrow && maxLineWidth <= fixedWidth + 1;
+            const { fitsWidth } = getTextboxWidthFitMetrics(testTextbox, fixedWidth);
             if (hasNoImplicitWrap && fitsHeight && fitsWidth) {
               break;
             }
@@ -12244,6 +12283,46 @@ async function ensureFontsForResolvedConfig(config) {
     });
   }
 }
+function configHasAutoShrinkText$1(config) {
+  var _a;
+  if (!((_a = config == null ? void 0 : config.pages) == null ? void 0 : _a.length)) return false;
+  const walk = (nodes) => {
+    for (const node of nodes || []) {
+      if (!node) continue;
+      if (node.type === "text" && node.overflowPolicy === "auto-shrink") return true;
+      if (Array.isArray(node.children) && node.children.length && walk(node.children)) return true;
+    }
+    return false;
+  };
+  for (const page of config.pages) {
+    if (walk(page.children || [])) return true;
+  }
+  return false;
+}
+async function awaitFontsForConfig(config, maxWaitMs) {
+  if (typeof document === "undefined" || !document.fonts) return;
+  void ensureFontsForResolvedConfig(config);
+  const descriptors = collectFontDescriptorsFromConfig(config);
+  if (descriptors.length === 0) return;
+  const loads = Promise.all(
+    descriptors.map((d) => {
+      const stylePrefix = d.style === "italic" ? "italic " : "";
+      const spec = `${stylePrefix}${d.weight} 16px "${d.family}"`;
+      return document.fonts.load(spec).catch(() => []);
+    })
+  ).then(() => void 0);
+  await Promise.race([
+    loads,
+    new Promise((resolve) => setTimeout(resolve, maxWaitMs))
+  ]);
+  await Promise.race([
+    document.fonts.ready.catch(() => void 0).then(() => void 0),
+    new Promise((r) => setTimeout(r, Math.min(500, maxWaitMs)))
+  ]);
+  await new Promise(
+    (resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+  );
+}
 const PREVIEW_DEBUG_PREFIX = "[canvas-renderer][preview-debug]";
 function countUnderlinedNodes(config) {
   var _a;
@@ -12329,15 +12408,17 @@ function PixldocsPreview(props) {
           underlinedNodes: countUnderlinedNodes(resolved.config)
         });
         setResolvedConfig(resolved.config);
-        ensureFontsForResolvedConfig(resolved.config).then(() => {
+        const hasAutoShrink = configHasAutoShrinkText$1(resolved.config);
+        const waitMs = hasAutoShrink ? 4e3 : 1800;
+        awaitFontsForConfig(resolved.config, waitMs).then(() => {
           if (!cancelled) {
-            console.log(PREVIEW_DEBUG_PREFIX, "resolve-mode fonts queued");
+            console.log(PREVIEW_DEBUG_PREFIX, "resolve-mode fonts settled", { hasAutoShrink, waitMs });
             setFontsReady(true);
             setIsLoading(false);
           }
         }).catch((err) => {
           if (!cancelled) {
-            console.warn(PREVIEW_DEBUG_PREFIX, "resolve-mode fonts queue failed", err);
+            console.warn(PREVIEW_DEBUG_PREFIX, "resolve-mode font wait failed", err);
             setFontsReady(true);
             setIsLoading(false);
           }
@@ -12406,16 +12487,26 @@ function PixldocsPreview(props) {
     setFontsReady(false);
     setCanvasSettled(false);
     setStabilizationPass(0);
-    ensureFontsForResolvedConfig(config).then(() => {
-      console.log(PREVIEW_DEBUG_PREFIX, "config-mode fonts queued", {
+    let cancelled = false;
+    const hasAutoShrink = configHasAutoShrinkText$1(config);
+    const waitMs = hasAutoShrink ? 4e3 : 1800;
+    awaitFontsForConfig(config, waitMs).then(() => {
+      if (cancelled) return;
+      console.log(PREVIEW_DEBUG_PREFIX, "config-mode fonts settled", {
         pageIndex,
+        hasAutoShrink,
+        waitMs,
         underlinedNodes: countUnderlinedNodes(config)
       });
       setFontsReady(true);
     }).catch((err) => {
-      console.warn(PREVIEW_DEBUG_PREFIX, "config-mode fonts queue failed", err);
+      if (cancelled) return;
+      console.warn(PREVIEW_DEBUG_PREFIX, "config-mode font wait failed", err);
       setFontsReady(true);
     });
+    return () => {
+      cancelled = true;
+    };
   }, [isResolveMode, config]);
   const handleCanvasReady = useCallback(() => {
     if (stabilizationPass === 0) {
@@ -12452,7 +12543,7 @@ function PixldocsPreview(props) {
     !canvasSettled && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
-const PACKAGE_VERSION = "0.5.57";
+const PACKAGE_VERSION = "0.5.59";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -15131,8 +15222,8 @@ async function convertTextDecorationsToLines(svg) {
   let ctx = null;
   try {
     const realDoc = typeof document !== "undefined" ? document : doc;
-    const measureCanvas = realDoc.createElement("canvas");
-    ctx = measureCanvas.getContext("2d");
+    const measureCanvas2 = realDoc.createElement("canvas");
+    ctx = measureCanvas2.getContext("2d");
   } catch {
   }
   const textEls = Array.from(svg.querySelectorAll("text"));
@@ -15624,9 +15715,11 @@ export {
   PixldocsRenderer,
   applyThemeToConfig,
   assemblePdfFromSvgs,
+  awaitFontsForConfig,
   collectFontDescriptorsFromConfig,
   collectFontsFromConfig,
   collectImageUrls,
+  configHasAutoShrinkText$1 as configHasAutoShrinkText,
   embedFont,
   embedFontsForConfig,
   embedFontsInPdf,