@pixldocs/canvas-renderer 0.5.76 → 0.5.77

package/dist/index.d.ts

@@ -256,7 +256,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.76";
+export declare const PACKAGE_VERSION = "0.5.77";
 
 export declare interface PageSettings {
     backgroundColor?: string;
@@ -447,6 +447,7 @@ export declare class PixldocsRenderer {
      * using the global __fabricCanvasRegistry (set by PageCanvas).
      */
     private getFabricCanvasFromContainer;
+    private logFabricTextParitySnapshot;
     private waitForStableTextMetrics;
 }
 

package/dist/index.js

@@ -5194,6 +5194,17 @@ function buildRoundedTrianglePath(w, h, rTop, rBR, rBL) {
   ];
   return parts.join(" ");
 }
+const roundDiag = (value) => {
+  if (typeof value !== "number") return value;
+  return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
+};
+const stringifyDiag = (payload) => {
+  try {
+    return JSON.stringify(payload, (_key, value) => roundDiag(value));
+  } catch {
+    return String(payload);
+  }
+};
 function buildRoundedRectPath(w, h, tl, tr, br, bl) {
   return buildRoundedRectPath$1(w, h, getRoundedRectRadii(w, h, { rxTL: tl, rxTR: tr, rxBR: br, rxBL: bl }));
 }
@@ -5304,11 +5315,11 @@ function createShape(element) {
   }
 }
 function createText(element) {
-  var _a;
+  var _a, _b;
   const overflowPolicy = element.overflowPolicy || "grow-and-push";
   let text = element.text || "Text";
   let fontSize = element.fontSize || 16;
-  element.minFontSize || 8;
+  const minFontSize = element.minFontSize || 8;
   const maxLines = element.maxLines || 3;
   const baseWidth = element.width && element.width > 0 ? element.width : 200;
   const baseHeight = element.height;
@@ -5320,6 +5331,7 @@ function createText(element) {
     const startFontSize = fontSize;
     let breakReason = "min-font-size-reached";
     let lastIter = null;
+    const iterationSamples = [];
     while (fontSize > 1) {
       const testTextbox = new fabric.Textbox(text, {
         width: fixedWidth,
@@ -5337,7 +5349,7 @@ function createText(element) {
       const hasNoImplicitWrap = renderedLineCount <= explicitLineCount;
       const fitsHeight = !baseHeight || textHeight <= baseHeight;
       const widthMetrics = getTextboxWidthFitMetrics(testTextbox, fixedWidth);
-      const { fitsWidth } = widthMetrics;
+      const { maxLineWidth, widthDidGrow, fitsWidth } = widthMetrics;
       if (debugAutoShrink) {
         lastIter = {
           fontSize,
@@ -5348,8 +5360,12 @@ function createText(element) {
           fixedWidth,
           hasNoImplicitWrap,
           fitsHeight,
-          fitsWidth
+          fitsWidth,
+          textLines: (testTextbox.textLines || []).map((line) => Array.isArray(line) ? line.join("") : String(line ?? ""))
         };
+        if (iterationSamples.length < 6 || fontSize <= minFontSize + 2) {
+          iterationSamples.push(lastIter);
+        }
       }
       if (hasNoImplicitWrap && fitsHeight && fitsWidth) {
         breakReason = "fits";
@@ -5358,10 +5374,11 @@ function createText(element) {
       fontSize--;
     }
     if (debugAutoShrink) {
-      console.log("[auto-shrink][diag]", {
+      console.log("[auto-shrink][diag] " + stringifyDiag({
         id: element.id,
         name: element.name,
-        text,
+        text: text.slice(0, 180),
+        textLength: text.length,
         fontFamily: element.fontFamily,
         fontWeight: element.fontWeight,
         elementWidth: element.width,
@@ -5373,10 +5390,11 @@ function createText(element) {
         startFontSize,
         finalFontSize: fontSize,
         breakReason,
+        iterations: iterationSamples,
         lastIter,
         fontCheckRegular: typeof document !== "undefined" && document.fonts ? document.fonts.check(`16px "${element.fontFamily || "Open Sans"}"`) : null,
         fontCheckBold: typeof document !== "undefined" && document.fonts ? document.fonts.check(`bold 16px "${element.fontFamily || "Open Sans"}"`) : null
-      });
+      }));
     }
   }
   if (overflowPolicy === "max-lines-ellipsis") {
@@ -5451,6 +5469,22 @@ function createText(element) {
     textbox.setCoords();
   }
   textbox.dirty = true;
+  if (overflowPolicy === "auto-shrink" && typeof window !== "undefined" && window.__pixldocsDebugAutoShrink === true) {
+    console.log("[auto-shrink][final-textbox] " + stringifyDiag({
+      id: element.id,
+      name: element.name,
+      text: text.slice(0, 180),
+      targetWidth,
+      targetScaleX,
+      targetScaleY,
+      finalFontSize: fontSize,
+      textboxWidth: textbox.width,
+      textboxHeight: textbox.height,
+      lineCount: ((_b = textbox.textLines) == null ? void 0 : _b.length) || 0,
+      lines: (textbox.textLines || []).map((line) => Array.isArray(line) ? line.join("") : String(line ?? "")),
+      widthMetrics: getTextboxWidthFitMetrics(textbox, targetWidth)
+    }));
+  }
   applyTextBackground(textbox, extractTextBgConfig(element));
   const shadow = buildTextShadow(element);
   if (shadow) textbox.set("shadow", shadow);
@@ -12534,7 +12568,18 @@ 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.76";
+const PACKAGE_VERSION = "0.5.77";
+const roundParityValue = (value) => {
+  if (typeof value !== "number") return value;
+  return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
+};
+function logJsonLine(tag, payload) {
+  try {
+    console.log(`${tag} ${JSON.stringify(payload, (_key, value) => roundParityValue(value))}`);
+  } catch {
+    console.log(tag, payload);
+  }
+}
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -13410,6 +13455,42 @@ class PixldocsRenderer {
     }
     return null;
   }
+  logFabricTextParitySnapshot(stage, fabricInstance) {
+    var _a;
+    if (typeof window === "undefined" || window.__pixldocsDebugAutoShrink !== true) return;
+    const sample = [];
+    const visit = (obj, groupPath = "") => {
+      var _a2;
+      if (!obj) return;
+      if (obj instanceof fabric.Textbox) {
+        const lineWidths = getCanvasMeasuredTextboxLineWidths(obj);
+        sample.push({
+          id: getObjectId(obj),
+          groupPath,
+          text: String(obj.text ?? "").slice(0, 180),
+          left: obj.left,
+          top: obj.top,
+          width: obj.width,
+          height: obj.height,
+          scaleX: obj.scaleX,
+          scaleY: obj.scaleY,
+          fontSize: obj.fontSize,
+          fontFamily: obj.fontFamily,
+          fontWeight: obj.fontWeight,
+          lineCount: ((_a2 = obj.textLines) == null ? void 0 : _a2.length) || 0,
+          lines: (obj.textLines || []).map((line) => Array.isArray(line) ? line.join("") : String(line ?? "")),
+          lineWidths,
+          maxLineWidth: lineWidths.length ? Math.max(...lineWidths) : 0
+        });
+      }
+      if (obj instanceof fabric.Group && typeof obj.getObjects === "function") {
+        const nextPath = [groupPath, getObjectId(obj) || obj.type || "group"].filter(Boolean).join("/");
+        obj.getObjects().forEach((child) => visit(child, nextPath));
+      }
+    };
+    (_a = fabricInstance == null ? void 0 : fabricInstance.getObjects) == null ? void 0 : _a.call(fabricInstance).forEach((obj) => visit(obj));
+    logJsonLine("[canvas-renderer][fabric-text-parity]", { stage, textboxes: sample.length, sample });
+  }
   async waitForStableTextMetrics(container, config) {
     var _a, _b, _c;
     if (typeof document !== "undefined") {
@@ -13418,6 +13499,7 @@ class PixldocsRenderer {
     }
     const fabricInstance = this.getFabricCanvasFromContainer(container);
     if (!(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
+    this.logFabricTextParitySnapshot("before-stable-text-metrics", fabricInstance);
     const waitForPaint = () => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r())));
     const primeCharBounds = (obj) => {
       if (obj instanceof fabric.Textbox) {
@@ -13444,6 +13526,7 @@ class PixldocsRenderer {
     await waitForPaint();
     (_c = fabricInstance.renderAll) == null ? void 0 : _c.call(fabricInstance);
     await waitForPaint();
+    this.logFabricTextParitySnapshot("after-stable-text-metrics", fabricInstance);
   }
 }
 const FONT_WEIGHT_LABELS = {
@@ -14265,6 +14348,16 @@ const pdfFonts = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProp
   resolveFontWeight,
   rewriteSvgFontsForJsPDF
 }, Symbol.toStringTag, { value: "Module" }));
+function logParityJson(tag, stage, payload) {
+  try {
+    console.log(`${tag} ${stage} ${JSON.stringify(payload, (_key, value) => {
+      if (typeof value !== "number") return value;
+      return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
+    })}`);
+  } catch {
+    console.log(`${tag} ${stage}`, payload);
+  }
+}
 function dumpSvgTextDiagnostics(svgStr, pageIndex, tag, stage, maxItems = 30) {
   try {
     if (typeof DOMParser === "undefined") return;
@@ -14287,7 +14380,7 @@ function dumpSvgTextDiagnostics(svgStr, pageIndex, tag, stage, maxItems = 30) {
       svgViewBox,
       textCount: texts.length
     };
-    console.log(`${tag} ${stage} page=${pageIndex} summary`, summary);
+    logParityJson(tag, stage, { kind: "summary", ...summary });
     const sample = texts.slice(0, maxItems).map((t, idx) => {
       var _a, _b;
       const tspans = Array.from(t.querySelectorAll("tspan"));
@@ -14319,7 +14412,7 @@ function dumpSvgTextDiagnostics(svgStr, pageIndex, tag, stage, maxItems = 30) {
         tspanSample: tspanInfo
       };
     });
-    console.log(`${tag} ${stage} page=${pageIndex} text-sample (first ${sample.length}/${texts.length})`, sample);
+    logParityJson(tag, stage, { kind: "text-sample", page: pageIndex, count: sample.length, total: texts.length, sample });
   } catch (err) {
     console.warn(`${tag} ${stage} page=${pageIndex} dump threw`, err);
   }