/** * @fileoverview ElkLayout布局插件 - 提供自动化图形布局功能 * * 本插件基于elkjs实现LogicFlow的自动化布局功能,支持多种布局方向 * 可自动计算节点位置和连线路径,实现整洁的图形展示 */ import LogicFlow, { BaseNodeModel, BaseEdgeModel } from '@logicflow/core'; import { LayoutOptions, ElkNode } from 'elkjs/lib/elk-api'; /** * ElkLayout布局配置选项接口 * @interface ElkLayoutOption */ export interface ElkLayoutOption { /** * 布局方向 * 'LR' | 'TB' | 'BT' | 'RL' */ rankdir?: 'LR' | 'TB' | 'BT' | 'RL'; /** * 对齐方式 * 'UL' | 'UR' | 'DL' | 'DR' */ align?: 'UL' | 'UR' | 'DL' | 'DR'; /** * 同层节点间距 */ nodesep?: number; /** * 层级间距 */ ranksep?: number; /** * 图的水平边距 */ marginx?: number; /** * 图的垂直边距 */ marginy?: number; /** * 排版算法 * 'network-simplex' | 'tight-tree' | 'longest-path' */ ranker?: 'network-simplex' | 'tight-tree' | 'longest-path'; /** * 边间距 */ edgesep?: number; /** * 有向无环图处理算法 * 'greedy' */ acyclicer?: 'greedy'; /** * 是否是默认锚点 * true: 会根据布局方向自动计算边的路径点 */ isDefaultAnchor?: boolean; /** * ELK 原生布局属性,用于覆盖默认配置 */ elkOption?: LayoutOptions; } /** * ElkLayout插件接口定义 */ export interface ElkLayoutPlugin { /** * 执行布局计算 * @param option - 布局配置选项 */ layout(option: ElkLayoutOption): void; } /** * ElkLayout布局类 - LogicFlow自动布局插件 * 基于elkjs提供图的自动布局能力 */ export declare class ElkLayout { /** 插件名称,用于在LogicFlow中注册 */ static pluginName: string; /** LogicFlow实例引用 */ lf: LogicFlow; /** 当前布局配置 */ option: ElkLayoutOption; /** * 插件初始化方法,由LogicFlow自动调用 * @param lf - LogicFlow实例 */ render(lf: LogicFlow): void; /** * 执行布局算法,重新排列图中的节点和边 * @param option - 布局配置选项 */ layout(option?: ElkLayoutOption): void; /** * 使用 ELK 布局 * @param nodes - 节点数据 * @param edges - 边数据 * @param elkOption - ELK 配置选项 */ applyElkLayout(nodes: BaseNodeModel[], edges: BaseEdgeModel[]): Promise; convertOptionsToElk(): LayoutOptions; convertLayoutDataToLf(nodes: BaseNodeModel[], edges: BaseEdgeModel[], layoutData: ElkNode): { nodes: LogicFlow.NodeConfig[]; edges: LogicFlow.EdgeConfig[]; }; }