@antv/infographic 0.1.3 → 0.1.4

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

@@ -41,6 +41,10 @@ const components_1 = require("../components");
 const layouts_1 = require("../layouts");
 const utils_1 = require("../utils");
 const registry_1 = require("./registry");
+const distributedPadding = (rawPadding, size) => {
+    const maxPadding = Math.max(0, size / 2 - 1);
+    return Math.min(rawPadding, maxPadding);
+};
 const HierarchyTree = (props) => {
     const { Title, Items, data, 
     // 布局配置
@@ -52,7 +56,11 @@ 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 = (0, utils_1.getColorPrimary)(options);
     // 内置工具方法：数据预处理
@@ -65,19 +73,52 @@ 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)
@@ -130,12 +171,13 @@ 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 = (0, utils_1.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: [],
@@ -158,45 +200,94 @@ 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;
@@ -228,17 +319,29 @@ const HierarchyTree = (props) => {
                     ? (0, utils_1.getPaletteColor)(options, colorIndexes)
                     : (0, utils_1.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((0, jsx_runtime_1.jsx)(jsx_1.Polygon, { points: arrowPoints, fill: arrowColor, width: markerSize, height: markerSize }));
             }
             // 添加连接点装饰
@@ -252,16 +355,20 @@ const HierarchyTree = (props) => {
                     ? (0, utils_1.getPaletteColor)(options, parentColorIndexes)
                     : (0, utils_1.getColorPrimary)(options);
                 // 父节点连接点
-                elements.deco.push((0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: parentX - markerSize, y: parent.y +
-                        offsets.y +
-                        parentBounds.height +
-                        edgeOffset -
-                        markerSize, width: markerSize * 2, height: markerSize * 2, fill: parentDotColor }));
+                elements.deco.push((0, jsx_runtime_1.jsx)(jsx_1.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'
                     ? (0, utils_1.getPaletteColor)(options, colorIndexes)
                     : (0, utils_1.getColorPrimary)(options);
-                elements.deco.push((0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: childX - markerSize, y: y + offsets.y - edgeOffset - markerSize, width: markerSize * 2, height: markerSize * 2, fill: childDotColor }));
+                elements.deco.push((0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: baseChildX - markerSize, y: baseChildY - markerSize, width: markerSize * 2, height: markerSize * 2, fill: childDotColor }));
             }
         }
         return elements;
@@ -279,13 +386,30 @@ 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((0, jsx_runtime_1.jsx)(components_1.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((0, jsx_runtime_1.jsx)(components_1.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((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [...parentIndexes, insertIndex], x: btnX, y: siblingY }));
+                }
             }
         });
         return btns;
@@ -304,12 +428,15 @@ 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),
@@ -323,6 +450,8 @@ 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/lib/designs/structures/index.d.ts

@@ -2,6 +2,7 @@ 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';
@@ -30,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/lib/designs/structures/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./chart-bar"), exports);
 __exportStar(require("./chart-column"), exports);
 __exportStar(require("./chart-line"), exports);
 __exportStar(require("./chart-pie"), exports);
+__exportStar(require("./chart-wordcloud"), exports);
 __exportStar(require("./compare-binary-horizontal"), exports);
 __exportStar(require("./compare-hierarchy-left-right"), exports);
 __exportStar(require("./compare-hierarchy-row"), exports);
@@ -50,6 +51,7 @@ __exportStar(require("./sequence-mountain"), exports);
 __exportStar(require("./sequence-pyramid"), exports);
 __exportStar(require("./sequence-roadmap-vertical"), exports);
 __exportStar(require("./sequence-snake-steps"), exports);
+__exportStar(require("./sequence-stairs-front"), exports);
 __exportStar(require("./sequence-steps"), exports);
 __exportStar(require("./sequence-timeline"), exports);
 __exportStar(require("./sequence-zigzag-pucks-3d"), exports);

package/lib/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/lib/designs/structures/sequence-stairs-front.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceStairsFront = void 0;
+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 utils_1 = require("../utils");
+const registry_1 = require("./registry");
+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 ? ((0, jsx_runtime_1.jsx)(TitleComponent, { title: title, desc: desc })) : null;
+    if (items.length === 0) {
+        const btnAddElement = (0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0], x: 0, y: 0 });
+        return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: btnAddElement }) })] }));
+    }
+    const colorPrimary = (0, utils_1.getColorPrimary)(options);
+    const btnBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0] }));
+    const itemBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.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((0, jsx_runtime_1.jsx)(jsx_1.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 = (0, utils_1.getPaletteColor)(options, indexes) || colorPrimary;
+        stepElements.push((0, jsx_runtime_1.jsx)(jsx_1.Rect, { x: stepX, y: stepY, width: stepWidth, height: stepHeight, fill: stepColor, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(jsx_1.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" }), (0, jsx_runtime_1.jsx)(jsx_1.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((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${connectorStartX} ${connectorEndY} L ${lineEndX} ${connectorEndY}`, stroke: stepColor, strokeWidth: 2, fill: "none", width: connectorWidth, height: 2, "data-element-type": "shape" }), (0, jsx_runtime_1.jsx)(jsx_1.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((0, jsx_runtime_1.jsx)(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, positionV: "middle" }));
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnRemove, { indexes: indexes, x: itemX + itemBounds.width + 10, y: itemY + itemBounds.height / 2 - btnBounds.height / 2 }));
+        if (index === 0) {
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0], x: itemX + (itemBounds.width - btnBounds.width) / 2, y: itemY - btnBounds.height - 12 }));
+        }
+        else {
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.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((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [items.length], x: itemX + (itemBounds.width - btnBounds.width) / 2, y: lastItemY + itemBounds.height + 12 }));
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, (0, jsx_runtime_1.jsxs)(jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)(jsx_1.Group, { children: spineElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: stepElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: connectorElements }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: itemElements }), (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: btnElements })] })] }));
+};
+exports.SequenceStairsFront = SequenceStairsFront;
+(0, registry_1.registerStructure)('sequence-stairs-front', {
+    component: exports.SequenceStairsFront,
+    composites: ['title', 'item'],
+});

package/lib/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/lib/editor/managers/state.js

@@ -108,7 +108,7 @@ class StateManager {
             "item-label" /* ElementTypeEnum.ItemLabel */ === role ||
             "item-desc" /* ElementTypeEnum.ItemDesc */ === role ||
             "item-value" /* ElementTypeEnum.ItemValue */ === role ||
-            "items-illus" /* ElementTypeEnum.ItemsIllus */ === role;
+            "item-illus" /* ElementTypeEnum.ItemIllus */ === role;
         const indexes = isItemElement ? (0, utils_2.getIndexesFromElement)(element) : undefined;
         if (isItemElement) {
             const datum = (0, utils_1.getDatumByIndexes)(data, indexes);

package/lib/index.d.ts

@@ -7,6 +7,7 @@ export { Defs, Ellipse, Fragment, Group, Path, Polygon, Rect, Text, cloneElement
 export { getFont, getFonts, getPalette, getPaletteColor, registerFont, registerPalette, registerPattern, setDefaultFont, } from './renderer';
 export { loadSVGResource, registerResourceLoader } from './resource';
 export { Infographic } from './runtime';
+export { parseSyntax } from './syntax';
 export { getTemplate, getTemplates, registerTemplate } from './templates';
 export { getTheme, getThemes, registerTheme } from './themes';
 export { parseSVG } from './utils';
@@ -14,6 +15,7 @@ export type { EditBarOptions } from './editor';
 export type { Bounds, ComponentType, DefsProps, EllipseProps, FragmentProps, GroupProps, JSXElement, JSXElementConstructor, JSXNode, PathProps, Point, PolygonProps, RectProps, RenderableNode, SVGAttributes, SVGProps, TextProps, WithChildren, } from './jsx';
 export type { InfographicOptions, ParsedInfographicOptions } from './options';
 export type { GradientConfig, IRenderer, LinearGradient, Palette, PatternConfig, PatternGenerator, PatternStyle, RadialGradient, RoughConfig, StylizeConfig, } from './renderer';
+export type { SyntaxError, SyntaxParseResult } from './syntax';
 export type { ParsedTemplateOptions, TemplateOptions } from './templates';
 export type { ThemeColors, ThemeConfig, ThemeSeed } from './themes';
 export type { Data, Font, FontWeightName, ImageResource, ItemDatum, TextHorizontalAlign, TextVerticalAlign, } from './types';

package/lib/index.js

@@ -17,7 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseSVG = exports.registerTheme = exports.getThemes = exports.getTheme = exports.registerTemplate = exports.getTemplates = exports.getTemplate = exports.Infographic = exports.registerResourceLoader = exports.loadSVGResource = exports.setDefaultFont = exports.registerPattern = exports.registerPalette = exports.registerFont = exports.getPaletteColor = exports.getPalette = exports.getFonts = exports.getFont = exports.renderSVG = exports.jsxs = exports.jsxDEV = exports.jsx = exports.getElementsBounds = exports.getElementBounds = exports.getCombinedBounds = exports.createLayout = exports.createFragment = exports.cloneElement = exports.Text = exports.Rect = exports.Polygon = exports.Path = exports.Group = exports.Fragment = exports.Ellipse = exports.Defs = exports.ResizeElement = exports.Plugin = exports.EditBar = exports.ZoomWheel = exports.SelectHighlight = exports.Interaction = exports.HotkeyHistory = exports.DragElement = exports.DblClickEditText = exports.ClickSelect = exports.BrushSelect = exports.getThemeColors = exports.getItemProps = exports.VERSION = void 0;
+exports.registerTheme = exports.getThemes = exports.getTheme = exports.registerTemplate = exports.getTemplates = exports.getTemplate = exports.parseSyntax = exports.Infographic = exports.registerResourceLoader = exports.loadSVGResource = exports.setDefaultFont = exports.registerPattern = exports.registerPalette = exports.registerFont = exports.getPaletteColor = exports.getPalette = exports.getFonts = exports.getFont = exports.renderSVG = exports.jsxs = exports.jsxDEV = exports.jsx = exports.getElementsBounds = exports.getElementBounds = exports.getCombinedBounds = exports.createLayout = exports.createFragment = exports.cloneElement = exports.Text = exports.Rect = exports.Polygon = exports.Path = exports.Group = exports.Fragment = exports.Ellipse = exports.Defs = exports.ResizeElement = exports.Plugin = exports.EditBar = exports.ZoomWheel = exports.SelectHighlight = exports.Interaction = exports.HotkeyHistory = exports.DragElement = exports.DblClickEditText = exports.ClickSelect = exports.BrushSelect = exports.getThemeColors = exports.getItemProps = exports.VERSION = void 0;
+exports.parseSVG = void 0;
 const package_json_1 = __importDefault(require("../package.json"));
 exports.VERSION = package_json_1.default.version;
 __exportStar(require("./designs"), exports);
@@ -70,6 +71,8 @@ Object.defineProperty(exports, "loadSVGResource", { enumerable: true, get: funct
 Object.defineProperty(exports, "registerResourceLoader", { enumerable: true, get: function () { return resource_1.registerResourceLoader; } });
 var runtime_1 = require("./runtime");
 Object.defineProperty(exports, "Infographic", { enumerable: true, get: function () { return runtime_1.Infographic; } });
+var syntax_1 = require("./syntax");
+Object.defineProperty(exports, "parseSyntax", { enumerable: true, get: function () { return syntax_1.parseSyntax; } });
 var templates_1 = require("./templates");
 Object.defineProperty(exports, "getTemplate", { enumerable: true, get: function () { return templates_1.getTemplate; } });
 Object.defineProperty(exports, "getTemplates", { enumerable: true, get: function () { return templates_1.getTemplates; } });

package/lib/options/parser.d.ts

@@ -1,2 +1,2 @@
 import type { InfographicOptions, ParsedInfographicOptions } from './types';
-export declare function parseOptions(options: InfographicOptions): ParsedInfographicOptions;
+export declare function parseOptions(options: Partial<InfographicOptions>): Partial<ParsedInfographicOptions>;