@antv/infographic 0.1.3 → 0.1.4

package/esm/constants/element.d.ts

@@ -11,7 +11,7 @@ export declare const enum ElementTypeEnum {
     ItemLabel = "item-label",
     ItemDesc = "item-desc",
     ItemValue = "item-value",
-    ItemsIllus = "items-illus",
+    ItemIllus = "item-illus",
     BtnAdd = "btn-add",
     BtnRemove = "btn-remove",
     IllusGroup = "illus-group",

package/esm/constants/index.d.ts

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

package/esm/constants/index.js

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

package/esm/constants/service.d.ts

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

package/esm/constants/service.js

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

package/esm/designs/components/Illus.js

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

package/esm/designs/structures/chart-wordcloud.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentType } from '../../jsx';
+import type { BaseStructureProps } from './types';
+export interface ChartWordCloudProps extends BaseStructureProps {
+    minFontSize?: number;
+    maxFontSize?: number;
+    enableRotate?: boolean;
+    padding?: number;
+    spiralStep?: number;
+    radiusStep?: number;
+}
+export declare const ChartWordCloud: ComponentType<ChartWordCloudProps>;

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

@@ -0,0 +1,156 @@
+import { jsx as _jsx } from "@antv/infographic/jsx-runtime";
+import { getElementBounds, Group, Text } from '../../jsx';
+import { ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getPaletteColor } from '../utils';
+import { registerStructure } from './registry';
+const DEFAULT_ROTATE_ANGLES = [0, 30, -30, 60, -60];
+const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
+function getRotatedSize(width, height, angle) {
+    const rad = (Math.PI / 180) * angle;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    return {
+        width: Math.abs(width * cos) + Math.abs(height * sin),
+        height: Math.abs(width * sin) + Math.abs(height * cos),
+    };
+}
+function hasCollision(x, y, width, height, placed, padding) {
+    const left = x - padding;
+    const right = x + width + padding;
+    const top = y - padding;
+    const bottom = y + height + padding;
+    return placed.some((word) => {
+        const wLeft = word.box.x - padding;
+        const wRight = word.box.x + word.box.width + padding;
+        const wTop = word.box.y - padding;
+        const wBottom = word.box.y + word.box.height + padding;
+        return !(right <= wLeft ||
+            left >= wRight ||
+            bottom <= wTop ||
+            top >= wBottom);
+    });
+}
+function placeWords(words, enableRotate, padding, spiralStep, radiusStep) {
+    const placed = [];
+    const rotationAngles = enableRotate ? DEFAULT_ROTATE_ANGLES : [0];
+    const maxAttempts = Math.max(1600, words.length * 28);
+    words.forEach((word, wordIndex) => {
+        const sizeBias = Math.max(word.width, word.height);
+        const angleOffset = wordIndex * GOLDEN_ANGLE;
+        let extraRadius = 0;
+        let placedWord = null;
+        for (let attempt = 0; attempt < maxAttempts && !placedWord; attempt++) {
+            if (attempt === Math.floor(maxAttempts * 0.6)) {
+                // Gradually expand the search radius for dense layouts
+                extraRadius = sizeBias;
+            }
+            const theta = angleOffset + attempt * spiralStep;
+            const radius = radiusStep * Math.sqrt(attempt + 1) + extraRadius + sizeBias * 0.25;
+            const centerX = radius * Math.cos(theta);
+            const centerY = radius * Math.sin(theta);
+            for (const angle of rotationAngles) {
+                const rotated = getRotatedSize(word.width, word.height, angle);
+                const x = centerX - rotated.width / 2;
+                const y = centerY - rotated.height / 2;
+                if (!hasCollision(x, y, rotated.width, rotated.height, placed, padding)) {
+                    placedWord = {
+                        ...word,
+                        angle,
+                        centerX,
+                        centerY,
+                        box: { x, y, width: rotated.width, height: rotated.height },
+                    };
+                    break;
+                }
+            }
+        }
+        if (!placedWord) {
+            const fallbackAngle = rotationAngles[wordIndex % rotationAngles.length];
+            const farRadius = radiusStep * Math.sqrt(maxAttempts + 1) + sizeBias;
+            const theta = angleOffset;
+            const centerX = farRadius * Math.cos(theta);
+            const centerY = farRadius * Math.sin(theta);
+            const rotated = getRotatedSize(word.width, word.height, fallbackAngle);
+            placedWord = {
+                ...word,
+                angle: fallbackAngle,
+                centerX,
+                centerY,
+                box: {
+                    x: centerX - rotated.width / 2,
+                    y: centerY - rotated.height / 2,
+                    width: rotated.width,
+                    height: rotated.height,
+                },
+            };
+        }
+        placed.push(placedWord);
+    });
+    return placed;
+}
+export const ChartWordCloud = (props) => {
+    const { data, options, minFontSize = 16, maxFontSize = 48, enableRotate = true, padding = 6, spiralStep = 0.45, radiusStep = 10, } = props;
+    const { items = [] } = data;
+    const validItems = items
+        .map((datum, index) => ({ datum, index }))
+        .filter(({ datum }) => datum.label);
+    if (validItems.length === 0) {
+        return (_jsx(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: _jsx(Group, { children: _jsx(ItemsGroup, {}) }) }));
+    }
+    const values = validItems
+        .map(({ datum }) => datum.value)
+        .filter((v) => typeof v === 'number');
+    const hasValues = values.length > 0;
+    const minValue = hasValues ? Math.min(...values) : 0;
+    const maxValue = hasValues ? Math.max(...values) : 0;
+    const sameValue = hasValues && minValue === maxValue;
+    const uniformSize = (minFontSize + maxFontSize) / 2;
+    const mapFontSize = (value) => {
+        if (!hasValues || sameValue)
+            return uniformSize;
+        if (value == null)
+            return minFontSize;
+        const ratio = (value - minValue) / (maxValue - minValue || 1);
+        return minFontSize + ratio * (maxFontSize - minFontSize);
+    };
+    const words = validItems
+        .map(({ datum, index }) => {
+        const fontSize = mapFontSize(datum.value);
+        const measured = getElementBounds(_jsx(Text, { fontSize: fontSize, fontWeight: "bold", children: datum.label }));
+        const color = getPaletteColor(options, [index]) ||
+            getColorPrimary(options) ||
+            '#333333';
+        return {
+            label: datum.label,
+            value: datum.value,
+            color,
+            fontSize,
+            width: measured.width * 1.05,
+            height: measured.height,
+        };
+    })
+        .sort((a, b) => b.fontSize - a.fontSize);
+    const placedWords = placeWords(words, enableRotate, padding, spiralStep, radiusStep);
+    const minX = Math.min(...placedWords.map((w) => w.box.x));
+    const minY = Math.min(...placedWords.map((w) => w.box.y));
+    const maxX = Math.max(...placedWords.map((w) => w.box.x + w.box.width));
+    const maxY = Math.max(...placedWords.map((w) => w.box.y + w.box.height));
+    const offsetX = -minX + padding;
+    const offsetY = -minY + padding;
+    const containerWidth = maxX - minX + padding * 2;
+    const containerHeight = maxY - minY + padding * 2;
+    const wordElements = placedWords.map((word, index) => {
+        const translateX = word.centerX - word.width / 2 + offsetX;
+        const translateY = word.centerY - word.height / 2 + offsetY;
+        const rotationOriginX = word.width / 2;
+        const rotationOriginY = word.height / 2;
+        const transform = `translate(${translateX}, ${translateY}) rotate(${word.angle}, ${rotationOriginX}, ${rotationOriginY})`;
+        return (_jsx(Group, { transform: transform, children: _jsx(Text, { width: word.width, height: word.height, fontSize: word.fontSize, fontWeight: "bold", alignHorizontal: "center", alignVertical: "middle", fill: word.color, "data-indexes": index, "data-element-type": "item-label" /* ElementTypeEnum.ItemLabel */, children: word.label }) }));
+    });
+    return (_jsx(ItemsGroup, { id: "infographic-container", width: containerWidth, height: containerHeight, children: wordElements }));
+};
+registerStructure('chart-wordcloud', {
+    component: ChartWordCloud,
+    composites: ['item'],
+});

package/esm/designs/structures/hierarchy-tree.d.ts

@@ -6,6 +6,8 @@ export interface HierarchyTreeProps extends BaseStructureProps {
     levelGap?: number;
     /** 节点间距：同级节点之间的水平距离，默认 60 */
     nodeGap?: number;
+    /** 布局方向：'top-bottom' 自上而下 | 'bottom-top' 自下而上 | 'left-right' 自左向右 | 'right-left' 自右向左，默认 'top-bottom' */
+    orientation?: 'top-bottom' | 'bottom-top' | 'left-right' | 'right-left';
     /** 连接线类型：'straight' 直线 | 'curved' 曲线，默认 'curved' */
     edgeType?: 'straight' | 'curved';
     /** 连接线颜色模式：'solid' 单色 | 'gradient' 渐变色，默认 'gradient' */

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

@@ -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/esm/designs/structures/index.js

@@ -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/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>;