ugcinc-render 1.5.23 → 1.5.25

package/dist/index.d.mts

@@ -1239,9 +1239,10 @@ declare function getReferenceElementY(elements: ImageEditorElement[], elementId:
  * @param dynamicCrop - Crop configuration
  * @param canvasWidth - Original canvas width
  * @param canvasHeight - Original canvas height
+ * @param textValues - Optional map of textInputId -> text content for height calculation
  * @returns CropBounds with x, y, width, height
  */
-declare function calculateCropBounds(elements: ImageEditorElement[], dynamicCrop: DynamicCropConfig | undefined, canvasWidth: number, canvasHeight: number): CropBounds;
+declare function calculateCropBounds(elements: ImageEditorElement[], dynamicCrop: DynamicCropConfig | undefined, canvasWidth: number, canvasHeight: number, textValues?: Record<string, string>): CropBounds;
 /**
  * Check if dynamic crop is enabled (either vertical or horizontal)
  */

package/dist/index.d.ts

@@ -1239,9 +1239,10 @@ declare function getReferenceElementY(elements: ImageEditorElement[], elementId:
  * @param dynamicCrop - Crop configuration
  * @param canvasWidth - Original canvas width
  * @param canvasHeight - Original canvas height
+ * @param textValues - Optional map of textInputId -> text content for height calculation
  * @returns CropBounds with x, y, width, height
  */
-declare function calculateCropBounds(elements: ImageEditorElement[], dynamicCrop: DynamicCropConfig | undefined, canvasWidth: number, canvasHeight: number): CropBounds;
+declare function calculateCropBounds(elements: ImageEditorElement[], dynamicCrop: DynamicCropConfig | undefined, canvasWidth: number, canvasHeight: number, textValues?: Record<string, string>): CropBounds;
 /**
  * Check if dynamic crop is enabled (either vertical or horizontal)
  */

package/dist/index.js

@@ -944,38 +944,40 @@ function topologicalSortForAxis(elements, axis) {
   }
   return { sorted, errors };
 }
-function getSelfAnchorOffsetX(element, selfAnchor) {
+function getSelfAnchorOffsetX(element, selfAnchor, actualWidth) {
+  const width = actualWidth ?? element.width;
   switch (selfAnchor) {
     case "left":
       return 0;
     case "center":
-      return element.width / 2;
+      return width / 2;
     case "right":
-      return element.width;
+      return width;
     default:
       return 0;
   }
 }
-function getSelfAnchorOffsetY(element, selfAnchor) {
+function getSelfAnchorOffsetY(element, selfAnchor, actualHeight) {
+  const height = actualHeight ?? element.height;
   switch (selfAnchor) {
     case "top":
       return 0;
     case "middle":
-      return element.height / 2;
+      return height / 2;
     case "bottom":
-      return element.height;
+      return height;
     default:
       return 0;
   }
 }
-function calculateAbsoluteX(element, referenceElement, anchor, selfAnchor, offset) {
+function calculateAbsoluteX(element, referenceElement, anchor, selfAnchor, offset, actualWidth) {
   const refX = anchor === "left" ? referenceElement.x : referenceElement.x + referenceElement.width;
-  const selfOffset = getSelfAnchorOffsetX(element, selfAnchor);
+  const selfOffset = getSelfAnchorOffsetX(element, selfAnchor, actualWidth);
   return refX + offset - selfOffset;
 }
-function calculateAbsoluteY(element, referenceElement, anchor, selfAnchor, offset) {
+function calculateAbsoluteY(element, referenceElement, anchor, selfAnchor, offset, actualHeight) {
   const refY = anchor === "top" ? referenceElement.y : referenceElement.y + referenceElement.height;
-  const selfOffset = getSelfAnchorOffsetY(element, selfAnchor);
+  const selfOffset = getSelfAnchorOffsetY(element, selfAnchor, actualHeight);
   return refY + offset - selfOffset;
 }
 function resolveElementPositions(elements, textValues) {
@@ -1033,26 +1035,37 @@ function resolveElementPositions(elements, textValues) {
       if (refPosition) {
         const defaultSelfAnchor = elem.relativePositionX.anchor === "right" ? "left" : "right";
         const selfAnchor = elem.relativePositionX.selfAnchor ?? defaultSelfAnchor;
+        let actualWidth;
+        let autoResult = null;
+        if (elem.type === "text") {
+          const textContent = getTextContent(elem);
+          autoResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+          if (autoResult && elem.autoWidth) {
+            actualWidth = autoResult.actualWidth;
+          }
+        }
         const newX = calculateAbsoluteX(
           elem,
           refPosition,
           elem.relativePositionX.anchor,
           selfAnchor,
-          elem.relativePositionX.offset
+          elem.relativePositionX.offset,
+          actualWidth
+          // Use actual width for self anchor calculation
         );
         resolvedX.set(elem.id, { x: newX, width: elem.width });
-        if (elem.type === "text") {
-          const textContent = getTextContent(elem);
-          const autoResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
-          if (autoResult) {
-            if (elem.autoWidth) {
-              referenceX.set(elem.id, { x: autoResult.actualX, width: autoResult.actualWidth });
+        if (autoResult) {
+          if (elem.autoWidth) {
+            const updatedResult = calculateAutoWidthDimensions({ ...elem, x: newX }, getTextContent(elem), measureCtx);
+            if (updatedResult) {
+              referenceX.set(elem.id, { x: updatedResult.actualX, width: updatedResult.actualWidth });
+              referenceY.set(elem.id, { y: referenceY.get(elem.id)?.y ?? elem.y, height: updatedResult.actualHeight });
             } else {
               referenceX.set(elem.id, { x: newX, width: elem.width });
             }
-            referenceY.set(elem.id, { y: referenceY.get(elem.id)?.y ?? elem.y, height: autoResult.actualHeight });
           } else {
             referenceX.set(elem.id, { x: newX, width: elem.width });
+            referenceY.set(elem.id, { y: referenceY.get(elem.id)?.y ?? elem.y, height: autoResult.actualHeight });
           }
         } else {
           referenceX.set(elem.id, { x: newX, width: elem.width });
@@ -1067,22 +1080,26 @@ function resolveElementPositions(elements, textValues) {
       if (refPosition) {
         const defaultSelfAnchor = elem.relativePositionY.anchor === "bottom" ? "top" : "bottom";
         const selfAnchor = elem.relativePositionY.selfAnchor ?? defaultSelfAnchor;
+        let actualHeight;
+        if (elem.type === "text") {
+          const textContent = getTextContent(elem);
+          const autoResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+          if (autoResult) {
+            actualHeight = autoResult.actualHeight;
+          }
+        }
         const newY = calculateAbsoluteY(
           elem,
           refPosition,
           elem.relativePositionY.anchor,
           selfAnchor,
-          elem.relativePositionY.offset
+          elem.relativePositionY.offset,
+          actualHeight
+          // Use actual height for self anchor calculation
         );
         resolvedY.set(elem.id, { y: newY, height: elem.height });
-        if (elem.type === "text") {
-          const textContent = getTextContent(elem);
-          const autoResult = calculateAutoWidthDimensions({ ...elem, y: newY }, textContent, measureCtx);
-          if (autoResult) {
-            referenceY.set(elem.id, { y: newY, height: autoResult.actualHeight });
-          } else {
-            referenceY.set(elem.id, { y: newY, height: elem.height });
-          }
+        if (actualHeight !== void 0) {
+          referenceY.set(elem.id, { y: newY, height: actualHeight });
         } else {
           referenceY.set(elem.id, { y: newY, height: elem.height });
         }
@@ -1150,7 +1167,16 @@ function getReferenceElementY(elements, elementId) {
 }
 
 // src/utils/cropBounds.ts
-function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
+function getActualElementHeight(elem, textValues, measureCtx) {
+  if (elem.type !== "text") return elem.height;
+  let textContent = elem.text ?? "Text";
+  if (elem.textInputId && textValues?.[elem.textInputId]) {
+    textContent = textValues[elem.textInputId];
+  }
+  const result = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+  return result?.actualHeight ?? elem.height;
+}
+function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight, textValues) {
   if (!dynamicCrop) {
     return { x: 0, y: 0, width: canvasWidth, height: canvasHeight };
   }
@@ -1163,6 +1189,12 @@ function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
     if (boundary.elementId) return boundary.elementId;
     return void 0;
   };
+  let measureCtx = null;
+  const hasTextElements = elements.some((e) => e.type === "text");
+  if (hasTextElements && typeof document !== "undefined") {
+    const canvas = document.createElement("canvas");
+    measureCtx = canvas.getContext("2d");
+  }
   let cropY = 0;
   let cropHeight = canvasHeight;
   if (dynamicCrop.vertical?.enabled) {
@@ -1173,8 +1205,9 @@ function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
       let minY = canvasHeight;
       let maxY = 0;
       for (const elem of elements) {
+        const actualHeight = getActualElementHeight(elem, textValues, measureCtx);
         minY = Math.min(minY, elem.y);
-        maxY = Math.max(maxY, elem.y + elem.height);
+        maxY = Math.max(maxY, elem.y + actualHeight);
       }
       if (elements.length > 0) {
         cropY = Math.max(0, minY - paddingStart);
@@ -1195,7 +1228,8 @@ function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
       if (endElementId) {
         const endElem = elementMap.get(endElementId);
         if (endElem) {
-          bottomY = endElem.y + endElem.height;
+          const actualHeight = getActualElementHeight(endElem, textValues, measureCtx);
+          bottomY = endElem.y + actualHeight;
         }
       }
       cropY = Math.max(0, topY - paddingStart);
@@ -1429,8 +1463,8 @@ function ImageEditorComposition({
   }, [elements, textValues]);
   const cropBounds = (0, import_react3.useMemo)(() => {
     if (!isDynamicCropEnabled(dynamicCrop) || !resolvedElements) return null;
-    return calculateCropBounds(resolvedElements, dynamicCrop, canvasWidth, canvasHeight);
-  }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight]);
+    return calculateCropBounds(resolvedElements, dynamicCrop, canvasWidth, canvasHeight, textValues);
+  }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight, textValues]);
   const segmentsFromElements = (0, import_react3.useMemo)(() => {
     if (!resolvedElements) return null;
     const segments = [];

package/dist/index.mjs

@@ -858,38 +858,40 @@ function topologicalSortForAxis(elements, axis) {
   }
   return { sorted, errors };
 }
-function getSelfAnchorOffsetX(element, selfAnchor) {
+function getSelfAnchorOffsetX(element, selfAnchor, actualWidth) {
+  const width = actualWidth ?? element.width;
   switch (selfAnchor) {
     case "left":
       return 0;
     case "center":
-      return element.width / 2;
+      return width / 2;
     case "right":
-      return element.width;
+      return width;
     default:
       return 0;
   }
 }
-function getSelfAnchorOffsetY(element, selfAnchor) {
+function getSelfAnchorOffsetY(element, selfAnchor, actualHeight) {
+  const height = actualHeight ?? element.height;
   switch (selfAnchor) {
     case "top":
       return 0;
     case "middle":
-      return element.height / 2;
+      return height / 2;
     case "bottom":
-      return element.height;
+      return height;
     default:
       return 0;
   }
 }
-function calculateAbsoluteX(element, referenceElement, anchor, selfAnchor, offset) {
+function calculateAbsoluteX(element, referenceElement, anchor, selfAnchor, offset, actualWidth) {
   const refX = anchor === "left" ? referenceElement.x : referenceElement.x + referenceElement.width;
-  const selfOffset = getSelfAnchorOffsetX(element, selfAnchor);
+  const selfOffset = getSelfAnchorOffsetX(element, selfAnchor, actualWidth);
   return refX + offset - selfOffset;
 }
-function calculateAbsoluteY(element, referenceElement, anchor, selfAnchor, offset) {
+function calculateAbsoluteY(element, referenceElement, anchor, selfAnchor, offset, actualHeight) {
   const refY = anchor === "top" ? referenceElement.y : referenceElement.y + referenceElement.height;
-  const selfOffset = getSelfAnchorOffsetY(element, selfAnchor);
+  const selfOffset = getSelfAnchorOffsetY(element, selfAnchor, actualHeight);
   return refY + offset - selfOffset;
 }
 function resolveElementPositions(elements, textValues) {
@@ -947,26 +949,37 @@ function resolveElementPositions(elements, textValues) {
       if (refPosition) {
         const defaultSelfAnchor = elem.relativePositionX.anchor === "right" ? "left" : "right";
         const selfAnchor = elem.relativePositionX.selfAnchor ?? defaultSelfAnchor;
+        let actualWidth;
+        let autoResult = null;
+        if (elem.type === "text") {
+          const textContent = getTextContent(elem);
+          autoResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+          if (autoResult && elem.autoWidth) {
+            actualWidth = autoResult.actualWidth;
+          }
+        }
         const newX = calculateAbsoluteX(
           elem,
           refPosition,
           elem.relativePositionX.anchor,
           selfAnchor,
-          elem.relativePositionX.offset
+          elem.relativePositionX.offset,
+          actualWidth
+          // Use actual width for self anchor calculation
         );
         resolvedX.set(elem.id, { x: newX, width: elem.width });
-        if (elem.type === "text") {
-          const textContent = getTextContent(elem);
-          const autoResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
-          if (autoResult) {
-            if (elem.autoWidth) {
-              referenceX.set(elem.id, { x: autoResult.actualX, width: autoResult.actualWidth });
+        if (autoResult) {
+          if (elem.autoWidth) {
+            const updatedResult = calculateAutoWidthDimensions({ ...elem, x: newX }, getTextContent(elem), measureCtx);
+            if (updatedResult) {
+              referenceX.set(elem.id, { x: updatedResult.actualX, width: updatedResult.actualWidth });
+              referenceY.set(elem.id, { y: referenceY.get(elem.id)?.y ?? elem.y, height: updatedResult.actualHeight });
             } else {
               referenceX.set(elem.id, { x: newX, width: elem.width });
             }
-            referenceY.set(elem.id, { y: referenceY.get(elem.id)?.y ?? elem.y, height: autoResult.actualHeight });
           } else {
             referenceX.set(elem.id, { x: newX, width: elem.width });
+            referenceY.set(elem.id, { y: referenceY.get(elem.id)?.y ?? elem.y, height: autoResult.actualHeight });
           }
         } else {
           referenceX.set(elem.id, { x: newX, width: elem.width });
@@ -981,22 +994,26 @@ function resolveElementPositions(elements, textValues) {
       if (refPosition) {
         const defaultSelfAnchor = elem.relativePositionY.anchor === "bottom" ? "top" : "bottom";
         const selfAnchor = elem.relativePositionY.selfAnchor ?? defaultSelfAnchor;
+        let actualHeight;
+        if (elem.type === "text") {
+          const textContent = getTextContent(elem);
+          const autoResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+          if (autoResult) {
+            actualHeight = autoResult.actualHeight;
+          }
+        }
         const newY = calculateAbsoluteY(
           elem,
           refPosition,
           elem.relativePositionY.anchor,
           selfAnchor,
-          elem.relativePositionY.offset
+          elem.relativePositionY.offset,
+          actualHeight
+          // Use actual height for self anchor calculation
         );
         resolvedY.set(elem.id, { y: newY, height: elem.height });
-        if (elem.type === "text") {
-          const textContent = getTextContent(elem);
-          const autoResult = calculateAutoWidthDimensions({ ...elem, y: newY }, textContent, measureCtx);
-          if (autoResult) {
-            referenceY.set(elem.id, { y: newY, height: autoResult.actualHeight });
-          } else {
-            referenceY.set(elem.id, { y: newY, height: elem.height });
-          }
+        if (actualHeight !== void 0) {
+          referenceY.set(elem.id, { y: newY, height: actualHeight });
         } else {
           referenceY.set(elem.id, { y: newY, height: elem.height });
         }
@@ -1064,7 +1081,16 @@ function getReferenceElementY(elements, elementId) {
 }
 
 // src/utils/cropBounds.ts
-function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
+function getActualElementHeight(elem, textValues, measureCtx) {
+  if (elem.type !== "text") return elem.height;
+  let textContent = elem.text ?? "Text";
+  if (elem.textInputId && textValues?.[elem.textInputId]) {
+    textContent = textValues[elem.textInputId];
+  }
+  const result = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+  return result?.actualHeight ?? elem.height;
+}
+function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight, textValues) {
   if (!dynamicCrop) {
     return { x: 0, y: 0, width: canvasWidth, height: canvasHeight };
   }
@@ -1077,6 +1103,12 @@ function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
     if (boundary.elementId) return boundary.elementId;
     return void 0;
   };
+  let measureCtx = null;
+  const hasTextElements = elements.some((e) => e.type === "text");
+  if (hasTextElements && typeof document !== "undefined") {
+    const canvas = document.createElement("canvas");
+    measureCtx = canvas.getContext("2d");
+  }
   let cropY = 0;
   let cropHeight = canvasHeight;
   if (dynamicCrop.vertical?.enabled) {
@@ -1087,8 +1119,9 @@ function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
       let minY = canvasHeight;
       let maxY = 0;
       for (const elem of elements) {
+        const actualHeight = getActualElementHeight(elem, textValues, measureCtx);
         minY = Math.min(minY, elem.y);
-        maxY = Math.max(maxY, elem.y + elem.height);
+        maxY = Math.max(maxY, elem.y + actualHeight);
       }
       if (elements.length > 0) {
         cropY = Math.max(0, minY - paddingStart);
@@ -1109,7 +1142,8 @@ function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
       if (endElementId) {
         const endElem = elementMap.get(endElementId);
         if (endElem) {
-          bottomY = endElem.y + endElem.height;
+          const actualHeight = getActualElementHeight(endElem, textValues, measureCtx);
+          bottomY = endElem.y + actualHeight;
         }
       }
       cropY = Math.max(0, topY - paddingStart);
@@ -1343,8 +1377,8 @@ function ImageEditorComposition({
   }, [elements, textValues]);
   const cropBounds = useMemo3(() => {
     if (!isDynamicCropEnabled(dynamicCrop) || !resolvedElements) return null;
-    return calculateCropBounds(resolvedElements, dynamicCrop, canvasWidth, canvasHeight);
-  }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight]);
+    return calculateCropBounds(resolvedElements, dynamicCrop, canvasWidth, canvasHeight, textValues);
+  }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight, textValues]);
   const segmentsFromElements = useMemo3(() => {
     if (!resolvedElements) return null;
     const segments = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.5.23",
+  "version": "1.5.25",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",