ReactFlow Auto Layout

2024-05｜Developer

ReactFlow auto layout and Figma-like edge editing demo

项目亮点

1. Node 自动布局算法

• 支持 Dagre, ELK, D3-hierarchy, D3-dag 等自动布局算法
• 支持 Node 动态宽高自适应布局
• 支持多个 Subflows 自动布局
• 支持动态调整布局方向、节点间隔、端口排序等布局参数

2. Edge 自动路由算法

• 使用 A* 搜索算法¹结合曼哈顿距离²求解最优路径³
• Edge 与两端 Node 尽量不产生交叉和重合
• Edge 路径长度相同时，优先选择轴对称且端点最少的路径

3. Edge 折线拖拽编辑

• Edge 使用带圆角的直角折线 Path 绘制
• Edge 由控制点组成，控制点之间可以通过拖拽控制柄来移动线段
• 拖拽时自动合并相近的控制点和线段，也可以自动拆分出新的控制点

最终实现的效果，基本可以媲美 Figma 和飞书的流程图编辑体验。