JointJS技术咨询：Manhattan布线器适配线段编辑及近端口优化

问题背景 #

我正在评估JointJS开发网页版电路CAD工具，将导线建模为Link，支持用户交互式连接元件端口，计划用内置Manhattan路由器实现正交自动布线与避障，但遇到两个核心问题：

1. 线段工具与正交布线器不兼容
   电路CAD的核心需求是支持用户拖拽导线线段（而非仅单个顶点）调整路径，这是CAD用户的常规操作习惯。但JointJS的Segment Tool仅支持normal router，与Manhattan等正交布线器搭配时会抛出Segments: incompatible router in use错误，仅靠调整顶点的交互不符合CAD用户体验预期。

2. 近端口多余弯折问题
   当源端口与目标端口距离极近时，Manhattan路由器会生成多余弯折，而非简洁的短直正交连接，导致密集布局中局部连接显得杂乱。

疑问解答 #

1. 正交布线与线段式编辑的兼容方案 #

JointJS官方无直接内置方案，可通过两种思路实现：

• 路由器切换策略：用户进入线段编辑模式时，临时将Link的路由器切换为normal router，编辑完成后切回Manhattan路由器重新计算路径。需额外维护两种模式的状态同步，确保编辑后的顶点符合正交规则。
• 自定义线段交互：不依赖内置Segment Tool，基于JointJS事件系统自行实现线段拖拽逻辑。监听Link的线段点击/拖拽事件，计算拖拽后的顶点位置，强制保持路径的正交性（仅水平/垂直线段）。这种方式灵活性更高，但需自行处理正交约束与避障适配。

2. 减少近端口多余弯折的配置/扩展 #

默认Manhattan路由器的padding参数仅控制避障间距，对近端口弯折无效，可尝试以下调整：

• 调整step参数：减小Manhattan路由器的step值（默认10），让短距离路径优先生成更简洁的结构。
• 扩展路径生成逻辑：重写Manhattan路由器的route方法，添加前置判断：当源端口与目标端口的水平/垂直距离小于阈值时，直接生成直连正交路径（x坐标相同则垂直直连，y坐标相同则水平直连），跳过默认多步弯折计算。
• 手动修正路径：在Link创建/更新后，检查顶点数量，若端口间距小于设定值，手动移除多余顶点，保留最简正交路径。

3. 是否需要编写自定义路由器？ #

若上述方案无法满足需求，编写自定义路由器是此类场景的常规解决方案：

• 自定义路由器可继承JointJS的Router基类，重写route方法，结合Manhattan的避障逻辑与自定义路径优化规则。
• 可内置近端口最简路径生成规则，同时确保路径结构兼容Segment Tool（只要顶点格式符合normal router要求，Segment Tool即可正常工作）。
• 能平衡避障需求与类CAD的线段操作体验，完全匹配电路CAD的交互预期。

内容的提问来源于stack exchange，提问作者Artemis