ugcinc-render 1.5.10 → 1.5.11

package/dist/index.js

@@ -436,14 +436,22 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
-  const { autoWidthResult, isMultiLine } = (0, import_react.useMemo)(() => {
+  const { calculatedWidth, calculatedLines, paddingTop, paddingRight, paddingBottom, paddingLeft } = (0, import_react.useMemo)(() => {
+    let finalPaddingTop = basePaddingTop;
+    let finalPaddingRight = basePaddingRight;
+    let finalPaddingBottom = basePaddingBottom;
+    let finalPaddingLeft = basePaddingLeft;
     if (!autoWidth && !hasExtraPadding) {
       return {
-        autoWidthResult: null,
-        isMultiLine: false
+        calculatedWidth: width,
+        calculatedLines: [segment.text],
+        paddingTop: finalPaddingTop,
+        paddingRight: finalPaddingRight,
+        paddingBottom: finalPaddingBottom,
+        paddingLeft: finalPaddingLeft
       };
     }
-    const result = calculateAutoWidthAndLines({
+    const baseResult = calculateAutoWidthAndLines({
       text: segment.text,
       maxWidth: width,
       paddingLeft: basePaddingLeft,
@@ -454,16 +462,47 @@ function TextElement({ segment, scale = 1 }) {
       letterSpacing,
       lineHeight
     });
+    const isMultiLine = baseResult.lines.length >= 2;
+    if (isMultiLine) {
+      finalPaddingTop = basePaddingTop + extraPaddingTop;
+      finalPaddingRight = basePaddingRight + extraPaddingRight;
+      finalPaddingBottom = basePaddingBottom + extraPaddingBottom;
+      finalPaddingLeft = basePaddingLeft + extraPaddingLeft;
+    }
+    let finalResult = baseResult;
+    if (isMultiLine && (extraPaddingLeft > 0 || extraPaddingRight > 0)) {
+      finalResult = calculateAutoWidthAndLines({
+        text: segment.text,
+        maxWidth: width,
+        paddingLeft: finalPaddingLeft,
+        paddingRight: finalPaddingRight,
+        fontSize,
+        fontWeight,
+        fontFamily,
+        letterSpacing,
+        lineHeight
+      });
+    }
     return {
-      autoWidthResult: autoWidth ? result : null,
-      isMultiLine: result.lines.length >= 2
+      calculatedWidth: autoWidth ? finalResult.width : width,
+      calculatedLines: autoWidth ? finalResult.lines : [segment.text],
+      paddingTop: finalPaddingTop,
+      paddingRight: finalPaddingRight,
+      paddingBottom: finalPaddingBottom,
+      paddingLeft: finalPaddingLeft
     };
   }, [
     autoWidth,
     segment.text,
     width,
-    basePaddingLeft,
+    basePaddingTop,
     basePaddingRight,
+    basePaddingBottom,
+    basePaddingLeft,
+    extraPaddingTop,
+    extraPaddingRight,
+    extraPaddingBottom,
+    extraPaddingLeft,
     hasExtraPadding,
     fontSize,
     fontWeight,
@@ -471,51 +510,6 @@ function TextElement({ segment, scale = 1 }) {
     letterSpacing,
     lineHeight
   ]);
-  const calculatedLines = autoWidthResult?.lines ?? [segment.text];
-  const paddingTop = basePaddingTop + (isMultiLine ? extraPaddingTop : 0);
-  const paddingRight = basePaddingRight + (isMultiLine ? extraPaddingRight : 0);
-  const paddingBottom = basePaddingBottom + (isMultiLine ? extraPaddingBottom : 0);
-  const paddingLeft = basePaddingLeft + (isMultiLine ? extraPaddingLeft : 0);
-  const calculatedWidth = (0, import_react.useMemo)(() => {
-    if (!autoWidth) return width;
-    if (!isMultiLine || extraPaddingLeft === 0 && extraPaddingRight === 0) {
-      return autoWidthResult?.width ?? width;
-    }
-    if (typeof document === "undefined") return width;
-    const measureSpan = document.createElement("span");
-    measureSpan.style.cssText = `
-      position: absolute;
-      visibility: hidden;
-      pointer-events: none;
-      font-family: ${fontFamily};
-      font-size: ${fontSize}px;
-      font-weight: ${fontWeight};
-      letter-spacing: ${letterSpacing}px;
-      white-space: nowrap;
-    `;
-    document.body.appendChild(measureSpan);
-    let widestLineWidth = 0;
-    for (const line of calculatedLines) {
-      measureSpan.textContent = line;
-      widestLineWidth = Math.max(widestLineWidth, measureSpan.getBoundingClientRect().width);
-    }
-    document.body.removeChild(measureSpan);
-    return Math.min(widestLineWidth + paddingLeft + paddingRight, width);
-  }, [
-    autoWidth,
-    autoWidthResult,
-    width,
-    isMultiLine,
-    extraPaddingLeft,
-    extraPaddingRight,
-    paddingLeft,
-    paddingRight,
-    calculatedLines,
-    fontFamily,
-    fontSize,
-    fontWeight,
-    letterSpacing
-  ]);
   const borderRadiusStyle = (0, import_react.useMemo)(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);

package/dist/index.mjs

@@ -352,14 +352,22 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
-  const { autoWidthResult, isMultiLine } = useMemo(() => {
+  const { calculatedWidth, calculatedLines, paddingTop, paddingRight, paddingBottom, paddingLeft } = useMemo(() => {
+    let finalPaddingTop = basePaddingTop;
+    let finalPaddingRight = basePaddingRight;
+    let finalPaddingBottom = basePaddingBottom;
+    let finalPaddingLeft = basePaddingLeft;
     if (!autoWidth && !hasExtraPadding) {
       return {
-        autoWidthResult: null,
-        isMultiLine: false
+        calculatedWidth: width,
+        calculatedLines: [segment.text],
+        paddingTop: finalPaddingTop,
+        paddingRight: finalPaddingRight,
+        paddingBottom: finalPaddingBottom,
+        paddingLeft: finalPaddingLeft
       };
     }
-    const result = calculateAutoWidthAndLines({
+    const baseResult = calculateAutoWidthAndLines({
       text: segment.text,
       maxWidth: width,
       paddingLeft: basePaddingLeft,
@@ -370,16 +378,47 @@ function TextElement({ segment, scale = 1 }) {
       letterSpacing,
       lineHeight
     });
+    const isMultiLine = baseResult.lines.length >= 2;
+    if (isMultiLine) {
+      finalPaddingTop = basePaddingTop + extraPaddingTop;
+      finalPaddingRight = basePaddingRight + extraPaddingRight;
+      finalPaddingBottom = basePaddingBottom + extraPaddingBottom;
+      finalPaddingLeft = basePaddingLeft + extraPaddingLeft;
+    }
+    let finalResult = baseResult;
+    if (isMultiLine && (extraPaddingLeft > 0 || extraPaddingRight > 0)) {
+      finalResult = calculateAutoWidthAndLines({
+        text: segment.text,
+        maxWidth: width,
+        paddingLeft: finalPaddingLeft,
+        paddingRight: finalPaddingRight,
+        fontSize,
+        fontWeight,
+        fontFamily,
+        letterSpacing,
+        lineHeight
+      });
+    }
     return {
-      autoWidthResult: autoWidth ? result : null,
-      isMultiLine: result.lines.length >= 2
+      calculatedWidth: autoWidth ? finalResult.width : width,
+      calculatedLines: autoWidth ? finalResult.lines : [segment.text],
+      paddingTop: finalPaddingTop,
+      paddingRight: finalPaddingRight,
+      paddingBottom: finalPaddingBottom,
+      paddingLeft: finalPaddingLeft
     };
   }, [
     autoWidth,
     segment.text,
     width,
-    basePaddingLeft,
+    basePaddingTop,
     basePaddingRight,
+    basePaddingBottom,
+    basePaddingLeft,
+    extraPaddingTop,
+    extraPaddingRight,
+    extraPaddingBottom,
+    extraPaddingLeft,
     hasExtraPadding,
     fontSize,
     fontWeight,
@@ -387,51 +426,6 @@ function TextElement({ segment, scale = 1 }) {
     letterSpacing,
     lineHeight
   ]);
-  const calculatedLines = autoWidthResult?.lines ?? [segment.text];
-  const paddingTop = basePaddingTop + (isMultiLine ? extraPaddingTop : 0);
-  const paddingRight = basePaddingRight + (isMultiLine ? extraPaddingRight : 0);
-  const paddingBottom = basePaddingBottom + (isMultiLine ? extraPaddingBottom : 0);
-  const paddingLeft = basePaddingLeft + (isMultiLine ? extraPaddingLeft : 0);
-  const calculatedWidth = useMemo(() => {
-    if (!autoWidth) return width;
-    if (!isMultiLine || extraPaddingLeft === 0 && extraPaddingRight === 0) {
-      return autoWidthResult?.width ?? width;
-    }
-    if (typeof document === "undefined") return width;
-    const measureSpan = document.createElement("span");
-    measureSpan.style.cssText = `
-      position: absolute;
-      visibility: hidden;
-      pointer-events: none;
-      font-family: ${fontFamily};
-      font-size: ${fontSize}px;
-      font-weight: ${fontWeight};
-      letter-spacing: ${letterSpacing}px;
-      white-space: nowrap;
-    `;
-    document.body.appendChild(measureSpan);
-    let widestLineWidth = 0;
-    for (const line of calculatedLines) {
-      measureSpan.textContent = line;
-      widestLineWidth = Math.max(widestLineWidth, measureSpan.getBoundingClientRect().width);
-    }
-    document.body.removeChild(measureSpan);
-    return Math.min(widestLineWidth + paddingLeft + paddingRight, width);
-  }, [
-    autoWidth,
-    autoWidthResult,
-    width,
-    isMultiLine,
-    extraPaddingLeft,
-    extraPaddingRight,
-    paddingLeft,
-    paddingRight,
-    calculatedLines,
-    fontFamily,
-    fontSize,
-    fontWeight,
-    letterSpacing
-  ]);
   const borderRadiusStyle = useMemo(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);

package/package.json

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