项目博客关于

ReactFlow Auto Layout

2024-05Developer

ReactFlow auto layout and Figma-like edge editing demo
查看源码

项目亮点

1. Node 自动布局算法

2. Edge 自动路由算法

3. Edge 折线拖拽编辑

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

备注

  1. A* 搜索算法: 一种在图形平面上,有多个节点的路径,求出最低通过成本的启发式搜索算法。常用于游戏中的 NPC 的移动计算,或线上游戏的 BOT 的移动计算上。

  2. 曼哈顿距离: 在欧几里德空间上两点所形成的线段,对坐标轴产生的投影的距离总和。 对于平面直角坐标系,曼哈顿距离只要计算加减法即可,极大提高了运算速度。

  3. Edge 自动路由思路主要参考自:LogicFlow 边的绘制与交互