@antv/infographic 0.1.2 → 0.1.4

package/esm/designs/structures/hierarchy-tree.js

@@ -5,6 +5,10 @@ import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup, ShapesGroup, } from '../compo
 import { FlexLayout } from '../layouts';
 import { getColorPrimary, getHierarchyColorIndexes, getItemComponent, getPaletteColor, getThemeColors, } from '../utils';
 import { registerStructure } from './registry';
+const distributedPadding = (rawPadding, size) => {
+    const maxPadding = Math.max(0, size / 2 - 1);
+    return Math.min(rawPadding, maxPadding);
+};
 export const HierarchyTree = (props) => {
     const { Title, Items, data, 
     // 布局配置
@@ -16,7 +20,11 @@ export const HierarchyTree = (props) => {
     // 装饰元素配置
     edgeMarker = 'none', markerSize = 12, 
     // 着色模式配置
-    colorMode = 'branch', options, } = props;
+    colorMode = 'branch', 
+    // 布局方向
+    orientation = 'top-bottom', options, } = props;
+    const isHorizontal = orientation === 'left-right' || orientation === 'right-left';
+    const mainSign = orientation === 'bottom-top' || orientation === 'right-left' ? -1 : 1;
     const { title, desc } = data;
     const colorPrimary = getColorPrimary(options);
     // 内置工具方法：数据预处理
@@ -29,19 +37,52 @@ export const HierarchyTree = (props) => {
         return list;
     };
     // 内置工具方法：生成圆角路径
-    const createRoundedPath = (x1, y1, x2, y2, radius) => {
-        const midY = y1 + (y2 - y1) / 2;
-        const effectiveRadius = Math.min(radius, Math.abs(y2 - y1) / 2, Math.abs(x2 - x1) / 2);
+    const createRoundedPath = (x1, y1, x2, y2, radius, direction = 'vertical') => {
+        const isVertical = direction === 'vertical';
+        const deltaMain = isVertical ? y2 - y1 : x2 - x1;
+        const deltaCross = isVertical ? x2 - x1 : y2 - y1;
+        const signMain = deltaMain === 0 ? 1 : Math.sign(deltaMain);
+        const signCross = deltaCross === 0 ? 1 : Math.sign(deltaCross);
+        const midMain = isVertical ? y1 + deltaMain / 2 : x1 + deltaMain / 2;
+        const effectiveRadius = Math.min(radius, Math.abs(deltaMain) / 2, Math.abs(deltaCross) / 2);
         if (effectiveRadius === 0) {
-            return `M ${x1} ${y1} L ${x1} ${midY} L ${x2} ${midY} L ${x2} ${y2}`;
+            return isVertical
+                ? `M ${x1} ${y1} L ${x1} ${midMain} L ${x2} ${midMain} L ${x2} ${y2}`
+                : `M ${x1} ${y1} L ${midMain} ${y1} L ${midMain} ${y2} L ${x2} ${y2}`;
+        }
+        if (isVertical) {
+            return `M ${x1} ${y1}
+              L ${x1} ${midMain - signMain * effectiveRadius}
+              Q ${x1} ${midMain} ${x1 + signCross * effectiveRadius} ${midMain}
+              L ${x2 - signCross * effectiveRadius} ${midMain}
+              Q ${x2} ${midMain} ${x2} ${midMain + signMain * effectiveRadius}
+              L ${x2} ${y2}`;
         }
         return `M ${x1} ${y1}
-            L ${x1} ${midY - effectiveRadius}
-            Q ${x1} ${midY} ${x1 + (x2 > x1 ? effectiveRadius : -effectiveRadius)} ${midY}
-            L ${x2 - (x2 > x1 ? effectiveRadius : -effectiveRadius)} ${midY}
-            Q ${x2} ${midY} ${x2} ${midY + effectiveRadius}
+            L ${midMain - signMain * effectiveRadius} ${y1}
+            Q ${midMain} ${y1} ${midMain} ${y1 + signCross * effectiveRadius}
+            L ${midMain} ${y2 - signCross * effectiveRadius}
+            Q ${midMain} ${y2} ${midMain + signMain * effectiveRadius} ${y2}
             L ${x2} ${y2}`;
     };
+    const getLayoutPoint = (node) => {
+        const { x, y } = node;
+        return isHorizontal ? { x: y * mainSign, y: x } : { x, y: y * mainSign };
+    };
+    const getNodeRect = (node, bounds, offsets) => {
+        const { x, y } = getLayoutPoint(node);
+        const centerX = x + offsets.x;
+        const top = y + offsets.y;
+        const centerY = top + bounds.height / 2;
+        return {
+            centerX,
+            centerY,
+            left: centerX - bounds.width / 2,
+            right: centerX + bounds.width / 2,
+            top,
+            bottom: top + bounds.height,
+        };
+    };
     // 内置工具方法：构建层级数据
     const buildHierarchyData = (list) => {
         if (!list.length)
@@ -94,12 +135,13 @@ export const HierarchyTree = (props) => {
     };
     // 内置工具方法：渲染单个节点
     const renderNode = (node, levelBounds, btnBounds, offsets, gradientDefs, allNodes) => {
-        const { x, y, depth, data: nodeData, parent } = node;
+        const { depth, data: nodeData, parent } = node;
         const indexes = nodeData._originalIndex;
         const NodeComponent = getItemComponent(Items, depth);
         const bounds = levelBounds.get(depth);
-        const nodeX = x + offsets.x - bounds.width / 2;
-        const nodeY = y + offsets.y;
+        const nodeRect = getNodeRect(node, bounds, offsets);
+        const nodeX = nodeRect.left;
+        const nodeY = nodeRect.top;
         const elements = {
             items: [],
             btns: [],
@@ -122,45 +164,94 @@ export const HierarchyTree = (props) => {
         // 父子连线
         if (parent) {
             const parentBounds = levelBounds.get(parent.depth);
+            const parentRect = getNodeRect(parent, parentBounds, offsets);
             // 计算父节点的子节点数量和当前节点在兄弟中的索引
             const siblings = allNodes.filter((n) => n.parent === parent);
             const siblingIndex = siblings.findIndex((s) => s === node);
             const siblingCount = siblings.length;
             // 计算连接线起点
             let parentX;
+            let parentY;
             if (edgeOrigin === 'distributed' && siblingCount > 1) {
                 // 分布式起点：根据子节点数量分配起点位置
-                const startX = parent.x + offsets.x - parentBounds.width / 2 + edgeOriginPadding;
-                const endX = parent.x + offsets.x + parentBounds.width / 2 - edgeOriginPadding;
-                const segmentWidth = (endX - startX) / siblingCount;
-                parentX = startX + segmentWidth * siblingIndex + segmentWidth / 2;
+                if (isHorizontal) {
+                    const padding = distributedPadding(edgeOriginPadding, parentBounds.height);
+                    const startY = parentRect.top + padding;
+                    const endY = parentRect.bottom - padding;
+                    const segmentHeight = (endY - startY) / siblingCount;
+                    parentY = startY + segmentHeight * siblingIndex + segmentHeight / 2;
+                    parentX =
+                        (mainSign > 0 ? parentRect.right : parentRect.left) +
+                            edgeOffset * mainSign;
+                }
+                else {
+                    const padding = distributedPadding(edgeOriginPadding, parentBounds.width);
+                    const startX = parentRect.left + padding;
+                    const endX = parentRect.right - padding;
+                    const segmentWidth = (endX - startX) / siblingCount;
+                    parentX = startX + segmentWidth * siblingIndex + segmentWidth / 2;
+                    parentY =
+                        (mainSign > 0 ? parentRect.bottom : parentRect.top) +
+                            edgeOffset * mainSign;
+                }
             }
             else {
                 // 中心起点：所有线从节点中心出发
-                parentX = parent.x + offsets.x;
+                parentX = isHorizontal
+                    ? (mainSign > 0 ? parentRect.right : parentRect.left) +
+                        edgeOffset * mainSign
+                    : parentRect.centerX;
+                parentY = isHorizontal
+                    ? parentRect.centerY
+                    : (mainSign > 0 ? parentRect.bottom : parentRect.top) +
+                        edgeOffset * mainSign;
             }
-            const parentY = parent.y + offsets.y + parentBounds.height + edgeOffset;
-            const childX = x + offsets.x;
-            let childY = y + offsets.y - edgeOffset;
+            const baseChildX = isHorizontal
+                ? (mainSign > 0 ? nodeRect.left : nodeRect.right) -
+                    edgeOffset * mainSign
+                : nodeRect.centerX;
+            const baseChildY = isHorizontal
+                ? nodeRect.centerY
+                : (mainSign > 0 ? nodeRect.top : nodeRect.bottom) -
+                    edgeOffset * mainSign;
+            let childX = baseChildX;
+            let childY = baseChildY;
             // 调整终点位置（为箭头留出空间）
             if (edgeMarker === 'arrow') {
-                childY -= markerSize;
+                if (isHorizontal) {
+                    childX -= markerSize * mainSign;
+                }
+                else {
+                    childY -= markerSize * mainSign;
+                }
             }
             // 生成路径
             let pathD;
             if (edgeType === 'curved') {
                 // 使用贝塞尔曲线绘制曲线连接
-                const midY = parentY + (childY - parentY) / 2;
-                pathD = `M ${parentX} ${parentY} C ${parentX} ${midY}, ${childX} ${midY}, ${childX} ${childY}`;
+                if (isHorizontal) {
+                    const midX = parentX + (childX - parentX) / 2;
+                    pathD = `M ${parentX} ${parentY} C ${midX} ${parentY}, ${midX} ${childY}, ${childX} ${childY}`;
+                }
+                else {
+                    const midY = parentY + (childY - parentY) / 2;
+                    pathD = `M ${parentX} ${parentY} C ${parentX} ${midY}, ${childX} ${midY}, ${childX} ${childY}`;
+                }
             }
             else if (edgeCornerRadius > 0) {
                 // 使用圆角路径
-                pathD = createRoundedPath(parentX, parentY, childX, childY, edgeCornerRadius);
+                pathD = createRoundedPath(parentX, parentY, childX, childY, edgeCornerRadius, isHorizontal ? 'horizontal' : 'vertical');
             }
             else {
                 // 使用直角折线
-                const midY = parentY + (childY - parentY) / 2;
-                pathD = `M ${parentX} ${parentY} L ${parentX} ${midY} L ${childX} ${midY} L ${childX} ${childY}`;
+                if (isHorizontal) {
+                    const midX = parentX + (childX - parentX) / 2;
+                    pathD = `M ${parentX} ${parentY} L ${midX} ${parentY} L ${midX} ${childY} L ${childX} ${childY}`;
+                }
+                else {
+                    const midY = parentY + (childY - parentY) / 2;
+                    pathD = `M ${parentX} ${parentY} L ${parentX} ${midY} L ${childX} ${midY} L ${childX} ${childY}`;
+                }
             }
             // 确定连接线颜色
             let strokeColor = colorPrimary;
@@ -192,17 +283,29 @@ export const HierarchyTree = (props) => {
                     ? getPaletteColor(options, colorIndexes)
                     : getColorPrimary(options);
                 // 三角形箭头
-                const arrowPoints = [
-                    { x: childX, y: y + offsets.y - edgeOffset },
-                    {
-                        x: childX - markerSize / 2,
-                        y: y + offsets.y - edgeOffset - markerSize,
-                    },
-                    {
-                        x: childX + markerSize / 2,
-                        y: y + offsets.y - edgeOffset - markerSize,
-                    },
-                ];
+                const arrowPoints = isHorizontal
+                    ? [
+                        { x: baseChildX, y: baseChildY },
+                        {
+                            x: baseChildX - markerSize * mainSign,
+                            y: baseChildY - markerSize / 2,
+                        },
+                        {
+                            x: baseChildX - markerSize * mainSign,
+                            y: baseChildY + markerSize / 2,
+                        },
+                    ]
+                    : [
+                        { x: baseChildX, y: baseChildY },
+                        {
+                            x: baseChildX - markerSize / 2,
+                            y: baseChildY - markerSize * mainSign,
+                        },
+                        {
+                            x: baseChildX + markerSize / 2,
+                            y: baseChildY - markerSize * mainSign,
+                        },
+                    ];
                 elements.deco.push(_jsx(Polygon, { points: arrowPoints, fill: arrowColor, width: markerSize, height: markerSize }));
             }
             // 添加连接点装饰
@@ -216,16 +319,20 @@ export const HierarchyTree = (props) => {
                     ? getPaletteColor(options, parentColorIndexes)
                     : getColorPrimary(options);
                 // 父节点连接点
-                elements.deco.push(_jsx(Ellipse, { x: parentX - markerSize, y: parent.y +
-                        offsets.y +
-                        parentBounds.height +
-                        edgeOffset -
-                        markerSize, width: markerSize * 2, height: markerSize * 2, fill: parentDotColor }));
+                elements.deco.push(_jsx(Ellipse, { x: (isHorizontal
+                        ? mainSign > 0
+                            ? parentRect.right + edgeOffset
+                            : parentRect.left - edgeOffset
+                        : parentX) - markerSize, y: (isHorizontal
+                        ? parentY
+                        : mainSign > 0
+                            ? parentRect.bottom + edgeOffset
+                            : parentRect.top - edgeOffset) - markerSize, width: markerSize * 2, height: markerSize * 2, fill: parentDotColor }));
                 // 子节点连接点
                 const childDotColor = edgeColorMode === 'gradient'
                     ? getPaletteColor(options, colorIndexes)
                     : getColorPrimary(options);
-                elements.deco.push(_jsx(Ellipse, { x: childX - markerSize, y: y + offsets.y - edgeOffset - markerSize, width: markerSize * 2, height: markerSize * 2, fill: childDotColor }));
+                elements.deco.push(_jsx(Ellipse, { x: baseChildX - markerSize, y: baseChildY - markerSize, width: markerSize * 2, height: markerSize * 2, fill: childDotColor }));
             }
         }
         return elements;
@@ -243,13 +350,30 @@ export const HierarchyTree = (props) => {
         nodesByParent.forEach((siblings) => {
             if (siblings.length <= 1)
                 return;
-            const sorted = siblings.slice().sort((a, b) => a.x - b.x);
-            const siblingY = sorted[0].y + offsets.y - btnBounds.height - 5;
+            const sorted = siblings
+                .slice()
+                .sort((a, b) => isHorizontal
+                ? getLayoutPoint(a).y - getLayoutPoint(b).y
+                : getLayoutPoint(a).x - getLayoutPoint(b).x);
+            if (sorted.length === 0)
+                return;
             for (let i = 0; i < sorted.length - 1; i++) {
-                const btnX = (sorted[i].x + sorted[i + 1].x) / 2 + offsets.x - btnBounds.width / 2;
+                const current = getLayoutPoint(sorted[i]);
+                const next = getLayoutPoint(sorted[i + 1]);
                 const parentIndexes = sorted[i].data._originalIndex.slice(0, -1);
                 const insertIndex = sorted[i].data._originalIndex.at(-1) + 1;
-                btns.push(_jsx(BtnAdd, { indexes: [...parentIndexes, insertIndex], x: btnX, y: siblingY }));
+                if (isHorizontal) {
+                    const btnX = current.x +
+                        offsets.x +
+                        (mainSign > 0 ? -btnBounds.width - 5 : btnBounds.width + 5);
+                    const btnY = (current.y + next.y) / 2 + offsets.y - btnBounds.height / 2;
+                    btns.push(_jsx(BtnAdd, { indexes: [...parentIndexes, insertIndex], x: btnX, y: btnY }));
+                }
+                else {
+                    const siblingY = current.y + offsets.y - btnBounds.height - 5;
+                    const btnX = (current.x + next.x) / 2 + offsets.x - btnBounds.width / 2;
+                    btns.push(_jsx(BtnAdd, { indexes: [...parentIndexes, insertIndex], x: btnX, y: siblingY }));
+                }
             }
         });
         return btns;
@@ -268,12 +392,15 @@ export const HierarchyTree = (props) => {
     const { levelBounds, maxWidth, maxHeight } = computeLevelBounds(root);
     const treeLayout = d3
         .tree()
-        .nodeSize([maxWidth + nodeGap, maxHeight + levelGap])
+        .nodeSize(isHorizontal
+        ? [maxHeight + nodeGap, maxWidth + levelGap]
+        : [maxWidth + nodeGap, maxHeight + levelGap])
         .separation(() => 1);
     const nodes = treeLayout(root).descendants();
     // 计算偏移量
-    const minX = Math.min(...nodes.map((d) => d.x));
-    const minY = Math.min(...nodes.map((d) => d.y));
+    const layoutPoints = nodes.map((d) => getLayoutPoint(d));
+    const minX = Math.min(...layoutPoints.map((d) => d.x));
+    const minY = Math.min(...layoutPoints.map((d) => d.y));
     const offsets = {
         x: Math.max(0, -minX + maxWidth / 2),
         y: Math.max(0, -minY + btnBounds.height + 10),
@@ -287,6 +414,8 @@ export const HierarchyTree = (props) => {
     nodes.forEach((node, index) => {
         // 将扁平索引附加到节点数据上，用于 node-flat 模式
         node.data._flatIndex = index;
+        const { x, y } = getLayoutPoint(node);
+        node.__layout = { x, y };
     });
     nodes.forEach((node) => {
         const { items, btns, deco } = renderNode(node, levelBounds, btnBounds, offsets, gradientDefs, nodes);

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

@@ -1,7 +1,12 @@
+export * from './chart-bar';
 export * from './chart-column';
+export * from './chart-line';
+export * from './chart-pie';
+export * from './chart-wordcloud';
 export * from './compare-binary-horizontal';
 export * from './compare-hierarchy-left-right';
 export * from './compare-hierarchy-row';
+export * from './hierarchy-mindmap';
 export * from './hierarchy-tree';
 export * from './list-column';
 export * from './list-grid';
@@ -26,6 +31,7 @@ export * from './sequence-mountain';
 export * from './sequence-pyramid';
 export * from './sequence-roadmap-vertical';
 export * from './sequence-snake-steps';
+export * from './sequence-stairs-front';
 export * from './sequence-steps';
 export * from './sequence-timeline';
 export * from './sequence-zigzag-pucks-3d';

package/esm/designs/structures/index.js

@@ -1,7 +1,12 @@
+export * from './chart-bar';
 export * from './chart-column';
+export * from './chart-line';
+export * from './chart-pie';
+export * from './chart-wordcloud';
 export * from './compare-binary-horizontal';
 export * from './compare-hierarchy-left-right';
 export * from './compare-hierarchy-row';
+export * from './hierarchy-mindmap';
 export * from './hierarchy-tree';
 export * from './list-column';
 export * from './list-grid';
@@ -26,6 +31,7 @@ export * from './sequence-mountain';
 export * from './sequence-pyramid';
 export * from './sequence-roadmap-vertical';
 export * from './sequence-snake-steps';
+export * from './sequence-stairs-front';
 export * from './sequence-steps';
 export * from './sequence-timeline';
 export * from './sequence-zigzag-pucks-3d';

package/esm/designs/structures/list-sector.js

@@ -139,7 +139,7 @@ export const ListSector = (props) => {
       Z
     `.trim();
     }
-    return (_jsxs(Group, { id: "infographic-container", children: [_jsx(Group, { children: sectorElements }), isFullCircle ? (_jsx(Ellipse, { id: "shape-center-circle", x: centerX - centerRadius, y: centerY - centerRadius, width: centerRadius * 2, height: centerRadius * 2, fill: themeColors.colorPrimaryBg, fillOpacity: 0.5, "data-element-type": "shape" })) : (_jsx(Path, { id: "shape-center-sector", d: centerSectorPath, fill: themeColors.colorPrimaryBg, fillOpacity: 0.5, width: outerRadius * 2 + 200, height: outerRadius * 2 + 200, "data-element-type": "shape" })), _jsx(Text, { id: "title", x: titleCenterX - titleWidth / 2, y: titleCenterY - titleHeight / 2, width: titleWidth, height: titleHeight, alignHorizontal: "center", alignVertical: "middle", fontSize: 24, fontWeight: "bold", fill: themeColors.colorText, children: title }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] }));
+    return (_jsxs(Group, { id: "infographic-container", children: [_jsx(Group, { children: sectorElements }), isFullCircle ? (_jsx(Ellipse, { id: "shape-center-circle", x: centerX - centerRadius, y: centerY - centerRadius, width: centerRadius * 2, height: centerRadius * 2, fill: themeColors.colorPrimaryBg, fillOpacity: 0.5, "data-element-type": "shape" })) : (_jsx(Path, { id: "shape-center-sector", d: centerSectorPath, fill: themeColors.colorPrimaryBg, fillOpacity: 0.5, width: outerRadius * 2 + 200, height: outerRadius * 2 + 200, "data-element-type": "shape" })), _jsx(Text, { x: titleCenterX - titleWidth / 2, y: titleCenterY - titleHeight / 2, width: titleWidth, height: titleHeight, alignHorizontal: "center", alignVertical: "middle", fontSize: 24, fontWeight: "bold", fill: themeColors.colorText, "data-element-type": "title" /* ElementTypeEnum.Title */, children: title }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] }));
 };
 registerStructure('list-sector', {
     component: ListSector,

package/esm/designs/structures/sequence-circular.js

@@ -163,7 +163,7 @@ export const SequenceCircular = (props) => {
         btnBounds,
     });
     btnElements.unshift(_jsx(BtnAdd, { indexes: [0], x: firstAddBtnX, y: firstAddBtnY }));
-    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 50, children: [titleContent, _jsxs(Group, { children: [_jsx(Group, { children: arcElements }), _jsx(Group, { children: iconElements }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 70, children: [titleContent, _jsxs(Group, { children: [_jsx(Group, { children: arcElements }), _jsx(Group, { children: iconElements }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
 };
 registerStructure('sequence-circular', {
     component: SequenceCircular,

package/esm/designs/structures/sequence-cylinders-3d.js

@@ -135,12 +135,12 @@ const createCylinderElements = (index, cylinderPos, cylinderRx, cylinderRy) => {
       `, fill: `url(#cylinderGradient${index})`, stroke: "none" }));
     elements.push(_jsx(Rect, { id: `cylinder-glow-${index}`, x: x - cylinderRx, y: topY - cylinderRy * 3, width: cylinderRx * 2, height: cylinderRy * 3, fill: `url(#glowGradient${index})` }));
     elements.push(_jsx("ellipse", { id: `cylinder-top-${index}`, cx: x, cy: topY, rx: cylinderRx, ry: cylinderRy, fill: `url(#topGradient${index})` }));
-    const numberX = x;
-    const numberY = topY + 2;
+    const numberX = x - 10;
+    const numberY = topY - 15;
     const scaleY = 0.6;
     const skewX = -0.6;
-    const transformValue = `translate(${numberX}, ${numberY}) matrix(1, 0, ${skewX}, ${scaleY}, 0, 0) translate(${-numberX}, ${-numberY})`;
-    elements.push(_jsx(Text, { id: `cylinder-number-${index}`, x: numberX, y: numberY, fontFamily: "Arial Black, sans-serif", fontSize: 32, fontWeight: 900, fill: `url(#numberGradient${index})`, alignHorizontal: "center", alignVertical: "middle", transform: transformValue, children: index + 1 }));
+    const transformValue = `translate(${numberX}, ${numberY}) matrix(1, 0, ${skewX}, ${scaleY}, 0, 0)`;
+    elements.push(_jsx(Text, { id: `cylinder-number-${index}`, width: 50, height: 50, fontFamily: "Arial Black, sans-serif", fontSize: 32, fontWeight: 900, fill: `url(#numberGradient${index})`, alignHorizontal: "center", alignVertical: "middle", transform: transformValue, children: index + 1 }));
     return elements;
 };
 const createDecorationElements = (index, lineStartX, lineEndX, lineY, color) => {

package/esm/designs/structures/sequence-roadmap-vertical.js

@@ -45,7 +45,7 @@ function renderItemRow({ i, direction, x, y, color, data, itemBounds, item, Item
             : 'flipped';
     return {
         icon: (_jsx(ItemIconCircle, { indexes: [i], x: iconX, y: iconY, size: iconSize, fill: color })),
-        label: (_jsx(Text, { x: isLeft ? iconX - 10 : iconX + iconSize + 10, y: iconY + iconSize / 2 - 15, fontSize: 30, fill: color, alignHorizontal: isLeft ? 'right' : 'left', children: String(i + 1).padStart(2, '0') })),
+        label: (_jsx(Text, { width: 40, x: isLeft ? iconX - 50 : iconX + iconSize + 10, y: iconY + iconSize / 2 - 15, fontSize: 30, fill: color, alignHorizontal: isLeft ? 'right' : 'left', children: String(i + 1).padStart(2, '0') })),
         item: (_jsx(Item, { indexes: [i], data: data, datum: item, x: itemX, y: itemY, positionH: positionH })),
     };
 }

package/esm/designs/structures/sequence-stairs-front.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentType } from '../../jsx';
+import type { BaseStructureProps } from './types';
+export interface SequenceStairsFrontProps extends BaseStructureProps {
+    gap?: number;
+    perspectiveFactor?: number;
+    width?: number;
+}
+export declare const SequenceStairsFront: ComponentType<SequenceStairsFrontProps>;

package/esm/designs/structures/sequence-stairs-front.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
+import { getElementBounds, Group, Path, Polygon, Rect, Text } from '../../jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getPaletteColor } from '../utils';
+import { registerStructure } from './registry';
+export const SequenceStairsFront = (props) => {
+    const { Title, Item, data, options, gap = 16, perspectiveFactor = 0.2, width = 720, } = props;
+    const { title, desc, items = [] } = data;
+    const TitleComponent = Title;
+    const titleContent = TitleComponent ? (_jsx(TitleComponent, { title: title, desc: desc })) : null;
+    if (items.length === 0) {
+        const btnAddElement = _jsx(BtnAdd, { indexes: [0], x: 0, y: 0 });
+        return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { children: _jsx(BtnsGroup, { children: btnAddElement }) })] }));
+    }
+    const colorPrimary = getColorPrimary(options);
+    const btnBounds = getElementBounds(_jsx(BtnAdd, { indexes: [0] }));
+    const itemBounds = getElementBounds(_jsx(Item, { indexes: [0], data: data, datum: items[0] || {}, positionH: "center" }));
+    const connectorGap = 12;
+    const baseConnectorWidth = Math.min(width * 0.1, 100);
+    const bottomStepWidth = Math.min(width * 0.45, Math.max(80, width - itemBounds.width - connectorGap - baseConnectorWidth));
+    const baseDepth = Math.max(24, bottomStepWidth * perspectiveFactor * 0.35);
+    const baseStepHeight = 56;
+    const minStepHeight = baseStepHeight * 0.7;
+    const heightStep = items.length > 1
+        ? (baseStepHeight - minStepHeight) / (items.length - 1)
+        : 0;
+    const topMargin = Math.max(btnBounds.height + baseDepth + 20, baseDepth + 28);
+    const centerX = bottomStepWidth / 2;
+    const itemX = bottomStepWidth + baseConnectorWidth + connectorGap;
+    const stepHeights = items.map((_, index) => baseStepHeight - heightStep * index);
+    const stepDepths = items.map((_, index) => Math.max(baseDepth * (1 - index * 0.05), baseDepth * 0.7));
+    const stepYs = [];
+    const depthFromTop = [];
+    const lastIndex = items.length - 1;
+    stepYs[lastIndex] = topMargin;
+    depthFromTop[lastIndex] = 0;
+    for (let i = lastIndex - 1; i >= 0; i -= 1) {
+        depthFromTop[i] = depthFromTop[i + 1] + stepDepths[i] + gap;
+        stepYs[i] = stepYs[i + 1] + stepDepths[i] + stepHeights[i + 1] + gap;
+    }
+    const totalDepthSpan = depthFromTop[0] || stepDepths[0] || baseDepth;
+    const minStepWidth = bottomStepWidth * (0.55 + perspectiveFactor * 0.1);
+    const widthShrink = bottomStepWidth - minStepWidth;
+    const stepWidths = items.map((_, index) => {
+        const ratio = totalDepthSpan === 0 ? 1 : depthFromTop[index] / totalDepthSpan;
+        return minStepWidth + widthShrink * ratio;
+    });
+    const connectorWidths = stepWidths.map((stepWidth) => {
+        const connectorStartX = centerX + stepWidth / 2;
+        return Math.max(0, itemX - connectorGap - connectorStartX);
+    });
+    const stepElements = [];
+    const itemElements = [];
+    const btnElements = [];
+    const connectorElements = [];
+    const spineElements = [];
+    const spineTop = 0;
+    const spineBottom = (stepYs[0] || topMargin) + (stepHeights[0] || baseStepHeight);
+    const arrowHeight = spineBottom - spineTop;
+    const arrowHeadHeight = 35;
+    const topStepWidth = stepWidths[lastIndex] || minStepWidth;
+    const arrowTopWidth = topStepWidth * 0.8;
+    const arrowNeckWidth = arrowTopWidth * 0.65;
+    const arrowBottomWidth = (stepWidths[0] || bottomStepWidth) * 0.9;
+    spineElements.push(_jsx(Polygon, { points: [
+            { x: centerX, y: spineTop },
+            { x: centerX + arrowTopWidth / 2, y: spineTop + arrowHeadHeight },
+            { x: centerX + arrowNeckWidth / 2, y: spineTop + arrowHeadHeight },
+            { x: centerX + arrowBottomWidth / 2, y: spineBottom },
+            { x: centerX - arrowBottomWidth / 2, y: spineBottom },
+            { x: centerX - arrowNeckWidth / 2, y: spineTop + arrowHeadHeight },
+            { x: centerX - arrowTopWidth / 2, y: spineTop + arrowHeadHeight },
+        ], fill: "rgba(0,0,0,0.12)", width: arrowBottomWidth, height: arrowHeight, "data-element-type": "shape" }));
+    let previousCenterY = stepYs[lastIndex] + stepHeights[lastIndex] / 2;
+    items.forEach((item, index) => {
+        const indexes = [index];
+        const stepWidth = stepWidths[index];
+        const stepDepth = stepDepths[index];
+        const stepX = centerX - stepWidth / 2;
+        const stepHeight = stepHeights[index];
+        const stepY = stepYs[index];
+        const topY = stepY - stepDepth;
+        const rectCenterY = stepY + stepHeight / 2;
+        const stepColor = getPaletteColor(options, indexes) || colorPrimary;
+        stepElements.push(_jsx(Rect, { x: stepX, y: stepY, width: stepWidth, height: stepHeight, fill: stepColor, "data-element-type": "shape" }), _jsx(Polygon, { points: [
+                { x: stepX, y: stepY },
+                { x: stepX + stepWidth, y: stepY },
+                { x: stepX + stepWidth - stepDepth / 2, y: topY },
+                { x: stepX + stepDepth / 2, y: topY },
+            ], fill: stepColor, opacity: "0.3", width: stepWidth, height: stepDepth, "data-element-type": "shape" }), _jsx(Text, { x: stepX, y: stepY, width: stepWidth, height: stepHeight, fontSize: stepHeight / 2, fontWeight: "bold", alignHorizontal: "center", alignVertical: "middle", fill: "#ffffff", children: String(index + 1).padStart(2, '0') }));
+        const connectorStartX = stepX + stepWidth;
+        const connectorEndY = rectCenterY;
+        const connectorWidth = connectorWidths[index];
+        const lineEndX = connectorStartX + connectorWidth;
+        connectorElements.push(_jsx(Path, { d: `M ${connectorStartX} ${connectorEndY} L ${lineEndX} ${connectorEndY}`, stroke: stepColor, strokeWidth: 2, fill: "none", width: connectorWidth, height: 2, "data-element-type": "shape" }), _jsx(Path, { d: `M ${lineEndX} ${connectorEndY} L ${lineEndX} ${connectorEndY}`, stroke: stepColor, strokeWidth: 6, strokeLinecap: "round", width: 1, height: 1, "data-element-type": "shape" }));
+        const itemY = rectCenterY - itemBounds.height / 2;
+        itemElements.push(_jsx(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, positionV: "middle" }));
+        btnElements.push(_jsx(BtnRemove, { indexes: indexes, x: itemX + itemBounds.width + 10, y: itemY + itemBounds.height / 2 - btnBounds.height / 2 }));
+        if (index === 0) {
+            btnElements.push(_jsx(BtnAdd, { indexes: [0], x: itemX + (itemBounds.width - btnBounds.width) / 2, y: itemY - btnBounds.height - 12 }));
+        }
+        else {
+            btnElements.push(_jsx(BtnAdd, { indexes: indexes, x: itemX + (itemBounds.width - btnBounds.width) / 2, y: (previousCenterY + rectCenterY) / 2 - btnBounds.height / 2 }));
+        }
+        previousCenterY = rectCenterY;
+    });
+    const lastCenterY = previousCenterY;
+    const lastItemY = lastCenterY - itemBounds.height / 2;
+    btnElements.push(_jsx(BtnAdd, { indexes: [items.length], x: itemX + (itemBounds.width - btnBounds.width) / 2, y: lastItemY + itemBounds.height + 12 }));
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { children: [_jsx(Group, { children: spineElements }), _jsx(Group, { children: stepElements }), _jsx(Group, { children: connectorElements }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
+};
+registerStructure('sequence-stairs-front', {
+    component: SequenceStairsFront,
+    composites: ['title', 'item'],
+});

package/esm/designs/structures/sequence-zigzag-pucks-3d.js

@@ -7,10 +7,10 @@ import { registerStructure } from './registry';
 const PUCK_WIDTH = 120;
 const PUCK_HEIGHT = 108;
 const ITEM_TO_PUCK_GAP = 30;
-const PUCK_TOP_PATH = 'M0 34.4903C0 37.8781 0.849901 41.1522 2.43491 44.2451C4.23514 47.7639 6.98606 51.0482 10.5164 54.0008C21.3317 63.0477 39.4607 68.9799 59.9998 68.9799C80.5391 68.9799 98.6691 63.0477 109.483 54.0008C113.013 51.0482 115.765 47.7639 117.564 44.2451C119.149 41.1522 120 37.8781 120 34.4903C120 15.4417 93.1366 0 59.9998 0C26.8632 0 0 15.4417 0 34.4903Z';
-const PUCK_MIDDLE_PATH = 'M0 34.4904V53.9996C0 57.3885 0.849901 60.6616 2.43491 63.7555C9.75384 78.0548 32.7566 88.4909 59.9998 88.4909C87.2438 88.4909 110.246 78.0548 117.564 63.7555C119.149 60.6616 120 57.3885 120 53.9996V34.4904C120 37.8781 119.149 41.1522 117.564 44.2451C115.765 47.7639 113.013 51.0482 109.483 54.0008C98.6691 63.0477 80.5391 68.9799 59.9998 68.9799C39.4607 68.9799 21.3317 63.0477 10.5164 54.0008C6.98606 51.0482 4.23514 47.7639 2.43491 44.2451C0.849901 41.1522 0 37.8781 0 34.4904Z';
-const PUCK_BOTTOM_PATH = 'M0 53.9996V73.5106C0 92.5595 26.8632 108 59.9998 108C93.1366 108 120 92.5595 120 73.5106V53.9996C120 57.3885 119.149 60.6616 117.564 63.7555C110.246 78.0548 87.2438 88.4909 59.9998 88.4909C32.7566 88.4909 9.75384 78.0548 2.43491 63.7555C0.849901 60.6616 0 57.3885 0 53.9996Z';
-const DropShadowFilter = (_jsxs("filter", { id: "sequence-zigzag-pucks-3d-shadow-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dx: "-7", dy: "7" }), _jsx("feGaussianBlur", { stdDeviation: "7.5" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow", result: "shape" })] }));
+const PUCK_TOP_PATH = 'M4.49144e-05 34.4898C4.49144e-05 37.8786 0.848973 41.152 2.43571 44.2444C4.23516 47.7642 6.98514 51.0472 10.517 54.0009C21.331 63.047 39.4615 68.9814 59.9991 68.9814C80.5385 68.9814 98.6672 63.047 109.483 54.0009C113.013 51.0472 115.765 47.7642 117.564 44.2444C119.149 41.152 120 37.8786 120 34.4898C120 15.4407 93.1364 0 59.9991 0C26.8635 0 4.49144e-05 15.4407 4.49144e-05 34.4898Z';
+const PUCK_MIDDLE_PATH = 'M4.49145e-05 34.4898V53.9991C4.49145e-05 57.3879 0.848973 60.6613 2.43571 63.7556C9.75425 78.0545 32.7562 88.4907 59.999 88.4907C87.2438 88.4907 110.246 78.0545 117.564 63.7556C119.149 60.6613 120 57.3879 120 53.9991V34.4898C120 37.8786 119.149 41.152 117.564 44.2444C115.765 47.7642 113.013 51.0472 109.483 54.0009C98.6672 63.047 80.5385 68.9814 59.999 68.9814C39.4615 68.9814 21.3309 63.047 10.5169 54.0009C6.98509 51.0472 4.23516 47.7642 2.43567 44.2444C0.848928 41.152 4.49145e-05 37.8786 4.49145e-05 34.4898Z';
+const PUCK_BOTTOM_PATH = 'M0 53.9991V73.5102C0 92.5593 26.8634 108 59.999 108C93.1363 108 120 92.5593 120 73.5102V53.9991C120 57.3879 119.149 60.6613 117.564 63.7556C110.246 78.0545 87.2438 88.4907 59.999 88.4907C32.7562 88.4907 9.75425 78.0545 2.43571 63.7556C0.848973 60.6613 0 57.3879 0 53.9991Z';
+const DropShadowFilter = (_jsxs("filter", { id: "sequence-zigzag-pucks-3d-shadow-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feOffset", { dx: "-7", dy: "7", in: "SourceAlpha", result: "offset" }), _jsx("feGaussianBlur", { stdDeviation: "7.5", in: "offset", result: "blurred" }), _jsx("feColorMatrix", { in: "blurred", type: "matrix", values: "0 0 0 0 0 \n              0 0 0 0 0 \n              0 0 0 0 0 \n              0 0 0 0.3 0", result: "shadow" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "shadow" })] }));
 export const SequenceZigzagPucks3d = (props) => {
     const { Title, Item, data, options, gap = 80 } = props;
     const puckWidth = PUCK_WIDTH;
@@ -39,7 +39,7 @@ export const SequenceZigzagPucks3d = (props) => {
         minY = Math.min(minY, puckY);
         const gradientId1 = `puck-gradient-middle-${index}`;
         const gradientId2 = `puck-gradient-bottom-${index}`;
-        puckElements.push(_jsxs(Group, { x: puckX, y: puckY, id: `puck-${index}`, width: puckWidth, height: puckHeight, filter: "url(#sequence-zigzag-pucks-3d-shadow-filter)", children: [_jsxs(Defs, { children: [_jsxs("linearGradient", { id: gradientId1, x1: "115", y1: "55.9991", x2: "15.0002", y2: "55.9991", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: currentColor || colorPrimary }), _jsx("stop", { offset: "1", stopColor: currentColor || colorPrimary, stopOpacity: "0.6" })] }), _jsxs("linearGradient", { id: gradientId2, x1: "115", y1: "72.1803", x2: "15.0002", y2: "72.1803", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "#F4F4FB" }), _jsx("stop", { offset: "1", stopColor: "#8E8C90" })] })] }), _jsxs(ShapesGroup, { width: PUCK_WIDTH, height: PUCK_HEIGHT, children: [_jsx(Path, { d: PUCK_TOP_PATH, fill: currentColor || colorPrimary }), _jsx(Path, { d: PUCK_MIDDLE_PATH, fill: `url(#${gradientId1})` }), _jsx(Path, { d: PUCK_BOTTOM_PATH, fill: `url(#${gradientId2})` })] }), _jsx("text", { x: 65, y: 40, width: 50, height: 50, fontSize: 40, fontWeight: "bold", fill: "#FFFFFF", textAnchor: "middle", dominantBaseline: "middle", transform: "rotate(-15 65 40) scale(1, 0.8)", children: index + 1 })] }));
+        puckElements.push(_jsxs(Group, { x: puckX, y: puckY, id: `puck-${index}`, width: puckWidth, height: puckHeight, filter: "url(#sequence-zigzag-pucks-3d-shadow-filter)", children: [_jsxs(Defs, { children: [_jsxs("linearGradient", { id: gradientId1, x1: "115", y1: "55.9991", x2: "15.0002", y2: "55.9991", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: currentColor || colorPrimary }), _jsx("stop", { offset: "1", stopColor: currentColor || colorPrimary, stopOpacity: "0.6" })] }), _jsxs("linearGradient", { id: gradientId2, x1: "115", y1: "72.1803", x2: "15.0002", y2: "72.1803", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "#F4F4FB" }), _jsx("stop", { offset: "1", stopColor: "#8E8C90" })] })] }), _jsxs(ShapesGroup, { width: PUCK_WIDTH, height: PUCK_HEIGHT, children: [_jsx(Path, { d: PUCK_TOP_PATH, fill: currentColor || colorPrimary }), _jsx(Path, { d: PUCK_MIDDLE_PATH, fill: `url(#${gradientId1})` }), _jsx(Path, { d: PUCK_BOTTOM_PATH, fill: `url(#${gradientId2})` }), _jsx("rect", { fill: "transparent", y: PUCK_HEIGHT, width: PUCK_WIDTH, height: 20 })] }), _jsx("text", { x: 65, y: 40, width: 50, height: 50, fontSize: 40, fontWeight: "bold", fill: "#FFFFFF", textAnchor: "middle", dominantBaseline: "middle", transform: "rotate(-15 65 40) scale(1, 0.8)", children: index + 1 })] }));
         const itemX = puckX + (puckWidth - itemBounds.width) / 2;
         const itemY = isEven
             ? puckY + puckHeight + ITEM_TO_PUCK_GAP

package/esm/designs/types.d.ts

@@ -20,6 +20,14 @@ export interface ParsedDesignsOptions {
     item: WithProps<Item>;
     items: WithProps<Item>[];
 }
+export interface NullableParsedDesignsOptions {
+    structure: WithProps<Structure> | null;
+    title: {
+        component: ComponentType<any> | null;
+    };
+    item: WithProps<Item> | null;
+    items: (WithProps<Item> | null)[];
+}
 type WithType<T> = T & {
     type: string;
 };

package/esm/editor/commands/Batch.d.ts

@@ -0,0 +1,11 @@
+import type { ICommand, IStateManager } from '../types';
+export declare class BatchCommand implements ICommand {
+    private commands;
+    constructor(commands: ICommand[]);
+    apply(state: IStateManager): Promise<void>;
+    undo(state: IStateManager): Promise<void>;
+    serialize(): {
+        type: string;
+        commands: any[];
+    };
+}