@antv/infographic 0.2.13 → 0.2.15

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

@@ -31,6 +31,7 @@ export * from './sequence-cylinders-3d';
 export * from './sequence-filter-mesh';
 export * from './sequence-funnel';
 export * from './sequence-horizontal-zigzag';
+export * from './sequence-interaction';
 export * from './sequence-mountain';
 export * from './sequence-pyramid';
 export * from './sequence-roadmap-vertical';

package/esm/designs/structures/index.js

@@ -31,6 +31,7 @@ export * from './sequence-cylinders-3d.js';
 export * from './sequence-filter-mesh.js';
 export * from './sequence-funnel.js';
 export * from './sequence-horizontal-zigzag.js';
+export * from './sequence-interaction.js';
 export * from './sequence-mountain.js';
 export * from './sequence-pyramid.js';
 export * from './sequence-roadmap-vertical.js';

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "../../jsx-runtime.js";
 import { DagreLayout } from '@antv/layout';
-import { Defs, getElementBounds, Group, Path, Polygon, Text } from '../../jsx/index.js';
+import { Defs, getElementBounds, Group, Path, Text } from '../../jsx/index.js';
 import { BtnAdd, BtnsGroup, ItemsGroup } from '../components/index.js';
 import { FlexLayout } from '../layouts/index.js';
-import { getColorPrimary, getPaletteColor, getThemeColors } from '../utils/index.js';
+import { createArrowElements, createRoundedPath, createStraightPath, getColorPrimary, getMidPoint, getPaletteColor, getThemeColors, } from '../utils/index.js';
 import { registerStructure } from './registry.js';
 const DEFAULT_NODE_SEP = 50;
 const DEFAULT_RANK_SEP = 70;
@@ -191,141 +191,6 @@ export const RelationDagreFlow = (props) => {
             ? `${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 [
-                    _jsx(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 [
-                    _jsx(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 [
-                _jsx(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);
@@ -468,7 +333,7 @@ export const RelationDagreFlow = (props) => {
                     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);
+                    const arrowElements = createArrowElements(head[0] + pointsOffsetX, head[1] + pointsOffsetY, angle, edgeArrowType, arrowFill, edgeWidth, arrowSize);
                     decorElements.push(...arrowElements);
                 }
                 if (direction === 'both') {
@@ -476,7 +341,7 @@ export const RelationDagreFlow = (props) => {
                     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);
+                    const arrowElements = createArrowElements(head[0] + pointsOffsetX, head[1] + pointsOffsetY, angle, edgeArrowType, arrowFill, edgeWidth, arrowSize);
                     decorElements.push(...arrowElements);
                 }
             }

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

@@ -0,0 +1,54 @@
+import type { ComponentType } from '../../jsx';
+import type { RelationEdgeDatum } from '../../types';
+import type { BaseStructureProps } from './types';
+/**
+ * 泳道内的节点数据
+ */
+export interface InteractionChildDatum {
+    id: string;
+    label?: string;
+    desc?: string;
+    icon?: string;
+    /**
+     * 手动指定节点的垂直顺序（层级），默认为数组索引
+     * 相同 step 的节点会处于同一高度
+     */
+    step?: number;
+}
+/**
+ * 泳道数据（顶层item）
+ * label 作为泳道标题
+ * children 作为泳道内的节点列表
+ */
+export interface InteractionLaneDatum {
+    label: string;
+    desc?: string;
+    icon?: string;
+    children?: InteractionChildDatum[];
+}
+/**
+ * 交互流程的数据结构
+ * items: 泳道列表，每个泳道有 label 和 children
+ * relations: 节点间的关系
+ */
+export interface InteractionFlowData {
+    title?: string;
+    desc?: string;
+    items?: InteractionLaneDatum[];
+    relations?: RelationEdgeDatum[];
+}
+export interface SequenceInteractionProps extends BaseStructureProps {
+    laneGap?: number;
+    nodeGap?: number;
+    lifelineWidth?: number;
+    arrowWidth?: number;
+    showLifeline?: boolean;
+    padding?: number;
+    arrowType?: 'arrow' | 'triangle';
+    showLaneHeader?: boolean;
+    laneHeaderHeight?: number;
+    edgeStyle?: 'solid' | 'dashed';
+    animated?: boolean;
+    edgeColorMode?: 'solid' | 'gradient';
+}
+export declare const SequenceInteractionFlow: ComponentType<SequenceInteractionProps>;