SVG Flow Canvas Pro 是一款基于 React 和 原生 SVG 构建的高性能流程图/拓扑图绘图引擎。它不仅提供了极致流畅的拖拽交互体验，更在底层算法上深度优化了曼哈顿折线路由（Manhattan Routing），实现了自动避障与垂直连接，致力于为开发者提供最专业的 Web 绘图解决方案。
这是本项目最核心的技术亮点。不同于常规的直线连接，我们的折线算法具备以下高级特性：
- 自动避障 (Collision Avoidance)： 当连线路径可能穿越元素主体时，算法会自动计算绕行路径，确保连线始终围绕元素外围延伸。
- 垂直切入 (Perpendicular Entry/Exit)： 连线从起始点出发及进入目标点时，强制保持垂直方向，完美适配各类工业级拓扑图规范。
- 曼哈顿路径优化： 自动计算最少折角路径，通过路径平滑处理剔除冗余节点。
- 动态节点系统： 支持矩形、圆形、菱形及纯文本节点，每个节点内置 4 个灵敏的吸附连接点（Ports）。
- 双模式连线： 支持 贝塞尔曲线 (Bezier) 与 曼哈顿折线 (Orthogonal) 实时切换，满足不同审美与业务逻辑。
- 实时预览交互： 连线过程中提供带磁吸效果的动态预览线，并伴有虚线动画反馈。
- 零负载拖拽： 基于 SVG 坐标系优化，即使在大量节点下依然保持 60FPS 的移动帧率。
- 所见即所得： 支持双击节点直接进入编辑模式，实时更新标签文字。
- 快捷操作： 全局支持
Delete/Backspace一键删除选中元素，Esc取消当前连接。
- SVG 矢量导出： 一键导出纯净的
.svg文件，保留所有路径与样式，可直接用于文档插图或进一步加工。 - 持久化响应： 完美适配不同分辨率画布，支持深色模式视觉设计。
- 视图层： React 19 + TypeScript (强类型保证)
- 样式层： Tailwind CSS (原子化设计)
- 核心引擎： 原生 SVG (无 Canvas 锯齿问题，天然支持 DOM 事件与 SEO)
- 核心数学库：
utils/geometry.ts(独立封装的几何计算函数，包含路径寻找、坐标转换逻辑)
| 动作 | 效果 |
|---|---|
| 侧边栏拖拽 | 将新的图形元素投放至画布任意位置 |
| 单指拖拽节点 | 移动元素位置，所有连接线将自动跟随并重新计算最优路径 |
| 点击连接点 (Port) | 开启连线模式，再次点击另一个连接点即可完成连接 |
| 双击节点 | 进入文本编辑状态，按 Enter 或失去焦点保存 |
| 点击连线 | 选中连线，可在属性面板切换“曲线/折线”风格 |
| Delete 键 | 移除当前选中的节点或连线 |
在 utils/geometry.ts 中，我们实现了一套基于 Buffer 缓冲区 的路径重绘逻辑：
- 路径分段： 将起始点和目标点根据其所在方位（Top/Bottom/Left/Right）分别向外延伸一段
Buffer距离。 - 碰撞检测： 判断延伸点与目标节点的空间关系。
- 动态绕行： 如果检测到路径会穿过节点（例如：从上方连接到底部接口），算法会自动插入中间转折点，强制路径绕过节点的侧边边界。
- 方向锁定： 通过锁定
x或y坐标对齐，确保每一段线段都与坐标轴平行。
- 深色系美学： 采用
Slate-950作为底色，配合Blue-500的强调色，打造科技感十足的专业工具氛围。 - 网格引导： 辅助径向网格背景，帮助用户进行视觉定位。
- 反馈透明： 选中状态、悬停效果及连接磁吸均有明确的视觉反馈（阴影、边框变色等）。
- 支持画布缩放与平移 (Zoom & Pan)
- 节点分组功能 (Grouping)
- 撤销/重做 (Undo/Redo) 栈支持
- 更多样化的连线箭头样式选择
SVG Flow Canvas Pro 旨在打破 Web 绘图工具的繁琐边界。无论您是需要构建一个简单的逻辑图，还是复杂的自动化工作流展示面板，它都能提供稳如磐石的基础支撑。