ugcinc-render 1.5.8 → 1.5.10

package/dist/index.d.mts

@@ -290,6 +290,10 @@ interface ImageEditorElement {
     paddingRight?: number;
     paddingBottom?: number;
     paddingLeft?: number;
+    multiLineExtraPaddingTop?: number;
+    multiLineExtraPaddingRight?: number;
+    multiLineExtraPaddingBottom?: number;
+    multiLineExtraPaddingLeft?: number;
     /** When true, box shrinks to fit content (width becomes max width) */
     autoWidth?: boolean;
     /** Which side the box anchors to when autoWidth is true */
@@ -618,6 +622,14 @@ interface TextSegment extends VisualSegment {
     paddingBottom?: number;
     /** Left padding in pixels (overrides uniform padding) */
     paddingLeft?: number;
+    /** Extra top padding added when text has 2+ lines */
+    multiLineExtraPaddingTop?: number;
+    /** Extra right padding added when text has 2+ lines */
+    multiLineExtraPaddingRight?: number;
+    /** Extra bottom padding added when text has 2+ lines */
+    multiLineExtraPaddingBottom?: number;
+    /** Extra left padding added when text has 2+ lines */
+    multiLineExtraPaddingLeft?: number;
     /** Font family (default: 'arial') */
     fontType?: FontType;
     /** Font size in pixels (default: 40) */

package/dist/index.d.ts

@@ -290,6 +290,10 @@ interface ImageEditorElement {
     paddingRight?: number;
     paddingBottom?: number;
     paddingLeft?: number;
+    multiLineExtraPaddingTop?: number;
+    multiLineExtraPaddingRight?: number;
+    multiLineExtraPaddingBottom?: number;
+    multiLineExtraPaddingLeft?: number;
     /** When true, box shrinks to fit content (width becomes max width) */
     autoWidth?: boolean;
     /** Which side the box anchors to when autoWidth is true */
@@ -618,6 +622,14 @@ interface TextSegment extends VisualSegment {
     paddingBottom?: number;
     /** Left padding in pixels (overrides uniform padding) */
     paddingLeft?: number;
+    /** Extra top padding added when text has 2+ lines */
+    multiLineExtraPaddingTop?: number;
+    /** Extra right padding added when text has 2+ lines */
+    multiLineExtraPaddingRight?: number;
+    /** Extra bottom padding added when text has 2+ lines */
+    multiLineExtraPaddingBottom?: number;
+    /** Extra left padding added when text has 2+ lines */
+    multiLineExtraPaddingLeft?: number;
     /** Font family (default: 'arial') */
     fontType?: FontType;
     /** Font size in pixels (default: 40) */

package/dist/index.js

@@ -416,10 +416,15 @@ function TextElement({ segment, scale = 1 }) {
   const strokeColor = segment.strokeColor;
   const strokeWidth = (segment.strokeWidth ?? TEXT_DEFAULTS.strokeWidth) * scale;
   const uniformPadding = (segment.padding ?? TEXT_DEFAULTS.padding) * scale;
-  const paddingTop = segment.paddingTop !== void 0 ? segment.paddingTop * scale : uniformPadding;
-  const paddingRight = segment.paddingRight !== void 0 ? segment.paddingRight * scale : uniformPadding;
-  const paddingBottom = segment.paddingBottom !== void 0 ? segment.paddingBottom * scale : uniformPadding;
-  const paddingLeft = segment.paddingLeft !== void 0 ? segment.paddingLeft * scale : uniformPadding;
+  const basePaddingTop = segment.paddingTop !== void 0 ? segment.paddingTop * scale : uniformPadding;
+  const basePaddingRight = segment.paddingRight !== void 0 ? segment.paddingRight * scale : uniformPadding;
+  const basePaddingBottom = segment.paddingBottom !== void 0 ? segment.paddingBottom * scale : uniformPadding;
+  const basePaddingLeft = segment.paddingLeft !== void 0 ? segment.paddingLeft * scale : uniformPadding;
+  const extraPaddingTop = (segment.multiLineExtraPaddingTop ?? 0) * scale;
+  const extraPaddingRight = (segment.multiLineExtraPaddingRight ?? 0) * scale;
+  const extraPaddingBottom = (segment.multiLineExtraPaddingBottom ?? 0) * scale;
+  const extraPaddingLeft = (segment.multiLineExtraPaddingLeft ?? 0) * scale;
+  const hasExtraPadding = extraPaddingTop > 0 || extraPaddingRight > 0 || extraPaddingBottom > 0 || extraPaddingLeft > 0;
   const x = segment.xOffset * scale;
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
@@ -431,22 +436,86 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
-  const autoWidthResult = (0, import_react.useMemo)(() => {
-    if (!autoWidth) return null;
-    return calculateAutoWidthAndLines({
+  const { autoWidthResult, isMultiLine } = (0, import_react.useMemo)(() => {
+    if (!autoWidth && !hasExtraPadding) {
+      return {
+        autoWidthResult: null,
+        isMultiLine: false
+      };
+    }
+    const result = calculateAutoWidthAndLines({
       text: segment.text,
       maxWidth: width,
-      paddingLeft,
-      paddingRight,
+      paddingLeft: basePaddingLeft,
+      paddingRight: basePaddingRight,
       fontSize,
       fontWeight,
       fontFamily,
       letterSpacing,
       lineHeight
     });
-  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing, lineHeight]);
-  const calculatedWidth = autoWidthResult?.width ?? width;
+    return {
+      autoWidthResult: autoWidth ? result : null,
+      isMultiLine: result.lines.length >= 2
+    };
+  }, [
+    autoWidth,
+    segment.text,
+    width,
+    basePaddingLeft,
+    basePaddingRight,
+    hasExtraPadding,
+    fontSize,
+    fontWeight,
+    fontFamily,
+    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);
@@ -1113,6 +1182,10 @@ function elementToTextSegment(elem) {
     paddingRight: elem.paddingRight,
     paddingBottom: elem.paddingBottom,
     paddingLeft: elem.paddingLeft,
+    multiLineExtraPaddingTop: elem.multiLineExtraPaddingTop,
+    multiLineExtraPaddingRight: elem.multiLineExtraPaddingRight,
+    multiLineExtraPaddingBottom: elem.multiLineExtraPaddingBottom,
+    multiLineExtraPaddingLeft: elem.multiLineExtraPaddingLeft,
     autoWidth: elem.autoWidth,
     boxAlign: elem.boxAlign
   };

package/dist/index.mjs

@@ -332,10 +332,15 @@ function TextElement({ segment, scale = 1 }) {
   const strokeColor = segment.strokeColor;
   const strokeWidth = (segment.strokeWidth ?? TEXT_DEFAULTS.strokeWidth) * scale;
   const uniformPadding = (segment.padding ?? TEXT_DEFAULTS.padding) * scale;
-  const paddingTop = segment.paddingTop !== void 0 ? segment.paddingTop * scale : uniformPadding;
-  const paddingRight = segment.paddingRight !== void 0 ? segment.paddingRight * scale : uniformPadding;
-  const paddingBottom = segment.paddingBottom !== void 0 ? segment.paddingBottom * scale : uniformPadding;
-  const paddingLeft = segment.paddingLeft !== void 0 ? segment.paddingLeft * scale : uniformPadding;
+  const basePaddingTop = segment.paddingTop !== void 0 ? segment.paddingTop * scale : uniformPadding;
+  const basePaddingRight = segment.paddingRight !== void 0 ? segment.paddingRight * scale : uniformPadding;
+  const basePaddingBottom = segment.paddingBottom !== void 0 ? segment.paddingBottom * scale : uniformPadding;
+  const basePaddingLeft = segment.paddingLeft !== void 0 ? segment.paddingLeft * scale : uniformPadding;
+  const extraPaddingTop = (segment.multiLineExtraPaddingTop ?? 0) * scale;
+  const extraPaddingRight = (segment.multiLineExtraPaddingRight ?? 0) * scale;
+  const extraPaddingBottom = (segment.multiLineExtraPaddingBottom ?? 0) * scale;
+  const extraPaddingLeft = (segment.multiLineExtraPaddingLeft ?? 0) * scale;
+  const hasExtraPadding = extraPaddingTop > 0 || extraPaddingRight > 0 || extraPaddingBottom > 0 || extraPaddingLeft > 0;
   const x = segment.xOffset * scale;
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
@@ -347,22 +352,86 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
-  const autoWidthResult = useMemo(() => {
-    if (!autoWidth) return null;
-    return calculateAutoWidthAndLines({
+  const { autoWidthResult, isMultiLine } = useMemo(() => {
+    if (!autoWidth && !hasExtraPadding) {
+      return {
+        autoWidthResult: null,
+        isMultiLine: false
+      };
+    }
+    const result = calculateAutoWidthAndLines({
       text: segment.text,
       maxWidth: width,
-      paddingLeft,
-      paddingRight,
+      paddingLeft: basePaddingLeft,
+      paddingRight: basePaddingRight,
       fontSize,
       fontWeight,
       fontFamily,
       letterSpacing,
       lineHeight
     });
-  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing, lineHeight]);
-  const calculatedWidth = autoWidthResult?.width ?? width;
+    return {
+      autoWidthResult: autoWidth ? result : null,
+      isMultiLine: result.lines.length >= 2
+    };
+  }, [
+    autoWidth,
+    segment.text,
+    width,
+    basePaddingLeft,
+    basePaddingRight,
+    hasExtraPadding,
+    fontSize,
+    fontWeight,
+    fontFamily,
+    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);
@@ -1029,6 +1098,10 @@ function elementToTextSegment(elem) {
     paddingRight: elem.paddingRight,
     paddingBottom: elem.paddingBottom,
     paddingLeft: elem.paddingLeft,
+    multiLineExtraPaddingTop: elem.multiLineExtraPaddingTop,
+    multiLineExtraPaddingRight: elem.multiLineExtraPaddingRight,
+    multiLineExtraPaddingBottom: elem.multiLineExtraPaddingBottom,
+    multiLineExtraPaddingLeft: elem.multiLineExtraPaddingLeft,
     autoWidth: elem.autoWidth,
     boxAlign: elem.boxAlign
   };

package/package.json

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