@antv/infographic 0.1.2 → 0.1.3

package/esm/constants/components.d.ts

@@ -0,0 +1 @@
+export declare const COMPONENT_ROLE = "infographic-component";

package/esm/constants/components.js

@@ -0,0 +1 @@
+export const COMPONENT_ROLE = 'infographic-component';

package/esm/constants/element.d.ts

@@ -1,11 +1,22 @@
+/**
+ * Infographic 抽象元素类型枚举
+ */
 export declare const enum ElementTypeEnum {
     Background = "background",
-    Text = "text",
-    IconGroup = "icon-group",
-    Icon = "icon",
-    Geometry = "geometry",
-    Button = "button",
+    Title = "title",
+    Desc = "desc",
+    ItemsGroup = "items-group",
+    ItemIconGroup = "item-icon-group",
+    ItemIcon = "item-icon",
+    ItemLabel = "item-label",
+    ItemDesc = "item-desc",
+    ItemValue = "item-value",
+    ItemsIllus = "items-illus",
+    BtnAdd = "btn-add",
+    BtnRemove = "btn-remove",
     IllusGroup = "illus-group",
     IllusVolume = "illus-volume",
-    Illus = "illus"
+    Illus = "illus",
+    BtnsGroup = "btns-group",
+    Unknown = "unknown"
 }

package/esm/constants/index.d.ts

@@ -1 +1,3 @@
+export * from './components';
 export * from './element';
+export * from './shape';

package/esm/constants/index.js

@@ -1 +1,3 @@
+export * from './components';
 export * from './element';
+export * from './shape';

package/esm/constants/shape.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 基本图形类型枚举
+ */
+export declare const enum ShapeTypeEnum {
+    Group = "group",
+    Text = "text",
+    Rectangle = "rectangle",
+    Circle = "circle",
+    Ellipse = "ellipse",
+    Line = "line",
+    Polyline = "polyline",
+    Polygon = "polygon",
+    Path = "path",
+    Image = "image",
+    Icon = "icon"
+}

package/esm/designs/components/Btn.js

@@ -8,7 +8,7 @@ export const BtnAdd = (props) => {
         width: 20,
         height: 20,
         'data-indexes': indexes,
-        'data-element-type': 'btn-add',
+        'data-element-type': "btn-add" /* ElementTypeEnum.BtnAdd */,
     };
     return _jsx(Rect, { ...defaultProps, ...restProps });
 };
@@ -20,7 +20,7 @@ export const BtnRemove = (props) => {
         width: 20,
         height: 20,
         'data-indexes': indexes,
-        'data-element-type': 'btn-remove',
+        'data-element-type': "btn-remove" /* ElementTypeEnum.BtnRemove */,
     };
     return _jsx(Rect, { ...defaultProps, ...restProps });
 };

package/esm/designs/components/BtnsGroup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "@antv/infographic/jsx-runtime";
 import { Group } from '../../jsx';
 export const BtnsGroup = (props) => {
-    return (_jsx(Group, { "data-element-type": "btns-group", width: 0, height: 0, ...props, display: "none" }));
+    return (_jsx(Group, { "data-element-type": "btns-group" /* ElementTypeEnum.BtnsGroup */, width: 0, height: 0, ...props, display: "none" }));
 };

package/esm/designs/components/Illus.js

@@ -7,10 +7,10 @@ export const Illus = ({ indexes, ...props }) => {
     const finalProps = { ...defaultProps, ...props };
     if (indexes) {
         finalProps['data-indexes'] = indexes;
-        finalProps['data-element-type'] = 'item-illus';
+        finalProps['data-element-type'] = "items-illus" /* ElementTypeEnum.ItemsIllus */;
     }
     else {
-        finalProps['data-element-type'] = 'illus';
+        finalProps['data-element-type'] = "illus" /* ElementTypeEnum.Illus */;
     }
     return _jsx(Rect, { ...finalProps });
 };

package/esm/designs/components/ItemDesc.js

@@ -4,7 +4,6 @@ export const ItemDesc = ({ indexes, lineNumber = 2, children, ...props }) => {
     if (!children)
         return null;
     const finalProps = {
-        width: 100,
         fontSize: 14,
         fill: '#666',
         wordWrap: true,
@@ -13,5 +12,5 @@ export const ItemDesc = ({ indexes, lineNumber = 2, children, ...props }) => {
         ...props,
     };
     finalProps.height ?? (finalProps.height = Math.ceil(lineNumber * +finalProps.lineHeight * +finalProps.fontSize));
-    return (_jsx(Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-desc" }));
+    return (_jsx(Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-desc" /* ElementTypeEnum.ItemDesc */ }));
 };

package/esm/designs/components/ItemIcon.js

@@ -23,5 +23,5 @@ export const ItemIconCircle = (props) => {
         width: innerSize,
         height: innerSize,
     };
-    return (_jsxs(Group, { ...restProps, width: size, height: size, "data-element-type": "item-icon-group", children: [_jsx(Ellipse, { width: size, height: size, fill: fill, "data-element-type": "shape" }), _jsx(Rect, { ...iconProps, "data-indexes": indexes, "data-element-type": "item-icon" })] }));
+    return (_jsxs(Group, { ...restProps, width: size, height: size, "data-element-type": "item-icon-group" /* ElementTypeEnum.ItemIconGroup */, children: [_jsx(Ellipse, { width: size, height: size, fill: fill, "data-element-type": "shape" }), _jsx(Rect, { ...iconProps, "data-indexes": indexes, "data-element-type": "item-icon" /* ElementTypeEnum.ItemIcon */ })] }));
 };

package/esm/designs/components/ItemLabel.js

@@ -5,11 +5,10 @@ export const ItemLabel = ({ indexes, children, ...props }) => {
         fontSize: 18,
         fontWeight: 'bold',
         fill: '#252525',
-        width: 100,
         lineHeight: 1.4,
         children,
         ...props,
     };
     finalProps.height ?? (finalProps.height = Math.ceil(+finalProps.lineHeight * +finalProps.fontSize));
-    return (_jsx(Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-label" }));
+    return (_jsx(Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-label" /* ElementTypeEnum.ItemLabel */ }));
 };

package/esm/designs/components/ItemValue.js

@@ -2,7 +2,6 @@ import { jsx as _jsx } from "@antv/infographic/jsx-runtime";
 import { Text } from '../../jsx';
 export const ItemValue = ({ indexes, value, formatter = (v) => String(v), ...props }) => {
     const finalProps = {
-        width: 100,
         fontSize: 14,
         fill: '#666',
         wordWrap: true,
@@ -12,5 +11,5 @@ export const ItemValue = ({ indexes, value, formatter = (v) => String(v), ...pro
         ...props,
     };
     finalProps.height ?? (finalProps.height = Math.ceil(+finalProps.lineHeight * +finalProps.fontSize));
-    return (_jsx(Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-value" }));
+    return (_jsx(Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-value" /* ElementTypeEnum.ItemValue */ }));
 };

package/esm/designs/components/ItemsGroup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "@antv/infographic/jsx-runtime";
 import { Group } from '../../jsx';
 export const ItemsGroup = (props) => {
-    return _jsx(Group, { "data-element-type": "items-group", ...props });
+    return _jsx(Group, { "data-element-type": "items-group" /* ElementTypeEnum.ItemsGroup */, ...props });
 };

package/esm/designs/components/Title.js

@@ -2,13 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
 import { Text } from '../../jsx';
 import { FlexLayout } from '../layouts';
 export const Title = (props) => {
-    const { x = 0, y = 0, width = 720, alignHorizontal = 'center', title, desc, descLineNumber: subTitleLineNumber = 2, themeColors, } = props;
+    const { x = 0, y = 0, alignHorizontal = 'center', title, desc, descLineNumber: subTitleLineNumber = 2, themeColors, } = props;
     const MainTitle = (props) => {
         const defaultProps = {
             fontSize: 24,
             fill: themeColors.colorPrimaryText,
-            width,
-            height: 32,
             lineHeight: 1.4,
             alignHorizontal,
         };
@@ -18,7 +16,6 @@ export const Title = (props) => {
         const defaultProps = {
             fontSize: 16,
             fill: themeColors.colorTextSecondary,
-            width,
             alignHorizontal,
             lineHeight: 1.4,
             height: subTitleLineNumber * 24,
@@ -27,5 +24,5 @@ export const Title = (props) => {
     };
     if (!title && !desc)
         return null;
-    return (_jsxs(FlexLayout, { flexDirection: "column", x: x, y: y, width: width, gap: 8, children: [title && _jsx(MainTitle, {}), desc && _jsx(Desc, {})] }));
+    return (_jsxs(FlexLayout, { flexDirection: "column", justifyContent: "center", alignItems: "center", x: x, y: y, gap: 8, children: [title && _jsx(MainTitle, {}), desc && _jsx(Desc, {})] }));
 };

package/esm/designs/items/CandyCardLite.js

@@ -5,7 +5,7 @@ import { getItemProps } from '../utils';
 import { registerItem } from './registry';
 export const CandyCardLite = (props) => {
     const [{ indexes, datum, width = 280, height = 140, themeColors }, restProps,] = getItemProps(props, ['width', 'height']);
-    return (_jsxs(Group, { ...restProps, children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, rx: 18, ry: 18, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, "data-element-type": "shape" }), _jsx(Path, { x: width - 85, y: 0.5, width: 85, height: 65, d: "M0.496704 0H61.7558C74.0725 0 84.0571 9.99394 84.0571 22.3221V60.1302L78.4401 62.9458C64.9296 68.1198 49.0492 65.0802 38.3968 53.9843L10.7444 25.1801C5.41799 19.6306 2.15489 12.855 0.935998 5.80383L0.496704 0Z", fill: themeColors.colorBg, "data-element-type": "shape" }), _jsx(ItemLabel, { indexes: indexes, x: 20, y: 24, width: 200, alignHorizontal: "left", alignVertical: "middle", fill: themeColors.colorText, children: datum.label }), _jsx(ItemDesc, { indexes: indexes, x: 20, y: 58, width: 220, height: 70, fill: themeColors.colorTextSecondary, alignHorizontal: "left", alignVertical: "top", children: datum.desc }), _jsx(ItemIcon, { indexes: indexes, x: width - 48, y: 12, width: 32, height: 32, fill: themeColors.colorPrimary })] }));
+    return (_jsxs(Group, { ...restProps, children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, rx: 22, ry: 22, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, "data-element-type": "shape" }), _jsx(Path, { x: width - 85, y: 0.5, width: 85, height: 65, d: "M0 0H62.4495C74.9557 0 85.4549 10.8574 84.4557 23.1875V60.1875L77.8772 62.5839C64.3776 67.6876 48.51 64.6893 37.8662 53.7441L10.2361 25.3312C4.91402 19.8571 1.65356 13.1736 0.435652 6.21819L0 0Z", fill: themeColors.colorBg, "data-element-type": "shape" }), _jsx(ItemLabel, { indexes: indexes, x: 20, y: 24, width: 200, alignHorizontal: "left", alignVertical: "middle", fill: themeColors.colorText, children: datum.label }), _jsx(ItemDesc, { indexes: indexes, x: 20, y: 58, width: 220, height: 70, fill: themeColors.colorTextSecondary, alignHorizontal: "left", alignVertical: "top", children: datum.desc }), _jsx(ItemIcon, { indexes: indexes, x: width - 48, y: 12, width: 32, height: 32, fill: themeColors.colorPrimary })] }));
 };
 registerItem('candy-card-lite', {
     component: CandyCardLite,

package/esm/designs/items/CircularProgress.js

@@ -12,10 +12,11 @@ export const CircularProgress = (props) => {
     const center = size / 2;
     const start = strokeWidth / 2;
     const d = size - strokeWidth;
+    const isFullCircle = percentage >= 1;
     const angle = percentage * 360;
     const pathData = describeArc(center, center, radius, 0, angle);
     const bounds = { x: start, y: start, width: d, height: d };
-    return (_jsxs(Group, { ...restProps, width: size, height: size + gap + 20, children: [_jsx(Rect, { width: size, height: size, fill: "none" }), _jsx(Ellipse, { ...bounds, fill: "none", stroke: "#f0f0f0", strokeWidth: strokeWidth, "data-element-type": "shape" }), _jsx(Path, { d: pathData, fill: "none", stroke: themeColors.colorPrimary, strokeWidth: strokeWidth, strokeLinecap: "round", "data-element-type": "shape" }), _jsx(ItemValue, { indexes: indexes, x: strokeWidth, y: strokeWidth, width: d - strokeWidth, height: d - strokeWidth, fontSize: 24, fontWeight: "bold", fill: themeColors.colorPrimary, alignHorizontal: "center", alignVertical: "middle", value: value, formatter: valueFormatter }), _jsx(ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorTextSecondary, children: datum.label })] }));
+    return (_jsxs(Group, { ...restProps, width: size, height: size + gap + 20, children: [_jsx(Rect, { width: size, height: size, fill: "none" }), _jsx(Ellipse, { ...bounds, fill: "none", stroke: "#f0f0f0", strokeWidth: strokeWidth, "data-element-type": "shape" }), isFullCircle ? (_jsx(Ellipse, { ...bounds, fill: "none", stroke: themeColors.colorPrimary, strokeWidth: strokeWidth, "data-element-type": "shape" })) : (_jsx(Path, { d: pathData, fill: "none", stroke: themeColors.colorPrimary, strokeWidth: strokeWidth, strokeLinecap: "round", "data-element-type": "shape" })), _jsx(ItemValue, { indexes: indexes, x: strokeWidth, y: strokeWidth, width: d - strokeWidth, height: d - strokeWidth, fontSize: 24, fontWeight: "bold", fill: themeColors.colorPrimary, alignHorizontal: "center", alignVertical: "middle", value: value, formatter: valueFormatter }), _jsx(ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorTextSecondary, children: datum.label })] }));
 };
 function describeArc(x, y, radius, startAngle, endAngle) {
     const start = polarToCartesian(x, y, radius, endAngle);

package/esm/designs/items/HorizontalIconArrow.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@antv/infogra
 import { Ellipse, getElementBounds, Group, Path, Polygon, Text, } from '../../jsx';
 import { Gap, ItemDesc, ItemIconCircle, ItemLabel, ShapesGroup, } from '../components';
 import { FlexLayout } from '../layouts';
-import { AlignLayout } from '../layouts/Align';
 import { getItemProps } from '../utils';
 import { registerItem } from './registry';
 export const HorizontalIconArrow = (props) => {
@@ -33,7 +32,7 @@ export const HorizontalIconArrow = (props) => {
         dotLineGap +
         labelBounds.height +
         descBounds.height;
-    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: dotLineGap }), dotLine] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { height: fixedGap }), icon, _jsx(Gap, { height: iconGap })] })), _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, { width: width, height: totalHeight, ...restProps, children: _jsxs(FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? (_jsxs(_Fragment, { children: [desc, label, _jsx(Gap, { height: dotLineGap }), dotLine] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { height: fixedGap }), icon, _jsx(Gap, { height: iconGap })] })), _jsxs(Group, { children: [_jsx(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), _jsx(Text, { x: width / 2, y: arrowHeight / 2, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: datum.time
                                 ? datum.time
                                 : String(indexes[0] + 1)
                                     .padStart(2, '0')

package/esm/designs/items/HorizontalIconLine.js

@@ -21,7 +21,7 @@ export const HorizontalIconLine = (props) => {
     const time = datum.time ? (_jsx(Text, { width: width, height: 30, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorPrimary, fontSize: 18, fontWeight: "bold", children: datum.time })) : null;
     const timeBounds = getElementBounds(time);
     const lineHeight = 18;
-    const line = (_jsxs(AlignLayout, { horizontal: "center", width: width, height: lineHeight, children: [_jsx(Rect, { width: width, height: lineHeight, fill: themeColors.colorPrimary, "data-element-type": "shape" }), _jsx(Ellipse, { y: -3, width: lineHeight + 6, height: lineHeight + 6, fill: themeColors.colorBg, fillOpacity: 0.5, "data-element-type": "shape" }), _jsx(Ellipse, { y: (lineHeight - 12) / 2, width: 12, height: 12, fill: "white", "data-element-type": "shape" })] }));
+    const line = (_jsxs(AlignLayout, { horizontal: "center", vertical: "middle", width: width, height: lineHeight, children: [_jsx(Rect, { width: width, height: lineHeight, fill: themeColors.colorPrimary, "data-element-type": "shape" }), _jsx(Ellipse, { width: lineHeight + 6, height: lineHeight + 6, fill: themeColors.colorBg, fillOpacity: 0.5, "data-element-type": "shape" }), _jsx(Ellipse, { width: 12, height: 12, fill: "white", "data-element-type": "shape" })] }));
     const textSideHeight = labelBounds.height + descBounds.height;
     const iconSideHeight = iconBounds.height + timeBounds.height + 5;
     // 平衡line两侧高度，使 line 位于垂直居中位置

package/esm/designs/items/IconBadge.js

@@ -11,7 +11,7 @@ export const IconBadge = (props) => {
     const badgeGradientId = '#ff6b6b-badge';
     return (_jsxs(Group, { ...restProps, width: width, height: height, children: [_jsxs(Defs, { children: [_jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "30%", r: "70%", children: [_jsx("stop", { offset: "0%", stopColor: tinycolor(themeColors.colorPrimary)
                                     .lighten(30)
-                                    .toHexString() }), _jsx("stop", { offset: "100%", stopColor: themeColors.colorPrimary })] }), _jsxs("linearGradient", { id: badgeGradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#ff6b6b" }), _jsx("stop", { offset: "100%", stopColor: "#ee5a52" })] })] }), _jsx(Ellipse, { x: 0, y: 0, width: size, height: size, fill: `url(#${gradientId})`, "data-element-type": "shape" }), _jsx(ItemIcon, { indexes: indexes, x: (size - iconSize) / 2, y: (size - iconSize) / 2, size: iconSize, fill: themeColors.colorPrimaryText }), _jsx(Ellipse, { x: size - badgeSize + 4, y: 0, width: badgeSize, height: badgeSize, fill: `url(#${badgeGradientId})` }), _jsx(Text, { x: size - badgeSize / 2 + 4, y: badgeSize / 2, fontSize: 10, fontWeight: "bold", fill: themeColors.colorWhite, alignHorizontal: "center", alignVertical: "middle", children: value > 99 ? '99+' : Math.round(value) }), _jsx(ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorText, children: datum.label })] }));
+                                    .toHexString() }), _jsx("stop", { offset: "100%", stopColor: themeColors.colorPrimary })] }), _jsxs("linearGradient", { id: badgeGradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#ff6b6b" }), _jsx("stop", { offset: "100%", stopColor: "#ee5a52" })] })] }), _jsx(Ellipse, { x: 0, y: 0, width: size, height: size, fill: `url(#${gradientId})`, "data-element-type": "shape" }), _jsx(ItemIcon, { indexes: indexes, x: (size - iconSize) / 2, y: (size - iconSize) / 2, size: iconSize, fill: themeColors.colorPrimaryText }), _jsx(Ellipse, { x: size - badgeSize + 4, width: badgeSize, height: badgeSize, fill: `url(#${badgeGradientId})` }), _jsx(Text, { x: size - badgeSize + 4, width: badgeSize, height: badgeSize, fontSize: 10, fontWeight: "bold", fill: themeColors.colorWhite, alignHorizontal: "center", alignVertical: "middle", children: value > 99 ? '99+' : Math.round(value) }), _jsx(ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorText, children: datum.label })] }));
 };
 registerItem('icon-badge', {
     component: IconBadge,

package/esm/designs/items/LinedText.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType } from '../../jsx';
+import type { BaseItemProps } from './types';
+export interface LinedTextProps extends BaseItemProps {
+    width?: number;
+    formatter?: (text?: string) => string;
+    usePaletteColor?: boolean;
+    showUnderline?: boolean;
+    underlineGap?: number;
+    underlineExtend?: number;
+    underlineThickness?: number;
+}
+export declare const LinedText: ComponentType<LinedTextProps>;

package/esm/designs/items/LinedText.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
+import { Group, Path, getElementBounds } from '../../jsx';
+import { ItemLabel } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const LinedText = (props) => {
+    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',
+        'usePaletteColor',
+        'showUnderline',
+        'underlineGap',
+        'underlineExtend',
+        'underlineThickness',
+    ]);
+    const content = formatter(datum.label ?? datum.desc ?? '');
+    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 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 offsetY = positionV === 'middle'
+        ? (finalHeight - totalHeight) / 2
+        : positionV === 'flipped'
+            ? finalHeight - totalHeight
+            : 0;
+    const labelX = alignH === 'right'
+        ? finalWidth - contentWidth
+        : alignH === 'center'
+            ? (finalWidth - contentWidth) / 2
+            : 0;
+    const labelY = offsetY;
+    const underlineX = alignH === 'right'
+        ? finalWidth - underlineWidth
+        : alignH === 'center'
+            ? (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'
+                    ? '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" }))] }));
+};
+registerItem('lined-text', {
+    component: LinedText,
+    composites: ['label'],
+});

package/esm/designs/items/PlainText.d.ts

@@ -4,5 +4,6 @@ export interface LabelTextProps extends BaseItemProps {
     width?: number;
     formatter?: (text?: string) => string;
     usePaletteColor?: boolean;
+    lineNumber?: number;
 }
 export declare const LabelText: ComponentType<LabelTextProps>;

package/esm/designs/items/PlainText.js

@@ -3,12 +3,25 @@ import { ItemLabel } from '../components';
 import { getItemProps } from '../utils';
 import { registerItem } from './registry';
 export const LabelText = (props) => {
-    const [{ indexes, datum, width = 120, themeColors, positionH = 'normal', formatter = (text) => text || '', usePaletteColor = false, }, restProps,] = getItemProps(props, ['width', 'formatter', 'usePaletteColor']);
-    return (_jsx(ItemLabel, { ...restProps, indexes: indexes, width: width, fill: usePaletteColor ? themeColors.colorPrimary : themeColors.colorText, fontSize: 14, fontWeight: "regular", alignHorizontal: positionH === 'flipped'
+    const [{ indexes, datum, width = 120, themeColors, positionH = 'normal', positionV = 'center', formatter = (text) => text || '', usePaletteColor = false, lineNumber = 1, }, restProps,] = getItemProps(props, [
+        'width',
+        'formatter',
+        'usePaletteColor',
+        'lineNumber',
+    ]);
+    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'
             ? 'right'
             : positionH === 'center'
                 ? 'center'
-                : 'left', alignVertical: "middle", children: formatter(datum.label || datum.desc) }));
+                : 'left', alignVertical: positionV === 'flipped'
+            ? 'bottom'
+            : positionV === 'center'
+                ? 'middle'
+                : 'top', children: formatter(datum.label || datum.desc) }));
 };
 registerItem('plain-text', {
     component: LabelText,

package/esm/designs/items/QuarterCircular.js

@@ -22,7 +22,6 @@ export const QuarterCircular = (props) => {
     const indexStr = String(indexes[0] + 1).padStart(2, '0');
     // 根据 positionH 调整布局
     const isFlipped = positionH === 'flipped';
-    const isCentered = positionH === 'center';
     // 根据 positionV 调整布局
     const isVFlipped = positionV === 'flipped';
     // 计算装饰线的坐标
@@ -41,22 +40,6 @@ export const QuarterCircular = (props) => {
                 topLineY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
             };
         }
-        else if (isCentered) {
-            // 居中对齐
-            const totalContentWidth = width - circleRadius - DECORATION_HORIZONTAL_SPACING;
-            const centerOffset = (width - totalContentWidth) / 2;
-            return {
-                diagonalStartX: centerOffset + DOT_RADIUS,
-                diagonalStartY: isVFlipped
-                    ? height - DECORATION_VERTICAL_SPACING
-                    : DECORATION_VERTICAL_SPACING,
-                diagonalEndX: centerOffset + DECORATION_HORIZONTAL_SPACING,
-                diagonalEndY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
-                topLineStartX: centerOffset + DECORATION_HORIZONTAL_SPACING,
-                topLineEndX: centerOffset + totalContentWidth - CIRCLE_MASS,
-                topLineY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
-            };
-        }
         else {
             // 默认左对齐
             return {
@@ -87,19 +70,6 @@ export const QuarterCircular = (props) => {
                 iconX: CIRCLE_MASS - iconSize / 2,
             };
         }
-        else if (isCentered) {
-            // 居中对齐
-            const totalContentWidth = width - circleRadius - DECORATION_HORIZONTAL_SPACING;
-            const centerOffset = (width - totalContentWidth) / 2;
-            return {
-                valueX: centerOffset,
-                contentX: centerOffset + DECORATION_HORIZONTAL_SPACING,
-                contentWidth: totalContentWidth - circleRadius - 10,
-                circleX: centerOffset + totalContentWidth,
-                circleY: isVFlipped ? 0 : height,
-                iconX: centerOffset + totalContentWidth - CIRCLE_MASS - iconSize / 2,
-            };
-        }
         else {
             // 默认左对齐
             return {
@@ -136,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, width: 40, 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, children: datum.label })), datum.desc && (_jsx(ItemDesc, { indexes: indexes, x: contentCoords.contentX, y: descY, width: contentCoords.contentWidth, fill: themeColors.colorTextSecondary, children: datum.desc }))] })] }));
+    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 }))] })] }));
 };
 registerItem('quarter-circular', {
     component: QuarterCircular,

package/esm/designs/items/index.d.ts

@@ -11,6 +11,7 @@ export * from './IconBadge';
 export * from './IndexedCard';
 export * from './LCornerCard';
 export * from './LetterCard';
+export * from './LinedText';
 export * from './PillBadge';
 export * from './PlainText';
 export * from './ProgressCard';

package/esm/designs/items/index.js

@@ -11,6 +11,7 @@ export * from './IconBadge';
 export * from './IndexedCard';
 export * from './LCornerCard';
 export * from './LetterCard';
+export * from './LinedText';
 export * from './PillBadge';
 export * from './PlainText';
 export * from './ProgressCard';

package/esm/designs/layouts/Align.js

@@ -5,74 +5,60 @@ export const AlignLayout = createLayout((children, { horizontal, vertical, ...pr
         return _jsx(Group, { ...props });
     }
     const childBounds = children.map((child) => getElementBounds(child));
-    // 检查是否设置了容器的宽高
-    const hasContainerWidth = props.width !== undefined;
-    const hasContainerHeight = props.height !== undefined;
-    let positionedChildren = [...children];
-    // 如果没有设置容器尺寸，先获取子节点的整体包围盒
     const childrenBounds = getElementsBounds(children);
-    // 确定对齐的基础区域
-    const alignmentWidth = hasContainerWidth
-        ? props.width
-        : childrenBounds.width;
-    const alignmentHeight = hasContainerHeight
-        ? props.height
-        : childrenBounds.height;
-    const alignmentX = hasContainerWidth ? props.x || 0 : childrenBounds.x;
-    const alignmentY = hasContainerHeight ? props.y || 0 : childrenBounds.y;
-    // 应用对齐
-    positionedChildren = children.map((child, index) => {
+    // 容器尺寸和位置
+    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 positionedChildren = children.map((child, index) => {
         const bounds = childBounds[index];
         const childProps = { ...child.props };
-        // 水平对齐
-        if (horizontal) {
+        // 水平对齐（相对于容器左边界）
+        if (horizontal !== undefined) {
             switch (horizontal) {
                 case 'left':
-                    childProps.x = alignmentX;
+                    childProps.x = 0; // 相对容器
                     break;
                 case 'center':
-                    childProps.x = alignmentX + (alignmentWidth - bounds.width) / 2;
+                    childProps.x = (containerWidth - bounds.width) / 2;
                     break;
                 case 'right':
-                    childProps.x = alignmentX + alignmentWidth - bounds.width;
+                    childProps.x = containerWidth - bounds.width;
                     break;
             }
         }
-        else {
-            // 如果没有设置水平对齐，保持原有的 x 坐标
-            childProps.x = child.props.x || bounds.x;
+        else if (childProps.x === undefined) {
+            // 保持相对位置
+            childProps.x = bounds.x - containerX;
         }
-        // 垂直对齐
-        if (vertical) {
+        // 垂直对齐（相对于容器顶边界）
+        if (vertical !== undefined) {
             switch (vertical) {
                 case 'top':
-                    childProps.y = alignmentY;
+                    childProps.y = 0;
                     break;
                 case 'middle':
-                    childProps.y = alignmentY + (alignmentHeight - bounds.height) / 2;
+                    childProps.y = (containerHeight - bounds.height) / 2;
                     break;
                 case 'bottom':
-                    childProps.y = alignmentY + alignmentHeight - bounds.height;
+                    childProps.y = containerHeight - bounds.height;
                     break;
             }
         }
-        else {
-            // 如果没有设置垂直对齐，保持原有的 y 坐标
-            childProps.y = child.props.y || bounds.y;
+        else if (childProps.y === undefined) {
+            // 保持相对位置
+            childProps.y = bounds.y - containerY;
         }
         return cloneElement(child, childProps);
     });
-    // 如果没有设置容器尺寸，更新容器的边界框
-    if (!hasContainerWidth || !hasContainerHeight) {
-        const finalBounds = getElementsBounds(positionedChildren);
-        if (!hasContainerWidth) {
-            // props.x ??= finalBounds.x;
-            props.width ?? (props.width = finalBounds.width);
-        }
-        if (!hasContainerHeight) {
-            // props.y ??= finalBounds.y;
-            props.height ?? (props.height = finalBounds.height);
-        }
-    }
-    return _jsx(Group, { ...props, children: positionedChildren });
+    const containerProps = {
+        ...props,
+        x: containerX,
+        y: containerY,
+        width: containerWidth,
+        height: containerHeight,
+    };
+    return _jsx(Group, { ...containerProps, children: positionedChildren });
 });