@antv/infographic 0.0.1-beta.1

package/esm/designs/structures/relation-circle.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+import { getElementBounds, Group } from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { registerStructure } from './registry';
+export const RelationCircle = (props) => {
+    const { Title, Item, data, radius = 150, startMode = 'top' } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
+    const btnBounds = getElementBounds(_jsx(BtnAdd, { indexes: [0] }));
+    const itemBounds = getElementBounds(_jsx(Item, { indexes: [0], data: data, datum: items[0], positionH: "center" }));
+    const btnElements = [];
+    const itemElements = [];
+    if (items.length === 0) {
+        btnElements.push(_jsx(BtnAdd, { indexes: [0], x: -btnBounds.width / 2, y: -btnBounds.height / 2 }));
+        return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { children: _jsx(BtnsGroup, { children: btnElements }) })] }));
+    }
+    // Calculate minimum radius to avoid item overlaps
+    const size = Math.max(itemBounds.width, itemBounds.height);
+    const minRadius = Math.max(radius, size);
+    const centerOffset = minRadius + size / 2;
+    const itemArcWeights = items.map(() => {
+        const w = itemBounds.width;
+        const h = itemBounds.height;
+        return (w + h) / 2;
+    });
+    const totalWeight = itemArcWeights.reduce((a, b) => a + b, 0);
+    let startAngle;
+    if (startMode === 'equal') {
+        startAngle = -Math.PI / 2;
+    }
+    else {
+        startAngle = -Math.PI / 2 + (2 * Math.PI) / items.length / 2;
+    }
+    // Step2: 角度累积分配
+    let angleAcc = startAngle;
+    items.forEach((item, index) => {
+        const anglePortion = (itemArcWeights[index] / totalWeight) * 2 * Math.PI;
+        const angle = angleAcc + anglePortion / 2;
+        angleAcc += anglePortion;
+        const itemX = centerOffset + minRadius * Math.cos(angle) - itemBounds.width / 2;
+        const itemY = centerOffset + minRadius * Math.sin(angle) - itemBounds.height / 2;
+        itemElements.push(_jsx(Item, { indexes: [index], datum: item, data: data, x: itemX, y: itemY }));
+        const removeRadius = minRadius - Math.max(itemBounds.width, itemBounds.height) / 2 - 20;
+        const removeBtnX = centerOffset + removeRadius * Math.cos(angle) - btnBounds.width / 2;
+        const removeBtnY = centerOffset + removeRadius * Math.sin(angle) - btnBounds.height / 2;
+        btnElements.push(_jsx(BtnRemove, { indexes: [index], x: removeBtnX, y: removeBtnY }));
+    });
+    // Use same radius as remove buttons for add buttons
+    const buttonRadius = minRadius - Math.max(itemBounds.width, itemBounds.height) / 2 - 20;
+    // Place add buttons between items (at the midpoint angles)
+    if (items.length > 0) {
+        for (let i = 0; i < items.length; i++) {
+            // Calculate angle between current item and next item
+            const currentAngle = (i * 2 * Math.PI) / items.length - Math.PI / 2;
+            const nextAngle = (((i + 1) % items.length) * 2 * Math.PI) / items.length - Math.PI / 2;
+            // Handle angle wrapping between last and first item
+            let midAngle;
+            if (i === items.length - 1) {
+                // Between last and first item
+                const angleDiff = nextAngle + 2 * Math.PI - currentAngle;
+                midAngle = currentAngle + angleDiff / 2;
+            }
+            else {
+                midAngle = (currentAngle + nextAngle) / 2;
+            }
+            const addX = centerOffset + buttonRadius * Math.cos(midAngle) - btnBounds.width / 2;
+            const addY = centerOffset + buttonRadius * Math.sin(midAngle) - btnBounds.height / 2;
+            btnElements.push(_jsx(BtnAdd, { indexes: [i + 1], x: addX, y: addY }));
+        }
+    }
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { children: [_jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
+};
+registerStructure('relation-circle', {
+    component: RelationCircle,
+    composites: ['title', 'item'],
+});

package/esm/designs/structures/relation-network.d.ts

@@ -0,0 +1,19 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType } from '@antv/infographic-jsx';
+import * as d3 from 'd3';
+import type { BaseStructureProps } from './types';
+export interface NetworkNode extends d3.SimulationNodeDatum {
+    id: number;
+    data: any;
+    isCenter: boolean;
+    _originalIndex: number[];
+}
+export interface NetworkLink extends d3.SimulationLinkDatum<NetworkNode> {
+    source: number | NetworkNode;
+    target: number | NetworkNode;
+}
+export interface RelationNetworkProps extends BaseStructureProps {
+    spacing?: number;
+    showConnections?: boolean;
+}
+export declare const RelationNetwork: ComponentType<RelationNetworkProps>;

package/esm/designs/structures/relation-network.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+import { getElementBounds, Group, Path } from '@antv/infographic-jsx';
+import * as d3 from 'd3';
+import { ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary } from '../utils';
+import { registerStructure } from './registry';
+export const RelationNetwork = (props) => {
+    const { Title, Item, data, spacing = 120, showConnections = true, options, } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
+    if (items.length === 0) {
+        return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { children: _jsx(ItemsGroup, {}) })] }));
+    }
+    const itemBounds = getElementBounds(_jsx(Item, { indexes: [0], data: data, datum: items[0], positionH: "center" }));
+    /** --- Force Layout --- */
+    function runForceLayout() {
+        const nodes = items.map((item, index) => ({
+            id: index,
+            data: item,
+            isCenter: index === 0,
+            _originalIndex: [index],
+        }));
+        const links = items.slice(1).map((_, index) => ({
+            source: 0,
+            target: index + 1,
+        }));
+        const simulation = d3
+            .forceSimulation(nodes)
+            .force('link', d3
+            .forceLink(links)
+            .id((d) => d.id)
+            .distance(spacing))
+            .force('charge', d3.forceManyBody().strength(-50))
+            .force('center', d3.forceCenter(0, 0))
+            .force('collision', d3
+            .forceCollide()
+            .radius(Math.max(itemBounds.width, itemBounds.height) / 2 + 10));
+        for (let i = 0; i < 300; ++i)
+            simulation.tick();
+        return { nodes, links };
+    }
+    const { nodes, links } = runForceLayout();
+    /** --- 偏移 --- */
+    const minX = Math.min(...nodes.map((d) => d.x ?? 0));
+    const minY = Math.min(...nodes.map((d) => d.y ?? 0));
+    const offsetX = Math.max(0, -minX + itemBounds.width / 2);
+    const offsetY = Math.max(0, -minY + itemBounds.height / 2);
+    const positionBy = (x, y) => ({
+        positionH: x < -50 ? 'flipped' : x > 50 ? 'normal' : 'center',
+        positionV: y < -50 ? 'flipped' : y > 50 ? 'normal' : 'center',
+    });
+    /** --- 节点 --- */
+    const nodesEls = nodes
+        .map((node) => {
+        if (node.x == null || node.y == null)
+            return null;
+        const x = node.x + offsetX - itemBounds.width / 2;
+        const y = node.y + offsetY - itemBounds.height / 2;
+        const { positionH, positionV } = positionBy(node.x, node.y);
+        return (_jsx(Item, { indexes: node._originalIndex, datum: node.data, data: data, x: x, y: y, positionH: positionH, positionV: positionV }, node.id));
+    })
+        .filter(Boolean);
+    /** --- 连线 --- */
+    const linksMap = new Map(nodes.map((n) => [n.id, n]));
+    const linksEls = showConnections
+        ? links
+            .map((link) => {
+            const src = typeof link.source === 'object'
+                ? link.source
+                : linksMap.get(link.source);
+            const tgt = typeof link.target === 'object'
+                ? link.target
+                : linksMap.get(link.target);
+            if (!src ||
+                !tgt ||
+                src.x == null ||
+                src.y == null ||
+                tgt.x == null ||
+                tgt.y == null)
+                return null;
+            const linePath = `M ${src.x + offsetX} ${src.y + offsetY} L ${tgt.x + offsetX} ${tgt.y + offsetY}`;
+            return (_jsx(Path, { d: linePath, stroke: getColorPrimary(options), strokeWidth: 2, strokeOpacity: 0.6 }));
+        })
+            .filter(Boolean)
+        : [];
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { children: [_jsx(Group, { children: linksEls }), _jsx(ItemsGroup, { children: nodesEls })] })] }));
+};
+registerStructure('relation-network', {
+    component: RelationNetwork,
+    composites: ['title', 'item'],
+});

package/esm/designs/structures/sequence-ascending-stairs-3d.d.ts

@@ -0,0 +1,7 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType } from '@antv/infographic-jsx';
+import type { BaseStructureProps } from './types';
+export interface SequenceAscendingStairs3dProps extends BaseStructureProps {
+    cubeWidth?: number;
+}
+export declare const SequenceAscendingStairs3d: ComponentType<SequenceAscendingStairs3dProps>;

package/esm/designs/structures/sequence-ascending-stairs-3d.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+import { Defs, getElementBounds, Group, Path } from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { Text3d } from '../decorations';
+import { FlexLayout } from '../layouts';
+import { getPaletteColor } from '../utils';
+import { registerStructure } from './registry';
+const CUBE_GAP_X = -118;
+const CUBE_GAP_Y = 118;
+const CUBE_WIDTH = 240;
+const CUBE_HEIGHT = 180;
+const ITEM_GAP = 40;
+const CUBE_PATH_BOTTOM = 'M238.9 69.7a6 6 0 0 1-.1 1v.2l-.2.3v.3l-.1.3a6.2 6.2 0 0 1-.3.6l-.1.3-.2.3-.2.4-.3.5-.1.1a10.9 10.9 0 0 1-.8 1v.1l-.5.5h-.1l-.4.4-.3.3-.3.2-.3.3-.4.2a13 13 0 0 1-.7.5l-.4.3-.5.3-97.5 56.7-.7.4h-.2l-.6.4h-.1l-.8.4h-.2l-.6.4h-.2l-.8.3h-.2l-.5.3-.5.1-.5.1-.5.2h-.5a33.7 33.7 0 0 1-3.2.7h-.2l-1 .2h-1.6l-.7.1h-4.7l-.8-.1h-.2a38.2 38.2 0 0 1-2-.4h-.4l-.7-.2h-.4l-.7-.2-.4-.1a27.3 27.3 0 0 1-2.2-.7h-.2a44.2 44.2 0 0 1-.9-.3l-.5-.3-.4-.1-.5-.2-.3-.2-.5-.2-.3-.2-.8-.4L6.5 78C2.2 75.6 0 72.4 0 69v41.7c0 3.2 2.1 6.5 6.4 9l98.1 56.6a23.2 23.2 0 0 0 1 .6l.6.3.3.1.5.2.4.2.3.1h.2l.2.2a21.4 21.4 0 0 0 1.9.6l.3.1h.2l.7.2a77.6 77.6 0 0 1 1.1.3h.3l.7.2h.4a42.5 42.5 0 0 0 1 .2l1 .2h1.1l.4.1h2.1l.7.1h1.5a22 22 0 0 0 1.8-.2h.4l1.1-.1h.2l1.2-.2h.1l.3-.1.6-.1a12.5 12.5 0 0 0 1-.3h.5l.5-.2a29 29 0 0 0 1-.3h.2l.3-.2h.2a27 27 0 0 0 1.6-.7h.2l.8-.4a19.4 19.4 0 0 0 1.6-.9l97.5-56.7.3-.1.2-.2.4-.2.4-.3.3-.2.3-.3.4-.2.3-.3.3-.3h.1l.3-.3.5-.6h.1l.3-.5h.1v-.1l.4-.4v-.1l.4-.5v-.1l.1-.2.1-.2.2-.3.1-.3.1-.3.1-.1a6.9 6.9 0 0 0 .2-.8l.1-.3v-.4l.1-.3v-1l.2-41.4v.4Z';
+const CUBE_PATH_TOP = 'M232.5 60.4c8.5 4.9 8.5 12.8.1 17.7l-97.5 56.7c-8.4 4.9-22 4.9-30.5 0L6.5 78C-2 73-2 65.3 6.4 60.4l97.5-56.7c8.4-5 22-5 30.5 0l98.1 56.7Z';
+const CUBE_PATH_STROKE = 'M119.1 0A31 31 0 0 0 104 3.7L6.4 60.4C-2 65.3-2 73.2 6.4 78l98.2 56.7c4.2 2.4 9.8 3.7 15.3 3.7a31 31 0 0 0 15.2-3.7L232.6 78c8.4-5 8.4-12.8 0-17.7L134.3 3.7A31.2 31.2 0 0 0 119.1 0Zm0 2.5c5.4 0 10.3 1.2 14 3.3l98.2 56.7c3.3 2 5.1 4.3 5.1 6.8 0 2.4-1.8 4.7-5 6.6l-97.5 56.7a28.3 28.3 0 0 1-14 3.4c-5.3 0-10.3-1.2-14-3.4L7.7 76c-3.3-1.9-5-4.3-5-6.7 0-2.4 1.7-4.8 5-6.7L105 5.8a29 29 0 0 1 14-3.3Z';
+const DropShadowFilter = (_jsxs("filter", { id: "sequence-ascending-stairs-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: "0", dy: "4" }), _jsx("feGaussianBlur", { stdDeviation: "6" }), _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.25 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow", result: "shape" })] }));
+export const SequenceAscendingStairs3d = (props) => {
+    const { Title, Item, data, options, cubeWidth = CUBE_WIDTH } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? _jsx(Title, { 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: [_jsx(Defs, { children: DropShadowFilter }), titleContent, _jsx(Group, { children: _jsx(BtnsGroup, { children: btnAddElement }) })] }));
+    }
+    const btnBounds = getElementBounds(_jsx(BtnAdd, { indexes: [0] }));
+    const btnElements = [];
+    const itemElements = [];
+    const cubeElements = [];
+    const cubeScale = cubeWidth / CUBE_WIDTH;
+    const scaledCubeHeight = CUBE_HEIGHT * cubeScale;
+    items.forEach((item, index) => {
+        const indexes = [index];
+        const currentColor = getPaletteColor(options, indexes);
+        const cubeX = index * (cubeWidth + CUBE_GAP_X);
+        const cubeY = (items.length - 1 - index) * CUBE_GAP_Y;
+        const gradientIdBottom = `cube-gradient-bottom-${index}`;
+        const gradientIdTop = `cube-gradient-top-${index}`;
+        const gradientIdStroke = `cube-gradient-stroke-${index}`;
+        cubeElements.push(_jsxs(Group, { x: cubeX, y: cubeY, id: `cube-${index}`, width: cubeWidth, height: scaledCubeHeight, filter: "url(#sequence-ascending-stairs-3d-shadow-filter)", children: [_jsxs(Defs, { children: [_jsxs("linearGradient", { id: gradientIdBottom, x1: "0", y1: "124.5", x2: "238.9", y2: "124.5", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: currentColor, stopOpacity: "0.8" }), _jsx("stop", { offset: "1", stopColor: currentColor, stopOpacity: "0.4" })] }), _jsxs("linearGradient", { id: gradientIdTop, x1: "119.5", y1: "0", x2: "119.5", y2: "138.5", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: currentColor, stopOpacity: "0.9" }), _jsx("stop", { offset: "1", stopColor: currentColor, stopOpacity: "0.5" })] }), _jsxs("linearGradient", { id: gradientIdStroke, x1: "119.5", y1: "0", x2: "119.5", y2: "138.5", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: currentColor }), _jsx("stop", { offset: "1", stopColor: currentColor, stopOpacity: "0.7" })] })] }), _jsxs(Group, { transform: `scale(${cubeScale})`, children: [_jsx(Path, { d: CUBE_PATH_BOTTOM, fill: `url(#${gradientIdBottom})` }), _jsx(Path, { d: CUBE_PATH_TOP, fill: `url(#${gradientIdTop})` }), _jsx(Path, { d: CUBE_PATH_STROKE, fill: `url(#${gradientIdStroke})` }), _jsx(Text3d, { text: index + 1, x: 115, y: 65, fontSize: 56 })] })] }));
+        const itemX = cubeX + cubeWidth + ITEM_GAP;
+        const itemY = cubeY + scaledCubeHeight / 2;
+        itemElements.push(_jsx(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, positionH: "normal" }));
+        btnElements.push(_jsx(BtnRemove, { indexes: indexes, x: cubeX + cubeWidth - btnBounds.width / 2, y: cubeY - btnBounds.height / 2 }));
+        if (index === 0) {
+            btnElements.push(_jsx(BtnAdd, { indexes: [0], x: cubeX - 30 - btnBounds.width / 2, y: cubeY + scaledCubeHeight / 2 - btnBounds.height / 2 }));
+        }
+        if (index < items.length - 1) {
+            const nextCubeY = (items.length - 1 - (index + 1)) * CUBE_GAP_Y;
+            const btnAddX = cubeX + cubeWidth - btnBounds.width / 2;
+            const btnAddY = (cubeY + scaledCubeHeight / 2 + nextCubeY + scaledCubeHeight / 2) / 2 -
+                btnBounds.height / 2;
+            btnElements.push(_jsx(BtnAdd, { indexes: [index + 1], x: btnAddX, y: btnAddY }));
+        }
+        else {
+            btnElements.push(_jsx(BtnAdd, { indexes: [items.length], x: cubeX + cubeWidth + 30 - btnBounds.width / 2, y: cubeY + scaledCubeHeight / 2 - btnBounds.height / 2 }));
+        }
+    });
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 30, children: [_jsx(Defs, { children: DropShadowFilter }), titleContent, _jsxs(Group, { x: 0, y: 0, children: [_jsx(Group, { children: cubeElements }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
+};
+registerStructure('sequence-ascending-stairs-3d', {
+    component: SequenceAscendingStairs3d,
+    composites: ['title', 'item'],
+});

package/esm/designs/structures/sequence-ascending-steps.d.ts

@@ -0,0 +1,8 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType } from '@antv/infographic-jsx';
+import type { BaseStructureProps } from './types';
+export interface SequenceAscendingStepsProps extends BaseStructureProps {
+    hGap?: number;
+    vGap?: number;
+}
+export declare const SequenceAscendingSteps: ComponentType<SequenceAscendingStepsProps>;

package/esm/designs/structures/sequence-ascending-steps.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+import { getElementBounds, Group } from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { registerStructure } from './registry';
+export const SequenceAscendingSteps = (props) => {
+    const { Title, Item, data, hGap = 0, vGap = 0 } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
+    const itemBounds = getElementBounds(_jsx(Item, { indexes: [0], data: data, datum: items[0] }));
+    const itemElements = [];
+    const btnElements = [];
+    const n = items.length;
+    const stepX = itemBounds.width + hGap;
+    const stepY = itemBounds.height / 2 + vGap;
+    const startX = itemBounds.width / 2;
+    const endY = 0;
+    const startY = endY + (n - 1) * stepY;
+    items.forEach((datum, index) => {
+        const x = startX + index * stepX;
+        const y = startY - index * stepY;
+        const indexes = [index];
+        itemElements.push(_jsx(Item, { indexes: indexes, datum: datum, data: data, x: x, y: y }));
+        btnElements.push(_jsx(BtnRemove, { indexes: indexes, x: x + itemBounds.width - 30, y: y + itemBounds.height / 2 + 10 }));
+        btnElements.push(_jsx(BtnAdd, { indexes: indexes, x: x + itemBounds.width + hGap / 2, y: y - 30 }));
+    });
+    return (_jsxs(FlexLayout, { flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { children: [_jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
+};
+registerStructure('sequence-ascending-steps', {
+    component: SequenceAscendingSteps,
+    composites: ['title', 'item'],
+});

package/esm/designs/structures/sequence-circle-arrows.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType } from '@antv/infographic-jsx';
+import type { BaseStructureProps } from './types';
+export interface SequenceCircleArrowsProps extends BaseStructureProps {
+    radius?: number;
+    arrowSize?: number;
+    strokeWidth?: number;
+}
+export declare const SequenceCircleArrows: ComponentType<SequenceCircleArrowsProps>;

package/esm/designs/structures/sequence-circle-arrows.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+import { Defs, Ellipse, getElementBounds, Group, Path, } from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemIcon, ItemsGroup, } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getPaletteColor, getThemeColors } from '../utils';
+import { registerStructure } from './registry';
+import * as d3 from 'd3';
+const ITEM_DISTANCE = 20;
+const LINE_GAP = 5;
+export const SequenceCircleArrows = (props) => {
+    const { Title, Item, data, options, radius = 150, arrowSize = 4, strokeWidth = 10, } = props;
+    const { title, desc, items = [] } = data;
+    const btnBounds = getElementBounds(_jsx(BtnAdd, { indexes: [0] }));
+    const colorPrimary = getColorPrimary(options);
+    if (!Item) {
+        const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
+        return (_jsxs(FlexLayout, { flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { children: _jsx(BtnsGroup, { children: _jsx(BtnAdd, { indexes: [0], x: 0, y: 0 }) }) })] }));
+    }
+    const count = items.length;
+    if (count === 0) {
+        const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
+        return (_jsxs(FlexLayout, { flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { children: _jsx(BtnsGroup, { children: _jsx(BtnAdd, { indexes: [0], x: 0, y: 0 }) }) })] }));
+    }
+    const itemBounds = getElementBounds(_jsx(Item, { indexes: [0], data: data, datum: items[0] }));
+    const centerX = 0;
+    const centerY = 0;
+    const angleStep = (2 * Math.PI) / count;
+    const positions = [];
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    // 计算圆上的点位置，从顶部（-90度）开始顺时针排列
+    for (let i = 0; i < count; i++) {
+        const angle = i * angleStep - Math.PI / 2;
+        const x = centerX + radius * Math.cos(angle);
+        const y = centerY + radius * Math.sin(angle);
+        positions.push({ x, y });
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+    }
+    // 预计算所有连线和 Item 的位置信息
+    const lineData = [];
+    for (let i = 0; i < count; i++) {
+        const startPos = positions[i];
+        const endPos = positions[(i + 1) % count];
+        const lineLength = Math.sqrt(Math.pow(endPos.x - startPos.x, 2) + Math.pow(endPos.y - startPos.y, 2));
+        const circleBigW = Math.min(lineLength * 0.5, 100);
+        const midX = (startPos.x + endPos.x) / 2;
+        const midY = (startPos.y + endPos.y) / 2;
+        minX = Math.min(minX, midX - circleBigW / 2);
+        minY = Math.min(minY, midY - circleBigW / 2);
+        maxX = Math.max(maxX, midX + circleBigW / 2);
+        maxY = Math.max(maxY, midY + circleBigW / 2);
+        // 计算连线中点相对于圆心的角度
+        const midAngle = Math.atan2(midY - centerY, midX - centerX);
+        // 将角度标准化到 [0, 2*PI)
+        const normalizedAngle = midAngle < 0 ? midAngle + 2 * Math.PI : midAngle;
+        let itemX;
+        let itemY;
+        // 根据连线中点在圆上的位置，决定 Item 的摆放方向
+        // 将圆分为8个区域，每个区域45度
+        const deg = (normalizedAngle * 180) / Math.PI;
+        // 计算从中点到 Item 的距离（圆心到圆边的距离 + 间距）
+        const distanceFromCenter = circleBigW / 2 + ITEM_DISTANCE;
+        // 使用极坐标方式计算 Item 位置，确保所有方向的距离一致
+        const itemCenterX = midX + Math.cos(midAngle) * distanceFromCenter;
+        const itemCenterY = midY + Math.sin(midAngle) * distanceFromCenter;
+        // 根据角度微调 Item 的对齐方式
+        if (deg >= 337.5 || deg < 22.5) {
+            // 右侧 (0度附近)，Item 左对齐
+            itemX = itemCenterX;
+            itemY = itemCenterY - itemBounds.height / 2;
+        }
+        else if (deg >= 22.5 && deg < 67.5) {
+            // 右下角，Item 左上对齐
+            itemX = itemCenterX;
+            itemY = itemCenterY;
+        }
+        else if (deg >= 67.5 && deg < 112.5) {
+            // 下方 (90度附近)，Item 顶部居中对齐
+            itemX = itemCenterX - itemBounds.width / 2;
+            itemY = itemCenterY;
+        }
+        else if (deg >= 112.5 && deg < 157.5) {
+            // 左下角，Item 右上对齐
+            itemX = itemCenterX - itemBounds.width;
+            itemY = itemCenterY;
+        }
+        else if (deg >= 157.5 && deg < 202.5) {
+            // 左侧 (180度附近)，Item 右对齐
+            itemX = itemCenterX - itemBounds.width;
+            itemY = itemCenterY - itemBounds.height / 2;
+        }
+        else if (deg >= 202.5 && deg < 247.5) {
+            // 左上角，Item 右下对齐
+            itemX = itemCenterX - itemBounds.width;
+            itemY = itemCenterY - itemBounds.height;
+        }
+        else if (deg >= 247.5 && deg < 292.5) {
+            // 上方 (270度附近)，Item 底部居中对齐
+            itemX = itemCenterX - itemBounds.width / 2;
+            itemY = itemCenterY - itemBounds.height;
+        }
+        else {
+            // 右上角 (deg >= 292.5 && deg < 337.5)，Item 左下对齐
+            itemX = itemCenterX;
+            itemY = itemCenterY - itemBounds.height;
+        }
+        lineData.push({ lineLength, circleBigW, midX, midY, itemX, itemY });
+        minX = Math.min(minX, itemX);
+        minY = Math.min(minY, itemY);
+        maxX = Math.max(maxX, itemX + itemBounds.width + btnBounds.width + 5);
+        maxY = Math.max(maxY, itemY + itemBounds.height);
+    }
+    const offsetX = Math.max(0, -minX);
+    const offsetY = Math.max(0, -minY);
+    const titleContent = Title ? _jsx(Title, { title: title, desc: desc }) : null;
+    const btnElements = [];
+    const itemElements = [];
+    const decorElements = [];
+    const defsElements = [];
+    const itemPositions = positions.map((pos) => ({
+        x: pos.x + offsetX,
+        y: pos.y + offsetY,
+    }));
+    for (let i = 0; i < count; i++) {
+        const startPos = itemPositions[i];
+        const endPos = itemPositions[(i + 1) % count];
+        const nextIndex = (i + 1) % count;
+        const indexes = [i];
+        // 使用预计算的数据
+        const { lineLength, circleBigW, midX, midY } = lineData[i];
+        const CIRCLE_SMALL_W = Math.max(circleBigW - 20, 20);
+        const ICON_SIZE = Math.max(CIRCLE_SMALL_W * 0.4, 16);
+        const color = getPaletteColor(options, indexes) || colorPrimary;
+        const dx = endPos.x - startPos.x;
+        const dy = endPos.y - startPos.y;
+        const length = lineLength;
+        const unitX = dx / length;
+        const unitY = dy / length;
+        const minLineLength = LINE_GAP * 2 + arrowSize;
+        const actualGap = Math.min(LINE_GAP, (length - minLineLength) / 2);
+        const adjustedStartX = Math.max(0, startPos.x + unitX * actualGap);
+        const adjustedStartY = Math.max(0, startPos.y + unitY * actualGap);
+        const adjustedEndX = Math.max(0, endPos.x - unitX * actualGap);
+        const adjustedEndY = Math.max(0, endPos.y - unitY * actualGap);
+        const line = d3
+            .line()
+            .x((d) => Math.max(0, d.x))
+            .y((d) => Math.max(0, d.y))
+            .curve(d3.curveLinear);
+        const pathD = line([
+            { x: adjustedStartX, y: adjustedStartY },
+            { x: adjustedEndX, y: adjustedEndY },
+        ]) || '';
+        const colorClean = color.replace(/[^a-zA-Z0-9]/g, '');
+        const arrowId = `fork-arrow-${colorClean}-${i}`;
+        const forkArrowPath = `
+      M ${-arrowSize * 0.6} ${-arrowSize * 0.4}
+      L 0 0
+      L ${-arrowSize * 0.6} ${arrowSize * 0.4}
+    `;
+        defsElements.push(_jsx("marker", { id: arrowId, viewBox: `${-arrowSize} ${-arrowSize * 0.6} ${arrowSize * 1.2} ${arrowSize * 1.2}`, refX: -arrowSize * 0.08, refY: 0, markerWidth: arrowSize, markerHeight: arrowSize, orient: "auto", markerUnits: "strokeWidth", children: _jsx("path", { d: forkArrowPath, fill: "none", stroke: color, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+        decorElements.push(_jsx(Path, { d: pathD, stroke: color, strokeWidth: strokeWidth, fill: "none", markerEnd: `url(#${arrowId})`, strokeLinecap: "round" }));
+        // 使用预计算的 midX 和 midY（需要加上 offset）
+        const adjustedMidX = midX + offsetX;
+        const adjustedMidY = midY + offsetY;
+        const themeColors = getThemeColors({
+            colorPrimary: color || colorPrimary,
+        }, options);
+        decorElements.push(_jsx(Ellipse, { x: Math.max(0, adjustedMidX - circleBigW / 2), y: Math.max(0, adjustedMidY - circleBigW / 2), width: circleBigW, height: circleBigW, fill: themeColors.colorPrimaryBg }));
+        decorElements.push(_jsx(Ellipse, { x: Math.max(0, adjustedMidX - CIRCLE_SMALL_W / 2), y: Math.max(0, adjustedMidY - CIRCLE_SMALL_W / 2), width: CIRCLE_SMALL_W, height: CIRCLE_SMALL_W, fill: "#ffffff" }));
+        decorElements.push(_jsx(ItemIcon, { x: Math.max(0, adjustedMidX - ICON_SIZE / 2), y: Math.max(0, adjustedMidY - ICON_SIZE / 2), size: ICON_SIZE, indexes: indexes, fill: color }));
+        const btnAddX = Math.max(0, adjustedMidX - btnBounds.width / 2);
+        const btnAddY = Math.max(0, adjustedMidY - btnBounds.height / 2);
+        btnElements.push(_jsx(BtnAdd, { indexes: [nextIndex], x: btnAddX, y: btnAddY }));
+    }
+    for (let i = 0; i < count; i++) {
+        const indexes = [i];
+        const item = items[i];
+        // 使用预计算的 Item 位置（需要加上 offset）
+        const { itemX: preItemX, itemY: preItemY } = lineData[i];
+        const itemX = Math.max(0, preItemX + offsetX);
+        const itemY = Math.max(0, preItemY + offsetY);
+        itemElements.push(_jsx(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY }));
+        const btnRemoveX = Math.max(0, itemX + itemBounds.width + 5);
+        const btnRemoveY = Math.max(0, itemY + itemBounds.height / 2 - btnBounds.height / 2);
+        btnElements.push(_jsx(BtnRemove, { indexes: indexes, x: btnRemoveX, y: btnRemoveY }));
+    }
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 30, children: [titleContent, _jsxs(Group, { x: 0, y: 0, children: [_jsx(Defs, { children: defsElements }), _jsx(Group, { children: decorElements }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
+};
+registerStructure('sequence-circle-arrows', {
+    component: SequenceCircleArrows,
+    composites: ['title', 'item'],
+});

package/esm/designs/structures/sequence-circular.d.ts

@@ -0,0 +1,13 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType } from '@antv/infographic-jsx';
+import type { BaseStructureProps } from './types';
+export interface SequenceCircularProps extends BaseStructureProps {
+    outerRadius?: number;
+    innerRadius?: number;
+    itemDistance?: number;
+    gapAngle?: number;
+    iconRadius?: number;
+    iconBgRadius?: number;
+    iconSize?: number;
+}
+export declare const SequenceCircular: ComponentType<SequenceCircularProps>;