@antv/infographic 0.2.7 → 0.2.8

package/lib/designs/structures/relation-dagre-flow.js

@@ -0,0 +1,501 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RelationDagreFlow = void 0;
+const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
+const layout_1 = require("@antv/layout");
+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_NODE_SEP = 50;
+const DEFAULT_RANK_SEP = 70;
+const DEFAULT_EDGE_SEP = 10;
+const DEFAULT_EDGE_WIDTH = 2;
+const DEFAULT_PADDING = 30;
+const checkUndirectedCycle = (nodeIds, edges) => {
+    const adj = new Map();
+    nodeIds.forEach((id) => adj.set(id, []));
+    for (const edge of edges) {
+        if (edge.source === edge.target)
+            return true;
+        adj.get(edge.source)?.push({ target: edge.target, edgeId: edge.id });
+        adj.get(edge.target)?.push({ target: edge.source, edgeId: edge.id });
+    }
+    const visited = new Set();
+    const dfs = (u, parentEdgeId) => {
+        visited.add(u);
+        const neighbors = adj.get(u) || [];
+        for (const { target: v, edgeId } of neighbors) {
+            if (edgeId === parentEdgeId)
+                continue;
+            if (visited.has(v))
+                return true;
+            if (dfs(v, edgeId))
+                return true;
+        }
+        return false;
+    };
+    for (const node of nodeIds) {
+        if (!visited.has(node)) {
+            if (dfs(node, null))
+                return true;
+        }
+    }
+    return false;
+};
+const RelationDagreFlow = (props) => {
+    const { Title, Item, data, rankdir = 'TB', nodesep = DEFAULT_NODE_SEP, ranksep = DEFAULT_RANK_SEP, edgesep = DEFAULT_EDGE_SEP, edgeWidth = DEFAULT_EDGE_WIDTH, showConnections = true, edgeColorMode = 'gradient', edgeStyle = 'solid', edgeDashPattern = '5,5', edgeCornerRadius = 12, edgeRouting = 'orth', showArrow = true, arrowType = 'triangle', padding = DEFAULT_PADDING, edgeAnimation = 'none', edgeAnimationSpeed = 1, options, } = props;
+    const { title, desc, items = [] } = data;
+    const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
+    if (!Item || 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, { children: (0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0], x: 0, y: 0 }) })] }));
+    }
+    const nodeMetaMap = new Map();
+    const nodeSizeMap = new Map();
+    const nodeColorMap = new Map();
+    const nodeIdsByIndex = new Map();
+    const nodeIdSet = new Set();
+    const colorGroupIndexMap = new Map();
+    let nextColorGroupIndex = 0;
+    const nodes = items.map((item, index) => {
+        const datum = item;
+        const id = String(datum.id ?? index);
+        const indexes = [index];
+        let primary;
+        const groupKey = String(datum.group ?? '');
+        if (groupKey) {
+            let groupIndex = colorGroupIndexMap.get(groupKey);
+            if (groupIndex == null) {
+                groupIndex = nextColorGroupIndex;
+                colorGroupIndexMap.set(groupKey, groupIndex);
+                nextColorGroupIndex += 1;
+            }
+            primary = (0, utils_1.getPaletteColor)(options, [groupIndex]);
+        }
+        else {
+            primary = (0, utils_1.getPaletteColor)(options, indexes);
+        }
+        const themeColors = primary
+            ? (0, utils_1.getThemeColors)({ colorPrimary: primary }, options)
+            : undefined;
+        if (primary) {
+            nodeColorMap.set(id, primary);
+        }
+        const bounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Item, { indexes: indexes, data: data, datum: datum, positionH: "center", positionV: "middle", themeColors: themeColors }));
+        nodeSizeMap.set(id, bounds);
+        nodeMetaMap.set(id, { id, indexes, datum, themeColors });
+        nodeIdsByIndex.set(index, id);
+        nodeIdSet.add(id);
+        return { id, parentId: datum.parentId };
+    });
+    const relations = data.relations ?? [];
+    const resolveNodeId = (value) => {
+        if (value == null)
+            return null;
+        const direct = String(value);
+        if (nodeIdSet.has(direct))
+            return direct;
+        const asIndex = Number(value);
+        if (!Number.isNaN(asIndex)) {
+            const mapped = nodeIdsByIndex.get(asIndex);
+            if (mapped)
+                return mapped;
+        }
+        return null;
+    };
+    const edges = relations
+        .map((relation, index) => {
+        const source = resolveNodeId(relation.from);
+        const target = resolveNodeId(relation.to);
+        if (!source || !target)
+            return null;
+        return {
+            id: relation.id ? String(relation.id) : `edge-${index}`,
+            source,
+            target,
+            relation,
+        };
+    })
+        .filter(Boolean);
+    const hasCycle = checkUndirectedCycle(Array.from(nodeIdSet), edges);
+    const finalEdgeRouting = hasCycle ? 'dagre' : edgeRouting;
+    const layout = new layout_1.DagreLayout({
+        rankdir,
+        nodesep,
+        ranksep,
+        edgesep,
+        controlPoints: true,
+        nodeSize: (node) => {
+            const id = String(node.id ?? '');
+            const bounds = nodeSizeMap.get(id);
+            return bounds ? [bounds.width, bounds.height] : [0, 0];
+        },
+    });
+    layout.execute({ nodes, edges });
+    const nodeLayouts = [];
+    layout.forEachNode((node) => {
+        const id = String(node.id);
+        const meta = nodeMetaMap.get(id);
+        if (!meta)
+            return;
+        const bounds = nodeSizeMap.get(id);
+        const width = bounds?.width ?? 0;
+        const height = bounds?.height ?? 0;
+        const x = (node.x ?? 0) - width / 2;
+        const y = (node.y ?? 0) - height / 2;
+        nodeLayouts.push({
+            ...meta,
+            x,
+            y,
+            width,
+            height,
+            centerX: x + width / 2,
+            centerY: y + height / 2,
+        });
+    });
+    if (nodeLayouts.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, { children: (0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: [0], x: 0, y: 0 }) })] }));
+    }
+    const minX = Math.min(...nodeLayouts.map((node) => node.x));
+    const minY = Math.min(...nodeLayouts.map((node) => node.y));
+    const offsetX = padding - minX;
+    const offsetY = padding - minY;
+    const nodeLayoutById = new Map();
+    const itemElements = [];
+    nodeLayouts.forEach((node) => {
+        const displayX = node.x + offsetX;
+        const displayY = node.y + offsetY;
+        const positionH = rankdir === 'LR' ? 'normal' : rankdir === 'RL' ? 'flipped' : 'center';
+        const positionV = rankdir === 'TB' ? 'normal' : rankdir === 'BT' ? 'flipped' : 'middle';
+        itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: node.indexes, datum: node.datum, data: data, x: displayX, y: displayY, positionH: positionH, positionV: positionV, themeColors: node.themeColors }));
+        nodeLayoutById.set(node.id, {
+            ...node,
+            x: displayX,
+            y: displayY,
+            centerX: displayX + node.width / 2,
+            centerY: displayY + node.height / 2,
+        });
+    });
+    const defsElements = [];
+    const decorElements = [];
+    if (showConnections) {
+        const defaultStroke = (0, utils_1.getColorPrimary)(options);
+        const themeColors = (0, utils_1.getThemeColors)(options.themeConfig, options);
+        const labelBackground = themeColors?.colorBg ?? '#ffffff';
+        const labelTextColor = themeColors?.colorText ?? defaultStroke;
+        const arrowSize = Math.max(10, edgeWidth * 4);
+        const isVertical = rankdir === 'TB' || rankdir === 'BT';
+        const enableAnimation = edgeAnimation === 'ant-line';
+        const animationDashArray = enableAnimation ? edgeDashPattern : '';
+        const staticDashArray = !enableAnimation && edgeStyle === 'dashed' ? edgeDashPattern : '';
+        const actualDashArray = enableAnimation
+            ? animationDashArray
+            : staticDashArray;
+        const dashPatternLength = enableAnimation
+            ? animationDashArray
+                .split(',')
+                .reduce((sum, val) => sum + parseFloat(val.trim() || '0'), 0)
+            : 0;
+        const animationDuration = enableAnimation && dashPatternLength > 0
+            ? `${dashPatternLength / (edgeAnimationSpeed * 10)}s`
+            : '1s';
+        const straightCornerRadius = edgeCornerRadius;
+        const createStraightPath = (points, dx, dy) => points
+            .map(([x, y], index) => {
+            const prefix = index === 0 ? 'M' : 'L';
+            return `${prefix} ${x + dx} ${y + dy}`;
+        })
+            .join(' ');
+        const createRoundedPath = (points, radius, dx, dy) => {
+            if (points.length < 2)
+                return '';
+            const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+            const toPoint = ([x, y]) => ({
+                x: x + dx,
+                y: y + dy,
+            });
+            const output = [];
+            const first = toPoint(points[0]);
+            output.push(`M ${first.x} ${first.y}`);
+            if (points.length === 2) {
+                const last = toPoint(points[1]);
+                output.push(`L ${last.x} ${last.y}`);
+                return output.join(' ');
+            }
+            for (let i = 1; i < points.length - 1; i += 1) {
+                const prev = points[i - 1];
+                const curr = points[i];
+                const next = points[i + 1];
+                const v0x = curr[0] - prev[0];
+                const v0y = curr[1] - prev[1];
+                const v1x = next[0] - curr[0];
+                const v1y = next[1] - curr[1];
+                const d0 = Math.hypot(v0x, v0y);
+                const d1 = Math.hypot(v1x, v1y);
+                if (d0 === 0 || d1 === 0) {
+                    const currPoint = toPoint(curr);
+                    output.push(`L ${currPoint.x} ${currPoint.y}`);
+                    continue;
+                }
+                const r = clamp(radius, 0, Math.min(d0, d1) / 2);
+                if (r === 0) {
+                    const currPoint = toPoint(curr);
+                    output.push(`L ${currPoint.x} ${currPoint.y}`);
+                    continue;
+                }
+                const u0x = v0x / d0;
+                const u0y = v0y / d0;
+                const u1x = v1x / d1;
+                const u1y = v1y / d1;
+                const start = toPoint([curr[0] - u0x * r, curr[1] - u0y * r]);
+                const end = toPoint([curr[0] + u1x * r, curr[1] + u1y * r]);
+                output.push(`L ${start.x} ${start.y}`);
+                const currPoint = toPoint(curr);
+                output.push(`Q ${currPoint.x} ${currPoint.y} ${end.x} ${end.y}`);
+            }
+            const last = toPoint(points[points.length - 1]);
+            output.push(`L ${last.x} ${last.y}`);
+            return output.join(' ');
+        };
+        const createArrowElements = (x, y, angle, type, fillColor) => {
+            const ux = Math.cos(angle);
+            const uy = Math.sin(angle);
+            const px = -uy;
+            const py = ux;
+            const length = arrowSize;
+            const halfWidth = arrowSize * 0.55;
+            if (type === 'arrow') {
+                const leftX = x - ux * length + px * halfWidth;
+                const leftY = y - uy * length + py * halfWidth;
+                const rightX = x - ux * length - px * halfWidth;
+                const rightY = y - uy * length - py * halfWidth;
+                return [
+                    (0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${leftX} ${leftY} L ${x} ${y} L ${rightX} ${rightY}`, stroke: fillColor, strokeWidth: Math.max(1.5, edgeWidth), strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+                ];
+            }
+            if (type === 'diamond') {
+                const diamondLength = length * 1.25;
+                const diamondWidth = halfWidth * 0.75;
+                const midX = x - ux * diamondLength * 0.5;
+                const midY = y - uy * diamondLength * 0.5;
+                const diamondPoints = [
+                    { x, y },
+                    { x: midX + px * diamondWidth, y: midY + py * diamondWidth },
+                    { x: x - ux * diamondLength, y: y - uy * diamondLength },
+                    { x: midX - px * diamondWidth, y: midY - py * diamondWidth },
+                ];
+                return [
+                    (0, jsx_runtime_1.jsx)(jsx_1.Polygon, { points: diamondPoints, fill: fillColor, stroke: fillColor, strokeWidth: Math.max(1, edgeWidth * 0.8) }),
+                ];
+            }
+            const trianglePoints = [
+                { x, y },
+                {
+                    x: x - ux * length + px * halfWidth,
+                    y: y - uy * length + py * halfWidth,
+                },
+                {
+                    x: x - ux * length - px * halfWidth,
+                    y: y - uy * length - py * halfWidth,
+                },
+            ];
+            return [
+                (0, jsx_runtime_1.jsx)(jsx_1.Polygon, { points: trianglePoints, fill: fillColor, stroke: fillColor, strokeWidth: Math.max(1, edgeWidth * 0.8) }),
+            ];
+        };
+        const getMidPoint = (points) => {
+            if (points.length === 0)
+                return null;
+            if (points.length === 1)
+                return points[0];
+            let total = 0;
+            const segments = [];
+            for (let i = 0; i < points.length - 1; i += 1) {
+                const start = points[i];
+                const end = points[i + 1];
+                const length = Math.hypot(end[0] - start[0], end[1] - start[1]);
+                segments.push({ length, start, end });
+                total += length;
+            }
+            if (total === 0)
+                return points[0];
+            let target = total / 2;
+            for (let i = 0; i < segments.length; i += 1) {
+                const segment = segments[i];
+                if (target <= segment.length || i === segments.length - 1) {
+                    const ratio = segment.length === 0
+                        ? 0
+                        : Math.max(0, Math.min(1, target / segment.length));
+                    return [
+                        segment.start[0] + (segment.end[0] - segment.start[0]) * ratio,
+                        segment.start[1] + (segment.end[1] - segment.start[1]) * ratio,
+                    ];
+                }
+                target -= segment.length;
+            }
+            return points[Math.floor(points.length / 2)];
+        };
+        const getOrthEdgeEndpoints = (sourceId, targetId) => {
+            const source = nodeLayoutById.get(sourceId);
+            const target = nodeLayoutById.get(targetId);
+            if (!source || !target)
+                return null;
+            if (rankdir === 'TB') {
+                return {
+                    start: [source.centerX, source.y + source.height],
+                    end: [target.centerX, target.y],
+                };
+            }
+            if (rankdir === 'BT') {
+                return {
+                    start: [source.centerX, source.y],
+                    end: [target.centerX, target.y + target.height],
+                };
+            }
+            if (rankdir === 'LR') {
+                return {
+                    start: [source.x + source.width, source.centerY],
+                    end: [target.x, target.centerY],
+                };
+            }
+            return {
+                start: [source.x, source.centerY],
+                end: [target.x + target.width, target.centerY],
+            };
+        };
+        const getOrthEdgePoints = (sourceId, targetId) => {
+            const endpoints = getOrthEdgeEndpoints(sourceId, targetId);
+            if (!endpoints)
+                return null;
+            const { start, end } = endpoints;
+            if (isVertical) {
+                const midY = start[1] + (end[1] - start[1]) / 2;
+                return {
+                    start,
+                    end,
+                    points: [start, [start[0], midY], [end[0], midY], end],
+                };
+            }
+            const midX = start[0] + (end[0] - start[0]) / 2;
+            return {
+                start,
+                end,
+                points: [start, [midX, start[1]], [midX, end[1]], end],
+            };
+        };
+        layout.forEachEdge((edge) => {
+            const normalizePoints = (rawPoints) => {
+                if (!Array.isArray(rawPoints))
+                    return [];
+                return rawPoints
+                    .map((point) => {
+                    if (!point)
+                        return null;
+                    if (Array.isArray(point) && point.length >= 2) {
+                        return [Number(point[0]), Number(point[1])];
+                    }
+                    return null;
+                })
+                    .filter((point) => !!point && Number.isFinite(point[0]) && Number.isFinite(point[1]));
+            };
+            const fallbackPoints = () => {
+                const source = nodeLayoutById.get(String(edge.source));
+                const target = nodeLayoutById.get(String(edge.target));
+                if (!source || !target)
+                    return [];
+                return [
+                    [source.centerX - offsetX, source.centerY - offsetY],
+                    [target.centerX - offsetX, target.centerY - offsetY],
+                ];
+            };
+            const useOrthRouting = finalEdgeRouting === 'orth';
+            const orthEdge = useOrthRouting
+                ? getOrthEdgePoints(String(edge.source), String(edge.target))
+                : null;
+            const normalized = useOrthRouting ? [] : normalizePoints(edge.points);
+            const points = useOrthRouting
+                ? (orthEdge?.points ?? [])
+                : normalized.length
+                    ? normalized
+                    : fallbackPoints();
+            if (!points.length)
+                return;
+            const pointsOffsetX = useOrthRouting ? 0 : offsetX;
+            const pointsOffsetY = useOrthRouting ? 0 : offsetY;
+            const startPoint = useOrthRouting
+                ? (orthEdge?.start ?? points[0])
+                : points[0];
+            const endPoint = useOrthRouting
+                ? (orthEdge?.end ?? points[points.length - 1])
+                : points[points.length - 1];
+            const relation = edge
+                ._original?.relation;
+            const sourceColor = nodeColorMap.get(String(edge.source)) ?? defaultStroke;
+            const targetColor = nodeColorMap.get(String(edge.target)) ?? defaultStroke;
+            const gradientKey = `edge-gradient-${String(sourceColor)}-${String(targetColor)}`.replace(/[^a-zA-Z0-9_-]/g, '');
+            const edgeStroke = edgeColorMode === 'gradient' ? `url(#${gradientKey})` : defaultStroke;
+            let pathD = '';
+            if (straightCornerRadius > 0) {
+                pathD = createRoundedPath(points, straightCornerRadius, pointsOffsetX, pointsOffsetY);
+            }
+            else {
+                pathD = createStraightPath(points, pointsOffsetX, pointsOffsetY);
+            }
+            if (!pathD)
+                return;
+            const pathElement = ((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: pathD, stroke: edgeStroke, strokeWidth: edgeWidth, strokeDasharray: actualDashArray, fill: "none", "data-element-type": "shape", children: enableAnimation && ((0, jsx_runtime_1.jsx)("animate", { attributeName: "stroke-dashoffset", from: String(dashPatternLength), to: "0", dur: animationDuration, repeatCount: "indefinite" })) }));
+            decorElements.push(pathElement);
+            if (edgeColorMode === 'gradient') {
+                const start = startPoint;
+                const end = endPoint;
+                defsElements.push((0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientKey, gradientUnits: "userSpaceOnUse", x1: start[0] + pointsOffsetX, y1: start[1] + pointsOffsetY, x2: end[0] + pointsOffsetX, y2: end[1] + pointsOffsetY, children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: sourceColor }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: targetColor })] }));
+            }
+            if (relation?.label) {
+                let labelPoint = null;
+                const midPoint = getMidPoint(points);
+                if (midPoint) {
+                    labelPoint = [
+                        midPoint[0] + pointsOffsetX,
+                        midPoint[1] + pointsOffsetY,
+                    ];
+                }
+                if (labelPoint) {
+                    const labelText = String(relation.label);
+                    const labelBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(jsx_1.Text, { fontSize: 14, fontWeight: "normal", children: labelText }));
+                    const labelX = labelPoint[0] - labelBounds.width / 2;
+                    const labelY = labelPoint[1] - labelBounds.height / 2;
+                    decorElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: labelX, y: labelY, width: labelBounds.width, height: labelBounds.height, fontSize: 14, fontWeight: "normal", alignHorizontal: "center", alignVertical: "middle", fill: labelTextColor, backgroundColor: labelBackground, children: labelText }));
+                }
+            }
+            const effectiveShowArrow = relation?.showArrow ?? showArrow;
+            const direction = relation?.direction ?? 'forward';
+            const edgeArrowType = relation?.arrowType ?? arrowType;
+            const lastIndex = points.length - 1;
+            if (effectiveShowArrow && points.length > 1) {
+                if (direction === 'forward' || direction === 'both') {
+                    const head = points[lastIndex];
+                    const tail = points[lastIndex - 1];
+                    const angle = Math.atan2(head[1] - tail[1], head[0] - tail[0]);
+                    const arrowFill = edgeColorMode === 'gradient' ? targetColor : defaultStroke;
+                    const arrowElements = createArrowElements(head[0] + pointsOffsetX, head[1] + pointsOffsetY, angle, edgeArrowType, arrowFill);
+                    decorElements.push(...arrowElements);
+                }
+                if (direction === 'both') {
+                    const head = points[0];
+                    const tail = points[1];
+                    const angle = Math.atan2(head[1] - tail[1], head[0] - tail[0]);
+                    const arrowFill = edgeColorMode === 'gradient' ? sourceColor : defaultStroke;
+                    const arrowElements = createArrowElements(head[0] + pointsOffsetX, head[1] + pointsOffsetY, angle, edgeArrowType, arrowFill);
+                    decorElements.push(...arrowElements);
+                }
+            }
+        });
+    }
+    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: [(0, jsx_runtime_1.jsx)(jsx_1.Defs, { children: defsElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { width: 0, height: 0, children: decorElements }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: itemElements }), (0, jsx_runtime_1.jsx)(components_1.BtnsGroup, {})] })] }));
+};
+exports.RelationDagreFlow = RelationDagreFlow;
+(0, registry_1.registerStructure)('relation-dagre-flow', {
+    component: exports.RelationDagreFlow,
+    composites: ['title', 'item'],
+});

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

@@ -1,7 +1,7 @@
 /**
  * 层级结构着色模式类型
  */
-export type HierarchyColorMode = 'level' | 'branch' | 'node' | 'node-flat';
+export type HierarchyColorMode = 'level' | 'branch' | 'node' | 'node-flat' | 'group';
 /**
  * 层级节点信息接口
  */

package/lib/editor/plugins/edit-bar/edit-bar.js

@@ -4,7 +4,6 @@ exports.EditBar = void 0;
 const constants_1 = require("../../../constants");
 const jsx_1 = require("../../../jsx");
 const utils_1 = require("../../../utils");
-const utils_2 = require("../../utils");
 const base_1 = require("../base");
 const edit_items_1 = require("./edit-items");
 class EditBar extends base_1.Plugin {
@@ -174,24 +173,43 @@ class EditBar extends base_1.Plugin {
     placeEditBar(container, selection) {
         if (selection.length === 0)
             return;
-        const svg = this.editor.getDocument();
-        const combinedBounds = (0, jsx_1.getCombinedBounds)(selection.map((element) => (0, utils_2.getElementViewportBounds)(svg, element)));
+        const combinedBounds = (0, jsx_1.getCombinedBounds)(selection.map((element) => element.getBoundingClientRect()));
         const offsetParent = container.offsetParent ??
             document.documentElement;
-        const parentRect = offsetParent.getBoundingClientRect();
         const viewportHeight = document.documentElement.clientHeight;
+        const viewportWidth = document.documentElement.clientWidth;
         const containerRect = container.getBoundingClientRect();
         const offset = 8;
-        const matrix = (0, utils_2.getScreenCTM)(svg);
-        const anchorTop = new DOMPoint(combinedBounds.x + combinedBounds.width / 2, combinedBounds.y).matrixTransform(matrix);
-        const anchorBottom = new DOMPoint(combinedBounds.x + combinedBounds.width / 2, combinedBounds.y + combinedBounds.height).matrixTransform(matrix);
+        const anchorTop = {
+            x: combinedBounds.x + combinedBounds.width / 2,
+            y: combinedBounds.y,
+        };
+        const anchorBottom = {
+            x: anchorTop.x,
+            y: combinedBounds.y + combinedBounds.height,
+        };
         const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-        let left = anchorTop.x - parentRect.left - containerRect.width / 2;
-        left = clamp(left, 0, Math.max(parentRect.width - containerRect.width, 0));
         // Use viewport space, not container space, to decide whether we have enough room above.
         const spaceAbove = anchorTop.y - offset;
         const spaceBelow = viewportHeight - anchorBottom.y - offset;
         const shouldPlaceAbove = spaceAbove >= containerRect.height || spaceAbove >= spaceBelow;
+        if (offsetParent === document.body ||
+            offsetParent === document.documentElement) {
+            const scrollX = window.scrollX || document.documentElement.scrollLeft;
+            const scrollY = window.scrollY || document.documentElement.scrollTop;
+            let left = scrollX + anchorTop.x - containerRect.width / 2;
+            left = clamp(left, scrollX, scrollX + Math.max(viewportWidth - containerRect.width, 0));
+            let top = shouldPlaceAbove
+                ? scrollY + anchorTop.y - containerRect.height - offset
+                : scrollY + anchorBottom.y + offset;
+            top = clamp(top, scrollY, scrollY + Math.max(viewportHeight - containerRect.height, 0));
+            container.style.left = `${left}px`;
+            container.style.top = `${top}px`;
+            return;
+        }
+        const parentRect = offsetParent.getBoundingClientRect();
+        let left = anchorTop.x - parentRect.left - containerRect.width / 2;
+        left = clamp(left, 0, Math.max(parentRect.width - containerRect.width, 0));
         let top = shouldPlaceAbove
             ? anchorTop.y - parentRect.top - containerRect.height - offset
             : anchorBottom.y - parentRect.top + offset;

package/lib/jsx/global.d.ts

@@ -65,6 +65,7 @@ declare global {
             symbol: SVGAttributes<SVGSymbolElement>;
             text: SVGAttributes<SVGTextElement>;
             textPath: SVGAttributes<SVGTextPathElement>;
+            title: SVGAttributes<SVGTitleElement>;
             tspan: SVGAttributes<SVGTSpanElement>;
             use: SVGAttributes<SVGUseElement>;
             view: SVGAttributes<SVGViewElement>;

package/lib/jsx/types/element.d.ts

@@ -21,8 +21,10 @@ export interface GroupProps extends BaseGeometryProps {
     children?: JSXNode;
 }
 export interface RectProps extends BaseGeometryProps {
+    children?: JSXNode;
 }
 export interface EllipseProps extends BaseGeometryProps {
+    children?: JSXNode;
 }
 export interface TextProps extends BaseGeometryProps {
     lineHeight?: number;
@@ -32,10 +34,12 @@ export interface TextProps extends BaseGeometryProps {
     backgroundColor?: string;
     backgroundOpacity?: number;
     backgroundRadius?: number;
-    children?: string | number;
+    children?: string | number | JSXNode;
 }
 export interface PathProps extends BaseGeometryProps {
+    children?: JSXNode;
 }
 export interface PolygonProps extends Omit<BaseGeometryProps, 'points'> {
     points?: Point[];
+    children?: JSXNode;
 }

package/lib/jsx/utils/svg.js

@@ -39,6 +39,8 @@ const SPECIFIC_ATTRS_MAP = {
     textLength: 'textLength',
     lengthAdjust: 'lengthAdjust',
     // Animation
+    attributeName: 'attributeName',
+    attributeType: 'attributeType',
     repeatCount: 'repeatCount',
     repeatDur: 'repeatDur',
     calcMode: 'calcMode',

package/lib/renderer/composites/icon.js

@@ -9,8 +9,10 @@ function renderItemIcon(svg, node, datum, options) {
     if (!value)
         return null;
     const { themeConfig } = options;
+    const dataAttrs = datum.attributes?.icon;
     const attrs = {
         ...themeConfig.item?.icon,
+        ...dataAttrs,
     };
     const parsedAttrs = (0, utils_2.parseDynamicAttributes)(node, attrs);
     return createIcon(svg, node, value, parsedAttrs, datum);

package/lib/renderer/composites/illus.d.ts

@@ -1,4 +1,4 @@
 import { type ResourceConfig } from '../../resource';
 import type { IllusElement, ItemDatum } from '../../types';
-export declare function renderIllus(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined, datum?: ItemDatum): IllusElement | null;
+export declare function renderIllus(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined, datum?: ItemDatum, attrs?: Record<string, any>): IllusElement | null;
 export declare function renderItemIllus(svg: SVGSVGElement, node: SVGElement, datum: ItemDatum): SVGGElement | null;

package/lib/renderer/composites/illus.js

@@ -4,25 +4,30 @@ exports.renderIllus = renderIllus;
 exports.renderItemIllus = renderItemIllus;
 const resource_1 = require("../../resource");
 const utils_1 = require("../../utils");
-function renderIllus(svg, node, value, datum) {
+function renderIllus(svg, node, value, datum, attrs = {}) {
     if (!value)
         return null;
     const config = (0, resource_1.parseResourceConfig)(value);
     if (!config)
         return null;
     const id = (0, resource_1.getResourceId)(config);
+    if (attrs && Object.keys(attrs).length > 0) {
+        (0, utils_1.setAttributes)(node, attrs);
+    }
     const clipPathId = createClipPath(svg, node, id);
     (0, resource_1.loadResource)(svg, 'illus', config, datum);
     const { data, color } = config;
     return createIllusElement(id, {
         ...parseIllusBounds(node),
-        'clip-path': `url(#${clipPathId})`,
         ...(color ? { color } : {}),
+        ...attrs,
+        'clip-path': `url(#${clipPathId})`,
     }, data);
 }
 function renderItemIllus(svg, node, datum) {
     const value = datum.illus;
-    return renderIllus(svg, node, value, datum);
+    const attrs = datum.attributes?.illus;
+    return renderIllus(svg, node, value, datum, attrs);
 }
 function createClipPath(svg, node, id) {
     const clipPathId = `clip-${id}-${(0, utils_1.uuid)()}`;