ugcinc 4.5.65 → 4.5.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -45,7 +45,6 @@ const react_1 = __importStar(require("react"));
|
|
|
45
45
|
const defaults_1 = require("../utils/defaults");
|
|
46
46
|
const fonts_1 = require("../utils/fonts");
|
|
47
47
|
const text_1 = require("../utils/text");
|
|
48
|
-
const emoji_1 = require("../utils/emoji");
|
|
49
48
|
/**
|
|
50
49
|
* Calculate the actual width for auto-width text AND the line breaks.
|
|
51
50
|
* Uses DOM-based measurement to ensure the same fonts are used as CSS rendering.
|
|
@@ -350,49 +349,23 @@ function TextElement({ segment, scale = 1 }) {
|
|
|
350
349
|
const strokeTextStyle = (0, react_1.useMemo)(() => {
|
|
351
350
|
if (!hasStroke)
|
|
352
351
|
return undefined;
|
|
353
|
-
|
|
352
|
+
return {
|
|
354
353
|
...textStyle,
|
|
355
354
|
color: strokeColor,
|
|
356
355
|
filter: `url(#${filterId})`,
|
|
357
356
|
position: 'absolute',
|
|
357
|
+
zIndex: 0,
|
|
358
358
|
top: 0,
|
|
359
359
|
left: 0,
|
|
360
360
|
right: 0,
|
|
361
361
|
bottom: 0,
|
|
362
362
|
};
|
|
363
|
-
|
|
364
|
-
}, [hasStroke, textStyle, strokeColor, filterId, strokeWidth, paddingTop, paddingRight, paddingBottom, paddingLeft]);
|
|
365
|
-
if (hasStroke) {
|
|
366
|
-
console.log('[TextElement] STROKE_DIAG:', JSON.stringify({
|
|
367
|
-
text: segment.text.substring(0, 30),
|
|
368
|
-
strokeWidth,
|
|
369
|
-
fontSize,
|
|
370
|
-
fillZ: textStyle.zIndex,
|
|
371
|
-
fillPos: textStyle.position,
|
|
372
|
-
strokeZ: strokeTextStyle?.zIndex,
|
|
373
|
-
strokePos: strokeTextStyle?.position,
|
|
374
|
-
strokeFilter: strokeTextStyle?.filter,
|
|
375
|
-
autoWidth,
|
|
376
|
-
hasBg: !!backgroundColor,
|
|
377
|
-
}));
|
|
378
|
-
}
|
|
363
|
+
}, [hasStroke, textStyle, strokeColor, filterId]);
|
|
379
364
|
// SVG filter for smooth text outline (avoids miter spikes from -webkit-text-stroke)
|
|
380
365
|
const strokePadPct = Math.max(50, Math.ceil((strokeWidth / fontSize) * 200));
|
|
381
366
|
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;
|
|
382
|
-
// Render text with emojis made invisible (opacity 0) so the stroke
|
|
383
|
-
// filter doesn't dilate around them. Emojis still occupy space to
|
|
384
|
-
// keep layout identical to the fill layer.
|
|
385
|
-
const renderStrokeText = (text) => {
|
|
386
|
-
const parts = (0, emoji_1.splitTextAndEmojis)(text);
|
|
387
|
-
if (parts.every(p => p.type === 'text'))
|
|
388
|
-
return text;
|
|
389
|
-
return parts.map((part, i) => part.type === 'emoji'
|
|
390
|
-
? (0, jsx_runtime_1.jsx)("span", { style: { visibility: 'hidden' }, children: part.content }, i)
|
|
391
|
-
: (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: part.content }, i));
|
|
392
|
-
};
|
|
393
367
|
if (autoWidth) {
|
|
394
368
|
const textContent = calculatedLines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [line, index < calculatedLines.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, index)));
|
|
395
|
-
const strokeContent = calculatedLines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [renderStrokeText(line), index < calculatedLines.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, index)));
|
|
396
369
|
if (backgroundColor) {
|
|
397
370
|
return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
398
371
|
width: calculatedWidth,
|
|
@@ -400,10 +373,10 @@ function TextElement({ segment, scale = 1 }) {
|
|
|
400
373
|
backgroundColor: (0, text_1.hexToRgba)(backgroundColor, backgroundOpacity),
|
|
401
374
|
borderRadius: borderRadiusStyle,
|
|
402
375
|
...(hasStroke && { position: 'relative' }),
|
|
403
|
-
}, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children:
|
|
376
|
+
}, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: textContent }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: textContent })] }) }));
|
|
404
377
|
}
|
|
405
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: { width: calculatedWidth, maxWidth: width, ...(hasStroke && { position: 'relative' }) }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children:
|
|
378
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: { width: calculatedWidth, maxWidth: width, ...(hasStroke && { position: 'relative' }) }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: textContent }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: textContent })] }) }));
|
|
406
379
|
}
|
|
407
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: { ...backgroundBoxStyle, ...(hasStroke && { position: 'relative' }) }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children:
|
|
380
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: { ...backgroundBoxStyle, ...(hasStroke && { position: 'relative' }) }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: segment.text }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: segment.text })] }) }));
|
|
408
381
|
}
|
|
409
382
|
exports.default = TextElement;
|