@antv/infographic 0.1.1 → 0.1.3

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

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic/jsx-runtime";
+import { mindmap } from '@antv/hierarchy';
+import { Defs, Group, Path, getElementBounds } from '../../jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getHierarchyColorIndexes, getItemComponent, getPaletteColor, getThemeColors, } from '../utils';
+import { registerStructure } from './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,
+    };
+};
+export 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 ? _jsx(Title, { title: title, desc: desc }) : null;
+    const colorPrimary = getColorPrimary(options);
+    const btnBounds = getElementBounds(_jsx(BtnAdd, { indexes: [0] }));
+    if (!items.length || !Items?.length) {
+        return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsx(Group, { children: _jsx(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) => 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 = getPaletteColor(options, colorIndexes);
+        const themeColors = 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 = getItemComponent(Items, depth);
+        const bounds = getElementBounds(_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 = 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 = getItemComponent(Items, node.depth);
+        const positionH = node.depth === 0 ? 'center' : node.side === 'left' ? 'flipped' : 'normal';
+        const themeColors = getNodeThemeColors(datum, node.depth);
+        itemElements.push(_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) ??
+            getPaletteColor(options, getNodeColorIndexes(childDatum, child.depth));
+        const parentColor = colorCache.get(parent.data) ??
+            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(_jsx(Path, { d: pathD, stroke: edgeColorMode === 'gradient'
+                ? `url(#${gradientId})`
+                : (childColor ?? colorPrimary), strokeWidth: edgeWidth, fill: "none" }));
+        if (edgeColorMode === 'gradient') {
+            defsElements.push(_jsxs("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: sx, y1: sy, x2: tx, y2: ty, children: [_jsx("stop", { offset: "0%", stopColor: parentColor ?? colorPrimary }), _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(_jsx(BtnRemove, { indexes: childDatum._indexes, x: btnX, y: removeY }));
+        }
+        btnElements.push(_jsx(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(_jsx(BtnAdd, { indexes: addIndexes, x: btnX, y: addY }));
+    }
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, _jsxs(Group, { children: [defsElements.length > 0 ? _jsx(Defs, { children: defsElements }) : null, _jsx(Group, { children: decorElements }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
+};
+registerStructure('hierarchy-mindmap', {
+    component: HierarchyMindmap,
+    composites: ['title', 'item'],
+});

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

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

@@ -139,7 +139,7 @@ export const ListSector = (props) => {
       Z
     `.trim();
     }
-    return (_jsxs(Group, { id: "infographic-container", children: [_jsx(Group, { children: sectorElements }), isFullCircle ? (_jsx(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" })) : (_jsx(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" })), _jsx(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 }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] }));
+    return (_jsxs(Group, { id: "infographic-container", children: [_jsx(Group, { children: sectorElements }), isFullCircle ? (_jsx(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" })) : (_jsx(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" })), _jsx(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 }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] }));
 };
 registerStructure('list-sector', {
     component: ListSector,

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

@@ -163,7 +163,7 @@ export const SequenceCircular = (props) => {
         btnBounds,
     });
     btnElements.unshift(_jsx(BtnAdd, { indexes: [0], x: firstAddBtnX, y: firstAddBtnY }));
-    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 50, children: [titleContent, _jsxs(Group, { children: [_jsx(Group, { children: arcElements }), _jsx(Group, { children: iconElements }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
+    return (_jsxs(FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 70, children: [titleContent, _jsxs(Group, { children: [_jsx(Group, { children: arcElements }), _jsx(Group, { children: iconElements }), _jsx(ItemsGroup, { children: itemElements }), _jsx(BtnsGroup, { children: btnElements })] })] }));
 };
 registerStructure('sequence-circular', {
     component: SequenceCircular,

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

@@ -135,12 +135,12 @@ const createCylinderElements = (index, cylinderPos, cylinderRx, cylinderRy) => {
       `, fill: `url(#cylinderGradient${index})`, stroke: "none" }));
     elements.push(_jsx(Rect, { id: `cylinder-glow-${index}`, x: x - cylinderRx, y: topY - cylinderRy * 3, width: cylinderRx * 2, height: cylinderRy * 3, fill: `url(#glowGradient${index})` }));
     elements.push(_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(_jsx(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(_jsx(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/esm/designs/structures/sequence-roadmap-vertical.js

@@ -45,7 +45,7 @@ function renderItemRow({ i, direction, x, y, color, data, itemBounds, item, Item
             : 'flipped';
     return {
         icon: (_jsx(ItemIconCircle, { indexes: [i], x: iconX, y: iconY, size: iconSize, fill: color })),
-        label: (_jsx(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: (_jsx(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: (_jsx(Item, { indexes: [i], data: data, datum: item, x: itemX, y: itemY, positionH: positionH })),
     };
 }

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

@@ -7,10 +7,10 @@ import { registerStructure } from './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 = (_jsxs("filter", { id: "sequence-zigzag-pucks-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: "-7", dy: "7" }), _jsx("feGaussianBlur", { stdDeviation: "7.5" }), _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.3 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }), _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 = (_jsxs("filter", { id: "sequence-zigzag-pucks-3d-shadow-filter", x: "-50%", y: "-50%", width: "200%", height: "200%", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feOffset", { dx: "-7", dy: "7", in: "SourceAlpha", result: "offset" }), _jsx("feGaussianBlur", { stdDeviation: "7.5", in: "offset", result: "blurred" }), _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" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "shadow" })] }));
 export const SequenceZigzagPucks3d = (props) => {
     const { Title, Item, data, options, gap = 80 } = props;
     const puckWidth = PUCK_WIDTH;
@@ -39,7 +39,7 @@ export const SequenceZigzagPucks3d = (props) => {
         minY = Math.min(minY, puckY);
         const gradientId1 = `puck-gradient-middle-${index}`;
         const gradientId2 = `puck-gradient-bottom-${index}`;
-        puckElements.push(_jsxs(Group, { x: puckX, y: puckY, id: `puck-${index}`, width: puckWidth, height: puckHeight, filter: "url(#sequence-zigzag-pucks-3d-shadow-filter)", children: [_jsxs(Defs, { children: [_jsxs("linearGradient", { id: gradientId1, x1: "115", y1: "55.9991", x2: "15.0002", y2: "55.9991", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: currentColor || colorPrimary }), _jsx("stop", { offset: "1", stopColor: currentColor || colorPrimary, stopOpacity: "0.6" })] }), _jsxs("linearGradient", { id: gradientId2, x1: "115", y1: "72.1803", x2: "15.0002", y2: "72.1803", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "#F4F4FB" }), _jsx("stop", { offset: "1", stopColor: "#8E8C90" })] })] }), _jsxs(ShapesGroup, { width: PUCK_WIDTH, height: PUCK_HEIGHT, children: [_jsx(Path, { d: PUCK_TOP_PATH, fill: currentColor || colorPrimary }), _jsx(Path, { d: PUCK_MIDDLE_PATH, fill: `url(#${gradientId1})` }), _jsx(Path, { d: PUCK_BOTTOM_PATH, fill: `url(#${gradientId2})` })] }), _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(_jsxs(Group, { x: puckX, y: puckY, id: `puck-${index}`, width: puckWidth, height: puckHeight, filter: "url(#sequence-zigzag-pucks-3d-shadow-filter)", children: [_jsxs(Defs, { children: [_jsxs("linearGradient", { id: gradientId1, x1: "115", y1: "55.9991", x2: "15.0002", y2: "55.9991", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: currentColor || colorPrimary }), _jsx("stop", { offset: "1", stopColor: currentColor || colorPrimary, stopOpacity: "0.6" })] }), _jsxs("linearGradient", { id: gradientId2, x1: "115", y1: "72.1803", x2: "15.0002", y2: "72.1803", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "#F4F4FB" }), _jsx("stop", { offset: "1", stopColor: "#8E8C90" })] })] }), _jsxs(ShapesGroup, { width: PUCK_WIDTH, height: PUCK_HEIGHT, children: [_jsx(Path, { d: PUCK_TOP_PATH, fill: currentColor || colorPrimary }), _jsx(Path, { d: PUCK_MIDDLE_PATH, fill: `url(#${gradientId1})` }), _jsx(Path, { d: PUCK_BOTTOM_PATH, fill: `url(#${gradientId2})` }), _jsx("rect", { fill: "transparent", y: PUCK_HEIGHT, width: PUCK_WIDTH, height: 20 })] }), _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/esm/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/esm/editor/commands/Batch.js

@@ -0,0 +1,21 @@
+export 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()),
+        };
+    }
+}

package/esm/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;
+    };
+}

package/esm/editor/commands/UpdateElement.js

@@ -0,0 +1,83 @@
+import { getAttributes, getIconAttrs, getIconEntity, getTextElementProps, isEditableText, isIconElement, setAttributes, updateIconElement, updateTextElement, } from '../../utils';
+export class UpdateElementCommand {
+    constructor(element, modified, original) {
+        this.element = element;
+        this.modified = modified;
+        const computedOriginal = getOriginalProps(element, modified);
+        this.original = mergeOriginalProps(computedOriginal, original);
+    }
+    async apply(state) {
+        updateElement(this.element, this.modified);
+        state.updateElement(this.element, this.modified);
+    }
+    async undo(state) {
+        if (this.original) {
+            updateElement(this.element, this.original);
+            state.updateElement(this.element, this.original);
+        }
+    }
+    serialize() {
+        return {
+            type: 'update-element',
+            elementId: this.element.id,
+            modified: this.modified,
+            original: this.original,
+        };
+    }
+}
+function updateElement(element, props) {
+    if (isEditableText(element)) {
+        updateTextElement(element, props);
+    }
+    else if (isIconElement(element)) {
+        updateIconElement(element, undefined, props.attributes);
+    }
+    else if (props.attributes) {
+        setAttributes(element, props.attributes);
+    }
+}
+function getOriginalProps(element, modified) {
+    const modifiedAttrKeys = Object.keys(modified.attributes || {});
+    const originalAttributes = getAttributes(element, modifiedAttrKeys, false);
+    const assignModifiedAttributes = (attrs) => {
+        if (!attrs)
+            return;
+        modifiedAttrKeys.forEach((key) => {
+            if (key in attrs)
+                originalAttributes[key] = attrs[key];
+        });
+    };
+    const original = {
+        ...modified,
+        attributes: originalAttributes,
+    };
+    if (isEditableText(element)) {
+        const { attributes } = getTextElementProps(element);
+        assignModifiedAttributes(attributes);
+    }
+    else if (isIconElement(element)) {
+        const entity = getIconEntity(element);
+        if (!entity)
+            return;
+        assignModifiedAttributes(getIconAttrs(element));
+    }
+    // TODO illus
+    return original;
+}
+function mergeOriginalProps(computed, provided) {
+    if (!computed)
+        return provided;
+    if (!provided)
+        return computed;
+    const mergedAttributes = {
+        ...(computed.attributes || {}),
+        ...(provided.attributes || {}),
+    };
+    return {
+        ...computed,
+        ...provided,
+        attributes: Object.keys(mergedAttributes).length
+            ? mergedAttributes
+            : undefined,
+    };
+}

package/esm/editor/commands/UpdateOptions.d.ts

@@ -0,0 +1,14 @@
+import type { ParsedInfographicOptions } from '../../options';
+import type { ICommand, IStateManager } from '../types';
+export declare class UpdateOptionsCommand implements ICommand {
+    private options;
+    private original?;
+    constructor(options: Partial<ParsedInfographicOptions>, original?: ParsedInfographicOptions | undefined);
+    apply(state: IStateManager): Promise<void>;
+    undo(state: IStateManager): Promise<void>;
+    serialize(): {
+        type: string;
+        options: Partial<ParsedInfographicOptions>;
+        original: ParsedInfographicOptions | undefined;
+    };
+}

package/esm/editor/commands/UpdateOptions.js

@@ -0,0 +1,25 @@
+export class UpdateOptionsCommand {
+    constructor(options, original) {
+        this.options = options;
+        this.original = original;
+    }
+    async apply(state) {
+        const prev = state.getOptions();
+        if (!this.original) {
+            this.original = prev;
+        }
+        state.updateOptions({ ...prev, ...this.options });
+    }
+    async undo(state) {
+        if (this.original) {
+            state.updateOptions(this.original);
+        }
+    }
+    serialize() {
+        return {
+            type: 'update-options',
+            options: this.options,
+            original: this.original,
+        };
+    }
+}

package/esm/editor/commands/UpdateText.d.ts

@@ -0,0 +1,16 @@
+import type { TextElement } from '../../types';
+import type { ICommand, IStateManager } from '../types';
+export declare class UpdateTextCommand implements ICommand {
+    private element;
+    private originalText;
+    private modifiedText;
+    constructor(element: TextElement, newText: string, originalText?: string);
+    apply(state: IStateManager): Promise<void>;
+    undo(state: IStateManager): Promise<void>;
+    serialize(): {
+        type: string;
+        elementId: string;
+        original: string;
+        modified: string;
+    };
+}

package/esm/editor/commands/UpdateText.js

@@ -0,0 +1,40 @@
+import { getElementRole, getTextContent, setTextContent } from '../../utils';
+import { getIndexesFromElement } from '../utils';
+export class UpdateTextCommand {
+    constructor(element, newText, originalText) {
+        this.element = element;
+        this.originalText = originalText ?? getTextContent(element);
+        this.modifiedText = newText;
+    }
+    async apply(state) {
+        if (this.originalText === this.modifiedText)
+            return;
+        setTextContent(this.element, this.modifiedText);
+        updateItemText(state, this.element, this.modifiedText);
+    }
+    async undo(state) {
+        if (this.originalText === this.modifiedText)
+            return;
+        setTextContent(this.element, this.originalText);
+        updateItemText(state, this.element, this.originalText);
+    }
+    serialize() {
+        return {
+            type: 'update-text',
+            elementId: this.element.id,
+            original: this.originalText,
+            modified: this.modifiedText,
+        };
+    }
+}
+function updateItemText(state, element, text) {
+    const role = getElementRole(element);
+    if (role.startsWith('item-')) {
+        const key = role.replace('item-', '');
+        const indexes = getIndexesFromElement(element);
+        state.updateItemDatum(indexes, { [key]: text });
+    }
+    else {
+        state.updateData(role, text);
+    }
+}

package/esm/editor/commands/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Batch';
+export * from './UpdateElement';
+export * from './UpdateOptions';
+export * from './UpdateText';

package/esm/editor/commands/index.js

@@ -0,0 +1,4 @@
+export * from './Batch';
+export * from './UpdateElement';
+export * from './UpdateOptions';
+export * from './UpdateText';

package/esm/editor/editor.d.ts

@@ -0,0 +1,16 @@
+import type { ParsedInfographicOptions } from '../options';
+import type { IEventEmitter } from '../types';
+import { InteractionManager } from './managers';
+import type { ICommandManager, IEditor, IPluginManager, IStateManager } from './types';
+export declare class Editor implements IEditor {
+    private emitter;
+    private document;
+    private options;
+    state: IStateManager;
+    commander: ICommandManager;
+    plugin: IPluginManager;
+    interaction: InteractionManager;
+    constructor(emitter: IEventEmitter, document: SVGSVGElement, options: ParsedInfographicOptions);
+    getDocument(): SVGSVGElement;
+    destroy(): void;
+}

package/esm/editor/editor.js

@@ -0,0 +1,50 @@
+import { CommandManager, InteractionManager, PluginManager, StateManager, } from './managers';
+export class Editor {
+    constructor(emitter, document, options) {
+        this.emitter = emitter;
+        this.document = document;
+        this.options = options;
+        if (!document.isConnected) {
+            throw new Error('The provided document is not connected to the DOM.');
+        }
+        document.style.userSelect = 'none';
+        const commander = new CommandManager();
+        const state = new StateManager();
+        const plugin = new PluginManager();
+        const interaction = new InteractionManager();
+        commander.init({ state, emitter });
+        state.init({
+            emitter,
+            editor: this,
+            commander,
+            options,
+        });
+        plugin.init({
+            emitter,
+            editor: this,
+            commander,
+            state,
+        }, options.plugins);
+        interaction.init({
+            emitter,
+            editor: this,
+            commander,
+            state,
+            interactions: options.interactions,
+        });
+        this.commander = commander;
+        this.state = state;
+        this.plugin = plugin;
+        this.interaction = interaction;
+    }
+    getDocument() {
+        return this.document;
+    }
+    destroy() {
+        this.document.style.userSelect = '';
+        this.interaction.destroy();
+        this.plugin.destroy();
+        this.commander.destroy();
+        this.state.destroy();
+    }
+}

package/esm/editor/index.d.ts

@@ -0,0 +1,4 @@
+export { Editor } from './editor';
+export * from './interactions';
+export * from './plugins';
+export type * from './types';

package/esm/editor/index.js

@@ -0,0 +1,3 @@
+export { Editor } from './editor';
+export * from './interactions';
+export * from './plugins';