ugcinc-render 1.5.24 → 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

@@ -1167,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 };
   }
@@ -1180,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) {
@@ -1190,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);
@@ -1212,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);
@@ -1446,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

@@ -1081,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 };
   }
@@ -1094,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) {
@@ -1104,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);
@@ -1126,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);
@@ -1360,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.24",
+  "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",