ugcinc-render 1.5.0 → 1.5.2

package/dist/index.js

@@ -294,6 +294,55 @@ function hexToRgba(hex, opacity = 100) {
 
 // src/components/TextElement.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+function calculateAutoWidth({
+  text,
+  maxWidth,
+  paddingLeft,
+  paddingRight,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  letterSpacing
+}) {
+  if (typeof document === "undefined") {
+    throw new Error("calculateAutoWidth requires a browser environment with document available");
+  }
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get 2D canvas context for text measurement");
+  }
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  const words = text.split(" ");
+  const lines = [];
+  let currentLine = "";
+  for (const word of words) {
+    if (!word) continue;
+    const testLine = currentLine + (currentLine ? " " : "") + word;
+    const charCount = [...testLine].length;
+    const extraSpacing = charCount > 1 ? (charCount - 1) * letterSpacing : 0;
+    const totalWidth = ctx.measureText(testLine).width + extraSpacing;
+    if (totalWidth > availableWidth && currentLine) {
+      lines.push(currentLine);
+      currentLine = word;
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine) lines.push(currentLine);
+  let widestLineWidth = 0;
+  for (const line of lines) {
+    const chars = [...line];
+    let lineWidth = 0;
+    for (const char of chars) {
+      lineWidth += ctx.measureText(char).width + letterSpacing;
+    }
+    if (chars.length > 0) lineWidth -= letterSpacing;
+    widestLineWidth = Math.max(widestLineWidth, lineWidth);
+  }
+  return Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+}
 function TextElement({ segment, scale = 1 }) {
   const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
   const fontSize = (segment.fontSize ?? TEXT_DEFAULTS.fontSize) * scale;
@@ -306,10 +355,10 @@ 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 ?? uniformPadding;
-  const paddingRight = segment.paddingRight ?? uniformPadding;
-  const paddingBottom = segment.paddingBottom ?? uniformPadding;
-  const paddingLeft = segment.paddingLeft ?? uniformPadding;
+  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 x = segment.xOffset * scale;
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
@@ -321,6 +370,19 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
+  const calculatedWidth = (0, import_react.useMemo)(() => {
+    if (!autoWidth) return width;
+    return calculateAutoWidth({
+      text: segment.text,
+      maxWidth: width,
+      paddingLeft,
+      paddingRight,
+      fontSize,
+      fontWeight,
+      fontFamily,
+      letterSpacing
+    });
+  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing]);
   const borderRadiusStyle = (0, import_react.useMemo)(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);
@@ -344,8 +406,10 @@ function TextElement({ segment, scale = 1 }) {
   }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
   const backgroundBoxStyle = (0, import_react.useMemo)(() => {
     const baseStyle = autoWidth ? {
-      width: "fit-content",
-      maxWidth: "100%"
+      // Use explicit calculated width instead of fit-content
+      // This fixes the issue where multi-line text doesn't shrink to widest line
+      width: calculatedWidth,
+      maxWidth: width
     } : {
       // When not autoWidth, let the text div handle everything
       display: "flex",
@@ -359,7 +423,7 @@ function TextElement({ segment, scale = 1 }) {
       backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
       borderRadius: borderRadiusStyle
     };
-  }, [autoWidth, backgroundColor, backgroundOpacity, borderRadiusStyle]);
+  }, [autoWidth, calculatedWidth, width, backgroundColor, backgroundOpacity, borderRadiusStyle]);
   const textStyle = (0, import_react.useMemo)(() => ({
     fontFamily,
     fontSize,

package/dist/index.mjs

@@ -220,6 +220,55 @@ function hexToRgba(hex, opacity = 100) {
 
 // src/components/TextElement.tsx
 import { jsx } from "react/jsx-runtime";
+function calculateAutoWidth({
+  text,
+  maxWidth,
+  paddingLeft,
+  paddingRight,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  letterSpacing
+}) {
+  if (typeof document === "undefined") {
+    throw new Error("calculateAutoWidth requires a browser environment with document available");
+  }
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get 2D canvas context for text measurement");
+  }
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
+  const words = text.split(" ");
+  const lines = [];
+  let currentLine = "";
+  for (const word of words) {
+    if (!word) continue;
+    const testLine = currentLine + (currentLine ? " " : "") + word;
+    const charCount = [...testLine].length;
+    const extraSpacing = charCount > 1 ? (charCount - 1) * letterSpacing : 0;
+    const totalWidth = ctx.measureText(testLine).width + extraSpacing;
+    if (totalWidth > availableWidth && currentLine) {
+      lines.push(currentLine);
+      currentLine = word;
+    } else {
+      currentLine = testLine;
+    }
+  }
+  if (currentLine) lines.push(currentLine);
+  let widestLineWidth = 0;
+  for (const line of lines) {
+    const chars = [...line];
+    let lineWidth = 0;
+    for (const char of chars) {
+      lineWidth += ctx.measureText(char).width + letterSpacing;
+    }
+    if (chars.length > 0) lineWidth -= letterSpacing;
+    widestLineWidth = Math.max(widestLineWidth, lineWidth);
+  }
+  return Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+}
 function TextElement({ segment, scale = 1 }) {
   const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
   const fontSize = (segment.fontSize ?? TEXT_DEFAULTS.fontSize) * scale;
@@ -232,10 +281,10 @@ 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 ?? uniformPadding;
-  const paddingRight = segment.paddingRight ?? uniformPadding;
-  const paddingBottom = segment.paddingBottom ?? uniformPadding;
-  const paddingLeft = segment.paddingLeft ?? uniformPadding;
+  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 x = segment.xOffset * scale;
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
@@ -247,6 +296,19 @@ function TextElement({ segment, scale = 1 }) {
   const backgroundOpacity = segment.backgroundOpacity ?? TEXT_DEFAULTS.backgroundOpacity;
   const backgroundBorderRadius = segment.backgroundBorderRadius;
   const fontFamily = getFontFamily(fontType);
+  const calculatedWidth = useMemo(() => {
+    if (!autoWidth) return width;
+    return calculateAutoWidth({
+      text: segment.text,
+      maxWidth: width,
+      paddingLeft,
+      paddingRight,
+      fontSize,
+      fontWeight,
+      fontFamily,
+      letterSpacing
+    });
+  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing]);
   const borderRadiusStyle = useMemo(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);
@@ -270,8 +332,10 @@ function TextElement({ segment, scale = 1 }) {
   }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
   const backgroundBoxStyle = useMemo(() => {
     const baseStyle = autoWidth ? {
-      width: "fit-content",
-      maxWidth: "100%"
+      // Use explicit calculated width instead of fit-content
+      // This fixes the issue where multi-line text doesn't shrink to widest line
+      width: calculatedWidth,
+      maxWidth: width
     } : {
       // When not autoWidth, let the text div handle everything
       display: "flex",
@@ -285,7 +349,7 @@ function TextElement({ segment, scale = 1 }) {
       backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
       borderRadius: borderRadiusStyle
     };
-  }, [autoWidth, backgroundColor, backgroundOpacity, borderRadiusStyle]);
+  }, [autoWidth, calculatedWidth, width, backgroundColor, backgroundOpacity, borderRadiusStyle]);
   const textStyle = useMemo(() => ({
     fontFamily,
     fontSize,

package/package.json

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