@antv/infographic 0.1.1 → 0.1.3

package/lib/designs/structures/chart-pie.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartPie = void 0;
+const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
+const d3_1 = require("d3");
+const jsx_1 = require("../../jsx");
+const components_1 = require("../components");
+const layouts_1 = require("../layouts");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const ChartPie = (props) => {
+    const { Title, Item, data, radius = 140, innerRadius = 0, padding = 30, showPercentage = true, options, } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
+    const btnBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0] }));
+    // 获取 Item 的预估尺寸
+    const sampleDatum = items[0] ?? { label: '', value: 0 };
+    const itemBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Item, { indexes: [0], datum: sampleDatum, data: data, positionH: "center", positionV: "middle" }));
+    const labelWidth = itemBounds.width || 140;
+    const labelHeight = itemBounds.height || 32;
+    // 基础半径设置
+    const outerRadius = Math.max(radius, 60);
+    // 连线水平拉伸的系数
+    const extensionFactor = 1.35;
+    const textGap = 8;
+    // 计算画布中心和总尺寸
+    // 水平方向：半径 * 系数 + 间距 + 标签宽度 + 边缘padding
+    const maxHorizontalDistance = outerRadius * extensionFactor + textGap + labelWidth;
+    const maxVerticalDistance = outerRadius;
+    const centerX = padding + maxHorizontalDistance;
+    const centerY = padding + maxVerticalDistance;
+    const totalWidth = centerX * 2;
+    const totalHeight = centerY * 2;
+    // 空数据处理
+    if (items.length === 0) {
+        return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, (0, jsx_runtime_1.jsx)(jsx_1.Group, { width: totalWidth, height: totalHeight, children: (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: (0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0], x: centerX - btnBounds.width / 2, y: centerY - btnBounds.height / 2 }) }) })] }));
+    }
+    const totalValue = items.reduce((sum, item) => sum + Math.max(item.value ?? 0, 0), 0);
+    const colorPrimary = (0, utils_1.getColorPrimary)(options);
+    const themeColors = (0, utils_1.getThemeColors)(options.themeConfig);
+    // 1. 饼图生成器
+    const pieGenerator = (0, d3_1.pie)()
+        .value((item) => Math.max(item.value ?? 0, 0))
+        .sort(null)
+        .startAngle(0)
+        .endAngle(Math.PI * 2);
+    const arcData = pieGenerator(items);
+    // 2. 弧形生成器
+    const arcGenerator = (0, d3_1.arc)()
+        .innerRadius(innerRadius)
+        .outerRadius(outerRadius)
+        .cornerRadius(2);
+    // 连线起点
+    const innerArc = (0, d3_1.arc)()
+        .innerRadius(outerRadius)
+        .outerRadius(outerRadius);
+    // 连线拐点
+    const outerArc = (0, d3_1.arc)()
+        .innerRadius(outerRadius * 1.15)
+        .outerRadius(outerRadius * 1.15);
+    const percentTextRadius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    const percentageArc = (0, d3_1.arc)()
+        .innerRadius(percentTextRadius)
+        .outerRadius(percentTextRadius);
+    // 删除按钮位置
+    const deleteButtonArc = (0, d3_1.arc)()
+        .innerRadius(outerRadius * 0.85)
+        .outerRadius(outerRadius * 0.85);
+    const sliceElements = [];
+    const percentElements = [];
+    const connectorElements = [];
+    const itemElements = [];
+    const btnElements = [];
+    // 3. 遍历生成图形
+    arcData.forEach((arcDatum) => {
+        const currentItem = arcDatum.data;
+        const originalIndex = arcDatum.index;
+        const color = (0, utils_1.getPaletteColor)(options, [originalIndex]) ||
+            themeColors.colorPrimary ||
+            colorPrimary;
+        // --- 绘制扇形 ---
+        const pathD = arcGenerator(arcDatum) || '';
+        sliceElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: pathD, fill: color, stroke: themeColors.colorBg, strokeWidth: 1, "data-element-type": "shape", width: outerRadius * 2, height: outerRadius * 2 }));
+        // --- 计算关键点 ---
+        const midAngle = arcDatum.startAngle + (arcDatum.endAngle - arcDatum.startAngle) / 2;
+        const isRight = midAngle < Math.PI;
+        // 1. 起点
+        const p0 = innerArc.centroid(arcDatum);
+        // 2. 拐点
+        const p1 = outerArc.centroid(arcDatum);
+        // 3. 终点 (水平拉伸)
+        const labelXOffset = outerRadius * extensionFactor * (isRight ? 1 : -1);
+        const p2 = [labelXOffset, p1[1]];
+        // --- 绘制连线 ---
+        connectorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M${centerX + p0[0]} ${centerY + p0[1]} L${centerX + p1[0]} ${centerY + p1[1]} L${centerX + p2[0]} ${centerY + p2[1]}`, stroke: colorPrimary, strokeOpacity: 0.45, strokeWidth: 2, fill: "none", "data-element-type": "shape" }));
+        // --- 绘制 Item ---
+        const itemX = centerX + p2[0] + (isRight ? textGap : -textGap - labelWidth);
+        const itemY = centerY + p2[1] - labelHeight / 2;
+        itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: [originalIndex], datum: currentItem, data: data, x: itemX, y: itemY, width: labelWidth, height: labelHeight, positionH: isRight ? 'normal' : 'flipped', positionV: "middle", themeColors: (0, utils_1.getThemeColors)({ colorPrimary: color }, options) }));
+        // --- 绘制百分比 ---
+        if (showPercentage && totalValue > 0) {
+            const percentPos = percentageArc.centroid(arcDatum);
+            const value = Math.max(arcDatum.value, 0);
+            const percentText = ((value * 100) / totalValue).toFixed(1);
+            // 定义文本框尺寸
+            const textWidth = 50;
+            const textHeight = 20;
+            percentElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: centerX + percentPos[0] - textWidth / 2, y: centerY + percentPos[1] - textHeight / 2, width: textWidth, height: textHeight, alignHorizontal: "center", alignVertical: "middle", fontSize: 12, fontWeight: "bold", fill: "#ffffff", "data-value": value, "data-indexes": [originalIndex], "data-element-type": "item-value" /* ElementTypeEnum.ItemValue */, children: `${percentText}%` }));
+        }
+        // --- 绘制删除按钮 ---
+        const deletePos = deleteButtonArc.centroid(arcDatum);
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnRemove, { indexes: [originalIndex], x: centerX + deletePos[0] - btnBounds.width / 2, y: centerY + deletePos[1] - btnBounds.height / 2 }));
+    });
+    // --- 绘制添加按钮 ---
+    arcData.forEach((arcDatum, index) => {
+        const nextIndex = (index + 1) % arcData.length;
+        const currentEnd = arcDatum.endAngle;
+        const nextStart = arcData[nextIndex].startAngle + (nextIndex === 0 ? Math.PI * 2 : 0);
+        const midAngle = (currentEnd + nextStart) / 2;
+        const btnR = outerRadius * 1.0;
+        const btnX = Math.sin(midAngle) * btnR;
+        const btnY = -Math.cos(midAngle) * btnR;
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [index + 1], x: centerX + btnX - btnBounds.width / 2, y: centerY + btnY - btnBounds.height / 2 }));
+    });
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 30, children: [titleContent, (0, jsx_runtime_1.jsxs)(jsx_1.Group, { width: totalWidth, height: totalHeight, children: [(0, jsx_runtime_1.jsx)(jsx_1.Group, { x: centerX, y: centerY, children: sliceElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: connectorElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: percentElements }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: itemElements }), (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: btnElements })] })] }));
+};
+exports.ChartPie = ChartPie;
+(0, registry_1.registerStructure)('chart-pie', {
+    component: exports.ChartPie,
+    composites: ['title', 'item'],
+});

package/lib/designs/structures/compare-binary-horizontal/dividers/pros-cons-arrow.js

@@ -18,7 +18,7 @@ const ProsConsArrow = (props) => {
         fontWeight: 'bold',
         fill: colorBg,
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { x: x, y: y, width: width, height: height, children: [(0, jsx_runtime_1.jsxs)(components_1.ShapesGroup, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M137 54C137 54.2903 137 54.5806 136.706 54.7742L108.614 86.0323H64.7619C64.4071 86.0204 64.0557 86.1043 63.7453 86.2747C63.4349 86.4452 63.1773 86.6959 63 87C63.0037 86.7447 63.1092 86.5012 63.2936 86.3226L91.3862 55.0645H135.238C135.593 55.0763 135.944 54.9925 136.255 54.822C136.565 54.6516 136.823 54.4009 137 54.0968V54Z", fill: "#D9D9D9" }), (0, jsx_runtime_1.jsx)("path", { d: "M39.3272 0.484649C39.6146 0.234929 39.9662 0.0736935 40.3407 0.0198929C40.7152 -0.0339076 41.0971 0.0219605 41.4414 0.180925C41.7857 0.33989 42.0783 0.595358 42.2846 0.917314C42.491 1.23927 42.6026 1.61434 42.6063 1.99848V14.8156H136.013C136.54 14.8156 137.045 15.0282 137.418 15.4068C137.791 15.7853 138 16.2987 138 16.834V53.166C138 53.7013 137.791 54.2147 137.418 54.5932C137.045 54.9718 136.54 55.1844 136.013 55.1844H42.6063V68.0015C42.6026 68.3857 42.491 68.7607 42.2846 69.0827C42.0783 69.4046 41.7857 69.6601 41.4414 69.8191C41.0971 69.9781 40.7152 70.0339 40.3407 69.9801C39.9662 69.9263 39.6146 69.7651 39.3272 69.5154L0.672847 36.5138C0.461378 36.3244 0.292014 36.0915 0.176005 35.8305C0.0599968 35.5695 0 35.2864 0 35C0 34.7136 0.0599968 34.4306 0.176005 34.1696C0.292014 33.9085 0.461378 33.6756 0.672847 33.4862L39.4265 0.484649H39.3272Z", fill: colorPositive }), (0, jsx_runtime_1.jsx)("path", { d: "M157.394 73.0007C157.397 72.6162 157.509 72.2407 157.715 71.9183C157.922 71.596 158.214 71.3403 158.559 71.1811C158.903 71.022 159.285 70.9661 159.659 71.0199C160.034 71.0738 160.385 71.2352 160.673 71.4852L199.327 104.524C199.539 104.714 199.708 104.947 199.824 105.208C199.94 105.47 200 105.753 200 106.04C200 106.326 199.94 106.61 199.824 106.871C199.708 107.132 199.539 107.366 199.327 107.555L160.573 140.594C160.285 140.815 159.943 140.951 159.584 140.989C159.225 141.027 158.862 140.965 158.535 140.809C158.208 140.653 157.929 140.41 157.728 140.105C157.527 139.8 157.411 139.445 157.394 139.078V126.247H63.9874C63.4603 126.247 62.9548 126.034 62.5821 125.655C62.2094 125.276 62 124.762 62 124.226V87.8531C62 87.3172 62.2094 86.8032 62.5821 86.4242C62.9548 86.0453 63.4603 85.8324 63.9874 85.8324H157.394V73.0007Z", fill: colorNegative })] }), (0, jsx_runtime_1.jsx)(jsx_1.Text, { x: 45, y: 15, ...textAttrs, children: "Pros" }), (0, jsx_runtime_1.jsx)(jsx_1.Text, { x: 65, y: 86, ...textAttrs, children: "Cons" })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { x: x, y: y, width: width, height: height, children: [(0, jsx_runtime_1.jsxs)(components_1.ShapesGroup, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M137 54C137 54.2903 137 54.5806 136.706 54.7742L108.614 86.0323H64.7619C64.4071 86.0204 64.0557 86.1043 63.7453 86.2747C63.4349 86.4452 63.1773 86.6959 63 87C63.0037 86.7447 63.1092 86.5012 63.2936 86.3226L91.3862 55.0645H135.238C135.593 55.0763 135.944 54.9925 136.255 54.822C136.565 54.6516 136.823 54.4009 137 54.0968V54Z", fill: "#D9D9D9" }), (0, jsx_runtime_1.jsx)("path", { d: "M39.3272 0.484649C39.6146 0.234929 39.9662 0.0736935 40.3407 0.0198929C40.7152 -0.0339076 41.0971 0.0219605 41.4414 0.180925C41.7857 0.33989 42.0783 0.595358 42.2846 0.917314C42.491 1.23927 42.6026 1.61434 42.6063 1.99848V14.8156H136.013C136.54 14.8156 137.045 15.0282 137.418 15.4068C137.791 15.7853 138 16.2987 138 16.834V53.166C138 53.7013 137.791 54.2147 137.418 54.5932C137.045 54.9718 136.54 55.1844 136.013 55.1844H42.6063V68.0015C42.6026 68.3857 42.491 68.7607 42.2846 69.0827C42.0783 69.4046 41.7857 69.6601 41.4414 69.8191C41.0971 69.9781 40.7152 70.0339 40.3407 69.9801C39.9662 69.9263 39.6146 69.7651 39.3272 69.5154L0.672847 36.5138C0.461378 36.3244 0.292014 36.0915 0.176005 35.8305C0.0599968 35.5695 0 35.2864 0 35C0 34.7136 0.0599968 34.4306 0.176005 34.1696C0.292014 33.9085 0.461378 33.6756 0.672847 33.4862L39.4265 0.484649H39.3272Z", fill: colorPositive }), (0, jsx_runtime_1.jsx)("path", { d: "M157.394 73.0007C157.397 72.6162 157.509 72.2407 157.715 71.9183C157.922 71.596 158.214 71.3403 158.559 71.1811C158.903 71.022 159.285 70.9661 159.659 71.0199C160.034 71.0738 160.385 71.2352 160.673 71.4852L199.327 104.524C199.539 104.714 199.708 104.947 199.824 105.208C199.94 105.47 200 105.753 200 106.04C200 106.326 199.94 106.61 199.824 106.871C199.708 107.132 199.539 107.366 199.327 107.555L160.573 140.594C160.285 140.815 159.943 140.951 159.584 140.989C159.225 141.027 158.862 140.965 158.535 140.809C158.208 140.653 157.929 140.41 157.728 140.105C157.527 139.8 157.411 139.445 157.394 139.078V126.247H63.9874C63.4603 126.247 62.9548 126.034 62.5821 125.655C62.2094 125.276 62 124.762 62 124.226V87.8531C62 87.3172 62.2094 86.8032 62.5821 86.4242C62.9548 86.0453 63.4603 85.8324 63.9874 85.8324H157.394V73.0007Z", fill: colorNegative })] }), (0, jsx_runtime_1.jsx)(jsx_1.Text, { x: 40, y: 15, ...textAttrs, children: "Pros" }), (0, jsx_runtime_1.jsx)(jsx_1.Text, { x: 70, y: 85, ...textAttrs, children: "Cons" })] }));
 };
 exports.ProsConsArrow = ProsConsArrow;
 (0, types_1.registerDivider)('pros-cons-arrow', exports.ProsConsArrow);

package/lib/designs/structures/hierarchy-mindmap.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentType } from '../../jsx';
+import type { HierarchyColorMode } from '../utils';
+import type { BaseStructureProps } from './types';
+type EdgeAlign = 'top' | 'center' | 'bottom' | number;
+type EdgeType = 'curved' | 'straight';
+type EdgeColorMode = 'solid' | 'gradient';
+export interface HierarchyMindmapProps extends BaseStructureProps {
+    /** 水平层级间距 */
+    levelGap?: number;
+    /** 垂直节点间距 */
+    nodeGap?: number;
+    /** 连线在节点上的垂直对齐方式；字符串为固定位置，数字为 0-1 比例 */
+    edgeAlign?: EdgeAlign;
+    /** 节点/连线着色模式 */
+    colorMode?: HierarchyColorMode;
+    /** 连线颜色模式 */
+    edgeColorMode?: EdgeColorMode;
+    /** 连线类型：曲线或直线 */
+    edgeType?: EdgeType;
+    /** 连线宽度 */
+    edgeWidth?: number;
+}
+export declare const HierarchyMindmap: ComponentType<HierarchyMindmapProps>;
+export {};

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

@@ -0,0 +1,203 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HierarchyMindmap = void 0;
+const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
+const hierarchy_1 = require("@antv/hierarchy");
+const jsx_1 = require("../../jsx");
+const components_1 = require("../components");
+const layouts_1 = require("../layouts");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const DEFAULT_LEVEL_GAP = 60;
+const DEFAULT_NODE_GAP = 14;
+const LAYOUT_PADDING = 30;
+const DEFAULT_EDGE_ALIGN = 'center';
+const DEFAULT_EDGE_TYPE = 'curved';
+const DEFAULT_EDGE_WIDTH = 2;
+const DEFAULT_COLOR_MODE = 'node';
+const DEFAULT_EDGE_COLOR_MODE = 'solid';
+const annotateTree = (node, parentIndexes = [], index = 0) => {
+    const indexes = [...parentIndexes, index];
+    return {
+        ...node,
+        _indexes: indexes,
+        children: node.children?.map((child, childIndex) => annotateTree(child, indexes, childIndex)) ?? [],
+    };
+};
+const collectNodes = (node, nodes, links, parent) => {
+    var _a;
+    nodes.push(node);
+    (_a = node.data)._flatIndex ?? (_a._flatIndex = nodes.length - 1);
+    if (parent)
+        links.push({ parent, child: node });
+    const children = node.children;
+    children?.forEach((child) => collectNodes(child, nodes, links, node));
+};
+const createCurvePath = (sx, sy, tx, ty) => {
+    const offsetX = Math.abs(tx - sx) / 2;
+    const ctrlX1 = tx > sx ? sx + offsetX : sx - offsetX;
+    const ctrlX2 = tx > sx ? tx - offsetX : tx + offsetX;
+    return `M ${sx} ${sy} C ${ctrlX1} ${sy} ${ctrlX2} ${ty} ${tx} ${ty}`;
+};
+const createStraightPath = (sx, sy, tx, ty) => `M ${sx} ${sy} L ${tx} ${ty}`;
+const getEdgeAnchors = (parentLayout, childLayout, childSide, align = DEFAULT_EDGE_ALIGN) => {
+    const clampRatio = (val) => Math.max(0, Math.min(1, val));
+    const toRatio = (value) => {
+        if (value === 'top')
+            return 0;
+        if (value === 'bottom')
+            return 1;
+        if (value === 'center')
+            return 0.5;
+        return clampRatio(value);
+    };
+    const ratio = toRatio(align);
+    const parentCy = parentLayout.y + parentLayout.height * ratio;
+    const childCy = childLayout.y + childLayout.height * ratio;
+    if (childSide === 'left') {
+        return {
+            sx: parentLayout.x,
+            sy: parentCy,
+            tx: childLayout.x + childLayout.width,
+            ty: childCy,
+        };
+    }
+    return {
+        sx: parentLayout.x + parentLayout.width,
+        sy: parentCy,
+        tx: childLayout.x,
+        ty: childCy,
+    };
+};
+const HierarchyMindmap = (props) => {
+    const { Title, Items, data, levelGap = DEFAULT_LEVEL_GAP, nodeGap = DEFAULT_NODE_GAP, edgeAlign = DEFAULT_EDGE_ALIGN, colorMode = DEFAULT_COLOR_MODE, edgeColorMode = DEFAULT_EDGE_COLOR_MODE, edgeType = DEFAULT_EDGE_TYPE, edgeWidth = DEFAULT_EDGE_WIDTH, 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, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0] }));
+    if (!items.length || !Items?.length) {
+        return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: (0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0], x: 0, y: 0 }) })] }));
+    }
+    const root = annotateTree(items[0]);
+    const nodeSizeCache = new WeakMap();
+    const colorCache = new WeakMap();
+    const themeCache = new WeakMap();
+    const getNodeColorIndexes = (datum, depth) => (0, utils_1.getHierarchyColorIndexes)({
+        depth,
+        originalIndexes: datum._indexes,
+        flatIndex: datum._flatIndex,
+    }, colorMode);
+    const getNodeThemeColors = (datum, depth) => {
+        const cachedTheme = themeCache.get(datum);
+        if (cachedTheme)
+            return cachedTheme;
+        const colorIndexes = getNodeColorIndexes(datum, depth);
+        const primary = (0, utils_1.getPaletteColor)(options, colorIndexes);
+        const themeColors = (0, utils_1.getThemeColors)({ colorPrimary: primary }, options);
+        themeCache.set(datum, themeColors);
+        colorCache.set(datum, primary);
+        return themeColors;
+    };
+    const measureNode = (datum) => {
+        const cached = nodeSizeCache.get(datum);
+        if (cached)
+            return cached;
+        const depth = Math.max(datum._indexes.length - 1, 0);
+        const Component = (0, utils_1.getItemComponent)(Items, depth);
+        const bounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Component, { indexes: datum._indexes, data: data, datum: datum, positionH: "center", positionV: "middle", themeColors: getNodeThemeColors(datum, depth) }));
+        nodeSizeCache.set(datum, bounds);
+        return bounds;
+    };
+    const mindmapRoot = (0, hierarchy_1.mindmap)(root, {
+        direction: 'H',
+        getSide: (node, index) => {
+            if (!node.parent)
+                return 'right';
+            const order = (node.parent.children || []).indexOf(node);
+            const rank = order >= 0 ? order : index;
+            return rank % 2 === 0 ? 'left' : 'right';
+        },
+        getWidth: (datum) => measureNode(datum).width,
+        getHeight: (datum) => measureNode(datum).height,
+        getHGap: () => levelGap,
+        getVGap: () => nodeGap,
+    });
+    const layoutNodes = [];
+    const nodeLinks = [];
+    collectNodes(mindmapRoot, layoutNodes, nodeLinks);
+    const minX = layoutNodes.length > 0 ? Math.min(...layoutNodes.map((node) => node.x)) : 0;
+    const minY = layoutNodes.length > 0 ? Math.min(...layoutNodes.map((node) => node.y)) : 0;
+    const shiftX = LAYOUT_PADDING - minX;
+    const shiftY = LAYOUT_PADDING - minY;
+    const defsElements = [];
+    const decorElements = [];
+    const itemElements = [];
+    const btnElements = [];
+    const layoutStore = new WeakMap();
+    layoutNodes.forEach((node) => {
+        const datum = node.data;
+        const measured = measureNode(datum);
+        const displayX = node.x + shiftX + (node.hgap ?? 0);
+        const displayY = node.y + shiftY + (node.vgap ?? 0);
+        const Component = (0, utils_1.getItemComponent)(Items, node.depth);
+        const positionH = node.depth === 0 ? 'center' : node.side === 'left' ? 'flipped' : 'normal';
+        const themeColors = getNodeThemeColors(datum, node.depth);
+        itemElements.push((0, jsx_runtime_1.jsx)(Component, { indexes: datum._indexes, data: data, datum: datum, x: displayX, y: displayY, positionH: positionH, positionV: "middle", themeColors: themeColors }));
+        layoutStore.set(node, {
+            x: displayX,
+            y: displayY,
+            width: measured.width,
+            height: measured.height,
+            centerX: displayX + measured.width / 2,
+            centerY: displayY + measured.height / 2,
+        });
+    });
+    nodeLinks.forEach((link) => {
+        const { parent, child } = link;
+        const childLayout = layoutStore.get(child);
+        const parentLayout = layoutStore.get(parent);
+        if (!childLayout || !parentLayout) {
+            return;
+        }
+        const childDatum = child.data;
+        const { sx, sy, tx, ty } = getEdgeAnchors(parentLayout, childLayout, child.side, edgeAlign);
+        const childColor = colorCache.get(childDatum) ??
+            (0, utils_1.getPaletteColor)(options, getNodeColorIndexes(childDatum, child.depth));
+        const parentColor = colorCache.get(parent.data) ??
+            (0, utils_1.getPaletteColor)(options, getNodeColorIndexes(parent.data, parent.depth));
+        const pathD = edgeType === 'straight'
+            ? createStraightPath(sx, sy, tx, ty)
+            : createCurvePath(sx, sy, tx, ty);
+        const gradientId = `edge-gradient-${childDatum._indexes.join('-')}`;
+        decorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: pathD, stroke: edgeColorMode === 'gradient'
+                ? `url(#${gradientId})`
+                : (childColor ?? colorPrimary), strokeWidth: edgeWidth, fill: "none" }));
+        if (edgeColorMode === 'gradient') {
+            defsElements.push((0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: sx, y1: sy, x2: tx, y2: ty, children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: parentColor ?? colorPrimary }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: childColor ?? colorPrimary })] }));
+        }
+        const appendIndex = childDatum.children?.length ?? 0;
+        const addIndexes = [...childDatum._indexes, appendIndex];
+        const btnX = childLayout.x + (childLayout.width - btnBounds.width) / 2;
+        const removeY = childLayout.y + childLayout.height + 8;
+        const addY = removeY + btnBounds.height + 6;
+        if (child.depth > 0) {
+            btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnRemove, { indexes: childDatum._indexes, x: btnX, y: removeY }));
+        }
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: addIndexes, x: btnX, y: addY }));
+    });
+    const rootLayout = layoutStore.get(mindmapRoot);
+    if (rootLayout) {
+        const rootDatum = mindmapRoot.data;
+        const appendIndex = rootDatum.children?.length ?? 0;
+        const addIndexes = [...rootDatum._indexes, appendIndex];
+        const btnX = rootLayout.x + (rootLayout.width - btnBounds.width) / 2;
+        const addY = rootLayout.y + rootLayout.height + 8 + btnBounds.height + 6;
+        btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: addIndexes, x: btnX, y: addY }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, (0, jsx_runtime_1.jsxs)(jsx_1.Group, { children: [defsElements.length > 0 ? (0, jsx_runtime_1.jsx)(jsx_1.Defs, { children: defsElements }) : null, (0, jsx_runtime_1.jsx)(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.HierarchyMindmap = HierarchyMindmap;
+(0, registry_1.registerStructure)('hierarchy-mindmap', {
+    component: exports.HierarchyMindmap,
+    composites: ['title', 'item'],
+});

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

@@ -1,7 +1,11 @@
+export * from './chart-bar';
 export * from './chart-column';
+export * from './chart-line';
+export * from './chart-pie';
 export * from './compare-binary-horizontal';
 export * from './compare-hierarchy-left-right';
 export * from './compare-hierarchy-row';
+export * from './hierarchy-mindmap';
 export * from './hierarchy-tree';
 export * from './list-column';
 export * from './list-grid';

package/lib/designs/structures/index.js

@@ -15,10 +15,14 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.registerStructure = exports.getStructures = exports.getStructure = void 0;
+__exportStar(require("./chart-bar"), exports);
 __exportStar(require("./chart-column"), exports);
+__exportStar(require("./chart-line"), exports);
+__exportStar(require("./chart-pie"), exports);
 __exportStar(require("./compare-binary-horizontal"), exports);
 __exportStar(require("./compare-hierarchy-left-right"), exports);
 __exportStar(require("./compare-hierarchy-row"), exports);
+__exportStar(require("./hierarchy-mindmap"), exports);
 __exportStar(require("./hierarchy-tree"), exports);
 __exportStar(require("./list-column"), exports);
 __exportStar(require("./list-grid"), exports);

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

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

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

@@ -166,7 +166,7 @@ const SequenceCircular = (props) => {
         btnBounds,
     });
     btnElements.unshift((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0], x: firstAddBtnX, y: firstAddBtnY }));
-    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 50, children: [titleContent, (0, jsx_runtime_1.jsxs)(jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)(jsx_1.Group, { children: arcElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: iconElements }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: itemElements }), (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: btnElements })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 70, children: [titleContent, (0, jsx_runtime_1.jsxs)(jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)(jsx_1.Group, { children: arcElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: iconElements }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: itemElements }), (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, { children: btnElements })] })] }));
 };
 exports.SequenceCircular = SequenceCircular;
 (0, registry_1.registerStructure)('sequence-circular', {

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

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

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

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

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

@@ -10,10 +10,10 @@ 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 PUCK_TOP_PATH = 'M4.49144e-05 34.4898C4.49144e-05 37.8786 0.848973 41.152 2.43571 44.2444C4.23516 47.7642 6.98514 51.0472 10.517 54.0009C21.331 63.047 39.4615 68.9814 59.9991 68.9814C80.5385 68.9814 98.6672 63.047 109.483 54.0009C113.013 51.0472 115.765 47.7642 117.564 44.2444C119.149 41.152 120 37.8786 120 34.4898C120 15.4407 93.1364 0 59.9991 0C26.8635 0 4.49144e-05 15.4407 4.49144e-05 34.4898Z';
+const PUCK_MIDDLE_PATH = 'M4.49145e-05 34.4898V53.9991C4.49145e-05 57.3879 0.848973 60.6613 2.43571 63.7556C9.75425 78.0545 32.7562 88.4907 59.999 88.4907C87.2438 88.4907 110.246 78.0545 117.564 63.7556C119.149 60.6613 120 57.3879 120 53.9991V34.4898C120 37.8786 119.149 41.152 117.564 44.2444C115.765 47.7642 113.013 51.0472 109.483 54.0009C98.6672 63.047 80.5385 68.9814 59.999 68.9814C39.4615 68.9814 21.3309 63.047 10.5169 54.0009C6.98509 51.0472 4.23516 47.7642 2.43567 44.2444C0.848928 41.152 4.49145e-05 37.8786 4.49145e-05 34.4898Z';
+const PUCK_BOTTOM_PATH = 'M0 53.9991V73.5102C0 92.5593 26.8634 108 59.999 108C93.1363 108 120 92.5593 120 73.5102V53.9991C120 57.3879 119.149 60.6613 117.564 63.7556C110.246 78.0545 87.2438 88.4907 59.999 88.4907C32.7562 88.4907 9.75425 78.0545 2.43571 63.7556C0.848973 60.6613 0 57.3879 0 53.9991Z';
+const DropShadowFilter = ((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)("feOffset", { dx: "-7", dy: "7", in: "SourceAlpha", result: "offset" }), (0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: "7.5", in: "offset", result: "blurred" }), (0, jsx_runtime_1.jsx)("feColorMatrix", { in: "blurred", type: "matrix", values: "0 0 0 0 0 \n              0 0 0 0 0 \n              0 0 0 0 0 \n              0 0 0 0.3 0", result: "shadow" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in: "SourceGraphic", in2: "shadow" })] }));
 const SequenceZigzagPucks3d = (props) => {
     const { Title, Item, data, options, gap = 80 } = props;
     const puckWidth = PUCK_WIDTH;
@@ -42,7 +42,7 @@ const SequenceZigzagPucks3d = (props) => {
         minY = Math.min(minY, puckY);
         const gradientId1 = `puck-gradient-middle-${index}`;
         const gradientId2 = `puck-gradient-bottom-${index}`;
-        puckElements.push((0, jsx_runtime_1.jsxs)(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)(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)(components_1.ShapesGroup, { width: PUCK_WIDTH, height: PUCK_HEIGHT, children: [(0, jsx_runtime_1.jsx)(jsx_1.Path, { d: PUCK_TOP_PATH, fill: currentColor || colorPrimary }), (0, jsx_runtime_1.jsx)(jsx_1.Path, { d: PUCK_MIDDLE_PATH, fill: `url(#${gradientId1})` }), (0, jsx_runtime_1.jsx)(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 })] }));
+        puckElements.push((0, jsx_runtime_1.jsxs)(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)(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)(components_1.ShapesGroup, { width: PUCK_WIDTH, height: PUCK_HEIGHT, children: [(0, jsx_runtime_1.jsx)(jsx_1.Path, { d: PUCK_TOP_PATH, fill: currentColor || colorPrimary }), (0, jsx_runtime_1.jsx)(jsx_1.Path, { d: PUCK_MIDDLE_PATH, fill: `url(#${gradientId1})` }), (0, jsx_runtime_1.jsx)(jsx_1.Path, { d: PUCK_BOTTOM_PATH, fill: `url(#${gradientId2})` }), (0, jsx_runtime_1.jsx)("rect", { fill: "transparent", y: PUCK_HEIGHT, width: PUCK_WIDTH, height: 20 })] }), (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

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

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

package/lib/editor/commands/Batch.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BatchCommand = void 0;
+class BatchCommand {
+    constructor(commands) {
+        this.commands = commands;
+    }
+    async apply(state) {
+        for (const command of this.commands) {
+            await command.apply(state);
+        }
+    }
+    async undo(state) {
+        for (let i = this.commands.length - 1; i >= 0; i--) {
+            await this.commands[i].undo(state);
+        }
+    }
+    serialize() {
+        return {
+            type: 'batch',
+            commands: this.commands.map((cmd) => cmd.serialize()),
+        };
+    }
+}
+exports.BatchCommand = BatchCommand;

package/lib/editor/commands/UpdateElement.d.ts

@@ -0,0 +1,16 @@
+import type { Element } from '../../types';
+import type { ElementProps, ICommand, IStateManager } from '../types';
+export declare class UpdateElementCommand implements ICommand {
+    private element;
+    private modified;
+    private original?;
+    constructor(element: Element, modified: Partial<ElementProps>, original?: Partial<ElementProps>);
+    apply(state: IStateManager): Promise<void>;
+    undo(state: IStateManager): Promise<void>;
+    serialize(): {
+        type: string;
+        elementId: string;
+        modified: Partial<ElementProps>;
+        original: Partial<ElementProps> | undefined;
+    };
+}