ugcinc-render 1.5.2 → 1.5.4

package/dist/index.js

@@ -302,28 +302,70 @@ function calculateAutoWidth({
   fontSize,
   fontWeight,
   fontFamily,
-  letterSpacing
+  letterSpacing,
+  lineHeight
 }) {
   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");
+  const container = document.createElement("div");
+  container.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    width: ${maxWidth}px;
+    padding: 0 ${paddingRight}px 0 ${paddingLeft}px;
+    box-sizing: border-box;
+    font-family: ${fontFamily};
+    font-size: ${fontSize}px;
+    font-weight: ${fontWeight};
+    letter-spacing: ${letterSpacing}px;
+    line-height: ${lineHeight};
+    white-space: pre-wrap;
+    word-break: break-word;
+  `;
+  container.textContent = text;
+  document.body.appendChild(container);
+  const totalHeight = container.offsetHeight;
+  const lineHeightPx = fontSize * lineHeight;
+  const numLines = Math.max(1, Math.round(totalHeight / lineHeightPx));
+  if (numLines === 1) {
+    const span = document.createElement("span");
+    span.style.cssText = `
+      font-family: ${fontFamily};
+      font-size: ${fontSize}px;
+      font-weight: ${fontWeight};
+      letter-spacing: ${letterSpacing}px;
+      white-space: nowrap;
+    `;
+    span.textContent = text;
+    document.body.appendChild(span);
+    const textWidth = span.offsetWidth;
+    document.body.removeChild(span);
+    document.body.removeChild(container);
+    return Math.min(textWidth + paddingLeft + paddingRight, maxWidth);
   }
-  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-  const availableWidth = maxWidth - paddingLeft - paddingRight;
   const words = text.split(" ");
   const lines = [];
   let currentLine = "";
+  const measureSpan = document.createElement("span");
+  measureSpan.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    font-family: ${fontFamily};
+    font-size: ${fontSize}px;
+    font-weight: ${fontWeight};
+    letter-spacing: ${letterSpacing}px;
+    white-space: nowrap;
+  `;
+  document.body.appendChild(measureSpan);
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
   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) {
+    measureSpan.textContent = testLine;
+    const testWidth = measureSpan.offsetWidth;
+    if (testWidth > availableWidth && currentLine) {
       lines.push(currentLine);
       currentLine = word;
     } else {
@@ -333,14 +375,11 @@ function calculateAutoWidth({
   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);
+    measureSpan.textContent = line;
+    widestLineWidth = Math.max(widestLineWidth, measureSpan.offsetWidth);
   }
+  document.body.removeChild(measureSpan);
+  document.body.removeChild(container);
   return Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
 }
 function TextElement({ segment, scale = 1 }) {
@@ -380,9 +419,10 @@ function TextElement({ segment, scale = 1 }) {
       fontSize,
       fontWeight,
       fontFamily,
-      letterSpacing
+      letterSpacing,
+      lineHeight
     });
-  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing]);
+  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing, lineHeight]);
   const borderRadiusStyle = (0, import_react.useMemo)(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);
@@ -477,6 +517,34 @@ function TextElement({ segment, scale = 1 }) {
     autoWidth,
     verticalAlign
   ]);
+  if (autoWidth && backgroundColor) {
+    const bgOffsetX = boxAlign === "center" ? (width - calculatedWidth) / 2 : boxAlign === "right" ? width - calculatedWidth : 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", width }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: bgOffsetX,
+            top: 0,
+            width: calculatedWidth,
+            height: "100%",
+            backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
+            borderRadius: borderRadiusStyle,
+            pointerEvents: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: segment.text })
+    ] }) });
+  }
+  if (autoWidth) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: calculatedWidth, maxWidth: width }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      ...textStyle,
+      width,
+      boxSizing: "border-box"
+    }, children: segment.text }) }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: positioningContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: textStyle, children: segment.text }) }) });
 }
 

package/dist/index.mjs

@@ -219,7 +219,7 @@ function hexToRgba(hex, opacity = 100) {
 }
 
 // src/components/TextElement.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function calculateAutoWidth({
   text,
   maxWidth,
@@ -228,28 +228,70 @@ function calculateAutoWidth({
   fontSize,
   fontWeight,
   fontFamily,
-  letterSpacing
+  letterSpacing,
+  lineHeight
 }) {
   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");
+  const container = document.createElement("div");
+  container.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+    width: ${maxWidth}px;
+    padding: 0 ${paddingRight}px 0 ${paddingLeft}px;
+    box-sizing: border-box;
+    font-family: ${fontFamily};
+    font-size: ${fontSize}px;
+    font-weight: ${fontWeight};
+    letter-spacing: ${letterSpacing}px;
+    line-height: ${lineHeight};
+    white-space: pre-wrap;
+    word-break: break-word;
+  `;
+  container.textContent = text;
+  document.body.appendChild(container);
+  const totalHeight = container.offsetHeight;
+  const lineHeightPx = fontSize * lineHeight;
+  const numLines = Math.max(1, Math.round(totalHeight / lineHeightPx));
+  if (numLines === 1) {
+    const span = document.createElement("span");
+    span.style.cssText = `
+      font-family: ${fontFamily};
+      font-size: ${fontSize}px;
+      font-weight: ${fontWeight};
+      letter-spacing: ${letterSpacing}px;
+      white-space: nowrap;
+    `;
+    span.textContent = text;
+    document.body.appendChild(span);
+    const textWidth = span.offsetWidth;
+    document.body.removeChild(span);
+    document.body.removeChild(container);
+    return Math.min(textWidth + paddingLeft + paddingRight, maxWidth);
   }
-  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
-  const availableWidth = maxWidth - paddingLeft - paddingRight;
   const words = text.split(" ");
   const lines = [];
   let currentLine = "";
+  const measureSpan = document.createElement("span");
+  measureSpan.style.cssText = `
+    position: absolute;
+    visibility: hidden;
+    font-family: ${fontFamily};
+    font-size: ${fontSize}px;
+    font-weight: ${fontWeight};
+    letter-spacing: ${letterSpacing}px;
+    white-space: nowrap;
+  `;
+  document.body.appendChild(measureSpan);
+  const availableWidth = maxWidth - paddingLeft - paddingRight;
   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) {
+    measureSpan.textContent = testLine;
+    const testWidth = measureSpan.offsetWidth;
+    if (testWidth > availableWidth && currentLine) {
       lines.push(currentLine);
       currentLine = word;
     } else {
@@ -259,14 +301,11 @@ function calculateAutoWidth({
   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);
+    measureSpan.textContent = line;
+    widestLineWidth = Math.max(widestLineWidth, measureSpan.offsetWidth);
   }
+  document.body.removeChild(measureSpan);
+  document.body.removeChild(container);
   return Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
 }
 function TextElement({ segment, scale = 1 }) {
@@ -306,9 +345,10 @@ function TextElement({ segment, scale = 1 }) {
       fontSize,
       fontWeight,
       fontFamily,
-      letterSpacing
+      letterSpacing,
+      lineHeight
     });
-  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing]);
+  }, [autoWidth, segment.text, width, paddingLeft, paddingRight, fontSize, fontWeight, fontFamily, letterSpacing, lineHeight]);
   const borderRadiusStyle = useMemo(() => {
     if (!backgroundBorderRadius) return void 0;
     const radii = getBorderRadii(backgroundBorderRadius);
@@ -403,6 +443,34 @@ function TextElement({ segment, scale = 1 }) {
     autoWidth,
     verticalAlign
   ]);
+  if (autoWidth && backgroundColor) {
+    const bgOffsetX = boxAlign === "center" ? (width - calculatedWidth) / 2 : boxAlign === "right" ? width - calculatedWidth : 0;
+    return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", width }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: bgOffsetX,
+            top: 0,
+            width: calculatedWidth,
+            height: "100%",
+            backgroundColor: hexToRgba(backgroundColor, backgroundOpacity),
+            borderRadius: borderRadiusStyle,
+            pointerEvents: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text })
+    ] }) });
+  }
+  if (autoWidth) {
+    return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: { width: calculatedWidth, maxWidth: width }, children: /* @__PURE__ */ jsx("div", { style: {
+      ...textStyle,
+      width,
+      boxSizing: "border-box"
+    }, children: segment.text }) }) });
+  }
   return /* @__PURE__ */ jsx("div", { style: positioningContainerStyle, children: /* @__PURE__ */ jsx("div", { style: backgroundBoxStyle, children: /* @__PURE__ */ jsx("div", { style: textStyle, children: segment.text }) }) });
 }
 
@@ -910,7 +978,7 @@ function isDynamicCropEnabled(dynamicCrop) {
 }
 
 // src/compositions/ImageEditorComposition.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function getSortedSegments(config) {
   const allSegments = [];
   for (const channel of config.channels) {
@@ -1046,7 +1114,7 @@ function ImageEditorComposition({
     return void 0;
   };
   const containerBgColor = backgroundType === "color" && backgroundColor ? backgroundColor : "#000000";
-  return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx3(AbsoluteFill, { style: { backgroundColor: containerBgColor }, children: /* @__PURE__ */ jsxs2(
     "div",
     {
       style: {
@@ -1220,7 +1288,7 @@ function VideoElement({
 }
 
 // src/compositions/VideoEditorComposition.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function calculateSegmentTimings(config, fps) {
   const timings = [];
   const timingsMap = /* @__PURE__ */ new Map();
@@ -1324,7 +1392,7 @@ function VideoEditorComposition({
   const audioTimings = useMemo5(() => {
     return segmentTimings.filter(({ segment }) => segment.type === "audio");
   }, [segmentTimings]);
-  return /* @__PURE__ */ jsxs2(AbsoluteFill2, { style: { backgroundColor: "#000000" }, children: [
+  return /* @__PURE__ */ jsxs3(AbsoluteFill2, { style: { backgroundColor: "#000000" }, children: [
     activeVisualSegments.map(({ segment, startFrame, durationInFrames: durationInFrames2 }) => {
       if (segment.type === "text") {
         const textSegment = segment;
@@ -1640,7 +1708,7 @@ function useResolvedPositions(elements, textValues) {
 
 // src/Root.tsx
 import { Composition } from "remotion";
-import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -1664,7 +1732,7 @@ var defaultVideoProps = {
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
 var RenderRoot = () => {
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
     /* @__PURE__ */ jsx6(
       Composition,
       {

package/package.json

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