@antv/infographic 0.1.2 → 0.1.4

package/esm/utils/style.d.ts

@@ -0,0 +1 @@
+export declare function injectStyleOnce(id: string, styles: string): void;

package/esm/utils/style.js

@@ -0,0 +1,8 @@
+export function injectStyleOnce(id, styles) {
+    if (document.getElementById(id))
+        return;
+    const style = document.createElement('style');
+    style.id = id;
+    style.textContent = styles;
+    document.head.appendChild(style);
+}

package/esm/utils/text.d.ts

@@ -1,2 +1,9 @@
+import { TextProps } from '../editor';
 import type { TextAttributes, TextElement } from '../types';
+export declare function getTextEntity(text: SVGElement): HTMLSpanElement | null;
 export declare function createTextElement(textContent: string, attributes: TextAttributes): TextElement;
+export declare function updateTextElement(text: TextElement, props: Partial<TextProps>): void;
+export declare function getTextStyle(attributes: TextAttributes): Record<string, any>;
+export declare function getTextContent(text: TextElement): string;
+export declare function setTextContent(text: TextElement, content: string): void;
+export declare function getTextElementProps(text: TextElement): Partial<TextProps>;

package/esm/utils/text.js

@@ -1,33 +1,54 @@
 import camelCase from 'lodash-es/camelCase';
-import { encodeFontFamily } from './font';
-import { createElement } from './svg';
+import { decodeFontFamily, encodeFontFamily } from './font';
+import { isForeignObjectElement } from './recognizer';
+import { createElement, setAttributes } from './svg';
+export function getTextEntity(text) {
+    if (!isForeignObjectElement(text))
+        return null;
+    return text.querySelector('span');
+}
 export function createTextElement(textContent, attributes) {
-    const span = document.createElement('span');
-    span.textContent = textContent;
-    Object.assign(span.style, getTextStyle(attributes));
+    const entity = document.createElement('span');
+    const foreignObject = createElement('foreignObject', { overflow: 'visible' });
+    foreignObject.appendChild(entity);
+    updateTextElement(foreignObject, { textContent, attributes });
+    return foreignObject;
+}
+export function updateTextElement(text, props) {
+    const { textContent, attributes } = props;
+    if (textContent !== undefined) {
+        setTextContent(text, textContent);
+    }
+    if (!attributes)
+        return;
+    const entity = getTextEntity(text);
     let { width, height } = attributes;
-    if (!width || !height) {
-        const rect = measureTextSpan(span);
-        if (!width)
-            width = String(rect.width);
-        if (!height)
-            height = String(rect.height);
+    const textAttrs = {};
+    if (entity) {
+        Object.assign(entity.style, getTextStyle(attributes));
+        if (!width || !height) {
+            const rect = measureTextSpan(entity);
+            if (!width && !text.hasAttribute('width'))
+                width = String(rect.width);
+            if (!height && !text.hasAttribute('height'))
+                height = String(rect.height);
+        }
+        // 以下属性需要完成包围盒测量后再设置
+        const { 'data-horizontal-align': horizontal, 'data-vertical-align': vertical, } = attributes;
+        Object.assign(entity.style, alignToFlex(horizontal, vertical));
     }
-    // 以下属性需要完成包围盒测量后再设置
-    const { id, x, y, 'text-alignment': textAlignment = 'LEFT TOP' } = attributes;
-    const [horizontal, vertical] = getTextAlignment(textAlignment);
-    Object.assign(span.style, alignToFlex(horizontal, vertical));
-    const foreignObject = createElement('foreignObject', {
-        id,
-        x,
-        y,
-        width,
-        height,
-        overflow: 'visible',
-        'data-element-type': "text" /* ElementTypeEnum.Text */,
-    });
-    foreignObject.appendChild(span);
-    return foreignObject;
+    const { id, x, y } = attributes;
+    if (id)
+        textAttrs.id = id;
+    if (x !== undefined)
+        textAttrs.x = String(x);
+    if (y !== undefined)
+        textAttrs.y = String(y);
+    if (width !== undefined)
+        textAttrs.width = String(width);
+    if (height !== undefined)
+        textAttrs.height = String(height);
+    setAttributes(text, textAttrs);
 }
 function alignToFlex(horizontal, vertical) {
     const style = {
@@ -36,6 +57,7 @@ function alignToFlex(horizontal, vertical) {
         display: 'flex',
         flexWrap: 'wrap',
         wordBreak: 'break-word',
+        whiteSpace: 'pre-wrap',
     };
     switch (horizontal) {
         case 'LEFT':
@@ -67,15 +89,18 @@ function alignToFlex(horizontal, vertical) {
     }
     return style;
 }
-function getTextStyle(attributes) {
-    const { x, y, width, height, ['text-alignment']: textAlignment, ['font-size']: fontSize, ['letter-spacing']: letterSpacing, ['line-height']: lineHeight, fill, ['stroke-width']: strokeWidth, ['text-anchor']: textAnchor, // omit
+export function getTextStyle(attributes) {
+    const { x, y, width, height, ['data-horizontal-align']: horizontalAlign, // omit
+    ['data-vertical-align']: verticalAlign, // omit
+    ['font-size']: fontSize, ['letter-spacing']: letterSpacing, ['line-height']: lineHeight, fill, ['stroke-width']: strokeWidth, ['text-anchor']: textAnchor, // omit
     ['dominant-baseline']: dominantBaseline, // omit
     ['font-family']: fontFamily, ...restAttrs } = attributes;
     const style = {
-        color: fill,
         overflow: 'visible',
         // userSelect: 'none',
     };
+    if (fill)
+        style.color = fill;
     Object.entries(restAttrs).forEach(([key, value]) => {
         style[camelCase(key)] = value;
     });
@@ -90,8 +115,9 @@ function getTextStyle(attributes) {
         style.letterSpacing = `${letterSpacing}px`;
     if (strokeWidth)
         style.strokeWidth = `${strokeWidth}px`;
-    if (fontFamily)
-        style.fontFamily = encodeFontFamily(fontFamily);
+    style.fontFamily = fontFamily
+        ? encodeFontFamily(fontFamily)
+        : fontFamily || '';
     return style;
 }
 function measureTextSpan(span) {
@@ -106,10 +132,59 @@ function measureTextSpan(span) {
     span.style.visibility = 'visible';
     return rect;
 }
-function getTextAlignment(alignment) {
-    if (!alignment) {
-        return ['LEFT', 'TOP'];
+export function getTextContent(text) {
+    return getTextEntity(text)?.innerText || '';
+}
+export function setTextContent(text, content) {
+    const entity = getTextEntity(text);
+    if (entity) {
+        entity.innerText = content;
+    }
+}
+export function getTextElementProps(text) {
+    const entity = getTextEntity(text);
+    if (!entity)
+        return {};
+    const { color, fontSize, fontFamily, justifyContent, alignContent, fontWeight, } = entity.style;
+    const [horizontal, vertical] = flexToAlign(justifyContent, alignContent);
+    const attrs = {
+        'data-horizontal-align': horizontal,
+        'data-vertical-align': vertical,
+    };
+    if (fontFamily)
+        attrs['font-family'] = decodeFontFamily(fontFamily);
+    if (fontWeight)
+        attrs['font-weight'] = fontWeight;
+    if (fontSize)
+        attrs['font-size'] = String(parseInt(fontSize));
+    if (color)
+        attrs['fill'] = color;
+    return { attributes: attrs, textContent: getTextContent(text) };
+}
+function flexToAlign(justifyContent, alignContent) {
+    let horizontal = 'LEFT';
+    let vertical = 'TOP';
+    switch (justifyContent) {
+        case 'flex-start':
+            horizontal = 'LEFT';
+            break;
+        case 'center':
+            horizontal = 'CENTER';
+            break;
+        case 'flex-end':
+            horizontal = 'RIGHT';
+            break;
+    }
+    switch (alignContent) {
+        case 'flex-start':
+            vertical = 'TOP';
+            break;
+        case 'center':
+            vertical = 'MIDDLE';
+            break;
+        case 'flex-end':
+            vertical = 'BOTTOM';
+            break;
     }
-    const [horizontal = 'CENTER', vertical = 'MIDDLE'] = alignment.split(' ');
     return [horizontal, vertical];
 }

package/lib/constants/components.d.ts

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

package/lib/constants/components.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.COMPONENT_ROLE = void 0;
+exports.COMPONENT_ROLE = 'infographic-component';

package/lib/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",
+    ItemIllus = "item-illus",
+    BtnAdd = "btn-add",
+    BtnRemove = "btn-remove",
     IllusGroup = "illus-group",
     IllusVolume = "illus-volume",
-    Illus = "illus"
+    Illus = "illus",
+    BtnsGroup = "btns-group",
+    Unknown = "unknown"
 }

package/lib/constants/index.d.ts

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

package/lib/constants/index.js

@@ -14,4 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
 __exportStar(require("./element"), exports);
+__exportStar(require("./service"), exports);
+__exportStar(require("./shape"), exports);

package/lib/constants/service.d.ts

@@ -0,0 +1 @@
+export declare const ICON_SERVICE_URL = "https://www.weavefox.cn/api/open/v1/icon";

package/lib/constants/service.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_SERVICE_URL = void 0;
+exports.ICON_SERVICE_URL = 'https://www.weavefox.cn/api/open/v1/icon';

package/lib/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/lib/designs/components/Btn.js

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

package/lib/designs/components/BtnsGroup.js

@@ -4,6 +4,6 @@ exports.BtnsGroup = void 0;
 const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
 const jsx_1 = require("../../jsx");
 const BtnsGroup = (props) => {
-    return ((0, jsx_runtime_1.jsx)(jsx_1.Group, { "data-element-type": "btns-group", width: 0, height: 0, ...props, display: "none" }));
+    return ((0, jsx_runtime_1.jsx)(jsx_1.Group, { "data-element-type": "btns-group" /* ElementTypeEnum.BtnsGroup */, width: 0, height: 0, ...props, display: "none" }));
 };
 exports.BtnsGroup = BtnsGroup;

package/lib/designs/components/Illus.js

@@ -10,10 +10,10 @@ const Illus = ({ indexes, ...props }) => {
     const finalProps = { ...defaultProps, ...props };
     if (indexes) {
         finalProps['data-indexes'] = indexes;
-        finalProps['data-element-type'] = 'item-illus';
+        finalProps['data-element-type'] = "item-illus" /* ElementTypeEnum.ItemIllus */;
     }
     else {
-        finalProps['data-element-type'] = 'illus';
+        finalProps['data-element-type'] = "illus" /* ElementTypeEnum.Illus */;
     }
     return (0, jsx_runtime_1.jsx)(jsx_1.Rect, { ...finalProps });
 };

package/lib/designs/components/ItemDesc.js

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

package/lib/designs/components/ItemIcon.js

@@ -27,6 +27,6 @@ const ItemIconCircle = (props) => {
         width: innerSize,
         height: innerSize,
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { ...restProps, width: size, height: size, "data-element-type": "item-icon-group", children: [(0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { width: size, height: size, fill: fill, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(jsx_1.Rect, { ...iconProps, "data-indexes": indexes, "data-element-type": "item-icon" })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { ...restProps, width: size, height: size, "data-element-type": "item-icon-group" /* ElementTypeEnum.ItemIconGroup */, children: [(0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { width: size, height: size, fill: fill, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(jsx_1.Rect, { ...iconProps, "data-indexes": indexes, "data-element-type": "item-icon" /* ElementTypeEnum.ItemIcon */ })] }));
 };
 exports.ItemIconCircle = ItemIconCircle;

package/lib/designs/components/ItemLabel.js

@@ -8,12 +8,11 @@ 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 ((0, jsx_runtime_1.jsx)(jsx_1.Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-label" }));
+    return ((0, jsx_runtime_1.jsx)(jsx_1.Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-label" /* ElementTypeEnum.ItemLabel */ }));
 };
 exports.ItemLabel = ItemLabel;

package/lib/designs/components/ItemValue.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
 const jsx_1 = require("../../jsx");
 const ItemValue = ({ indexes, value, formatter = (v) => String(v), ...props }) => {
     const finalProps = {
-        width: 100,
         fontSize: 14,
         fill: '#666',
         wordWrap: true,
@@ -15,6 +14,6 @@ const ItemValue = ({ indexes, value, formatter = (v) => String(v), ...props }) =
         ...props,
     };
     finalProps.height ?? (finalProps.height = Math.ceil(+finalProps.lineHeight * +finalProps.fontSize));
-    return ((0, jsx_runtime_1.jsx)(jsx_1.Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-value" }));
+    return ((0, jsx_runtime_1.jsx)(jsx_1.Text, { ...finalProps, "data-indexes": indexes, "data-element-type": "item-value" /* ElementTypeEnum.ItemValue */ }));
 };
 exports.ItemValue = ItemValue;

package/lib/designs/components/ItemsGroup.js

@@ -4,6 +4,6 @@ exports.ItemsGroup = void 0;
 const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
 const jsx_1 = require("../../jsx");
 const ItemsGroup = (props) => {
-    return (0, jsx_runtime_1.jsx)(jsx_1.Group, { "data-element-type": "items-group", ...props });
+    return (0, jsx_runtime_1.jsx)(jsx_1.Group, { "data-element-type": "items-group" /* ElementTypeEnum.ItemsGroup */, ...props });
 };
 exports.ItemsGroup = ItemsGroup;

package/lib/designs/components/Title.js

@@ -5,13 +5,11 @@ const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
 const jsx_1 = require("../../jsx");
 const layouts_1 = require("../layouts");
 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,
         };
@@ -21,7 +19,6 @@ const Title = (props) => {
         const defaultProps = {
             fontSize: 16,
             fill: themeColors.colorTextSecondary,
-            width,
             alignHorizontal,
             lineHeight: 1.4,
             height: subTitleLineNumber * 24,
@@ -30,6 +27,6 @@ const Title = (props) => {
     };
     if (!title && !desc)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { flexDirection: "column", x: x, y: y, width: width, gap: 8, children: [title && (0, jsx_runtime_1.jsx)(MainTitle, {}), desc && (0, jsx_runtime_1.jsx)(Desc, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { flexDirection: "column", justifyContent: "center", alignItems: "center", x: x, y: y, gap: 8, children: [title && (0, jsx_runtime_1.jsx)(MainTitle, {}), desc && (0, jsx_runtime_1.jsx)(Desc, {})] }));
 };
 exports.Title = Title;

package/lib/designs/items/CandyCardLite.js

@@ -8,7 +8,7 @@ const utils_1 = require("../utils");
 const registry_1 = require("./registry");
 const CandyCardLite = (props) => {
     const [{ indexes, datum, width = 280, height = 140, themeColors }, restProps,] = (0, utils_1.getItemProps)(props, ['width', 'height']);
-    return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { ...restProps, children: [(0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: width, height: height, rx: 18, ry: 18, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(jsx_1.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" }), (0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: 20, y: 24, width: 200, alignHorizontal: "left", alignVertical: "middle", fill: themeColors.colorText, children: datum.label }), (0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, x: 20, y: 58, width: 220, height: 70, fill: themeColors.colorTextSecondary, alignHorizontal: "left", alignVertical: "top", children: datum.desc }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: width - 48, y: 12, width: 32, height: 32, fill: themeColors.colorPrimary })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { ...restProps, children: [(0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: width, height: height, rx: 22, ry: 22, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(jsx_1.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" }), (0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: 20, y: 24, width: 200, alignHorizontal: "left", alignVertical: "middle", fill: themeColors.colorText, children: datum.label }), (0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, x: 20, y: 58, width: 220, height: 70, fill: themeColors.colorTextSecondary, alignHorizontal: "left", alignVertical: "top", children: datum.desc }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: width - 48, y: 12, width: 32, height: 32, fill: themeColors.colorPrimary })] }));
 };
 exports.CandyCardLite = CandyCardLite;
 (0, registry_1.registerItem)('candy-card-lite', {

package/lib/designs/items/CircularProgress.js

@@ -15,10 +15,11 @@ 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 ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { ...restProps, width: size, height: size + gap + 20, children: [(0, jsx_runtime_1.jsx)(jsx_1.Rect, { width: size, height: size, fill: "none" }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { ...bounds, fill: "none", stroke: "#f0f0f0", strokeWidth: strokeWidth, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(jsx_1.Path, { d: pathData, fill: "none", stroke: themeColors.colorPrimary, strokeWidth: strokeWidth, strokeLinecap: "round", "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(components_1.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 }), (0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorTextSecondary, children: datum.label })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { ...restProps, width: size, height: size + gap + 20, children: [(0, jsx_runtime_1.jsx)(jsx_1.Rect, { width: size, height: size, fill: "none" }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { ...bounds, fill: "none", stroke: "#f0f0f0", strokeWidth: strokeWidth, "data-element-type": "shape" }), isFullCircle ? ((0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { ...bounds, fill: "none", stroke: themeColors.colorPrimary, strokeWidth: strokeWidth, "data-element-type": "shape" })) : ((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: pathData, fill: "none", stroke: themeColors.colorPrimary, strokeWidth: strokeWidth, strokeLinecap: "round", "data-element-type": "shape" })), (0, jsx_runtime_1.jsx)(components_1.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 }), (0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorTextSecondary, children: datum.label })] }));
 };
 exports.CircularProgress = CircularProgress;
 function describeArc(x, y, radius, startAngle, endAngle) {

package/lib/designs/items/HorizontalIconArrow.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
 const jsx_1 = require("../../jsx");
 const components_1 = require("../components");
 const layouts_1 = require("../layouts");
-const Align_1 = require("../layouts/Align");
 const utils_1 = require("../utils");
 const registry_1 = require("./registry");
 const HorizontalIconArrow = (props) => {
@@ -36,7 +35,7 @@ const HorizontalIconArrow = (props) => {
         dotLineGap +
         labelBounds.height +
         descBounds.height;
-    return ((0, jsx_runtime_1.jsx)(jsx_1.Group, { width: width, height: totalHeight, ...restProps, children: (0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [desc, label, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: dotLineGap }), dotLine] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Gap, { height: fixedGap }), icon, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: iconGap })] })), (0, jsx_runtime_1.jsxs)(Align_1.AlignLayout, { horizontal: "center", vertical: "middle", children: [(0, jsx_runtime_1.jsx)(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(jsx_1.Text, { width: width, height: arrowHeight, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: datum.time
+    return ((0, jsx_runtime_1.jsx)(jsx_1.Group, { width: width, height: totalHeight, ...restProps, children: (0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [desc, label, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: dotLineGap }), dotLine] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Gap, { height: fixedGap }), icon, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: iconGap })] })), (0, jsx_runtime_1.jsxs)(jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(jsx_1.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/lib/designs/items/HorizontalIconLine.js

@@ -24,7 +24,7 @@ const HorizontalIconLine = (props) => {
     const time = datum.time ? ((0, jsx_runtime_1.jsx)(jsx_1.Text, { width: width, height: 30, alignHorizontal: "center", alignVertical: "middle", fill: themeColors.colorPrimary, fontSize: 18, fontWeight: "bold", children: datum.time })) : null;
     const timeBounds = (0, jsx_1.getElementBounds)(time);
     const lineHeight = 18;
-    const line = ((0, jsx_runtime_1.jsxs)(layouts_1.AlignLayout, { horizontal: "center", width: width, height: lineHeight, children: [(0, jsx_runtime_1.jsx)(jsx_1.Rect, { width: width, height: lineHeight, fill: themeColors.colorPrimary, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { y: -3, width: lineHeight + 6, height: lineHeight + 6, fill: themeColors.colorBg, fillOpacity: 0.5, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { y: (lineHeight - 12) / 2, width: 12, height: 12, fill: "white", "data-element-type": "shape" })] }));
+    const line = ((0, jsx_runtime_1.jsxs)(layouts_1.AlignLayout, { horizontal: "center", vertical: "middle", width: width, height: lineHeight, children: [(0, jsx_runtime_1.jsx)(jsx_1.Rect, { width: width, height: lineHeight, fill: themeColors.colorPrimary, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { width: lineHeight + 6, height: lineHeight + 6, fill: themeColors.colorBg, fillOpacity: 0.5, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(jsx_1.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/lib/designs/items/IconBadge.js

@@ -17,7 +17,7 @@ const IconBadge = (props) => {
     const badgeGradientId = '#ff6b6b-badge';
     return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { ...restProps, width: width, height: height, children: [(0, jsx_runtime_1.jsxs)(jsx_1.Defs, { children: [(0, jsx_runtime_1.jsxs)("radialGradient", { id: gradientId, cx: "50%", cy: "30%", r: "70%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: (0, tinycolor2_1.default)(themeColors.colorPrimary)
                                     .lighten(30)
-                                    .toHexString() }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: themeColors.colorPrimary })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: badgeGradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "#ff6b6b" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "#ee5a52" })] })] }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: 0, y: 0, width: size, height: size, fill: `url(#${gradientId})`, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: (size - iconSize) / 2, y: (size - iconSize) / 2, size: iconSize, fill: themeColors.colorPrimaryText }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: size - badgeSize + 4, y: 0, width: badgeSize, height: badgeSize, fill: `url(#${badgeGradientId})` }), (0, jsx_runtime_1.jsx)(jsx_1.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) }), (0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorText, children: datum.label })] }));
+                                    .toHexString() }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: themeColors.colorPrimary })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: badgeGradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "#ff6b6b" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "#ee5a52" })] })] }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: 0, y: 0, width: size, height: size, fill: `url(#${gradientId})`, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: (size - iconSize) / 2, y: (size - iconSize) / 2, size: iconSize, fill: themeColors.colorPrimaryText }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: size - badgeSize + 4, width: badgeSize, height: badgeSize, fill: `url(#${badgeGradientId})` }), (0, jsx_runtime_1.jsx)(jsx_1.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) }), (0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorText, children: datum.label })] }));
 };
 exports.IconBadge = IconBadge;
 (0, registry_1.registerItem)('icon-badge', {

package/lib/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/lib/designs/items/LinedText.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinedText = void 0;
+const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
+const jsx_1 = require("../../jsx");
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+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,] = (0, utils_1.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 = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.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 ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { ...restProps, width: finalWidth, height: finalHeight, children: [(0, jsx_runtime_1.jsx)(components_1.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 && ((0, jsx_runtime_1.jsx)(jsx_1.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" }))] }));
+};
+exports.LinedText = LinedText;
+(0, registry_1.registerItem)('lined-text', {
+    component: exports.LinedText,
+    composites: ['label'],
+});

package/lib/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/lib/designs/items/PlainText.js

@@ -6,12 +6,25 @@ const components_1 = require("../components");
 const utils_1 = require("../utils");
 const registry_1 = require("./registry");
 const LabelText = (props) => {
-    const [{ indexes, datum, width = 120, themeColors, positionH = 'normal', formatter = (text) => text || '', usePaletteColor = false, }, restProps,] = (0, utils_1.getItemProps)(props, ['width', 'formatter', 'usePaletteColor']);
-    return ((0, jsx_runtime_1.jsx)(components_1.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,] = (0, utils_1.getItemProps)(props, [
+        'width',
+        'formatter',
+        'usePaletteColor',
+        'lineNumber',
+    ]);
+    const fontSize = 14;
+    const lineHeight = 1.4;
+    const height = restProps.height ??
+        Math.ceil(lineNumber * lineHeight * fontSize);
+    return ((0, jsx_runtime_1.jsx)(components_1.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) }));
 };
 exports.LabelText = LabelText;
 (0, registry_1.registerItem)('plain-text', {