ugcinc 4.5.63 → 4.5.65

package/dist/render/components/TextElement.js

@@ -160,23 +160,6 @@ function calculateAutoWidthAndLines({ text, maxWidth, paddingLeft, paddingRight,
     }
     document.body.removeChild(measureSpan);
     const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
-    // CONDENSED DEBUG LOG
-    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 };
 }
 /**
@@ -338,20 +321,6 @@ function TextElement({ segment, scale = 1 }) {
     }, [autoWidth, calculatedWidth, width, backgroundColor, backgroundOpacity, borderRadiusStyle]);
     const hasStroke = strokeWidth > 0 && !!strokeColor;
     const filterId = `te-stroke-${react_1.default.useId().replace(/:/g, '')}`;
-    if (hasStroke) {
-        console.log('[TextElement] STROKE_DEBUG:', JSON.stringify({
-            text: segment.text.substring(0, 50),
-            strokeWidth,
-            strokeColor,
-            filterId,
-            paddingTop, paddingRight, paddingBottom, paddingLeft,
-            fontSize,
-            strokePadPct: Math.max(50, Math.ceil((strokeWidth / fontSize) * 200)),
-            autoWidth,
-            width,
-            calculatedWidth,
-        }));
-    }
     // Text style (fill layer)
     const textStyle = (0, react_1.useMemo)(() => ({
         fontFamily,
@@ -371,15 +340,13 @@ function TextElement({ segment, scale = 1 }) {
             flex: 1,
             minHeight: 0,
         }),
-        ...(hasStroke && { position: 'relative' }),
+        ...(hasStroke && { position: 'relative', zIndex: 1 }),
     }), [
         fontFamily, fontSize, fontWeight, color, lineHeight, letterSpacing, alignment,
         paddingTop, paddingRight, paddingBottom, paddingLeft,
         autoWidth, verticalAlign, hasStroke
     ]);
-    // Stroke underlay style — extended by strokeWidth on all sides so the
-    // dilated outline stays inside the div and doesn't clip at text edges.
-    // Extra padding compensates so text wraps identically to the fill layer.
+    // Stroke underlay style — same size as fill div, SVG filter handles overflow.
     const strokeTextStyle = (0, react_1.useMemo)(() => {
         if (!hasStroke)
             return undefined;
@@ -388,23 +355,27 @@ function TextElement({ segment, scale = 1 }) {
             color: strokeColor,
             filter: `url(#${filterId})`,
             position: 'absolute',
-            top: -strokeWidth,
-            left: -strokeWidth,
-            right: -strokeWidth,
-            bottom: -strokeWidth,
-            padding: `${paddingTop + strokeWidth}px ${paddingRight + strokeWidth}px ${paddingBottom + strokeWidth}px ${paddingLeft + strokeWidth}px`,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
         };
-        console.log('[TextElement] STROKE_STYLE:', JSON.stringify({
-            filter: style.filter,
-            top: style.top,
-            left: style.left,
-            right: style.right,
-            bottom: style.bottom,
-            padding: style.padding,
-            color: style.color,
-        }));
         return style;
     }, [hasStroke, textStyle, strokeColor, filterId, strokeWidth, paddingTop, paddingRight, paddingBottom, paddingLeft]);
+    if (hasStroke) {
+        console.log('[TextElement] STROKE_DIAG:', JSON.stringify({
+            text: segment.text.substring(0, 30),
+            strokeWidth,
+            fontSize,
+            fillZ: textStyle.zIndex,
+            fillPos: textStyle.position,
+            strokeZ: strokeTextStyle?.zIndex,
+            strokePos: strokeTextStyle?.position,
+            strokeFilter: strokeTextStyle?.filter,
+            autoWidth,
+            hasBg: !!backgroundColor,
+        }));
+    }
     // SVG filter for smooth text outline (avoids miter spikes from -webkit-text-stroke)
     const strokePadPct = Math.max(50, Math.ceil((strokeWidth / fontSize) * 200));
     const strokeFilterSvg = hasStroke ? ((0, jsx_runtime_1.jsx)("svg", { style: { position: 'absolute', width: 0, height: 0, overflow: 'hidden' }, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("filter", { id: filterId, x: `-${strokePadPct}%`, y: `-${strokePadPct}%`, width: `${100 + 2 * strokePadPct}%`, height: `${100 + 2 * strokePadPct}%`, children: [(0, jsx_runtime_1.jsx)("feMorphology", { in: "SourceAlpha", operator: "dilate", radius: strokeWidth, result: "dilated" }), (0, jsx_runtime_1.jsx)("feFlood", { floodColor: strokeColor, result: "color" }), (0, jsx_runtime_1.jsx)("feComposite", { in: "color", in2: "dilated", operator: "in" })] }) }) })) : null;
@@ -413,15 +384,10 @@ function TextElement({ segment, scale = 1 }) {
     // keep layout identical to the fill layer.
     const renderStrokeText = (text) => {
         const parts = (0, emoji_1.splitTextAndEmojis)(text);
-        console.log('[TextElement] EMOJI_DEBUG:', JSON.stringify({
-            text: text.substring(0, 50),
-            partsCount: parts.length,
-            parts: parts.map(p => ({ type: p.type, content: p.content.substring(0, 10) })),
-        }));
         if (parts.every(p => p.type === 'text'))
             return text;
         return parts.map((part, i) => part.type === 'emoji'
-            ? (0, jsx_runtime_1.jsx)("span", { style: { opacity: 0 }, children: part.content }, i)
+            ? (0, jsx_runtime_1.jsx)("span", { style: { visibility: 'hidden' }, children: part.content }, i)
             : (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: part.content }, i));
     };
     if (autoWidth) {

package/dist/render/compositions/ImageEditorComposition.js

@@ -75,18 +75,6 @@ function elementToTextSegment(elem) {
         autoWidth: elem.autoWidth,
         boxAlign: elem.boxAlign,
     };
-    // CONDENSED DEBUG LOG
-    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;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc",
-  "version": "4.5.63",
+  "version": "4.5.65",
   "description": "TypeScript/JavaScript client for the UGC Inc API",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",