ugcinc-render 1.5.22 → 1.5.23

package/dist/index.d.mts

@@ -1172,12 +1172,16 @@ declare function hexToRgba(hex: string, opacity?: number): string;
  */
 
 /**
- * Calculate the actual width of a text element when autoWidth is enabled
- * Returns { actualWidth, actualX } where actualX is adjusted based on boxAlign
+ * Calculate the actual dimensions of a text element when autoWidth is enabled
+ * Returns { actualWidth, actualX, actualHeight } where:
+ * - actualX is adjusted based on boxAlign
+ * - actualHeight is calculated based on the number of wrapped lines
  */
 declare function calculateAutoWidthDimensions(elem: ImageEditorElement, textContent: string, ctx?: CanvasRenderingContext2D | null): {
     actualWidth: number;
     actualX: number;
+    actualHeight: number;
+    lineCount: number;
 } | null;
 interface PositionResolutionError {
     elementId: string;

package/dist/index.d.ts

@@ -1172,12 +1172,16 @@ declare function hexToRgba(hex: string, opacity?: number): string;
  */
 
 /**
- * Calculate the actual width of a text element when autoWidth is enabled
- * Returns { actualWidth, actualX } where actualX is adjusted based on boxAlign
+ * Calculate the actual dimensions of a text element when autoWidth is enabled
+ * Returns { actualWidth, actualX, actualHeight } where:
+ * - actualX is adjusted based on boxAlign
+ * - actualHeight is calculated based on the number of wrapped lines
  */
 declare function calculateAutoWidthDimensions(elem: ImageEditorElement, textContent: string, ctx?: CanvasRenderingContext2D | null): {
     actualWidth: number;
     actualX: number;
+    actualHeight: number;
+    lineCount: number;
 } | null;
 interface PositionResolutionError {
     elementId: string;

package/dist/index.js

@@ -779,7 +779,7 @@ var FONT_FAMILIES2 = {
   arial: "Arial, sans-serif"
 };
 function calculateAutoWidthDimensions(elem, textContent, ctx) {
-  if (elem.type !== "text" || !elem.autoWidth) {
+  if (elem.type !== "text") {
     return null;
   }
   let measureCtx = ctx;
@@ -796,9 +796,13 @@ function calculateAutoWidthDimensions(elem, textContent, ctx) {
   const fontType = elem.font ?? "tiktok";
   const paddingLeft = elem.paddingLeft ?? 0;
   const paddingRight = elem.paddingRight ?? 0;
+  const paddingTop = elem.paddingTop ?? 0;
+  const paddingBottom = elem.paddingBottom ?? 0;
   const letterSpacing = elem.letterSpacing ?? 0;
+  const lineHeight = elem.lineHeight ?? 1.2;
   const maxWidth = elem.width;
   const boxAlign = elem.boxAlign ?? "left";
+  const autoWidth = elem.autoWidth ?? false;
   const fontFamily = FONT_FAMILIES2[fontType] ?? FONT_FAMILIES2.tiktok;
   measureCtx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
   const availableWidth = maxWidth - paddingLeft - paddingRight;
@@ -819,6 +823,7 @@ function calculateAutoWidthDimensions(elem, textContent, ctx) {
     }
   }
   if (currentLine) lines.push(currentLine);
+  if (lines.length === 0) lines.push("");
   let widestLineWidth = 0;
   for (const line of lines) {
     const chars = [...line];
@@ -829,21 +834,27 @@ function calculateAutoWidthDimensions(elem, textContent, ctx) {
     if (chars.length > 0) lineWidth -= letterSpacing;
     widestLineWidth = Math.max(widestLineWidth, lineWidth);
   }
-  const actualWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  const actualWidth = autoWidth ? Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth) : maxWidth;
+  const textHeight = lines.length * fontSize * lineHeight;
+  const actualHeight = textHeight + paddingTop + paddingBottom;
   let actualX;
-  switch (boxAlign) {
-    case "right":
-      actualX = elem.x + maxWidth - actualWidth;
-      break;
-    case "center":
-      actualX = elem.x + (maxWidth - actualWidth) / 2;
-      break;
-    case "left":
-    default:
-      actualX = elem.x;
-      break;
+  if (autoWidth) {
+    switch (boxAlign) {
+      case "right":
+        actualX = elem.x + maxWidth - actualWidth;
+        break;
+      case "center":
+        actualX = elem.x + (maxWidth - actualWidth) / 2;
+        break;
+      case "left":
+      default:
+        actualX = elem.x;
+        break;
+    }
+  } else {
+    actualX = elem.x;
   }
-  return { actualWidth, actualX };
+  return { actualWidth, actualX, actualHeight, lineCount: lines.length };
 }
 function detectCircularDependency(elements, startId, axis, visited = /* @__PURE__ */ new Set(), path = []) {
   if (visited.has(startId)) {
@@ -996,18 +1007,24 @@ function resolveElementPositions(elements, textValues) {
   for (const elem of elements) {
     resolvedX.set(elem.id, { x: elem.x, width: elem.width });
     resolvedY.set(elem.id, { y: elem.y, height: elem.height });
-    if (elem.type === "text" && elem.autoWidth) {
+    if (elem.type === "text") {
       const textContent = getTextContent(elem);
-      const autoWidthResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
-      if (autoWidthResult) {
-        referenceX.set(elem.id, { x: autoWidthResult.actualX, width: autoWidthResult.actualWidth });
+      const autoResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+      if (autoResult) {
+        if (elem.autoWidth) {
+          referenceX.set(elem.id, { x: autoResult.actualX, width: autoResult.actualWidth });
+        } else {
+          referenceX.set(elem.id, { x: elem.x, width: elem.width });
+        }
+        referenceY.set(elem.id, { y: elem.y, height: autoResult.actualHeight });
       } else {
         referenceX.set(elem.id, { x: elem.x, width: elem.width });
+        referenceY.set(elem.id, { y: elem.y, height: elem.height });
       }
     } else {
       referenceX.set(elem.id, { x: elem.x, width: elem.width });
+      referenceY.set(elem.id, { y: elem.y, height: elem.height });
     }
-    referenceY.set(elem.id, { y: elem.y, height: elem.height });
   }
   for (const elem of sortedX) {
     if (elem.relativePositionX) {
@@ -1024,11 +1041,16 @@ function resolveElementPositions(elements, textValues) {
           elem.relativePositionX.offset
         );
         resolvedX.set(elem.id, { x: newX, width: elem.width });
-        if (elem.type === "text" && elem.autoWidth) {
+        if (elem.type === "text") {
           const textContent = getTextContent(elem);
-          const autoWidthResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
-          if (autoWidthResult) {
-            referenceX.set(elem.id, { x: autoWidthResult.actualX, width: autoWidthResult.actualWidth });
+          const autoResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
+          if (autoResult) {
+            if (elem.autoWidth) {
+              referenceX.set(elem.id, { x: autoResult.actualX, width: autoResult.actualWidth });
+            } 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 });
           }
@@ -1053,7 +1075,17 @@ function resolveElementPositions(elements, textValues) {
           elem.relativePositionY.offset
         );
         resolvedY.set(elem.id, { y: newY, height: elem.height });
-        referenceY.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 });
+          }
+        } else {
+          referenceY.set(elem.id, { y: newY, height: elem.height });
+        }
       }
     }
   }

package/dist/index.mjs

@@ -693,7 +693,7 @@ var FONT_FAMILIES2 = {
   arial: "Arial, sans-serif"
 };
 function calculateAutoWidthDimensions(elem, textContent, ctx) {
-  if (elem.type !== "text" || !elem.autoWidth) {
+  if (elem.type !== "text") {
     return null;
   }
   let measureCtx = ctx;
@@ -710,9 +710,13 @@ function calculateAutoWidthDimensions(elem, textContent, ctx) {
   const fontType = elem.font ?? "tiktok";
   const paddingLeft = elem.paddingLeft ?? 0;
   const paddingRight = elem.paddingRight ?? 0;
+  const paddingTop = elem.paddingTop ?? 0;
+  const paddingBottom = elem.paddingBottom ?? 0;
   const letterSpacing = elem.letterSpacing ?? 0;
+  const lineHeight = elem.lineHeight ?? 1.2;
   const maxWidth = elem.width;
   const boxAlign = elem.boxAlign ?? "left";
+  const autoWidth = elem.autoWidth ?? false;
   const fontFamily = FONT_FAMILIES2[fontType] ?? FONT_FAMILIES2.tiktok;
   measureCtx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
   const availableWidth = maxWidth - paddingLeft - paddingRight;
@@ -733,6 +737,7 @@ function calculateAutoWidthDimensions(elem, textContent, ctx) {
     }
   }
   if (currentLine) lines.push(currentLine);
+  if (lines.length === 0) lines.push("");
   let widestLineWidth = 0;
   for (const line of lines) {
     const chars = [...line];
@@ -743,21 +748,27 @@ function calculateAutoWidthDimensions(elem, textContent, ctx) {
     if (chars.length > 0) lineWidth -= letterSpacing;
     widestLineWidth = Math.max(widestLineWidth, lineWidth);
   }
-  const actualWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  const actualWidth = autoWidth ? Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth) : maxWidth;
+  const textHeight = lines.length * fontSize * lineHeight;
+  const actualHeight = textHeight + paddingTop + paddingBottom;
   let actualX;
-  switch (boxAlign) {
-    case "right":
-      actualX = elem.x + maxWidth - actualWidth;
-      break;
-    case "center":
-      actualX = elem.x + (maxWidth - actualWidth) / 2;
-      break;
-    case "left":
-    default:
-      actualX = elem.x;
-      break;
+  if (autoWidth) {
+    switch (boxAlign) {
+      case "right":
+        actualX = elem.x + maxWidth - actualWidth;
+        break;
+      case "center":
+        actualX = elem.x + (maxWidth - actualWidth) / 2;
+        break;
+      case "left":
+      default:
+        actualX = elem.x;
+        break;
+    }
+  } else {
+    actualX = elem.x;
   }
-  return { actualWidth, actualX };
+  return { actualWidth, actualX, actualHeight, lineCount: lines.length };
 }
 function detectCircularDependency(elements, startId, axis, visited = /* @__PURE__ */ new Set(), path = []) {
   if (visited.has(startId)) {
@@ -910,18 +921,24 @@ function resolveElementPositions(elements, textValues) {
   for (const elem of elements) {
     resolvedX.set(elem.id, { x: elem.x, width: elem.width });
     resolvedY.set(elem.id, { y: elem.y, height: elem.height });
-    if (elem.type === "text" && elem.autoWidth) {
+    if (elem.type === "text") {
       const textContent = getTextContent(elem);
-      const autoWidthResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
-      if (autoWidthResult) {
-        referenceX.set(elem.id, { x: autoWidthResult.actualX, width: autoWidthResult.actualWidth });
+      const autoResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+      if (autoResult) {
+        if (elem.autoWidth) {
+          referenceX.set(elem.id, { x: autoResult.actualX, width: autoResult.actualWidth });
+        } else {
+          referenceX.set(elem.id, { x: elem.x, width: elem.width });
+        }
+        referenceY.set(elem.id, { y: elem.y, height: autoResult.actualHeight });
       } else {
         referenceX.set(elem.id, { x: elem.x, width: elem.width });
+        referenceY.set(elem.id, { y: elem.y, height: elem.height });
       }
     } else {
       referenceX.set(elem.id, { x: elem.x, width: elem.width });
+      referenceY.set(elem.id, { y: elem.y, height: elem.height });
     }
-    referenceY.set(elem.id, { y: elem.y, height: elem.height });
   }
   for (const elem of sortedX) {
     if (elem.relativePositionX) {
@@ -938,11 +955,16 @@ function resolveElementPositions(elements, textValues) {
           elem.relativePositionX.offset
         );
         resolvedX.set(elem.id, { x: newX, width: elem.width });
-        if (elem.type === "text" && elem.autoWidth) {
+        if (elem.type === "text") {
           const textContent = getTextContent(elem);
-          const autoWidthResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
-          if (autoWidthResult) {
-            referenceX.set(elem.id, { x: autoWidthResult.actualX, width: autoWidthResult.actualWidth });
+          const autoResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
+          if (autoResult) {
+            if (elem.autoWidth) {
+              referenceX.set(elem.id, { x: autoResult.actualX, width: autoResult.actualWidth });
+            } 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 });
           }
@@ -967,7 +989,17 @@ function resolveElementPositions(elements, textValues) {
           elem.relativePositionY.offset
         );
         resolvedY.set(elem.id, { y: newY, height: elem.height });
-        referenceY.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 });
+          }
+        } else {
+          referenceY.set(elem.id, { y: newY, height: elem.height });
+        }
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.5.22",
+  "version": "1.5.23",
   "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",