@pixldocs/canvas-renderer 0.5.167 → 0.5.169

package/dist/{index-CQEAcApH.cjs → index-Bg1FRZ3d.cjs}

@@ -348,11 +348,12 @@ function getCacheKey(element) {
     scaleY: element.scaleY,
     splitByGrapheme: element.splitByGrapheme,
     overflowPolicy: element.overflowPolicy,
-    height: element.overflowPolicy === "auto-shrink" ? element.height : void 0
+    height: element.overflowPolicy === "auto-shrink" ? element.height : void 0,
+    minBoxHeight: element.minBoxHeight,
+    verticalAlign: element.verticalAlign
   });
 }
 function measureTextHeight(element) {
-  var _a;
   if (element.type !== "text") {
     return element.height || 20;
   }
@@ -368,8 +369,8 @@ function measureTextHeight(element) {
     let fontSize = element.fontSize || 16;
     const overflowPolicy = element.overflowPolicy || "grow-and-push";
     if (overflowPolicy === "auto-shrink") {
-      const baseHeight = element.height;
-      const explicitLineCount = Math.max(1, textToMeasure.split("\n").length);
+      const minBoxH = Math.max(0, Number(element.minBoxHeight) || 0);
+      const baseHeight = typeof element.height === "number" ? Math.max(element.height, minBoxH) : minBoxH > 0 ? minBoxH : element.height;
       while (fontSize > 1) {
         const testTb = new fabric__namespace.Textbox(textToMeasure, {
           width: measureWidth,
@@ -383,11 +384,9 @@ function measureTextHeight(element) {
         });
         testTb.initDimensions();
         const textHeight = testTb.height || 0;
-        const renderedLineCount = ((_a = testTb.textLines) == null ? void 0 : _a.length) || 1;
-        const hasNoImplicitWrap = renderedLineCount <= explicitLineCount;
         const fitsHeight = !baseHeight || textHeight <= baseHeight;
         const { fitsWidth } = getTextboxWidthFitMetrics(testTb, measureWidth);
-        if (hasNoImplicitWrap && fitsHeight && fitsWidth) break;
+        if (fitsHeight && fitsWidth) break;
         fontSize--;
       }
       const finalTb = new fabric__namespace.Textbox(textToMeasure, {
@@ -402,7 +401,7 @@ function measureTextHeight(element) {
       });
       finalTb.initDimensions();
       const measuredH = (finalTb.height || element.height || 20) * (element.scaleY || 1);
-      const cappedH = typeof baseHeight === "number" ? Math.min(baseHeight * (element.scaleY || 1), measuredH) : measuredH;
+      const cappedH = typeof baseHeight === "number" ? Math.max(baseHeight * (element.scaleY || 1), measuredH) : measuredH;
       heightCache.set(cacheKey, { height: cappedH, timestamp: Date.now() });
       return cappedH;
     }
@@ -5550,6 +5549,54 @@ function calculateScaleSnapGuides(scalingObj, corner, canvas, canvasWidth, canva
     return true;
   });
 }
+const TextboxProto = fabric__namespace.Textbox.prototype;
+if (!TextboxProto.__pixldocsOrigCalcTextHeight) {
+  TextboxProto.__pixldocsOrigCalcTextHeight = TextboxProto.calcTextHeight;
+  TextboxProto.calcTextHeight = function() {
+    const orig = TextboxProto.__pixldocsOrigCalcTextHeight.call(this);
+    this._contentHeight = orig;
+    const min = this.minBoxHeight || 0;
+    return min > orig ? min : orig;
+  };
+}
+if (!TextboxProto.__pixldocsOrigGetTopOffset) {
+  TextboxProto.__pixldocsOrigGetTopOffset = TextboxProto._getTopOffset;
+  TextboxProto._getTopOffset = function() {
+    const baseOffset = TextboxProto.__pixldocsOrigGetTopOffset.call(this);
+    const valign = this.verticalAlign || "top";
+    if (valign === "top") return baseOffset;
+    const content = typeof this._contentHeight === "number" ? this._contentHeight : TextboxProto.__pixldocsOrigCalcTextHeight.call(this);
+    const padding = (this.height || 0) - content;
+    if (padding <= 0) return baseOffset;
+    if (valign === "middle") return baseOffset + padding / 2;
+    if (valign === "bottom") return baseOffset + padding;
+    return baseOffset;
+  };
+}
+if (TextboxProto._getSVGLeftTopOffsets && !TextboxProto.__pixldocsOrigGetSVGLeftTopOffsets) {
+  TextboxProto.__pixldocsOrigGetSVGLeftTopOffsets = TextboxProto._getSVGLeftTopOffsets;
+  TextboxProto._getSVGLeftTopOffsets = function() {
+    const base = TextboxProto.__pixldocsOrigGetSVGLeftTopOffsets.call(this);
+    const valign = this.verticalAlign || "top";
+    if (valign === "top") return base;
+    const content = typeof this._contentHeight === "number" ? this._contentHeight : TextboxProto.__pixldocsOrigCalcTextHeight.call(this);
+    const padding = (this.height || 0) - content;
+    if (padding <= 0) return base;
+    const extra = valign === "middle" ? padding / 2 : padding;
+    return { ...base, textTop: base.textTop + extra };
+  };
+}
+const stateProps = fabric__namespace.Textbox.prototype.stateProperties;
+if (Array.isArray(stateProps)) {
+  if (!stateProps.includes("minBoxHeight")) stateProps.push("minBoxHeight");
+  if (!stateProps.includes("verticalAlign")) stateProps.push("verticalAlign");
+}
+const cacheProps = fabric__namespace.Textbox.prototype.cacheProperties;
+if (Array.isArray(cacheProps)) {
+  if (!cacheProps.includes("minBoxHeight")) cacheProps.push("minBoxHeight");
+  if (!cacheProps.includes("verticalAlign")) cacheProps.push("verticalAlign");
+}
+TextboxProto.__pixldocsTextboxExtended = true;
 const PD_BG_KEY = "__pdBg";
 const PATCHED_KEY = "__pdBgPatched";
 function extractTextBgConfig(element) {
@@ -6327,6 +6374,8 @@ function createText(element) {
   const fixedWidth = Math.max(baseWidth, 1);
   const splitByGrapheme = overflowPolicy === "auto-shrink" ? false : element.splitByGrapheme ?? element.wordWrap === "break-word";
   if (overflowPolicy === "auto-shrink") {
+    const minBoxHForShrink = Math.max(0, Number(element.minBoxHeight) || 0);
+    const heightBound = Math.max(baseHeight || 0, minBoxHForShrink);
     const explicitLineCount = Math.max(1, text.split("\n").length);
     const debugAutoShrink = typeof window !== "undefined" && window.__pixldocsDebugAutoShrink === true;
     const startFontSize = fontSize;
@@ -6349,7 +6398,7 @@ function createText(element) {
       const textHeight = testTextbox.height || 0;
       const renderedLineCount = ((_a = testTextbox.textLines) == null ? void 0 : _a.length) || 1;
       const hasNoImplicitWrap = renderedLineCount <= explicitLineCount;
-      const fitsHeight = !baseHeight || textHeight <= baseHeight;
+      const fitsHeight = heightBound <= 0 || textHeight <= heightBound;
       const widthMetrics = getTextboxWidthFitMetrics(testTextbox, fixedWidth);
       const { maxLineWidth, widthDidGrow, fitsWidth } = widthMetrics;
       if (debugAutoShrink) {
@@ -6369,7 +6418,7 @@ function createText(element) {
           iterationSamples.push(lastIter);
         }
       }
-      if (hasNoImplicitWrap && fitsHeight && fitsWidth) {
+      if (fitsHeight && fitsWidth) {
         breakReason = "fits";
         break;
       }
@@ -6462,7 +6511,15 @@ function createText(element) {
     // formatting tokens (**, __, [c=...], etc). Disable inline edit and steer
     // users to the right-panel text field which exposes the raw markdown.
     editable: !formattingEnabled,
-    ...formattingEnabled ? { styles: parsedStyles } : element.styles ? { styles: element.styles } : {}
+    ...formattingEnabled ? { styles: parsedStyles } : element.styles ? { styles: element.styles } : {},
+    // Vertical sizing extensions (see fabricTextboxExtensions.ts). Apply for
+    // every overflow policy — in auto-shrink mode `minBoxHeight` acts as a
+    // visual floor so the box renders at the user's chosen height even after
+    // the font shrinks to fit. PageCanvas's auto-shrink loop already uses the
+    // same value as a fit-target, so the rendered box and the shrink target
+    // stay in sync (parity with the Use page / EC2 renderer).
+    ...(element.minBoxHeight ?? 0) > 0 ? { minBoxHeight: element.minBoxHeight } : {},
+    verticalAlign: element.verticalAlign || "top"
   });
   textbox.__formattingEnabled = formattingEnabled;
   textbox.initDimensions();
@@ -8057,6 +8114,22 @@ const PageCanvas = react.forwardRef(
             obj.dirty = true;
           }
         }
+        if (obj instanceof fabric__namespace.Textbox) {
+          const sy = obj.scaleY ?? 1;
+          if (Math.abs(sy - 1) > 1e-3) {
+            const center = obj.getCenterPoint();
+            const newMinH = Math.max(0, (obj.height ?? 0) * Math.abs(sy));
+            obj.minBoxHeight = newMinH;
+            obj.scaleY = 1;
+            try {
+              obj.initDimensions();
+            } catch {
+            }
+            obj.setPositionByOrigin(center, "center", "center");
+            obj.setCoords();
+            obj.dirty = true;
+          }
+        }
         if (obj.__lockScaleDuringCrop || obj.__cropDrag) {
           obj.set({ scaleX: 1, scaleY: 1 });
           obj.setCoords();
@@ -8633,6 +8706,12 @@ const PageCanvas = react.forwardRef(
               scaleY: finalScaleY,
               transformMatrix: finalAbsoluteMatrix
             };
+            if (obj instanceof fabric__namespace.Textbox) {
+              const baked = obj.minBoxHeight;
+              if (typeof baked === "number" && baked > 0) {
+                elementUpdate.minBoxHeight = baked;
+              }
+            }
             if (sourceElement && sourceElement.opacity !== void 0) {
               elementUpdate.opacity = sourceElement.opacity;
             }
@@ -9344,7 +9423,9 @@ const PageCanvas = react.forwardRef(
                 const resolvedSizeForCompare = (pageChildren == null ? void 0 : pageChildren.length) ? getNodeBounds(element, pageChildren) : { width: typeof element.width === "number" ? element.width : 0, height: typeof element.height === "number" ? element.height : 0 };
                 const fabricText = existingObj.text ?? "";
                 const storeText = element.text ?? "";
-                const otherPropsChanged = Math.abs((existingObj.width ?? 0) - resolvedSizeForCompare.width) > 0.1 || Math.abs((existingObj.height ?? 0) - resolvedSizeForCompare.height) > 0.1 || Math.abs((existingObj.angle ?? 0) - (element.angle ?? 0)) > 0.1 || Math.abs((existingObj.scaleX ?? 1) - (element.scaleX ?? 1)) > 0.01 || Math.abs((existingObj.scaleY ?? 1) - (element.scaleY ?? 1)) > 0.01 || (existingObj.flipX ?? false) !== (element.flipX ?? false) || (existingObj.flipY ?? false) !== (element.flipY ?? false) || fabricText !== storeText || existingObj.fill !== (element.fill ?? "") || existingObj.stroke !== (element.stroke ?? "") || Math.abs((existingObj.strokeWidth ?? 0) - (element.strokeWidth ?? 0)) > 0.01 || Math.abs((existingObj.opacity ?? 1) - (element.opacity ?? 1)) > 0.01 || (existingObj.fontSize ?? 0) !== (element.fontSize ?? 0) || (existingObj.fontFamily ?? "") !== (element.fontFamily ?? "") || // Detect text background + shadow changes so panel edits flow into Fabric.
+                const otherPropsChanged = Math.abs((existingObj.width ?? 0) - resolvedSizeForCompare.width) > 0.1 || Math.abs((existingObj.height ?? 0) - resolvedSizeForCompare.height) > 0.1 || Math.abs((existingObj.angle ?? 0) - (element.angle ?? 0)) > 0.1 || Math.abs((existingObj.scaleX ?? 1) - (element.scaleX ?? 1)) > 0.01 || Math.abs((existingObj.scaleY ?? 1) - (element.scaleY ?? 1)) > 0.01 || (existingObj.flipX ?? false) !== (element.flipX ?? false) || (existingObj.flipY ?? false) !== (element.flipY ?? false) || fabricText !== storeText || existingObj.fill !== (element.fill ?? "") || existingObj.stroke !== (element.stroke ?? "") || Math.abs((existingObj.strokeWidth ?? 0) - (element.strokeWidth ?? 0)) > 0.01 || Math.abs((existingObj.opacity ?? 1) - (element.opacity ?? 1)) > 0.01 || (existingObj.fontSize ?? 0) !== (element.fontSize ?? 0) || (existingObj.fontFamily ?? "") !== (element.fontFamily ?? "") || // Vertical alignment & min box height: panel-driven changes must trigger a re-apply
+                // so _getTopOffset (verticalAlign) and calcTextHeight (minBoxHeight) repaint correctly.
+                (existingObj.verticalAlign ?? "top") !== (element.verticalAlign ?? "top") || Math.abs((existingObj.minBoxHeight ?? 0) - (element.minBoxHeight ?? 0)) > 0.1 || // Detect text background + shadow changes so panel edits flow into Fabric.
                 JSON.stringify({
                   c: element.textBgColor ?? null,
                   p: element.textBgPadding ?? 0,
@@ -9799,7 +9880,7 @@ const PageCanvas = react.forwardRef(
       });
     }, [selectedIds, isActive, ready, elements]);
     const updateFabricObject = (obj, element, skipPositionUpdate = false) => {
-      var _a, _b, _c;
+      var _a, _b;
       const fc = fabricRef.current;
       if (fc && isTransforming(fc)) {
         return;
@@ -10168,7 +10249,8 @@ const PageCanvas = react.forwardRef(
         const fixedWidth = Math.max(storedWidth, 1);
         const splitByGrapheme = overflowPolicy === "auto-shrink" ? false : element.splitByGrapheme ?? element.wordWrap === "break-word";
         if (overflowPolicy === "auto-shrink") {
-          const explicitLineCount = Math.max(1, text.split("\n").length);
+          const minBoxHForShrink = Math.max(0, Number(element.minBoxHeight) || 0);
+          const heightBound = Math.max(rH || 0, minBoxHForShrink);
           while (fontSize > 1) {
             const testTextbox = new fabric__namespace.Textbox(text, {
               width: fixedWidth,
@@ -10178,15 +10260,13 @@ const PageCanvas = react.forwardRef(
               fontStyle: element.fontStyle || "normal",
               lineHeight: element.lineHeight || 1.2,
               charSpacing: element.charSpacing || 0,
-              splitByGrapheme: false
+              splitByGrapheme: element.splitByGrapheme ?? false
             });
             testTextbox.initDimensions();
             const textHeight = testTextbox.height || 0;
-            const renderedLineCount = ((_b = testTextbox.textLines) == null ? void 0 : _b.length) || 1;
-            const hasNoImplicitWrap = renderedLineCount <= explicitLineCount;
-            const fitsHeight = rH <= 0 || textHeight <= rH;
+            const fitsHeight = heightBound <= 0 || textHeight <= heightBound;
             const { fitsWidth } = getTextboxWidthFitMetrics(testTextbox, fixedWidth);
-            if (hasNoImplicitWrap && fitsHeight && fitsWidth) {
+            if (fitsHeight && fitsWidth) {
               break;
             }
             fontSize--;
@@ -10257,6 +10337,10 @@ const PageCanvas = react.forwardRef(
           splitByGrapheme,
           text
         });
+        const valign = element.verticalAlign || "top";
+        const minBoxH = Math.max(0, Number(element.minBoxHeight) || 0);
+        obj.verticalAlign = valign;
+        obj.minBoxHeight = minBoxH;
         if (element.formattingEnabled === true) {
           obj.styles = parsedStyles || {};
         } else {
@@ -10279,7 +10363,7 @@ const PageCanvas = react.forwardRef(
           } catch {
           }
           obj.dirty = true;
-          (_c = obj.setCoords) == null ? void 0 : _c.call(obj);
+          (_b = obj.setCoords) == null ? void 0 : _b.call(obj);
           obj.__lastTextBgShadowJson = JSON.stringify({
             c: element.textBgColor ?? null,
             p: element.textBgPadding ?? 0,
@@ -16036,9 +16120,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.167";
+const resolvedPackageVersion = "0.5.169";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.167";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.169";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -16164,6 +16248,68 @@ function installUnderlineFix(fab) {
   __underlineFixInstalled = true;
   console.log(`[canvas-renderer] underline-fix monkey patch installed (v${PACKAGE_VERSION})`);
 }
+let __textboxBoxExtensionsInstalled = false;
+function installTextboxBoxExtensions(fab) {
+  var _a;
+  if (__textboxBoxExtensionsInstalled) return;
+  const TextboxProto2 = (_a = fab.Textbox) == null ? void 0 : _a.prototype;
+  if (!TextboxProto2) return;
+  if (TextboxProto2.__pixldocsTextboxExtended) {
+    __textboxBoxExtensionsInstalled = true;
+    return;
+  }
+  if (typeof TextboxProto2.calcTextHeight === "function") {
+    const origCalc = TextboxProto2.calcTextHeight;
+    TextboxProto2.__pixldocsOrigCalcTextHeight = origCalc;
+    TextboxProto2.calcTextHeight = function() {
+      const orig = origCalc.call(this);
+      this._contentHeight = orig;
+      const min = this.minBoxHeight || 0;
+      return min > orig ? min : orig;
+    };
+  }
+  if (typeof TextboxProto2._getTopOffset === "function") {
+    const origTop = TextboxProto2._getTopOffset;
+    TextboxProto2.__pixldocsOrigGetTopOffset = origTop;
+    TextboxProto2._getTopOffset = function() {
+      const baseOffset = origTop.call(this);
+      const valign = this.verticalAlign || "top";
+      if (valign === "top") return baseOffset;
+      const content = typeof this._contentHeight === "number" ? this._contentHeight : TextboxProto2.__pixldocsOrigCalcTextHeight ? TextboxProto2.__pixldocsOrigCalcTextHeight.call(this) : 0;
+      const padding = (this.height || 0) - content;
+      if (padding <= 0) return baseOffset;
+      if (valign === "middle") return baseOffset + padding / 2;
+      if (valign === "bottom") return baseOffset + padding;
+      return baseOffset;
+    };
+  }
+  if (typeof TextboxProto2._getSVGLeftTopOffsets === "function") {
+    const origSvgOffsets = TextboxProto2._getSVGLeftTopOffsets;
+    TextboxProto2.__pixldocsOrigGetSVGLeftTopOffsets = origSvgOffsets;
+    TextboxProto2._getSVGLeftTopOffsets = function() {
+      const base = origSvgOffsets.call(this);
+      const valign = this.verticalAlign || "top";
+      if (valign === "top") return base;
+      const content = typeof this._contentHeight === "number" ? this._contentHeight : TextboxProto2.__pixldocsOrigCalcTextHeight ? TextboxProto2.__pixldocsOrigCalcTextHeight.call(this) : 0;
+      const padding = (this.height || 0) - content;
+      if (padding <= 0) return base;
+      const extra = valign === "middle" ? padding / 2 : padding;
+      return { ...base, textTop: base.textTop + extra };
+    };
+  }
+  const stateProps2 = TextboxProto2.stateProperties;
+  if (Array.isArray(stateProps2)) {
+    if (!stateProps2.includes("minBoxHeight")) stateProps2.push("minBoxHeight");
+    if (!stateProps2.includes("verticalAlign")) stateProps2.push("verticalAlign");
+  }
+  const cacheProps2 = TextboxProto2.cacheProperties;
+  if (Array.isArray(cacheProps2)) {
+    if (!cacheProps2.includes("minBoxHeight")) cacheProps2.push("minBoxHeight");
+    if (!cacheProps2.includes("verticalAlign")) cacheProps2.push("verticalAlign");
+  }
+  TextboxProto2.__pixldocsTextboxExtended = true;
+  __textboxBoxExtensionsInstalled = true;
+}
 function configHasAutoShrinkText(config) {
   var _a;
   if (!((_a = config == null ? void 0 : config.pages) == null ? void 0 : _a.length)) return false;
@@ -16186,6 +16332,7 @@ class PixldocsRenderer {
     this.config = config;
     this.installRuntimeGlobals();
     installUnderlineFix(fabric__namespace);
+    installTextboxBoxExtensions(fabric__namespace);
     try {
       console.log(`[canvas-renderer] PixldocsRenderer v${PACKAGE_VERSION} initialized`);
     } catch {
@@ -16473,7 +16620,7 @@ class PixldocsRenderer {
         await this.waitForCanvasScene(container, cloned, i);
       }
       console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
-      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-BayOs-9z.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-BU855BbG.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -18575,7 +18722,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-BayOs-9z.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-BU855BbG.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -18974,4 +19121,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-CQEAcApH.cjs.map
+//# sourceMappingURL=index-Bg1FRZ3d.cjs.map