@antv/infographic 0.2.11 → 0.2.13

package/esm/designs/items/LetterCard.js

@@ -10,6 +10,7 @@ import { registerItem } from './registry.js';
  * 支持渐变背景、斜纹和底部阴影效果
  */
 export const LetterCard = (props) => {
+    var _a, _b;
     const [{ datum, indexes, width = 280, height = 160, showStripe = true, showGradient = true, showBottomShade = true, themeColors, }, restProps,] = getItemProps(props, [
         'width',
         'height',
@@ -17,8 +18,8 @@ export const LetterCard = (props) => {
         'showGradient',
         'showBottomShade',
     ]);
-    const displayLetter = datum.label?.[0].toUpperCase();
-    const displayTitle = datum.label?.toUpperCase();
+    const displayLetter = (_a = datum.label) === null || _a === void 0 ? void 0 : _a[0].toUpperCase();
+    const displayTitle = (_b = datum.label) === null || _b === void 0 ? void 0 : _b.toUpperCase();
     const baseColor = themeColors.colorPrimary;
     const base = tinycolor(baseColor);
     const stripeWidth = 4;
@@ -45,7 +46,7 @@ export const LetterCard = (props) => {
     const textTotalHeight = letterHeight + textGap + titleHeight;
     const letterY = (height - textTotalHeight) / 2;
     const titleY = letterY + letterHeight + textGap;
-    return (_jsxs(Group, { ...restProps, width: width, height: height, children: [_jsxs(Defs, { children: [showGradient && (_jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: gradStart }), _jsx("stop", { offset: "100%", stopColor: gradEnd })] })), showStripe && (_jsxs("pattern", { id: patternId, patternUnits: "userSpaceOnUse", width: tile, height: tile, patternTransform: `rotate(${rotationDeg})`, children: [_jsx("rect", { x: "0", y: "0", width: tile, height: tile, fill: lightStripe }), _jsx("rect", { x: "0", y: "0", width: stripeWidth, height: tile, fill: darkStripe })] })), showBottomShade && (_jsxs("linearGradient", { id: shadeId, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(0,0,0,0)" }), _jsx("stop", { offset: "100%", stopColor: "rgba(0,0,0,0.16)" })] }))] }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: showGradient ? `url(#${gradientId})` : baseColor, rx: 0, ry: 0, "data-element-type": "shape" }), showStripe && (_jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: `url(#${patternId})`, rx: 0, ry: 0 })), showBottomShade && (_jsx(Rect, { x: 0, y: height - bottomShadeHeight, width: width, height: bottomShadeHeight, fill: `url(#${shadeId})`, rx: 0, ry: 0 })), displayLetter && (_jsx(ItemLabel, { indexes: indexes, x: 0, y: letterY, width: width, fontSize: letterFontSize, fontWeight: "bold", fill: "#FFFFFF", alignHorizontal: "center", alignVertical: "top", lineHeight: 1, children: displayLetter })), _jsx(ItemLabel, { indexes: indexes, x: 0, y: titleY, width: width, fontSize: titleFontSize, fontWeight: "bold", fill: "#FFFFFF", alignHorizontal: "center", alignVertical: "middle", lineHeight: 1, children: displayTitle })] }));
+    return (_jsxs(Group, Object.assign({}, restProps, { width: width, height: height, children: [_jsxs(Defs, { children: [showGradient && (_jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: gradStart }), _jsx("stop", { offset: "100%", stopColor: gradEnd })] })), showStripe && (_jsxs("pattern", { id: patternId, patternUnits: "userSpaceOnUse", width: tile, height: tile, patternTransform: `rotate(${rotationDeg})`, children: [_jsx("rect", { x: "0", y: "0", width: tile, height: tile, fill: lightStripe }), _jsx("rect", { x: "0", y: "0", width: stripeWidth, height: tile, fill: darkStripe })] })), showBottomShade && (_jsxs("linearGradient", { id: shadeId, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(0,0,0,0)" }), _jsx("stop", { offset: "100%", stopColor: "rgba(0,0,0,0.16)" })] }))] }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: showGradient ? `url(#${gradientId})` : baseColor, rx: 0, ry: 0, "data-element-type": "shape" }), showStripe && (_jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: `url(#${patternId})`, rx: 0, ry: 0 })), showBottomShade && (_jsx(Rect, { x: 0, y: height - bottomShadeHeight, width: width, height: bottomShadeHeight, fill: `url(#${shadeId})`, rx: 0, ry: 0 })), displayLetter && (_jsx(ItemLabel, { indexes: indexes, x: 0, y: letterY, width: width, fontSize: letterFontSize, fontWeight: "bold", fill: "#FFFFFF", alignHorizontal: "center", alignVertical: "top", lineHeight: 1, children: displayLetter })), _jsx(ItemLabel, { indexes: indexes, x: 0, y: titleY, width: width, fontSize: titleFontSize, fontWeight: "bold", fill: "#FFFFFF", alignHorizontal: "center", alignVertical: "middle", lineHeight: 1, children: displayTitle })] })));
 };
 registerItem('letter-card', {
     component: LetterCard,

package/esm/designs/items/LinedText.js

@@ -4,6 +4,7 @@ import { ItemLabel } from '../components/index.js';
 import { getItemProps } from '../utils/index.js';
 import { registerItem } from './registry.js';
 export const LinedText = (props) => {
+    var _a, _b, _c;
     const [{ datum, indexes, width, themeColors, positionH = 'normal', positionV = 'center', formatter = (text) => text || '', usePaletteColor = false, showUnderline = false, underlineGap = 6, underlineExtend = 8, underlineThickness = 2, }, restProps,] = getItemProps(props, [
         'width',
         'formatter',
@@ -13,21 +14,21 @@ export const LinedText = (props) => {
         'underlineExtend',
         'underlineThickness',
     ]);
-    const content = formatter(datum.label ?? datum.desc ?? '');
+    const content = formatter((_b = (_a = datum.label) !== null && _a !== void 0 ? _a : datum.desc) !== null && _b !== void 0 ? _b : '');
     const alignH = positionH === 'flipped'
         ? 'right'
         : positionH === 'center'
             ? 'center'
             : 'left';
     const measuredLabel = getElementBounds(_jsx(ItemLabel, { indexes: indexes, width: width, children: content }));
-    const contentWidth = width ?? measuredLabel.width;
+    const contentWidth = width !== null && width !== void 0 ? width : measuredLabel.width;
     const labelHeight = measuredLabel.height;
     const underlineWidth = showUnderline ? contentWidth + underlineExtend * 2 : 0;
     const totalHeight = labelHeight + (showUnderline ? underlineGap + underlineThickness : 0);
     const finalWidth = showUnderline
         ? Math.max(contentWidth, underlineWidth)
         : contentWidth;
-    const finalHeight = restProps.height ?? totalHeight;
+    const finalHeight = (_c = restProps.height) !== null && _c !== void 0 ? _c : totalHeight;
     const offsetY = positionV === 'middle'
         ? (finalHeight - totalHeight) / 2
         : positionV === 'flipped'
@@ -45,11 +46,11 @@ export const LinedText = (props) => {
             ? (finalWidth - underlineWidth) / 2
             : 0;
     const underlineY = finalHeight;
-    return (_jsxs(Group, { ...restProps, width: finalWidth, height: finalHeight, children: [_jsx(ItemLabel, { indexes: indexes, x: labelX, y: labelY, width: contentWidth, height: labelHeight, alignHorizontal: alignH, alignVertical: positionV === 'flipped'
+    return (_jsxs(Group, Object.assign({}, restProps, { width: finalWidth, height: finalHeight, children: [_jsx(ItemLabel, { indexes: indexes, x: labelX, y: labelY, width: contentWidth, height: labelHeight, alignHorizontal: alignH, alignVertical: positionV === 'flipped'
                     ? 'bottom'
                     : positionV === 'center'
                         ? 'middle'
-                        : 'top', fill: usePaletteColor ? themeColors.colorPrimary : themeColors.colorText, children: content }), showUnderline && (_jsx(Path, { d: `M 0 ${underlineThickness / 2} L ${underlineWidth} ${underlineThickness / 2}`, x: underlineX, y: underlineY - underlineThickness / 2, width: underlineWidth, height: underlineThickness, stroke: themeColors.colorPrimary, strokeWidth: underlineThickness, fill: "none", strokeLinecap: "round", "data-element-type": "shape" }))] }));
+                        : 'top', fill: usePaletteColor ? themeColors.colorPrimary : themeColors.colorText, children: content }), showUnderline && (_jsx(Path, { d: `M 0 ${underlineThickness / 2} L ${underlineWidth} ${underlineThickness / 2}`, x: underlineX, y: underlineY - underlineThickness / 2, width: underlineWidth, height: underlineThickness, stroke: themeColors.colorPrimary, strokeWidth: underlineThickness, fill: "none", strokeLinecap: "round", "data-element-type": "shape" }))] })));
 };
 registerItem('lined-text', {
     component: LinedText,

package/esm/designs/items/PillBadge.js

@@ -30,11 +30,11 @@ export const PillBadge = (props) => {
     const contentWidth = componentWidth;
     const dropShadowId = `drop-shadow-${themeColors.colorPrimary}`;
     const linearGradientId = `linear-gradient-white-top-bottom`;
-    return (_jsxs(Group, { ...restProps, children: [_jsxs(Defs, { children: [_jsx(DropShadow, { id: dropShadowId, color: themeColors.colorPrimary }), _jsx(LinearGradient, { id: linearGradientId, startColor: "#fff", stopColor: "#ffffff33", direction: "top-bottom" })] }), _jsx(Rect, { x: pillX, y: pillY, width: pillWidth, height: pillHeight, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, rx: pillHeight / 2, ry: pillHeight / 2, filter: `url(#${dropShadowId})`, "data-element-type": "shape" }), _jsx(Rect, { x: pillX, y: pillY, width: pillWidth, height: pillHeight, fill: `url(#${linearGradientId})`, opacity: themeColors.isDarkMode ? 0.4 : 0.7, rx: pillHeight / 2, ry: pillHeight / 2 }), _jsx(ItemLabel, { indexes: indexes, x: pillX, y: pillY, width: pillWidth, height: pillHeight, alignHorizontal: "center", alignVertical: "middle", fontSize: 14, fontWeight: "500", fill: themeColors.colorText, children: datum.label }), datum.desc && (_jsx(ItemDesc, { indexes: indexes, x: contentX, y: contentY, width: contentWidth, alignHorizontal: positionH === 'center'
+    return (_jsxs(Group, Object.assign({}, restProps, { children: [_jsxs(Defs, { children: [_jsx(DropShadow, { id: dropShadowId, color: themeColors.colorPrimary }), _jsx(LinearGradient, { id: linearGradientId, startColor: "#fff", stopColor: "#ffffff33", direction: "top-bottom" })] }), _jsx(Rect, { x: pillX, y: pillY, width: pillWidth, height: pillHeight, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, rx: pillHeight / 2, ry: pillHeight / 2, filter: `url(#${dropShadowId})`, "data-element-type": "shape" }), _jsx(Rect, { x: pillX, y: pillY, width: pillWidth, height: pillHeight, fill: `url(#${linearGradientId})`, opacity: themeColors.isDarkMode ? 0.4 : 0.7, rx: pillHeight / 2, ry: pillHeight / 2 }), _jsx(ItemLabel, { indexes: indexes, x: pillX, y: pillY, width: pillWidth, height: pillHeight, alignHorizontal: "center", alignVertical: "middle", fontSize: 14, fontWeight: "500", fill: themeColors.colorText, children: datum.label }), datum.desc && (_jsx(ItemDesc, { indexes: indexes, x: contentX, y: contentY, width: contentWidth, alignHorizontal: positionH === 'center'
                     ? 'center'
                     : positionH === 'flipped'
                         ? 'right'
-                        : 'left', fontSize: 12, fill: themeColors.colorTextSecondary, lineNumber: 2, wordWrap: true, children: datum.desc }))] }));
+                        : 'left', fontSize: 12, fill: themeColors.colorTextSecondary, lineNumber: 2, wordWrap: true, children: datum.desc }))] })));
 };
 registerItem('pill-badge', {
     component: PillBadge,

package/esm/designs/items/PlainText.js

@@ -3,6 +3,7 @@ import { ItemLabel } from '../components/index.js';
 import { getItemProps } from '../utils/index.js';
 import { registerItem } from './registry.js';
 export const LabelText = (props) => {
+    var _a;
     const [{ indexes, datum, width = 120, themeColors, positionH = 'normal', positionV = 'center', formatter = (text) => text || '', usePaletteColor = false, lineNumber = 1, }, restProps,] = getItemProps(props, [
         'width',
         'formatter',
@@ -11,9 +12,8 @@ export const LabelText = (props) => {
     ]);
     const fontSize = 14;
     const lineHeight = 1.4;
-    const height = restProps.height ??
-        Math.ceil(lineNumber * lineHeight * fontSize);
-    return (_jsx(ItemLabel, { ...restProps, indexes: indexes, width: width, height: height, lineHeight: lineHeight, fill: usePaletteColor ? themeColors.colorPrimary : themeColors.colorText, fontSize: fontSize, fontWeight: "regular", alignHorizontal: positionH === 'flipped'
+    const height = (_a = restProps.height) !== null && _a !== void 0 ? _a : Math.ceil(lineNumber * lineHeight * fontSize);
+    return (_jsx(ItemLabel, Object.assign({}, restProps, { indexes: indexes, width: width, height: height, lineHeight: lineHeight, fill: usePaletteColor ? themeColors.colorPrimary : themeColors.colorText, fontSize: fontSize, fontWeight: "regular", alignHorizontal: positionH === 'flipped'
             ? 'right'
             : positionH === 'center'
                 ? 'center'
@@ -21,7 +21,7 @@ export const LabelText = (props) => {
             ? 'bottom'
             : positionV === 'center'
                 ? 'middle'
-                : 'top', children: formatter(datum.label || datum.desc) }));
+                : 'top', children: formatter(datum.label || datum.desc) })));
 };
 registerItem('plain-text', {
     component: LabelText,

package/esm/designs/items/ProgressCard.js

@@ -15,8 +15,8 @@ export const ProgressCard = (props) => {
         'borderRadius',
     ]);
     const value = datum.value;
-    const displayValue = value ?? 0;
-    const maxValue = Math.max(...data.items.map((item) => item.value ?? 0), 100);
+    const displayValue = value !== null && value !== void 0 ? value : 0;
+    const maxValue = Math.max(...data.items.map((item) => { var _a; return (_a = item.value) !== null && _a !== void 0 ? _a : 0; }), 100);
     const progressWidth = width - 2 * gap;
     // 计算进度条的填充宽度
     const progressScale = scaleLinear()
@@ -37,9 +37,9 @@ export const ProgressCard = (props) => {
     const textY = iconY;
     const progressY = height - gap - progressHeight;
     const hasValue = value !== undefined;
-    return (_jsxs(Group, { ...restProps, children: [_jsxs(Defs, { children: [_jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), _jsx("stop", { offset: "100%", stopColor: tinycolor
+    return (_jsxs(Group, Object.assign({}, restProps, { children: [_jsxs(Defs, { children: [_jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), _jsx("stop", { offset: "100%", stopColor: tinycolor
                                     .mix(themeColors.colorPrimary, '#fff', 20)
-                                    .toHexString() })] }), _jsxs("linearGradient", { id: progressBgId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimaryBg }), _jsx("stop", { offset: "100%", stopColor: themeColors.colorBg })] })] }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorBgElevated, stroke: themeColors.colorPrimaryBg, strokeWidth: 1, rx: borderRadius, ry: borderRadius, "data-element-type": "shape" }), _jsx(ItemIcon, { indexes: indexes, x: iconX, y: iconY, size: iconSize, fill: themeColors.colorPrimary }), _jsx(ItemLabel, { indexes: indexes, x: textStartX, y: textY, width: textWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "top", fontSize: 16, fontWeight: "medium", fill: themeColors.colorText, children: datum.label }), hasValue && (_jsx(ItemValue, { indexes: indexes, x: textStartX, y: textY + labelBounds.height, width: textWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "top", lineHeight: 1, fontSize: 24, fontWeight: "bold", fill: themeColors.colorPrimary, value: displayValue, formatter: valueFormatter })), _jsx(ItemDesc, { indexes: indexes, x: textStartX, y: textY + labelBounds.height + (hasValue ? 27 : 4), width: textWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "top", fontSize: 11, fill: themeColors.colorTextSecondary, lineNumber: hasValue ? 2 : 3, wordWrap: true, children: datum.desc }), _jsx(Rect, { x: gap, y: progressY, width: progressWidth, height: progressHeight, fill: `url(#${progressBgId})`, rx: progressHeight / 2, ry: progressHeight / 2, "data-element-type": "shape" }), _jsx(Rect, { x: gap, y: progressY, width: progressFillWidth, height: progressHeight, fill: `url(#${gradientId})`, rx: progressHeight / 2, ry: progressHeight / 2, "data-element-type": "shape" })] }));
+                                    .toHexString() })] }), _jsxs("linearGradient", { id: progressBgId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimaryBg }), _jsx("stop", { offset: "100%", stopColor: themeColors.colorBg })] })] }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorBgElevated, stroke: themeColors.colorPrimaryBg, strokeWidth: 1, rx: borderRadius, ry: borderRadius, "data-element-type": "shape" }), _jsx(ItemIcon, { indexes: indexes, x: iconX, y: iconY, size: iconSize, fill: themeColors.colorPrimary }), _jsx(ItemLabel, { indexes: indexes, x: textStartX, y: textY, width: textWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "top", fontSize: 16, fontWeight: "medium", fill: themeColors.colorText, children: datum.label }), hasValue && (_jsx(ItemValue, { indexes: indexes, x: textStartX, y: textY + labelBounds.height, width: textWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "top", lineHeight: 1, fontSize: 24, fontWeight: "bold", fill: themeColors.colorPrimary, value: displayValue, formatter: valueFormatter })), _jsx(ItemDesc, { indexes: indexes, x: textStartX, y: textY + labelBounds.height + (hasValue ? 27 : 4), width: textWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "top", fontSize: 11, fill: themeColors.colorTextSecondary, lineNumber: hasValue ? 2 : 3, wordWrap: true, children: datum.desc }), _jsx(Rect, { x: gap, y: progressY, width: progressWidth, height: progressHeight, fill: `url(#${progressBgId})`, rx: progressHeight / 2, ry: progressHeight / 2, "data-element-type": "shape" }), _jsx(Rect, { x: gap, y: progressY, width: progressFillWidth, height: progressHeight, fill: `url(#${gradientId})`, rx: progressHeight / 2, ry: progressHeight / 2, "data-element-type": "shape" })] })));
 };
 registerItem('progress-card', {
     component: ProgressCard,

package/esm/designs/items/QuarterCircular.js

@@ -106,7 +106,7 @@ export const QuarterCircular = (props) => {
                 : `M ${circleX} ${circleY} L ${circleX} ${circleY - circleRadius} A ${circleRadius} ${circleRadius} 0 0 0 ${circleX - circleRadius} ${circleY} Z`;
         }
     };
-    return (_jsxs(Group, { ...restProps, width: width, height: height, children: [_jsxs(ShapesGroup, { children: [_jsx(Path, { d: `M ${decorationCoords.diagonalStartX} ${decorationCoords.diagonalStartY} L ${decorationCoords.diagonalEndX} ${decorationCoords.diagonalEndY}`, stroke: themeColors.colorPrimary, strokeWidth: LINE_WIDTH, fill: "none" }), _jsx(Path, { d: `M ${decorationCoords.topLineStartX} ${decorationCoords.topLineY} L ${decorationCoords.topLineEndX} ${decorationCoords.topLineY}`, stroke: themeColors.colorPrimary, strokeWidth: LINE_WIDTH, fill: "none" }), _jsx(Ellipse, { x: decorationCoords.diagonalStartX - DOT_RADIUS, y: decorationCoords.diagonalStartY - DOT_RADIUS, width: DOT_RADIUS * 2, height: DOT_RADIUS * 2, fill: themeColors.colorPrimary }), _jsx(Ellipse, { x: decorationCoords.topLineEndX - DOT_RADIUS, y: decorationCoords.topLineY - DOT_RADIUS, width: DOT_RADIUS * 2, height: DOT_RADIUS * 2, fill: themeColors.colorPrimary })] }), _jsxs(Group, { children: [_jsx(Text, { x: contentCoords.valueX, y: CARD_CONTENT_Y, fontSize: VALUE_SIZE, fontWeight: "bold", fill: themeColors.colorPrimary, children: indexStr }), _jsx(Path, { d: getQuarterCirclePath(), fill: themeColors.colorPrimary, "data-element-type": "shape" }), datum.icon && (_jsx(ItemIcon, { indexes: indexes, x: contentCoords.iconX, y: iconY, size: iconSize, fill: themeColors.colorWhite })), datum.label && (_jsx(ItemLabel, { indexes: indexes, x: contentCoords.contentX, y: LABEL_Y, width: contentCoords.contentWidth, fontWeight: "bold", fill: themeColors.colorText, alignHorizontal: isFlipped ? 'right' : 'left', children: datum.label })), datum.desc && (_jsx(ItemDesc, { indexes: indexes, x: contentCoords.contentX, y: descY, width: contentCoords.contentWidth, fill: themeColors.colorTextSecondary, alignHorizontal: isFlipped ? 'right' : 'left', children: datum.desc }))] })] }));
+    return (_jsxs(Group, Object.assign({}, restProps, { width: width, height: height, children: [_jsxs(ShapesGroup, { children: [_jsx(Path, { d: `M ${decorationCoords.diagonalStartX} ${decorationCoords.diagonalStartY} L ${decorationCoords.diagonalEndX} ${decorationCoords.diagonalEndY}`, stroke: themeColors.colorPrimary, strokeWidth: LINE_WIDTH, fill: "none" }), _jsx(Path, { d: `M ${decorationCoords.topLineStartX} ${decorationCoords.topLineY} L ${decorationCoords.topLineEndX} ${decorationCoords.topLineY}`, stroke: themeColors.colorPrimary, strokeWidth: LINE_WIDTH, fill: "none" }), _jsx(Ellipse, { x: decorationCoords.diagonalStartX - DOT_RADIUS, y: decorationCoords.diagonalStartY - DOT_RADIUS, width: DOT_RADIUS * 2, height: DOT_RADIUS * 2, fill: themeColors.colorPrimary }), _jsx(Ellipse, { x: decorationCoords.topLineEndX - DOT_RADIUS, y: decorationCoords.topLineY - DOT_RADIUS, width: DOT_RADIUS * 2, height: DOT_RADIUS * 2, fill: themeColors.colorPrimary })] }), _jsxs(Group, { children: [_jsx(Text, { x: contentCoords.valueX, y: CARD_CONTENT_Y, fontSize: VALUE_SIZE, fontWeight: "bold", fill: themeColors.colorPrimary, children: indexStr }), _jsx(Path, { d: getQuarterCirclePath(), fill: themeColors.colorPrimary, "data-element-type": "shape" }), datum.icon && (_jsx(ItemIcon, { indexes: indexes, x: contentCoords.iconX, y: iconY, size: iconSize, fill: themeColors.colorWhite })), datum.label && (_jsx(ItemLabel, { indexes: indexes, x: contentCoords.contentX, y: LABEL_Y, width: contentCoords.contentWidth, fontWeight: "bold", fill: themeColors.colorText, alignHorizontal: isFlipped ? 'right' : 'left', children: datum.label })), datum.desc && (_jsx(ItemDesc, { indexes: indexes, x: contentCoords.contentX, y: descY, width: contentCoords.contentWidth, fill: themeColors.colorTextSecondary, alignHorizontal: isFlipped ? 'right' : 'left', children: datum.desc }))] })] })));
 };
 registerItem('quarter-circular', {
     component: QuarterCircular,

package/esm/designs/items/QuarterSimpleCard.js

@@ -108,7 +108,7 @@ export const QuarterSimpleCard = (props) => {
   Z
 `;
     }
-    return (_jsxs(Group, { ...restProps, children: [_jsx(Path, { d: cardPath, x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimary, "data-element-type": "shape" }), _jsx(ItemIcon, { indexes: indexes, x: iconX, y: iconY, size: iconSize, fill: themeColors.colorBg }), _jsx(ItemLabel, { indexes: indexes, x: labelX, y: labelY, width: contentWidth, fontSize: 14, fontWeight: "bold", fill: themeColors.colorBg, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', children: datum.label }), datum.desc && (_jsx(ItemDesc, { indexes: indexes, x: descX, y: descY, width: contentWidth, fontSize: 11, wordWrap: true, fill: themeColors.colorBg, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', children: datum.desc }))] }));
+    return (_jsxs(Group, Object.assign({}, restProps, { children: [_jsx(Path, { d: cardPath, x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimary, "data-element-type": "shape" }), _jsx(ItemIcon, { indexes: indexes, x: iconX, y: iconY, size: iconSize, fill: themeColors.colorBg }), _jsx(ItemLabel, { indexes: indexes, x: labelX, y: labelY, width: contentWidth, fontSize: 14, fontWeight: "bold", fill: themeColors.colorBg, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', children: datum.label }), datum.desc && (_jsx(ItemDesc, { indexes: indexes, x: descX, y: descY, width: contentWidth, fontSize: 11, wordWrap: true, fill: themeColors.colorBg, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', children: datum.desc }))] })));
 };
 registerItem('quarter-simple-card', {
     component: QuarterSimpleCard,

package/esm/designs/items/RibbonCard.js

@@ -13,9 +13,9 @@ export const RibbonCard = (props) => {
         'ribbonHeight',
     ]);
     const gradientId = `${themeColors.colorPrimary}-ribbon`;
-    return (_jsxs(Group, { ...restProps, children: [_jsx(Defs, { children: _jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), _jsx("stop", { offset: "100%", stopColor: tinycolor(themeColors.colorPrimary)
+    return (_jsxs(Group, Object.assign({}, restProps, { children: [_jsx(Defs, { children: _jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), _jsx("stop", { offset: "100%", stopColor: tinycolor(themeColors.colorPrimary)
                                 .darken(15)
-                                .toHexString() })] }) }), _jsxs(ShapesGroup, { children: [_jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorBgElevated, stroke: themeColors.colorPrimaryBg, strokeWidth: 1, rx: 8, ry: 8 }), _jsx(Rect, { x: 0, y: 0, width: width, height: ribbonHeight, fill: `url(#${gradientId})`, rx: 8, ry: 8 }), _jsx(Rect, { x: 0, y: 8, width: width, height: ribbonHeight - 8, fill: `url(#${gradientId})` }), _jsx(Path, { x: width - 20, y: ribbonHeight, width: 20, height: 8, fill: tinycolor(themeColors.colorPrimary).darken(25).toHexString(), d: "M0,0 L20,0 L15,8 L5,8 Z" })] }), _jsx(ItemIcon, { indexes: indexes, x: gap, y: ribbonHeight + gap, size: iconSize, fill: themeColors.colorPrimary }), _jsx(ItemLabel, { indexes: indexes, x: iconSize + 2 * gap, y: ribbonHeight + gap, width: width - iconSize - 3 * gap, height: iconSize, alignHorizontal: "left", alignVertical: "middle", lineHeight: 1, fontWeight: "bold", fill: themeColors.colorText, children: datum.label }), _jsx(ItemDesc, { indexes: indexes, x: gap, y: ribbonHeight + iconSize + gap + 5, width: width - 2 * gap, alignHorizontal: "left", fill: themeColors.colorTextSecondary, lineNumber: 3, wordWrap: true, children: datum.desc }), _jsx(ItemIcon, { indexes: indexes, x: width - gap - 8, y: gap / 2, size: 16, fill: themeColors.colorWhite })] }));
+                                .toHexString() })] }) }), _jsxs(ShapesGroup, { children: [_jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorBgElevated, stroke: themeColors.colorPrimaryBg, strokeWidth: 1, rx: 8, ry: 8 }), _jsx(Rect, { x: 0, y: 0, width: width, height: ribbonHeight, fill: `url(#${gradientId})`, rx: 8, ry: 8 }), _jsx(Rect, { x: 0, y: 8, width: width, height: ribbonHeight - 8, fill: `url(#${gradientId})` }), _jsx(Path, { x: width - 20, y: ribbonHeight, width: 20, height: 8, fill: tinycolor(themeColors.colorPrimary).darken(25).toHexString(), d: "M0,0 L20,0 L15,8 L5,8 Z" })] }), _jsx(ItemIcon, { indexes: indexes, x: gap, y: ribbonHeight + gap, size: iconSize, fill: themeColors.colorPrimary }), _jsx(ItemLabel, { indexes: indexes, x: iconSize + 2 * gap, y: ribbonHeight + gap, width: width - iconSize - 3 * gap, height: iconSize, alignHorizontal: "left", alignVertical: "middle", lineHeight: 1, fontWeight: "bold", fill: themeColors.colorText, children: datum.label }), _jsx(ItemDesc, { indexes: indexes, x: gap, y: ribbonHeight + iconSize + gap + 5, width: width - 2 * gap, alignHorizontal: "left", fill: themeColors.colorTextSecondary, lineNumber: 3, wordWrap: true, children: datum.desc }), _jsx(ItemIcon, { indexes: indexes, x: width - gap - 8, y: gap / 2, size: 16, fill: themeColors.colorWhite })] })));
 };
 registerItem('ribbon-card', {
     component: RibbonCard,

package/esm/designs/items/RoundedRectNode.js

@@ -11,11 +11,11 @@ export const RoundedRectNode = (props) => {
     const textY = padding;
     const textWidth = width - borderRadius * 2;
     const textHeight = height - padding * 2;
-    return (_jsxs(Group, { ...restProps, children: [_jsx(Rect, { "data-element-type": "shape", width: width, height: height, rx: borderRadius, ry: borderRadius, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, strokeWidth: 1, opacity: 0.8 }), _jsx(ItemLabel, { indexes: indexes, x: textX, y: textY, width: textWidth, height: textHeight, alignHorizontal: positionH === 'flipped'
+    return (_jsxs(Group, Object.assign({}, restProps, { children: [_jsx(Rect, { "data-element-type": "shape", width: width, height: height, rx: borderRadius, ry: borderRadius, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, strokeWidth: 1, opacity: 0.8 }), _jsx(ItemLabel, { indexes: indexes, x: textX, y: textY, width: textWidth, height: textHeight, alignHorizontal: positionH === 'flipped'
                     ? 'right'
                     : positionH === 'center'
                         ? 'center'
-                        : 'left', alignVertical: "middle", fontSize: 14, fontWeight: "500", fill: themeColors.colorText, children: datum.label })] }));
+                        : 'left', alignVertical: "middle", fontSize: 14, fontWeight: "500", fill: themeColors.colorText, children: datum.label })] })));
 };
 registerItem('rounded-rect-node', {
     component: RoundedRectNode,

package/esm/designs/items/SimpleCircleNode.js

@@ -6,7 +6,7 @@ export const SimpleCircleNode = (props) => {
     const [{ width = 24, height = width, strokeWidth = 2, themeColors, datum }, restProps,] = getItemProps(props, ['width', 'height']);
     const size = Math.min(width, height) - strokeWidth;
     const offset = strokeWidth / 2;
-    return (_jsxs(Group, { ...restProps, width: width, height: height, children: [_jsx(Rect, { width: width, height: height, fill: "none", visibility: "hidden" }), _jsx(Ellipse, { x: offset, y: offset, width: size, height: size, fill: themeColors.colorPrimary, stroke: themeColors.isDarkMode ? '#FFF' : '#000', strokeWidth: strokeWidth, "data-element-type": "shape", children: _jsx("title", { children: datum.label || datum.desc }) })] }));
+    return (_jsxs(Group, Object.assign({}, restProps, { width: width, height: height, children: [_jsx(Rect, { width: width, height: height, fill: "none", visibility: "hidden" }), _jsx(Ellipse, { x: offset, y: offset, width: size, height: size, fill: themeColors.colorPrimary, stroke: themeColors.isDarkMode ? '#FFF' : '#000', strokeWidth: strokeWidth, "data-element-type": "shape", children: _jsx("title", { children: datum.label || datum.desc }) })] })));
 };
 registerItem('simple-circle-node', {
     component: SimpleCircleNode,

package/esm/designs/items/SimpleHorizontalArrow.js

@@ -17,11 +17,11 @@ export const SimpleHorizontalArrow = (props) => {
     const descBounds = getElementBounds(desc);
     const textHeight = labelBounds.height + descBounds.height;
     const totalHeight = textHeight + labelGap + arrowHeight + labelGap + textHeight;
-    return (_jsx(Group, { width: width, height: totalHeight, ...restProps, children: _jsxs(FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? (_jsxs(_Fragment, { children: [desc, label, _jsx(Gap, { height: labelGap })] })) : (_jsx(_Fragment, { children: _jsx(Gap, { height: textHeight + labelGap }) })), _jsxs(AlignLayout, { horizontal: "center", vertical: "middle", children: [_jsx(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), _jsx(Text, { width: width, height: arrowHeight, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: datum.time
+    return (_jsx(Group, Object.assign({ width: width, height: totalHeight }, restProps, { children: _jsxs(FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? (_jsxs(_Fragment, { children: [desc, label, _jsx(Gap, { height: labelGap })] })) : (_jsx(_Fragment, { children: _jsx(Gap, { height: textHeight + labelGap }) })), _jsxs(AlignLayout, { horizontal: "center", vertical: "middle", children: [_jsx(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), _jsx(Text, { width: width, height: arrowHeight, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: datum.time
                                 ? datum.time
                                 : String(indexes[0] + 1)
                                     .padStart(2, '0')
-                                    .slice(-2) })] }), !isVNormal ? (_jsxs(_Fragment, { children: [_jsx(Gap, { height: labelGap }), label, desc] })) : (_jsx(_Fragment, { children: _jsx(Gap, { height: textHeight + labelGap }) }))] }) }));
+                                    .slice(-2) })] }), !isVNormal ? (_jsxs(_Fragment, { children: [_jsx(Gap, { height: labelGap }), label, desc] })) : (_jsx(_Fragment, { children: _jsx(Gap, { height: textHeight + labelGap }) }))] }) })));
 };
 const HorizontalArrow = (props) => {
     const { x = 0, y = 0, width = 100, height = 40, fill = '#FF356A', size = 10, } = props;

package/esm/designs/items/SimpleIllusItem.js

@@ -12,7 +12,7 @@ export const SimpleIllusItem = (props) => {
         : themeColors.colorText;
     const labelContent = (_jsx(ItemLabel, { indexes: indexes, width: width, alignHorizontal: "center", alignVertical: "middle", fill: labelColor, children: label }));
     const labelBounds = getElementBounds(labelContent);
-    return (_jsxs(FlexLayout, { ...restProps, width: width, height: illusSize + gap + labelBounds.height + gap + 48, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: gap, children: [_jsx(Illus, { indexes: indexes, width: illusSize, height: illusSize }), labelContent, _jsx(ItemDesc, { indexes: indexes, width: width, alignHorizontal: "center", alignVertical: "top", fill: themeColors.colorTextSecondary, lineNumber: 3, children: desc })] }));
+    return (_jsxs(FlexLayout, Object.assign({}, restProps, { width: width, height: illusSize + gap + labelBounds.height + gap + 48, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: gap, children: [_jsx(Illus, { indexes: indexes, width: illusSize, height: illusSize }), labelContent, _jsx(ItemDesc, { indexes: indexes, width: width, alignHorizontal: "center", alignVertical: "top", fill: themeColors.colorTextSecondary, lineNumber: 3, children: desc })] })));
 };
 registerItem('simple-illus', {
     component: SimpleIllusItem,

package/esm/designs/items/SimpleItem.js

@@ -49,7 +49,7 @@ export const SimpleItem = (props) => {
                     ? height - labelBounds.height - (descHeight || 0) - gap
                     : 0
             : 0;
-        return (_jsxs(Group, { ...restProps, children: [_jsx(ItemLabel, { indexes: indexes, width: width, y: labelY, alignHorizontal: textAlign, alignVertical: "middle", fill: labelColor, children: label }), _jsx(ItemDesc, { indexes: indexes, width: width, height: descHeight, y: labelY + labelBounds.height + gap, alignHorizontal: textAlign, alignVertical: getDescVerticalAlign(positionV, false), lineNumber: descLineNumber, fill: themeColors.colorTextSecondary, children: desc })] }));
+        return (_jsxs(Group, Object.assign({}, restProps, { children: [_jsx(ItemLabel, { indexes: indexes, width: width, y: labelY, alignHorizontal: textAlign, alignVertical: "middle", fill: labelColor, children: label }), _jsx(ItemDesc, { indexes: indexes, width: width, height: descHeight, y: labelY + labelBounds.height + gap, alignHorizontal: textAlign, alignVertical: getDescVerticalAlign(positionV, false), lineNumber: descLineNumber, fill: themeColors.colorTextSecondary, children: desc })] })));
     }
     if (positionH === 'center') {
         // 计算 desc 的可用高度和行数
@@ -70,7 +70,7 @@ export const SimpleItem = (props) => {
                     ? height - contentHeight - iconHeight - gap
                     : 0
             : 0;
-        return (_jsx(FlexLayout, { ...restProps, flexDirection: "column", gap: gap, alignItems: "center", children: positionV === 'flipped' ? (_jsxs(_Fragment, { children: [_jsxs(Group, { children: [_jsx(ItemLabel, { indexes: indexes, width: width, y: labelY, alignHorizontal: "center", alignVertical: "middle", fill: labelColor, children: label }), _jsx(ItemDesc, { indexes: indexes, width: width, height: descHeight, y: labelY + labelBounds.height + gap, alignHorizontal: "center", alignVertical: "bottom", lineNumber: descLineNumber, fill: themeColors.colorTextSecondary, children: desc })] }), iconContent] })) : (_jsxs(_Fragment, { children: [iconContent, _jsxs(Group, { children: [_jsx(ItemLabel, { indexes: indexes, width: width, y: labelY, alignHorizontal: "center", alignVertical: "middle", fill: labelColor, children: label }), _jsx(ItemDesc, { indexes: indexes, width: width, height: descHeight, y: labelY + labelBounds.height + gap, alignHorizontal: "center", alignVertical: "top", lineNumber: descLineNumber, fill: themeColors.colorTextSecondary, children: desc })] })] })) }));
+        return (_jsx(FlexLayout, Object.assign({}, restProps, { flexDirection: "column", gap: gap, alignItems: "center", children: positionV === 'flipped' ? (_jsxs(_Fragment, { children: [_jsxs(Group, { children: [_jsx(ItemLabel, { indexes: indexes, width: width, y: labelY, alignHorizontal: "center", alignVertical: "middle", fill: labelColor, children: label }), _jsx(ItemDesc, { indexes: indexes, width: width, height: descHeight, y: labelY + labelBounds.height + gap, alignHorizontal: "center", alignVertical: "bottom", lineNumber: descLineNumber, fill: themeColors.colorTextSecondary, children: desc })] }), iconContent] })) : (_jsxs(_Fragment, { children: [iconContent, _jsxs(Group, { children: [_jsx(ItemLabel, { indexes: indexes, width: width, y: labelY, alignHorizontal: "center", alignVertical: "middle", fill: labelColor, children: label }), _jsx(ItemDesc, { indexes: indexes, width: width, height: descHeight, y: labelY + labelBounds.height + gap, alignHorizontal: "center", alignVertical: "top", lineNumber: descLineNumber, fill: themeColors.colorTextSecondary, children: desc })] })] })) })));
     }
     const iconBounds = getElementBounds(iconContent);
     const textWidth = Math.max(width - iconBounds.width - gap, 0);
@@ -90,7 +90,7 @@ export const SimpleItem = (props) => {
                 ? height - labelBounds.height - (descHeight || 0) - gap
                 : 0
         : 0;
-    return (_jsx(FlexLayout, { ...restProps, flexDirection: "row", gap: gap, alignItems: getIconVerticalAlign(positionV), children: positionH === 'flipped' ? (_jsxs(_Fragment, { children: [_jsxs(Group, { children: [_jsx(ItemLabel, { indexes: indexes, width: textWidth, y: labelY, alignHorizontal: "right", alignVertical: "middle", fill: labelColor, children: label }), _jsx(ItemDesc, { indexes: indexes, width: textWidth, height: descHeight, y: labelY + labelBounds.height + gap, alignHorizontal: "right", alignVertical: getDescVerticalAlign(positionV, true), lineNumber: descLineNumber, fill: themeColors.colorTextSecondary, children: desc })] }), iconContent] })) : (_jsxs(_Fragment, { children: [iconContent, _jsxs(Group, { children: [_jsx(ItemLabel, { indexes: indexes, width: textWidth, y: labelY, alignHorizontal: "left", alignVertical: "middle", fill: labelColor, children: label }), _jsx(ItemDesc, { indexes: indexes, width: textWidth, height: descHeight, y: labelY + labelBounds.height + gap, alignHorizontal: "left", alignVertical: getDescVerticalAlign(positionV, true), lineNumber: descLineNumber, fill: themeColors.colorTextSecondary, children: desc })] })] })) }));
+    return (_jsx(FlexLayout, Object.assign({}, restProps, { flexDirection: "row", gap: gap, alignItems: getIconVerticalAlign(positionV), children: positionH === 'flipped' ? (_jsxs(_Fragment, { children: [_jsxs(Group, { children: [_jsx(ItemLabel, { indexes: indexes, width: textWidth, y: labelY, alignHorizontal: "right", alignVertical: "middle", fill: labelColor, children: label }), _jsx(ItemDesc, { indexes: indexes, width: textWidth, height: descHeight, y: labelY + labelBounds.height + gap, alignHorizontal: "right", alignVertical: getDescVerticalAlign(positionV, true), lineNumber: descLineNumber, fill: themeColors.colorTextSecondary, children: desc })] }), iconContent] })) : (_jsxs(_Fragment, { children: [iconContent, _jsxs(Group, { children: [_jsx(ItemLabel, { indexes: indexes, width: textWidth, y: labelY, alignHorizontal: "left", alignVertical: "middle", fill: labelColor, children: label }), _jsx(ItemDesc, { indexes: indexes, width: textWidth, height: descHeight, y: labelY + labelBounds.height + gap, alignHorizontal: "left", alignVertical: getDescVerticalAlign(positionV, true), lineNumber: descLineNumber, fill: themeColors.colorTextSecondary, children: desc })] })] })) })));
     function getDescVerticalAlign(positionV, hasIcon) {
         return 'top';
         // if (positionV === 'normal') return 'top';

package/esm/designs/items/SimpleVerticalArrow.js

@@ -15,9 +15,9 @@ export const SimpleVerticalArrow = (props) => {
     const arrowWidth = 30;
     const textWidth = 120;
     const totalWidth = textWidth + labelGap + arrowWidth + labelGap + textWidth;
-    return (_jsx(Group, { width: totalWidth, height: height, ...restProps, children: _jsxs(FlexLayout, { flexDirection: "row", alignItems: "center", children: [isNormal ? (_jsxs(_Fragment, { children: [_jsxs(FlexLayout, { flexDirection: "column", alignItems: "flex-end", children: [label, desc] }), _jsx(Gap, { width: labelGap })] })) : (_jsx(_Fragment, { children: _jsx(Gap, { width: textWidth + labelGap }) })), _jsxs(AlignLayout, { horizontal: "center", vertical: "middle", children: [_jsx(VerticalArrow, { width: arrowWidth, height: height, fill: themeColors.colorPrimary }), _jsx(Text, { width: arrowWidth, height: height, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: String(indexes[0] + 1)
+    return (_jsx(Group, Object.assign({ width: totalWidth, height: height }, restProps, { children: _jsxs(FlexLayout, { flexDirection: "row", alignItems: "center", children: [isNormal ? (_jsxs(_Fragment, { children: [_jsxs(FlexLayout, { flexDirection: "column", alignItems: "flex-end", children: [label, desc] }), _jsx(Gap, { width: labelGap })] })) : (_jsx(_Fragment, { children: _jsx(Gap, { width: textWidth + labelGap }) })), _jsxs(AlignLayout, { horizontal: "center", vertical: "middle", children: [_jsx(VerticalArrow, { width: arrowWidth, height: height, fill: themeColors.colorPrimary }), _jsx(Text, { width: arrowWidth, height: height, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: String(indexes[0] + 1)
                                 .padStart(2, '0')
-                                .slice(-2) })] }), !isNormal ? (_jsxs(_Fragment, { children: [_jsx(Gap, { width: labelGap }), _jsxs(FlexLayout, { flexDirection: "column", alignItems: "flex-start", children: [label, desc] })] })) : (_jsx(_Fragment, { children: _jsx(Gap, { width: textWidth + labelGap }) }))] }) }));
+                                .slice(-2) })] }), !isNormal ? (_jsxs(_Fragment, { children: [_jsx(Gap, { width: labelGap }), _jsxs(FlexLayout, { flexDirection: "column", alignItems: "flex-start", children: [label, desc] })] })) : (_jsx(_Fragment, { children: _jsx(Gap, { width: textWidth + labelGap }) }))] }) })));
 };
 const VerticalArrow = (props) => {
     const { x = 0, y = 0, width = 30, height = 100, fill = '#FF356A', size = 10, } = props;

package/esm/designs/items/UnderlineText.js

@@ -36,7 +36,7 @@ export const UnderlineText = (props) => {
     // 描述文本位置
     const descX = 0; // 使用 alignHorizontal 控制对齐
     const descY = underlineY + underlineHeight + gap * 2;
-    return (_jsxs(Group, { width: width, height: contentHeight, ...restProps, children: [datum.label && (_jsx(ItemLabel, { indexes: indexes, x: titleX, y: titleY, width: width, alignHorizontal: alignHorizontal, fill: themeColors.colorPrimary, fontSize: 18, fontWeight: "bold", children: datum.label })), datum.label && (_jsx(Rect, { x: underlineX, y: underlineY, width: underlineWidth, height: underlineHeight, fill: themeColors.colorPrimary, "data-element-type": "shape" })), datum.desc && (_jsx(ItemDesc, { indexes: indexes, width: width, x: descX, y: descY, alignHorizontal: alignHorizontal, wordWrap: true, fill: themeColors.colorText, children: datum.desc }))] }));
+    return (_jsxs(Group, Object.assign({ width: width, height: contentHeight }, restProps, { children: [datum.label && (_jsx(ItemLabel, { indexes: indexes, x: titleX, y: titleY, width: width, alignHorizontal: alignHorizontal, fill: themeColors.colorPrimary, fontSize: 18, fontWeight: "bold", children: datum.label })), datum.label && (_jsx(Rect, { x: underlineX, y: underlineY, width: underlineWidth, height: underlineHeight, fill: themeColors.colorPrimary, "data-element-type": "shape" })), datum.desc && (_jsx(ItemDesc, { indexes: indexes, width: width, x: descX, y: descY, alignHorizontal: alignHorizontal, wordWrap: true, fill: themeColors.colorText, children: datum.desc }))] })));
 };
 registerItem('underline-text', {
     component: UnderlineText,

package/esm/designs/items/VerticalIconArrow.js

@@ -28,9 +28,9 @@ export const VerticalIconArrow = (props) => {
     const totalWidth = Math.max(labelBounds.width + dotLineGap + dotLineBounds.width, iconGap + iconBounds.width) *
         2 +
         arrowWidth;
-    return (_jsx(Group, { width: totalWidth, height: height, ...restProps, children: _jsxs(FlexLayout, { flexDirection: "row", alignItems: "center", children: [isNormal ? (_jsxs(_Fragment, { children: [_jsxs(FlexLayout, { flexDirection: "column", alignItems: "flex-end", children: [label, desc] }), _jsx(Gap, { width: dotLineGap }), dotLine] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { width: fixedGap }), icon, _jsx(Gap, { width: iconGap })] })), _jsxs(AlignLayout, { horizontal: "center", vertical: "middle", children: [_jsx(VerticalArrow, { width: arrowWidth, height: height, fill: themeColors.colorPrimary }), _jsx(Text, { width: arrowWidth, height: height, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: String(indexes[0] + 1)
+    return (_jsx(Group, Object.assign({ width: totalWidth, height: height }, restProps, { children: _jsxs(FlexLayout, { flexDirection: "row", alignItems: "center", children: [isNormal ? (_jsxs(_Fragment, { children: [_jsxs(FlexLayout, { flexDirection: "column", alignItems: "flex-end", children: [label, desc] }), _jsx(Gap, { width: dotLineGap }), dotLine] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { width: fixedGap }), icon, _jsx(Gap, { width: iconGap })] })), _jsxs(AlignLayout, { horizontal: "center", vertical: "middle", children: [_jsx(VerticalArrow, { width: arrowWidth, height: height, fill: themeColors.colorPrimary }), _jsx(Text, { width: arrowWidth, height: height, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: String(indexes[0] + 1)
                                 .padStart(2, '0')
-                                .slice(-2) })] }), !isNormal ? (_jsxs(_Fragment, { children: [dotLine, _jsx(Gap, { width: dotLineGap }), _jsxs(FlexLayout, { flexDirection: "column", alignItems: "flex-start", children: [label, desc] })] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { width: iconGap }), icon] }))] }) }));
+                                .slice(-2) })] }), !isNormal ? (_jsxs(_Fragment, { children: [dotLine, _jsx(Gap, { width: dotLineGap }), _jsxs(FlexLayout, { flexDirection: "column", alignItems: "flex-start", children: [label, desc] })] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { width: iconGap }), icon] }))] }) })));
 };
 const VerticalArrow = (props) => {
     const { x = 0, y = 0, width = 30, height = 100, fill = '#FF356A', size = 10, } = props;

package/esm/designs/layouts/Align.js

@@ -1,20 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "../../jsx-runtime.js";
 import { cloneElement, createLayout, getElementBounds, getElementsBounds, Group, } from '../../jsx/index.js';
-export const AlignLayout = createLayout((children, { horizontal, vertical, ...props }) => {
+export const AlignLayout = createLayout((children, _a) => {
+    var _b, _c, _d, _e;
+    var { horizontal, vertical } = _a, props = __rest(_a, ["horizontal", "vertical"]);
     if (!children || children.length === 0) {
-        return _jsx(Group, { ...props });
+        return _jsx(Group, Object.assign({}, props));
     }
     const childBounds = children.map((child) => getElementBounds(child));
     const childrenBounds = getElementsBounds(children);
     // 容器尺寸和位置
-    const containerX = props.x ?? childrenBounds.x;
-    const containerY = props.y ?? childrenBounds.y;
-    const containerWidth = props.width ?? childrenBounds.width;
-    const containerHeight = props.height ?? childrenBounds.height;
+    const containerX = (_b = props.x) !== null && _b !== void 0 ? _b : childrenBounds.x;
+    const containerY = (_c = props.y) !== null && _c !== void 0 ? _c : childrenBounds.y;
+    const containerWidth = (_d = props.width) !== null && _d !== void 0 ? _d : childrenBounds.width;
+    const containerHeight = (_e = props.height) !== null && _e !== void 0 ? _e : childrenBounds.height;
     // 对齐子元素（使用相对于容器的坐标）
     const positionedChildren = children.map((child, index) => {
         const bounds = childBounds[index];
-        const childProps = { ...child.props };
+        const childProps = Object.assign({}, child.props);
         // 水平对齐（相对于容器左边界）
         if (horizontal !== undefined) {
             switch (horizontal) {
@@ -53,12 +66,6 @@ export const AlignLayout = createLayout((children, { horizontal, vertical, ...pr
         }
         return cloneElement(child, childProps);
     });
-    const containerProps = {
-        ...props,
-        x: containerX,
-        y: containerY,
-        width: containerWidth,
-        height: containerHeight,
-    };
-    return _jsx(Group, { ...containerProps, children: positionedChildren });
+    const containerProps = Object.assign(Object.assign({}, props), { x: containerX, y: containerY, width: containerWidth, height: containerHeight });
+    return _jsx(Group, Object.assign({}, containerProps, { children: positionedChildren }));
 });

package/esm/designs/layouts/Flex.js

@@ -1,15 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "../../jsx-runtime.js";
 import { cloneElement, createLayout, getElementBounds, getElementsBounds, Group, } from '../../jsx/index.js';
-export const FlexLayout = createLayout((children, { flexDirection = 'row', justifyContent = 'flex-start', alignItems = 'flex-start', alignContent = 'flex-start', flexWrap = 'nowrap', gap = 0, ...props }) => {
+export const FlexLayout = createLayout((children, _a) => {
+    var _b, _c, _d, _e, _f, _g;
+    var { flexDirection = 'row', justifyContent = 'flex-start', alignItems = 'flex-start', alignContent = 'flex-start', flexWrap = 'nowrap', gap = 0 } = _a, props = __rest(_a, ["flexDirection", "justifyContent", "alignItems", "alignContent", "flexWrap", "gap"]);
     if (!children || children.length === 0) {
-        return _jsx(Group, { ...props });
+        return _jsx(Group, Object.assign({}, props));
     }
     const isRow = flexDirection === 'row' || flexDirection === 'row-reverse';
     const isReverse = flexDirection === 'row-reverse' || flexDirection === 'column-reverse';
     const childBounds = children.map((child) => getElementBounds(child));
     const childrenBounds = getElementsBounds(children);
-    const containerWidth = props.width ?? childrenBounds.width;
-    const containerHeight = props.height ?? childrenBounds.height;
+    const containerWidth = (_b = props.width) !== null && _b !== void 0 ? _b : childrenBounds.width;
+    const containerHeight = (_c = props.height) !== null && _c !== void 0 ? _c : childrenBounds.height;
     const hasContainerSize = props.width !== undefined && props.height !== undefined;
     const lines = [];
     if (flexWrap === 'wrap' && hasContainerSize) {
@@ -139,7 +152,7 @@ export const FlexLayout = createLayout((children, { flexDirection = 'row', justi
                         const lineEndIndex = lineStartIndex + line.children.length;
                         for (let i = lineStartIndex; i < lineEndIndex; i++) {
                             const child = layoutChildren[i];
-                            const newProps = { ...child.props };
+                            const newProps = Object.assign({}, child.props);
                             if (isRow) {
                                 newProps.y = (newProps.y || 0) + currentOffset;
                             }
@@ -162,7 +175,7 @@ export const FlexLayout = createLayout((children, { flexDirection = 'row', justi
         }
         if (crossOffset !== 0 && alignContent !== 'space-between') {
             layoutChildren.forEach((child, index) => {
-                const newProps = { ...child.props };
+                const newProps = Object.assign({}, child.props);
                 if (isRow) {
                     newProps.y = (newProps.y || 0) + crossOffset;
                 }
@@ -180,7 +193,7 @@ export const FlexLayout = createLayout((children, { flexDirection = 'row', justi
                 layoutChildren.forEach((child, index) => {
                     const bounds = childBounds[index];
                     const centerOffset = (maxHeight - bounds.height) / 2;
-                    const newProps = { ...child.props };
+                    const newProps = Object.assign({}, child.props);
                     newProps.y = (newProps.y || 0) + centerOffset;
                     layoutChildren[index] = cloneElement(child, newProps);
                 });
@@ -190,7 +203,7 @@ export const FlexLayout = createLayout((children, { flexDirection = 'row', justi
                 layoutChildren.forEach((child, index) => {
                     const bounds = childBounds[index];
                     const centerOffset = (maxWidth - bounds.width) / 2;
-                    const newProps = { ...child.props };
+                    const newProps = Object.assign({}, child.props);
                     newProps.x = (newProps.x || 0) + centerOffset;
                     layoutChildren[index] = cloneElement(child, newProps);
                 });
@@ -198,12 +211,6 @@ export const FlexLayout = createLayout((children, { flexDirection = 'row', justi
         }
     }
     const finalBounds = getElementsBounds(layoutChildren);
-    const containerProps = {
-        ...props,
-        x: props.x ?? childrenBounds.x,
-        y: props.y ?? childrenBounds.y,
-        width: props.width ?? finalBounds.width,
-        height: props.height ?? finalBounds.height,
-    };
-    return _jsx(Group, { ...containerProps, children: layoutChildren });
+    const containerProps = Object.assign(Object.assign({}, props), { x: (_d = props.x) !== null && _d !== void 0 ? _d : childrenBounds.x, y: (_e = props.y) !== null && _e !== void 0 ? _e : childrenBounds.y, width: (_f = props.width) !== null && _f !== void 0 ? _f : finalBounds.width, height: (_g = props.height) !== null && _g !== void 0 ? _g : finalBounds.height });
+    return _jsx(Group, Object.assign({}, containerProps, { children: layoutChildren }));
 });

package/esm/designs/structures/chart-bar.js

@@ -7,22 +7,23 @@ import { FlexLayout } from '../layouts/index.js';
 import { getColorPrimary, getPaletteColor, getThemeColors } from '../utils/index.js';
 import { registerStructure } from './registry.js';
 export const ChartBar = (props) => {
+    var _a, _b, _c;
     const { Title, Item, data, width, gap, barGap, barHeight = 28, barAreaWidth, labelGap = 16, padding = 24, showValue = true, options, valueFormatter = (value) => value.toString(), } = props;
-    const resolvedBarAreaWidth = barAreaWidth ?? width ?? 480;
+    const resolvedBarAreaWidth = (_a = barAreaWidth !== null && barAreaWidth !== void 0 ? barAreaWidth : width) !== null && _a !== void 0 ? _a : 480;
     const { title, desc, items = [], xTitle, yTitle } = data;
     const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
     if (items.length === 0) {
         return (_jsx(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: titleContent }));
     }
     const [paddingTop, paddingRight, paddingBottom, paddingLeft] = parsePadding(padding);
-    const sampleDatum = items[0] ?? { label: '', value: 0 };
+    const sampleDatum = (_b = items[0]) !== null && _b !== void 0 ? _b : { label: '', value: 0 };
     const itemBounds = getElementBounds(_jsx(Item, { indexes: [0], datum: sampleDatum, data: data }));
     const labelWidth = itemBounds.width || 140;
     const labelHeight = itemBounds.height || barHeight;
     const rowHeight = Math.max(barHeight, labelHeight);
     const gapByHeight = Math.max(12, rowHeight * 0.35);
-    const resolvedGap = barGap ?? gap ?? gapByHeight;
-    const values = items.map((item) => item.value ?? 0);
+    const resolvedGap = (_c = barGap !== null && barGap !== void 0 ? barGap : gap) !== null && _c !== void 0 ? _c : gapByHeight;
+    const values = items.map((item) => { var _a; return (_a = item.value) !== null && _a !== void 0 ? _a : 0; });
     const maxValue = Math.max(...values, 0);
     const minValue = Math.min(...values, 0);
     const domainMin = minValue < 0 ? minValue * 1.1 : 0;
@@ -58,8 +59,9 @@ export const ChartBar = (props) => {
     const axisY = yStart + chartHeight + axisGap;
     const formatTick = (value) => Number.isInteger(value) ? value.toString() : value.toFixed(1);
     items.forEach((item, index) => {
+        var _a;
         const indexes = [index];
-        const value = item.value ?? 0;
+        const value = (_a = item.value) !== null && _a !== void 0 ? _a : 0;
         const rowY = yStart + index * (rowHeight + resolvedGap);
         const barY = rowY + (rowHeight - barHeight) / 2;
         const barX = value >= 0 ? barStartX + zeroX : barStartX + scale(value);

package/esm/designs/structures/chart-column.js

@@ -15,7 +15,7 @@ export const ChartColumn = (props) => {
         return (_jsx(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: titleContent }));
     }
     const themeColors = getThemeColors(options.themeConfig);
-    const values = items.map((item) => item.value ?? 0);
+    const values = items.map((item) => { var _a; return (_a = item.value) !== null && _a !== void 0 ? _a : 0; });
     const sortedValues = [...values, 0].sort((a, b) => a - b);
     const hasNegative = sortedValues[0] < 0;
     const chartWidth = items.length * columnWidth + (items.length - 1) * columnGap;
@@ -36,8 +36,9 @@ export const ChartColumn = (props) => {
     const itemElements = [];
     const gradientDefs = [];
     items.forEach((item, index) => {
+        var _a;
         const indexes = [index];
-        const value = item.value ?? 0;
+        const value = (_a = item.value) !== null && _a !== void 0 ? _a : 0;
         const columnX = paddingLeft + index * (columnWidth + columnGap);
         const columnY = value >= 0 ? yScale(value) : zeroY;
         const columnHeight = Math.abs(yScale(value) - zeroY);

package/esm/designs/structures/chart-line.js

@@ -21,7 +21,7 @@ export const ChartLine = (props) => {
         positionH: 'center',
         positionV: 'normal',
     };
-    const sampleBounds = getElementBounds(_jsx(Item, { ...itemProps }));
+    const sampleBounds = getElementBounds(_jsx(Item, Object.assign({}, itemProps)));
     const labelWidth = sampleBounds.width;
     const labelHeight = sampleBounds.height;
     const xTickSpace = Math.max(28, labelHeight + 14);
@@ -41,7 +41,7 @@ export const ChartLine = (props) => {
     const chartOriginY = paddingTop + yTitleSpace;
     const totalWidth = chartOriginX + derivedChartWidth + paddingRight;
     const totalHeight = chartOriginY + height + xTickSpace + xTitleSpace + paddingBottom;
-    const values = items.map((item) => item.value ?? 0);
+    const values = items.map((item) => { var _a; return (_a = item.value) !== null && _a !== void 0 ? _a : 0; });
     const maxValue = Math.max(...values, 0);
     const minValue = Math.min(...values, 0);
     const domainPadding = Math.max(Math.abs(maxValue), Math.abs(minValue)) * 0.1;
@@ -98,10 +98,11 @@ export const ChartLine = (props) => {
         return segments.join(' ');
     };
     items.forEach((item, index) => {
+        var _a;
         const x = chartOriginX + index * spacing + labelWidth / 2;
-        const y = chartOriginY + scaleY(item.value ?? 0);
+        const y = chartOriginY + scaleY((_a = item.value) !== null && _a !== void 0 ? _a : 0);
         pointPositions.push({ x, y, datum: item });
-        xLabels.push(_jsx(Item, { ...itemProps, indexes: [index], datum: item, x: x - labelWidth / 2, y: chartOriginY + height + 4 }));
+        xLabels.push(_jsx(Item, Object.assign({}, itemProps, { indexes: [index], datum: item, x: x - labelWidth / 2, y: chartOriginY + height + 4 })));
         const stopColor = getPaletteColor(options, [index]) || themeColors.colorPrimary;
         colorStopsData.push({ x, color: stopColor });
     });
@@ -142,10 +143,11 @@ export const ChartLine = (props) => {
     ].join(' ');
     lineElements.push(_jsx(Path, { d: areaPath, width: derivedChartWidth, height: height, fill: `url(#${gradientAreaId})`, stroke: "none", "data-element-type": "shape" }));
     pointPositions.forEach((pos, index) => {
+        var _a;
         const paletteColor = getPaletteColor(options, [index]) || themeColors.colorPrimary;
         pointElements.push(_jsx(Ellipse, { x: pos.x - 6, y: pos.y - 6, width: 12, height: 12, fill: paletteColor, "data-element-type": "shape" }));
         if (showValue) {
-            valueElements.push(_jsx(Text, { x: pos.x, y: pos.y - 12, alignHorizontal: "center", alignVertical: "bottom", fontSize: 12, fontWeight: "bold", fill: paletteColor, children: valueFormatter(pos.datum.value ?? 0, pos.datum) }));
+            valueElements.push(_jsx(Text, { x: pos.x, y: pos.y - 12, alignHorizontal: "center", alignVertical: "bottom", fontSize: 12, fontWeight: "bold", fill: paletteColor, children: valueFormatter((_a = pos.datum.value) !== null && _a !== void 0 ? _a : 0, pos.datum) }));
         }
     });
     axisElements.push(_jsx(Path, { d: `M ${chartOriginX} ${chartOriginY + axisBaseY} L ${chartOriginX + derivedChartWidth} ${chartOriginY + axisBaseY}`, width: derivedChartWidth, height: 1, stroke: axisColor, strokeWidth: 1, "data-element-type": "shape" }));