ugcinc-render 1.5.17 → 1.5.19

package/dist/index.js

@@ -420,29 +420,28 @@ function calculateAutoWidthAndLines({
     white-space: nowrap;
   `;
   document.body.appendChild(measureSpan);
+  const computedStyle = window.getComputedStyle(measureSpan);
+  const computedFontFamily = computedStyle.fontFamily;
+  const requestedFontLoaded = typeof document.fonts !== "undefined" ? document.fonts.check(`${fontWeight} ${fontSize}px ${fontFamily.split(",")[0]}`) : "unknown";
   const measureText = (textToMeasure) => {
     measureSpan.textContent = textToMeasure;
     return measureSpan.getBoundingClientRect().width;
   };
   measureSpan.textContent = "M";
-  const charWidth = measureSpan.getBoundingClientRect().width;
+  const mWidth = measureSpan.getBoundingClientRect().width;
   const words = text.split(/(\s+)/);
   const lines = [];
   let currentLine = "";
   for (let i = 0; i < words.length; i++) {
     const word = words[i];
     if (word === "\n" || word === "\r\n") {
-      if (currentLine) {
-        lines.push(currentLine);
-      }
+      if (currentLine) lines.push(currentLine);
       currentLine = "";
       continue;
     }
     if (!word) continue;
     if (/^\s+$/.test(word)) {
-      if (currentLine) {
-        currentLine += word;
-      }
+      if (currentLine) currentLine += word;
       continue;
     }
     const testLine = currentLine + word;
@@ -477,12 +476,8 @@ function calculateAutoWidthAndLines({
       currentLine = testLine;
     }
   }
-  if (currentLine.trim()) {
-    lines.push(currentLine.trimEnd());
-  }
-  if (lines.length === 0) {
-    lines.push("");
-  }
+  if (currentLine.trim()) lines.push(currentLine.trimEnd());
+  if (lines.length === 0) lines.push("");
   let widestLineWidth = 0;
   for (const line of lines) {
     const lineWidth = measureText(line);
@@ -490,18 +485,25 @@ function calculateAutoWidthAndLines({
   }
   document.body.removeChild(measureSpan);
   const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  console.log("[TextElement] WIDTH_CALC:", JSON.stringify({
+    text: text.substring(0, 30),
+    fontFamily: fontFamily.split(",")[0],
+    computedFont: computedFontFamily.split(",")[0],
+    fontLoaded: requestedFontLoaded,
+    fontSize,
+    fontWeight,
+    letterSpacing,
+    mWidth: Math.round(mWidth * 100) / 100,
+    widestLine: Math.round(widestLineWidth * 100) / 100,
+    paddingL: paddingLeft,
+    paddingR: paddingRight,
+    calcWidth: Math.round(calculatedWidth * 100) / 100,
+    maxWidth,
+    lines: lines.length
+  }));
   return { width: calculatedWidth, lines };
 }
 function TextElement({ segment, scale = 1 }) {
-  import_react.default.useEffect(() => {
-    const fontFamily2 = getFontFamily(segment.fontType ?? TEXT_DEFAULTS.fontType);
-    console.log("[ugcinc-render/TextElement] Rendering with:", {
-      text: segment.text?.substring(0, 50) + (segment.text?.length > 50 ? "..." : ""),
-      fontType: segment.fontType ?? TEXT_DEFAULTS.fontType,
-      fontFamily: fontFamily2,
-      hasEmojis: /[\u{1F300}-\u{1F9FF}]/u.test(segment.text || "")
-    });
-  }, [segment.text, segment.fontType]);
   const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
   const fontSize = (segment.fontSize ?? TEXT_DEFAULTS.fontSize) * scale;
   const fontWeight = segment.fontWeight ?? TEXT_DEFAULTS.fontWeight;
@@ -623,24 +625,11 @@ function TextElement({ segment, scale = 1 }) {
     transformOrigin: "center center",
     display: "flex",
     flexDirection: "column",
-    // Vertical alignment within the container
     justifyContent: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
-    // Horizontal alignment (boxAlign) - only applies when autoWidth is enabled
     alignItems: autoWidth ? boxAlign === "center" ? "center" : boxAlign === "right" ? "flex-end" : "flex-start" : "stretch"
   }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
   const backgroundBoxStyle = (0, import_react.useMemo)(() => {
-    const baseStyle = autoWidth ? {
-      // 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",
-      flexDirection: "column",
-      flex: 1,
-      minHeight: 0
-    };
+    const baseStyle = autoWidth ? { width: calculatedWidth, maxWidth: width } : { display: "flex", flexDirection: "column", flex: 1, minHeight: 0 };
     if (!backgroundColor) return baseStyle;
     return {
       ...baseStyle,
@@ -655,12 +644,10 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
-    // textAlign works for multi-line text within the (possibly auto-width) box
     textAlign: alignment === "justify" ? "justify" : alignment,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     whiteSpace: "pre-wrap",
     wordBreak: "break-word",
-    // When not autoWidth, handle vertical alignment via flex
     ...!autoWidth && {
       display: "flex",
       flexDirection: "column",
@@ -668,7 +655,6 @@ function TextElement({ segment, scale = 1 }) {
       flex: 1,
       minHeight: 0
     },
-    // Text stroke using text-shadow for cross-browser support
     ...strokeWidth > 0 && strokeColor && {
       textShadow: `
         -${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
@@ -680,7 +666,6 @@ function TextElement({ segment, scale = 1 }) {
         -${strokeWidth}px 0 0 ${strokeColor},
         ${strokeWidth}px 0 0 ${strokeColor}
       `,
-      // Also use WebKit text stroke for better quality where supported
       WebkitTextStroke: `${strokeWidth}px ${strokeColor}`,
       paintOrder: "stroke fill"
     }
@@ -1242,7 +1227,7 @@ function getSortedSegments(config) {
   });
 }
 function elementToTextSegment(elem) {
-  return {
+  const segment = {
     id: elem.id,
     type: "text",
     source: "",
@@ -1280,6 +1265,18 @@ function elementToTextSegment(elem) {
     autoWidth: elem.autoWidth,
     boxAlign: elem.boxAlign
   };
+  console.log("[Composition] ELEMENT:", JSON.stringify({
+    id: elem.id,
+    text: (elem.text ?? "").substring(0, 20),
+    w: elem.width,
+    h: elem.height,
+    font: elem.font,
+    fontSize: elem.fontSize,
+    autoWidth: elem.autoWidth,
+    pL: elem.paddingLeft,
+    pR: elem.paddingRight
+  }));
+  return segment;
 }
 function elementToImageSegment(elem, source) {
   return {

package/dist/index.mjs

@@ -334,29 +334,28 @@ function calculateAutoWidthAndLines({
     white-space: nowrap;
   `;
   document.body.appendChild(measureSpan);
+  const computedStyle = window.getComputedStyle(measureSpan);
+  const computedFontFamily = computedStyle.fontFamily;
+  const requestedFontLoaded = typeof document.fonts !== "undefined" ? document.fonts.check(`${fontWeight} ${fontSize}px ${fontFamily.split(",")[0]}`) : "unknown";
   const measureText = (textToMeasure) => {
     measureSpan.textContent = textToMeasure;
     return measureSpan.getBoundingClientRect().width;
   };
   measureSpan.textContent = "M";
-  const charWidth = measureSpan.getBoundingClientRect().width;
+  const mWidth = measureSpan.getBoundingClientRect().width;
   const words = text.split(/(\s+)/);
   const lines = [];
   let currentLine = "";
   for (let i = 0; i < words.length; i++) {
     const word = words[i];
     if (word === "\n" || word === "\r\n") {
-      if (currentLine) {
-        lines.push(currentLine);
-      }
+      if (currentLine) lines.push(currentLine);
       currentLine = "";
       continue;
     }
     if (!word) continue;
     if (/^\s+$/.test(word)) {
-      if (currentLine) {
-        currentLine += word;
-      }
+      if (currentLine) currentLine += word;
       continue;
     }
     const testLine = currentLine + word;
@@ -391,12 +390,8 @@ function calculateAutoWidthAndLines({
       currentLine = testLine;
     }
   }
-  if (currentLine.trim()) {
-    lines.push(currentLine.trimEnd());
-  }
-  if (lines.length === 0) {
-    lines.push("");
-  }
+  if (currentLine.trim()) lines.push(currentLine.trimEnd());
+  if (lines.length === 0) lines.push("");
   let widestLineWidth = 0;
   for (const line of lines) {
     const lineWidth = measureText(line);
@@ -404,18 +399,25 @@ function calculateAutoWidthAndLines({
   }
   document.body.removeChild(measureSpan);
   const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  console.log("[TextElement] WIDTH_CALC:", JSON.stringify({
+    text: text.substring(0, 30),
+    fontFamily: fontFamily.split(",")[0],
+    computedFont: computedFontFamily.split(",")[0],
+    fontLoaded: requestedFontLoaded,
+    fontSize,
+    fontWeight,
+    letterSpacing,
+    mWidth: Math.round(mWidth * 100) / 100,
+    widestLine: Math.round(widestLineWidth * 100) / 100,
+    paddingL: paddingLeft,
+    paddingR: paddingRight,
+    calcWidth: Math.round(calculatedWidth * 100) / 100,
+    maxWidth,
+    lines: lines.length
+  }));
   return { width: calculatedWidth, lines };
 }
 function TextElement({ segment, scale = 1 }) {
-  React.useEffect(() => {
-    const fontFamily2 = getFontFamily(segment.fontType ?? TEXT_DEFAULTS.fontType);
-    console.log("[ugcinc-render/TextElement] Rendering with:", {
-      text: segment.text?.substring(0, 50) + (segment.text?.length > 50 ? "..." : ""),
-      fontType: segment.fontType ?? TEXT_DEFAULTS.fontType,
-      fontFamily: fontFamily2,
-      hasEmojis: /[\u{1F300}-\u{1F9FF}]/u.test(segment.text || "")
-    });
-  }, [segment.text, segment.fontType]);
   const fontType = segment.fontType ?? TEXT_DEFAULTS.fontType;
   const fontSize = (segment.fontSize ?? TEXT_DEFAULTS.fontSize) * scale;
   const fontWeight = segment.fontWeight ?? TEXT_DEFAULTS.fontWeight;
@@ -537,24 +539,11 @@ function TextElement({ segment, scale = 1 }) {
     transformOrigin: "center center",
     display: "flex",
     flexDirection: "column",
-    // Vertical alignment within the container
     justifyContent: verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center",
-    // Horizontal alignment (boxAlign) - only applies when autoWidth is enabled
     alignItems: autoWidth ? boxAlign === "center" ? "center" : boxAlign === "right" ? "flex-end" : "flex-start" : "stretch"
   }), [x, y, width, height, rotation, verticalAlign, autoWidth, boxAlign]);
   const backgroundBoxStyle = useMemo(() => {
-    const baseStyle = autoWidth ? {
-      // 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",
-      flexDirection: "column",
-      flex: 1,
-      minHeight: 0
-    };
+    const baseStyle = autoWidth ? { width: calculatedWidth, maxWidth: width } : { display: "flex", flexDirection: "column", flex: 1, minHeight: 0 };
     if (!backgroundColor) return baseStyle;
     return {
       ...baseStyle,
@@ -569,12 +558,10 @@ function TextElement({ segment, scale = 1 }) {
     color,
     lineHeight,
     letterSpacing,
-    // textAlign works for multi-line text within the (possibly auto-width) box
     textAlign: alignment === "justify" ? "justify" : alignment,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     whiteSpace: "pre-wrap",
     wordBreak: "break-word",
-    // When not autoWidth, handle vertical alignment via flex
     ...!autoWidth && {
       display: "flex",
       flexDirection: "column",
@@ -582,7 +569,6 @@ function TextElement({ segment, scale = 1 }) {
       flex: 1,
       minHeight: 0
     },
-    // Text stroke using text-shadow for cross-browser support
     ...strokeWidth > 0 && strokeColor && {
       textShadow: `
         -${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
@@ -594,7 +580,6 @@ function TextElement({ segment, scale = 1 }) {
         -${strokeWidth}px 0 0 ${strokeColor},
         ${strokeWidth}px 0 0 ${strokeColor}
       `,
-      // Also use WebKit text stroke for better quality where supported
       WebkitTextStroke: `${strokeWidth}px ${strokeColor}`,
       paintOrder: "stroke fill"
     }
@@ -1156,7 +1141,7 @@ function getSortedSegments(config) {
   });
 }
 function elementToTextSegment(elem) {
-  return {
+  const segment = {
     id: elem.id,
     type: "text",
     source: "",
@@ -1194,6 +1179,18 @@ function elementToTextSegment(elem) {
     autoWidth: elem.autoWidth,
     boxAlign: elem.boxAlign
   };
+  console.log("[Composition] ELEMENT:", JSON.stringify({
+    id: elem.id,
+    text: (elem.text ?? "").substring(0, 20),
+    w: elem.width,
+    h: elem.height,
+    font: elem.font,
+    fontSize: elem.fontSize,
+    autoWidth: elem.autoWidth,
+    pL: elem.paddingLeft,
+    pR: elem.paddingRight
+  }));
+  return segment;
 }
 function elementToImageSegment(elem, source) {
   return {

package/package.json

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