@antv/infographic 0.0.1-beta.1

package/lib/designs/structures/sequence-snake-steps.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceSnakeSteps = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const decorations_1 = require("../decorations");
+const layouts_1 = require("../layouts");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const SequenceSnakeSteps = (props) => {
+    const { Title, Item, data, gap = 40, itemsPerRow = 3, rowGap = 80, options, } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
+    const colorPrimary = (0, utils_1.getColorPrimary)(options);
+    const btnBounds = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0] }));
+    const itemBounds = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Item, { indexes: [0], data: data, datum: items[0], positionH: "center" }));
+    const btnElements = [];
+    const itemElements = [];
+    const decorElements = [];
+    const arrowWidth = 25;
+    const arrowHeight = 25;
+    items.forEach((item, index) => {
+        const rowIndex = Math.floor(index / itemsPerRow);
+        const colIndex = index % itemsPerRow;
+        const isReversedRow = rowIndex % 2 === 1;
+        const actualColIndex = isReversedRow
+            ? itemsPerRow - 1 - colIndex
+            : colIndex;
+        const itemX = actualColIndex * (itemBounds.width + gap);
+        const itemY = rowIndex * (itemBounds.height + rowGap);
+        const indexes = [index];
+        itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, positionH: "center" }));
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnRemove, { indexes: indexes, x: itemX + (itemBounds.width - btnBounds.width) / 2, y: itemY + itemBounds.height + 10 }));
+        if (index === 0) {
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: indexes, x: itemX + (itemBounds.width - btnBounds.width) / 2, y: itemY - btnBounds.height - 10 }));
+        }
+        if (index < items.length - 1) {
+            const nextRowIndex = Math.floor((index + 1) / itemsPerRow);
+            const nextColIndex = (index + 1) % itemsPerRow;
+            const isNextReversedRow = nextRowIndex % 2 === 1;
+            const nextActualColIndex = isNextReversedRow
+                ? itemsPerRow - 1 - nextColIndex
+                : nextColIndex;
+            const nextItemX = nextActualColIndex * (itemBounds.width + gap);
+            const isSameRow = rowIndex === nextRowIndex;
+            if (isSameRow) {
+                const isRightToLeft = isReversedRow;
+                const arrowX = isRightToLeft
+                    ? nextItemX + itemBounds.width + (gap - arrowWidth) / 2
+                    : itemX + itemBounds.width + (gap - arrowWidth) / 2;
+                const arrowY = itemY + itemBounds.height / 2 - arrowHeight / 2;
+                decorElements.push((0, jsx_runtime_1.jsx)(decorations_1.SimpleArrow, { x: arrowX, y: arrowY, width: arrowWidth, height: arrowHeight, colorPrimary: colorPrimary, rotation: isRightToLeft ? 180 : 0 }));
+                btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [index + 1], x: arrowX + (arrowWidth - btnBounds.width) / 2, y: itemY - btnBounds.height - 10 }));
+            }
+            else {
+                const turnArrowX = itemX + itemBounds.width / 2 - arrowWidth / 2;
+                const turnArrowY = itemY + itemBounds.height + (rowGap - arrowHeight) / 2;
+                decorElements.push((0, jsx_runtime_1.jsx)(decorations_1.SimpleArrow, { x: turnArrowX, y: turnArrowY, width: arrowWidth, height: arrowHeight, colorPrimary: colorPrimary, rotation: 90 }));
+                btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [index + 1], x: turnArrowX + (arrowWidth - btnBounds.width) / 2, y: turnArrowY + (arrowHeight - btnBounds.height) / 2 }));
+            }
+        }
+    });
+    if (items.length > 0) {
+        const lastIndex = items.length - 1;
+        const lastRowIndex = Math.floor(lastIndex / itemsPerRow);
+        const lastColIndex = lastIndex % itemsPerRow;
+        const isLastReversedRow = lastRowIndex % 2 === 1;
+        const lastActualColIndex = isLastReversedRow
+            ? itemsPerRow - 1 - lastColIndex
+            : lastColIndex;
+        const lastItemX = lastActualColIndex * (itemBounds.width + gap);
+        const lastItemY = lastRowIndex * (itemBounds.height + rowGap);
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [items.length], x: lastItemX + (itemBounds.width - btnBounds.width) / 2, y: lastItemY + itemBounds.height + btnBounds.height + 20 }));
+    }
+    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)(infographic_jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Group, { children: decorElements }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: itemElements }), (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: btnElements })] })] }));
+};
+exports.SequenceSnakeSteps = SequenceSnakeSteps;
+(0, registry_1.registerStructure)('sequence-snake-steps', {
+    component: exports.SequenceSnakeSteps,
+    composites: ['title', 'item'],
+});

package/lib/designs/structures/sequence-steps.d.ts

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

package/lib/designs/structures/sequence-steps.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceSteps = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const decorations_1 = require("../decorations");
+const layouts_1 = require("../layouts");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const SequenceSteps = (props) => {
+    const { Title, Item, data, gap = 40, options } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
+    const colorPrimary = (0, utils_1.getColorPrimary)(options);
+    const btnBounds = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0] }));
+    const itemBounds = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Item, { indexes: [0], data: data, datum: items[0], positionH: "center" }));
+    const btnElements = [];
+    const itemElements = [];
+    const decorElements = [];
+    const arrowWidth = 25;
+    const arrowHeight = 25;
+    const topMargin = Math.max(btnBounds.height + 20, 30);
+    items.forEach((item, index) => {
+        const itemX = index * (itemBounds.width + gap);
+        const indexes = [index];
+        itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: topMargin, positionH: "center" }));
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnRemove, { indexes: indexes, x: itemX + (itemBounds.width - btnBounds.width) / 2, y: topMargin + itemBounds.height + 10 }));
+        if (index === 0) {
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: indexes, x: itemX + (itemBounds.width - btnBounds.width) / 2, y: topMargin - btnBounds.height - 10 }));
+        }
+        else {
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: indexes, x: itemX - gap / 2 - btnBounds.width / 2, y: topMargin - btnBounds.height - 10 }));
+        }
+        if (index < items.length - 1) {
+            const arrowX = itemX + itemBounds.width + (gap - arrowWidth) / 2;
+            const arrowY = topMargin + itemBounds.height / 2 - arrowHeight / 2;
+            decorElements.push((0, jsx_runtime_1.jsx)(decorations_1.SimpleArrow, { x: arrowX, y: arrowY, width: arrowWidth, height: arrowHeight, colorPrimary: colorPrimary }));
+        }
+    });
+    if (items.length > 0) {
+        const lastItemX = (items.length - 1) * (itemBounds.width + gap);
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [items.length], x: lastItemX + itemBounds.width + (gap - btnBounds.width) / 2, y: topMargin - btnBounds.height - 10 }));
+    }
+    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)(infographic_jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Group, { children: decorElements }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: itemElements }), (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: btnElements })] })] }));
+};
+exports.SequenceSteps = SequenceSteps;
+(0, registry_1.registerStructure)('sequence-steps', {
+    component: exports.SequenceSteps,
+    composites: ['title', 'item'],
+});

package/lib/designs/structures/sequence-timeline.d.ts

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

package/lib/designs/structures/sequence-timeline.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceTimeline = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const layouts_1 = require("../layouts");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const SequenceTimeline = (props) => {
+    const { Title, Item, data, gap = 10, options } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
+    const colorPrimary = (0, utils_1.getColorPrimary)(options);
+    const palette = (0, utils_1.getPaletteColors)(options);
+    const btnBounds = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0] }));
+    const itemBounds = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Item, { indexes: [0], data: data, datum: items[0], positionH: "normal" }));
+    const btnElements = [];
+    const itemElements = [];
+    const decorElements = [];
+    const stepLabelX = 10;
+    const timelineX = stepLabelX + 70 + 10;
+    const itemX = timelineX + 30;
+    const nodeRadius = 6;
+    // Add continuous timeline line first (so it appears behind the dots)
+    if (items.length > 1) {
+        const firstNodeY = itemBounds.height / 2 + nodeRadius;
+        const lastNodeY = (items.length - 1) * (itemBounds.height + gap) +
+            itemBounds.height / 2 -
+            nodeRadius;
+        const continuousLinePath = `M ${timelineX} ${firstNodeY} L ${timelineX} ${lastNodeY}`;
+        const linearGradientId = 'gradient-timeline-line';
+        const totalHeight = lastNodeY - firstNodeY;
+        // Generate gradient stops for each item
+        const gradientStops = items.map((_, index) => {
+            const nodeY = index * (itemBounds.height + gap) + itemBounds.height / 2;
+            const offset = ((nodeY - firstNodeY) / totalHeight) * 100;
+            const color = (0, utils_1.getPaletteColor)(options, [index]);
+            return (0, jsx_runtime_1.jsx)("stop", { offset: `${offset}%`, stopColor: color || colorPrimary });
+        });
+        decorElements.push((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Defs, { children: (0, jsx_runtime_1.jsx)("linearGradient", { id: linearGradientId, x1: timelineX, y1: firstNodeY, x2: timelineX, y2: lastNodeY, gradientUnits: "userSpaceOnUse", children: gradientStops }) }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { d: continuousLinePath, stroke: `url(#${linearGradientId})`, strokeWidth: 2, width: 1, height: lastNodeY - firstNodeY })] }));
+    }
+    items.forEach((item, index) => {
+        const itemY = index * (itemBounds.height + gap);
+        const nodeY = itemY + itemBounds.height / 2;
+        const indexes = [index];
+        decorElements.push((0, jsx_runtime_1.jsx)(infographic_jsx_1.Text, { x: stepLabelX, y: nodeY, width: 70, fontSize: 18, fontWeight: "bold", alignHorizontal: "left", alignVertical: "center", fill: palette[index % palette.length], children: `STEP ${index + 1}` }));
+        itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, positionH: "normal" }));
+        decorElements.push((0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { x: timelineX - nodeRadius, y: nodeY - nodeRadius, width: nodeRadius * 2, height: nodeRadius * 2, fill: palette[index % palette.length] }));
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnRemove, { indexes: indexes, x: itemX - btnBounds.width - 10, y: itemY + (itemBounds.height - btnBounds.height) / 2 }));
+        if (index === 0) {
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: indexes, x: itemX + (itemBounds.width - btnBounds.width) / 2, y: itemY - btnBounds.height - 10 }));
+        }
+        else {
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: indexes, x: itemX + (itemBounds.width - btnBounds.width) / 2, y: itemY - gap / 2 - btnBounds.height / 2 }));
+        }
+    });
+    if (items.length > 0) {
+        const lastItemY = (items.length - 1) * (itemBounds.height + gap);
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [items.length], x: itemX + (itemBounds.width - btnBounds.width) / 2, y: lastItemY + itemBounds.height + 10 }));
+    }
+    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)(infographic_jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Group, { children: decorElements }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: itemElements }), (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: btnElements })] })] }));
+};
+exports.SequenceTimeline = SequenceTimeline;
+(0, registry_1.registerStructure)('sequence-timeline', {
+    component: exports.SequenceTimeline,
+    composites: ['title', 'item'],
+});

package/lib/designs/structures/sequence-zigzag-pucks-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 SequenceZigzagPucks3dProps extends BaseStructureProps {
+    gap?: number;
+}
+export declare const SequenceZigzagPucks3d: ComponentType<SequenceZigzagPucks3dProps>;

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

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceZigzagPucks3d = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const layouts_1 = require("../layouts");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const PUCK_WIDTH = 120;
+const PUCK_HEIGHT = 108;
+const ITEM_TO_PUCK_GAP = 30;
+const PUCK_TOP_PATH = 'M0 34.4903C0 37.8781 0.849901 41.1522 2.43491 44.2451C4.23514 47.7639 6.98606 51.0482 10.5164 54.0008C21.3317 63.0477 39.4607 68.9799 59.9998 68.9799C80.5391 68.9799 98.6691 63.0477 109.483 54.0008C113.013 51.0482 115.765 47.7639 117.564 44.2451C119.149 41.1522 120 37.8781 120 34.4903C120 15.4417 93.1366 0 59.9998 0C26.8632 0 0 15.4417 0 34.4903Z';
+const PUCK_MIDDLE_PATH = 'M0 34.4904V53.9996C0 57.3885 0.849901 60.6616 2.43491 63.7555C9.75384 78.0548 32.7566 88.4909 59.9998 88.4909C87.2438 88.4909 110.246 78.0548 117.564 63.7555C119.149 60.6616 120 57.3885 120 53.9996V34.4904C120 37.8781 119.149 41.1522 117.564 44.2451C115.765 47.7639 113.013 51.0482 109.483 54.0008C98.6691 63.0477 80.5391 68.9799 59.9998 68.9799C39.4607 68.9799 21.3317 63.0477 10.5164 54.0008C6.98606 51.0482 4.23514 47.7639 2.43491 44.2451C0.849901 41.1522 0 37.8781 0 34.4904Z';
+const PUCK_BOTTOM_PATH = 'M0 53.9996V73.5106C0 92.5595 26.8632 108 59.9998 108C93.1366 108 120 92.5595 120 73.5106V53.9996C120 57.3885 119.149 60.6616 117.564 63.7555C110.246 78.0548 87.2438 88.4909 59.9998 88.4909C32.7566 88.4909 9.75384 78.0548 2.43491 63.7555C0.849901 60.6616 0 57.3885 0 53.9996Z';
+const DropShadowFilter = ((0, jsx_runtime_1.jsxs)("filter", { id: "sequence-zigzag-pucks-3d-shadow-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [(0, jsx_runtime_1.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("feOffset", { dx: "-7", dy: "7" }), (0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: "7.5" }), (0, jsx_runtime_1.jsx)("feComposite", { in2: "hardAlpha", operator: "out" }), (0, jsx_runtime_1.jsx)("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow", result: "shape" })] }));
+const SequenceZigzagPucks3d = (props) => {
+    const { Title, Item, data, options, gap = 80 } = props;
+    const puckWidth = PUCK_WIDTH;
+    const puckHeight = PUCK_HEIGHT;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
+    const colorPrimary = (0, utils_1.getColorPrimary)(options);
+    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: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Defs, { children: DropShadowFilter }), titleContent, (0, jsx_runtime_1.jsx)(infographic_jsx_1.Group, { children: (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: btnAddElement }) })] }));
+    }
+    const itemBounds = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Item, { indexes: [0], data: data, datum: items[0], positionH: "center" }));
+    const btnBounds = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0] }));
+    const btnElements = [];
+    const itemElements = [];
+    const puckElements = [];
+    let minY = Infinity;
+    let maxY = -Infinity;
+    const itemHeight = itemBounds.height + ITEM_TO_PUCK_GAP + puckHeight;
+    items.forEach((item, index) => {
+        const indexes = [index];
+        const currentColor = (0, utils_1.getPaletteColor)(options, indexes);
+        const isEven = index % 2 === 0;
+        const puckX = index * (puckWidth + gap);
+        const puckY = isEven ? 0 : itemBounds.height + ITEM_TO_PUCK_GAP;
+        minY = Math.min(minY, puckY);
+        const gradientId1 = `puck-gradient-middle-${index}`;
+        const gradientId2 = `puck-gradient-bottom-${index}`;
+        puckElements.push((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { x: puckX, y: puckY, id: `puck-${index}`, width: puckWidth, height: puckHeight, filter: "url(#sequence-zigzag-pucks-3d-shadow-filter)", children: [(0, jsx_runtime_1.jsxs)(infographic_jsx_1.Defs, { children: [(0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientId1, x1: "115", y1: "55.9991", x2: "15.0002", y2: "55.9991", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: currentColor || colorPrimary }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: currentColor || colorPrimary, stopOpacity: "0.6" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientId2, x1: "115", y1: "72.1803", x2: "15.0002", y2: "72.1803", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: "#F4F4FB" }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: "#8E8C90" })] })] }), (0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { width: PUCK_WIDTH, height: PUCK_HEIGHT, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { d: PUCK_TOP_PATH, fill: currentColor || colorPrimary }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { d: PUCK_MIDDLE_PATH, fill: `url(#${gradientId1})` }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { d: PUCK_BOTTOM_PATH, fill: `url(#${gradientId2})` }), (0, jsx_runtime_1.jsx)("text", { x: 65, y: 40, width: 50, height: 50, fontSize: 40, fontWeight: "bold", fill: "#FFFFFF", textAnchor: "middle", dominantBaseline: "middle", transform: "rotate(-15 65 40) scale(1, 0.8)", children: index + 1 })] })] }));
+        const itemX = puckX + (puckWidth - itemBounds.width) / 2;
+        const itemY = isEven
+            ? puckY + puckHeight + ITEM_TO_PUCK_GAP
+            : puckY - ITEM_TO_PUCK_GAP - itemBounds.height;
+        maxY = Math.max(maxY, itemY + itemBounds.height);
+        itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY, positionH: "center" }));
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnRemove, { indexes: indexes, x: itemX + itemBounds.width - btnBounds.width / 2, y: itemY + itemBounds.height - btnBounds.height / 2 }));
+        if (index === 0) {
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0], x: puckX + puckWidth / 2 - btnBounds.width / 2 - (gap + puckWidth) / 2, y: puckY + puckHeight / 2 - btnBounds.height / 2 }));
+        }
+        if (index < items.length - 1) {
+            const nextIsEven = (index + 1) % 2 === 0;
+            const nextPuckY = nextIsEven ? 0 : itemHeight;
+            const btnAddX = puckX + puckWidth + gap / 2 - btnBounds.width / 2;
+            const btnAddY = (puckY + puckHeight / 2 + nextPuckY + puckHeight / 2) / 2 -
+                btnBounds.height / 2;
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [index + 1], x: btnAddX, y: btnAddY }));
+        }
+        else {
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [items.length], x: puckX + puckWidth + gap / 2 - btnBounds.width / 2, y: puckY + puckHeight / 2 - btnBounds.height / 2 }));
+        }
+    });
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 30, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Defs, { children: DropShadowFilter }), titleContent, (0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { x: 0, y: 0, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Group, { children: puckElements }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: itemElements }), (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: btnElements })] })] }));
+};
+exports.SequenceZigzagPucks3d = SequenceZigzagPucks3d;
+(0, registry_1.registerStructure)('sequence-zigzag-pucks-3d', {
+    component: exports.SequenceZigzagPucks3d,
+    composites: ['title', 'item'],
+});

package/lib/designs/structures/sequence-zigzag-steps.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType } from '@antv/infographic-jsx';
+import type { BaseStructureProps } from './types';
+export interface SequenceZigzagStepsProps extends BaseStructureProps {
+    dx?: number;
+    dy?: number;
+    iconSize?: number;
+}
+export declare const SequenceZigzagSteps: ComponentType<SequenceZigzagStepsProps>;

package/lib/designs/structures/sequence-zigzag-steps.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceZigzagSteps = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const layouts_1 = require("../layouts");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+// W 型路径参数
+const DX = 240;
+const DY = 130;
+const ITEM_TO_PATH_GAP = 105;
+// W 型路径宽度
+const W_PATH_W = 12;
+// 光晕尺寸 (Ellipse W/H)
+const GLOW_W = 120; // 椭圆宽度 (水平对角线)
+const GLOW_H = 50; // 椭圆高度 (垂直对角线)
+const GLOW_OPACITY = 0.6; // 控制光晕的透明度，实现颜色调淡
+// 原始装饰性 Path 的 D 属性
+const DECO_PATH_1 = 'M132.821 50.6599L87.6795 76.8925C78.0629 82.4807 62.4238 82.4807 52.7445 76.8925L7.30824 50.6599C2.43719 47.8482 0.00459679 44.1562 0.0152907 40.472L3.17695e-05 45.6925C-0.0101404 49.378 2.42245 53.0686 7.29298 55.8803L52.7289 82.1129C62.4094 87.7011 78.0485 87.7011 87.6652 82.1129L132.806 55.8803C137.583 53.1038 139.975 49.4705 139.986 45.832L140 40.6116C139.989 44.2501 137.598 47.8834 132.821 50.6599Z';
+const DECO_PATH_2 = 'M132.707 30.4224C142.386 36.0119 142.437 45.0704 132.821 50.6599L87.6795 76.8925C78.0629 82.4807 62.4238 82.4807 52.7445 76.8925L7.30825 50.6599C-2.37126 45.0717 -2.42225 36.0132 7.19414 30.4237L52.335 4.19115C61.9517 -1.39705 77.5908 -1.39705 87.2713 4.19115L132.707 30.4224Z';
+// 装饰元素的偏移量 - 改为正值
+const DECO_OFFSET_X = 70 + W_PATH_W / 2;
+const DECO_OFFSET_Y = 40 + W_PATH_W / 2;
+// 滤镜定义
+const GlowFilter = ((0, jsx_runtime_1.jsx)("filter", { id: "sequence-zigzag-glow-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", children: (0, jsx_runtime_1.jsx)("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "15", result: "blur" }) }));
+const SequenceZigzagSteps = (props) => {
+    const { Title, Item, data, options, dx = DX, dy = DY, iconSize = 30 } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
+    const colorPrimary = (0, utils_1.getColorPrimary)(options);
+    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: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Defs, { children: GlowFilter }), titleContent, (0, jsx_runtime_1.jsx)(infographic_jsx_1.Group, { children: (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: btnAddElement }) })] }));
+    }
+    const itemBounds = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Item, { indexes: [0], data: data, datum: items[0] }));
+    const btnBounds = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0] }));
+    const btnElements = [];
+    const itemElements = [];
+    const pathElements = [];
+    const decoElements = [];
+    const iconElements = [];
+    let currentX = 0;
+    let currentY = 0;
+    let pathD = '';
+    let minPathY = Infinity;
+    let maxItemY = -Infinity;
+    let minDecoX = Infinity;
+    let minDecoY = Infinity;
+    const pathPoints = [];
+    // Pass 1: 计算路径点和装饰元素的边界
+    items.forEach((item, index) => {
+        const cx = currentX;
+        const cy = currentY;
+        pathPoints.push({ x: cx, y: cy });
+        minPathY = Math.min(minPathY, cy);
+        // 计算装饰元素的位置
+        const decoX = cx - DECO_OFFSET_X;
+        const decoY = cy - DECO_OFFSET_Y;
+        minDecoX = Math.min(minDecoX, decoX);
+        minDecoY = Math.min(minDecoY, decoY);
+        const isPeak = index % 2 === 0;
+        if (index < items.length - 1) {
+            currentX += dx;
+            currentY = isPeak ? currentY + dy : currentY - dy;
+        }
+    });
+    // 计算偏移量以确保所有元素都在正坐标
+    const offsetX = Math.max(0, -minDecoX);
+    const offsetY = Math.max(0, -minDecoY);
+    currentX = 0;
+    currentY = 0;
+    // Pass 2: 放置元素，应用偏移量
+    items.forEach((item, index) => {
+        const indexes = [index];
+        const pathPoint = pathPoints[index];
+        const cx = pathPoint.x + offsetX;
+        const cy = pathPoint.y + offsetY;
+        const currentColor = (0, utils_1.getPaletteColor)(options, indexes);
+        // 装饰元素 - 确保坐标为正值
+        const decoX = Math.max(0, cx - DECO_OFFSET_X);
+        const decoY = Math.max(0, cy - DECO_OFFSET_Y);
+        const glowX = 10;
+        const glowY = GLOW_H + 10;
+        const { colorPrimaryBg } = (0, utils_1.getThemeColors)({
+            colorPrimary: currentColor,
+        });
+        decoElements.push((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { x: decoX, y: decoY, id: `deco-group-${index}`, width: 140, height: 110, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { x: glowX, y: glowY, width: GLOW_W, height: GLOW_H, fill: currentColor || colorPrimary, filter: "url(#sequence-zigzag-glow-filter)", opacity: GLOW_OPACITY }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { d: DECO_PATH_1, fill: currentColor || colorPrimary }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { d: DECO_PATH_2, fill: '#fff' }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { d: DECO_PATH_2, fill: colorPrimaryBg || colorPrimaryBg })] }));
+        // Icon 元素
+        if (item.icon) {
+            const iconX = Math.max(0, cx - iconSize / 2 - W_PATH_W / 2);
+            const iconY = Math.max(0, cy - iconSize / 2 - W_PATH_W / 2);
+            iconElements.push((0, jsx_runtime_1.jsx)(components_1.ItemIcon, { x: iconX, y: iconY, size: iconSize, indexes: indexes, fill: currentColor }));
+        }
+        // Item 元素和按钮
+        const itemX = cx - itemBounds.width / 2 - W_PATH_W / 2;
+        const itemY = Math.max(0, cy + ITEM_TO_PATH_GAP - W_PATH_W / 2);
+        maxItemY = Math.max(maxItemY, itemY + itemBounds.height);
+        if (index === 0) {
+            pathD = `M ${cx} ${cy}`;
+        }
+        else {
+            pathD += ` L ${cx} ${cy}`;
+        }
+        itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: indexes, datum: item, data: data, x: itemX, y: itemY }));
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnRemove, { indexes: indexes, x: Math.max(0, itemX + itemBounds.width - btnBounds.width / 2), y: Math.max(0, itemY + itemBounds.height - btnBounds.height / 2) }));
+        if (index < items.length - 1) {
+            const nextPoint = pathPoints[index + 1];
+            const nextCx = nextPoint.x + offsetX;
+            const nextCy = nextPoint.y + offsetY;
+            const btnAddX = Math.max(0, cx + (nextCx - cx) / 2 - btnBounds.width / 2);
+            const btnAddY = Math.max(0, cy + (nextCy - cy) / 2 - btnBounds.height / 2);
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [index + 1], x: btnAddX, y: btnAddY }));
+        }
+        else {
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [items.length], x: Math.max(0, itemX + itemBounds.width + dx / 4), y: Math.max(0, itemY + itemBounds.height / 2 - btnBounds.height / 2) }));
+        }
+    });
+    if (pathD) {
+        const finalX = (pathPoints[pathPoints.length - 1]?.x || 0) + offsetX;
+        pathElements.push((0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { d: pathD, stroke: "#f3f2f1", strokeWidth: W_PATH_W, fill: "none", width: finalX, height: maxItemY - Math.min(minPathY + offsetY, 0) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 30, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Defs, { children: GlowFilter }), titleContent, (0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { x: 0, y: 0, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Group, { children: [...pathElements, ...decoElements, ...iconElements] }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: itemElements }), (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: btnElements })] })] }));
+};
+exports.SequenceZigzagSteps = SequenceZigzagSteps;
+(0, registry_1.registerStructure)('sequence-zigzag-steps', {
+    component: exports.SequenceZigzagSteps,
+    composites: ['title', 'item'],
+});

package/lib/designs/structures/types.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentType } from '@antv/infographic-jsx';
+import type { ParsedInfographicOptions } from '../../options';
+import type { Data } from '../../types';
+import { TitleProps } from '../components';
+import type { BaseItemProps } from '../items';
+export interface BaseStructureProps {
+    Title?: ComponentType<Pick<TitleProps, 'title' | 'desc'>>;
+    Item: ComponentType<Omit<BaseItemProps, 'themeColors'> & Partial<Pick<BaseItemProps, 'themeColors'>>>;
+    Items: ComponentType<Omit<BaseItemProps, 'themeColors'>>[];
+    data: Data;
+    options: ParsedInfographicOptions;
+}
+export interface Structure {
+    component: ComponentType<BaseStructureProps>;
+    composites: string[];
+}
+export interface StructureOptions {
+    [key: string]: any;
+}

package/lib/designs/structures/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/designs/title/index.d.ts

@@ -0,0 +1 @@
+export type * from './types';

package/lib/designs/title/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/designs/title/types.d.ts

@@ -0,0 +1,4 @@
+export interface TitleOptions {
+    type: string;
+    [key: string]: any;
+}

package/lib/designs/title/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/designs/types.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentType } from '@antv/infographic-jsx';
+import type { Item, ItemOptions } from './items';
+import type { Structure, StructureOptions } from './structures';
+import { TitleOptions } from './title';
+export interface DesignOptions {
+    /** 结构 */
+    structure?: string | WithType<StructureOptions>;
+    /** 标题 */
+    title?: string | WithType<TitleOptions>;
+    /** 数据项 */
+    item?: string | WithType<ItemOptions>;
+    /** 针对层级布局，不同层级使用不同 item */
+    items?: (string | WithType<ItemOptions>)[];
+}
+export interface ParsedDesignsOptions {
+    structure: WithProps<Structure>;
+    title: {
+        component: ComponentType<any> | null;
+    };
+    item: WithProps<Item>;
+    items: WithProps<Item>[];
+}
+type WithType<T> = T & {
+    type: string;
+};
+type WithProps<T> = T & {
+    props?: any;
+};
+export {};

package/lib/designs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/designs/utils/color.d.ts

@@ -0,0 +1,8 @@
+import type { ParsedInfographicOptions } from '../../options';
+export declare function getColorPrimary(options: ParsedInfographicOptions): string;
+export declare function getPaletteColors(options: ParsedInfographicOptions): string[];
+export declare function getPaletteColor(options: ParsedInfographicOptions, indexes: number[]): string | undefined;
+export declare function getThemeColors(colors: {
+    colorPrimary?: string;
+    colorBg?: string;
+}, options?: ParsedInfographicOptions): import("../../themes").ThemeColors;

package/lib/designs/utils/color.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getColorPrimary = getColorPrimary;
+exports.getPaletteColors = getPaletteColors;
+exports.getPaletteColor = getPaletteColor;
+exports.getThemeColors = getThemeColors;
+const renderer_1 = require("../../renderer");
+const themes_1 = require("../../themes");
+const utils_1 = require("../../utils");
+const DEFAULT_COLOR = '#1890FF';
+function getColorPrimary(options) {
+    return options?.themeConfig?.colorPrimary || DEFAULT_COLOR;
+}
+function getPaletteColors(options) {
+    const { themeConfig = {}, data } = options;
+    const { colorPrimary, palette } = themeConfig;
+    if (!palette || palette.length === 0) {
+        return Array(data?.items?.length || 1).fill(colorPrimary || DEFAULT_COLOR);
+    }
+    return data.items.map((_, i) => (0, renderer_1.getPaletteColor)(palette, [i], data.items.length) || DEFAULT_COLOR);
+}
+function getPaletteColor(options, indexes) {
+    return (0, renderer_1.getPaletteColor)(options?.themeConfig?.palette, indexes, options.data?.items?.length);
+}
+function getThemeColors(colors, options) {
+    const { colorBg = options?.themeConfig?.colorBg || 'white', colorPrimary = options ? getColorPrimary(options) : 'black', } = colors;
+    return (0, themes_1.generateThemeColors)({
+        colorPrimary: colorPrimary,
+        isDarkMode: (0, utils_1.isDarkColor)(colorBg),
+        colorBg: colorBg,
+    });
+}

package/lib/designs/utils/hierarchy-color.d.ts

@@ -0,0 +1,61 @@
+/**
+ * 层级结构着色模式类型
+ */
+export type HierarchyColorMode = 'level' | 'branch' | 'node' | 'node-flat';
+/**
+ * 层级节点信息接口
+ */
+export interface HierarchyNode {
+    /** 节点深度（层级），从 0 开始 */
+    depth: number;
+    /** 节点原始索引路径，如 [0, 1, 2] 表示根节点的第2个子节点的第3个子节点 */
+    originalIndexes: number[];
+    /** 节点在树中的扁平化序号（可选），用于 node-flat 模式 */
+    flatIndex?: number;
+}
+/**
+ * 根据层级着色模式获取节点的颜色索引
+ *
+ * @param node - 层级节点信息
+ * @param mode - 着色模式
+ * @returns 用于获取调色板颜色的索引数组
+ *
+ * @example
+ * ```typescript
+ * // 按层级着色
+ * const indexes = getHierarchyColorIndexes({ depth: 2, originalIndexes: [0, 1, 2] }, 'level');
+ * // 返回 [2]，表示使用第3个层级的颜色
+ *
+ * // 按分支着色
+ * const indexes = getHierarchyColorIndexes({ depth: 3, originalIndexes: [0, 1, 2, 0] }, 'branch');
+ * // 返回 [2]，表示继承第2个二级分支的颜色
+ *
+ * // 按节点着色（层级路径）
+ * const indexes = getHierarchyColorIndexes({ depth: 2, originalIndexes: [0, 1, 2] }, 'node');
+ * // 返回 [0, 1, 2]，使用完整路径
+ *
+ * // 按节点着色（扁平序号）
+ * const indexes = getHierarchyColorIndexes({ depth: 2, originalIndexes: [0, 1, 2], flatIndex: 5 }, 'node-flat');
+ * // 返回 [5]，使用扁平化的序号
+ * ```
+ */
+export declare function getHierarchyColorIndexes(node: HierarchyNode, mode: HierarchyColorMode): number[];
+/**
+ * 从 d3 hierarchy 节点中提取层级节点信息
+ *
+ * @param d3Node - d3.hierarchy 生成的节点对象
+ * @returns 层级节点信息
+ *
+ * @example
+ * ```typescript
+ * const root = d3.hierarchy(data);
+ * const nodes = root.descendants();
+ *
+ * nodes.forEach(node => {
+ *   const hierarchyNode = extractHierarchyNode(node);
+ *   const colorIndexes = getHierarchyColorIndexes(hierarchyNode, 'branch');
+ *   const color = getPaletteColor(options, colorIndexes);
+ * });
+ * ```
+ */
+export declare function extractHierarchyNode(d3Node: any): HierarchyNode;