ugcinc-render 1.5.22 → 1.5.24

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)) {
@@ -933,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) {
@@ -996,18 +1009,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) {
@@ -1016,21 +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" && elem.autoWidth) {
-          const textContent = getTextContent(elem);
-          const autoWidthResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
-          if (autoWidthResult) {
-            referenceX.set(elem.id, { x: autoWidthResult.actualX, width: autoWidthResult.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 });
+            }
           } 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 });
@@ -1045,15 +1080,29 @@ 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 });
-        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 });
+        }
       }
     }
   }

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)) {
@@ -847,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) {
@@ -910,18 +923,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) {
@@ -930,21 +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" && elem.autoWidth) {
-          const textContent = getTextContent(elem);
-          const autoWidthResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
-          if (autoWidthResult) {
-            referenceX.set(elem.id, { x: autoWidthResult.actualX, width: autoWidthResult.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 });
+            }
           } 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 });
@@ -959,15 +994,29 @@ 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 });
-        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 });
+        }
       }
     }
   }

package/package.json

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