jsPlumb 5.x版本如何修改Flowchart流程图连接器的布局样式

jsPlumb 5.x重构了连接器的注册机制和flowchart类型的布线计算逻辑，原来2.x的配置需要做少量调整就可以还原预期效果，具体操作如下：

1. 显式注册连接器别名 #

5.x没有内置flowchart连接器的默认别名映射，需要在实例化时手动注册，避免配置不生效：

import { FlowchartConnector } from "@jsplumb/connector-flowchart"
import { newInstance } from "@jsplumb/browser-ui"

const jsPlumbInstance = newInstance({
  // 注册连接器别名
  connectors: {
    Flowchart: FlowchartConnector
  }
})

2. 补充布线控制参数 #

5.x的flowchart连接器新增了布线逻辑参数，补充后即可对齐2.x的布局效果：

connector: {
  type: FlowchartConnector.type, // 也可以用注册后的别名"Flowchart"
  options: {
    stub: [10, 20],
    gap: 1,
    cornerRadius: 2,
    alwaysRespectStubs: true,
    // 新增以下参数调整布线逻辑
    midpoint: 0.5, // 拐点在连线路径中的位置比例，取值范围0-1
    orientationThreshold: 5 // 触发方向切换的像素阈值，值越小越贴近2.x的布线逻辑
  }
}

3. 全局默认配置（可选） #

如果所有连线都使用同一份flowchart配置，可以在实例化时直接设置全局默认值，不需要每次调用connect时重复定义：

const jsPlumbInstance = newInstance({
  connectors: {
    Flowchart: FlowchartConnector
  },
  // 全局默认连接器配置
  connector: {
    type: "Flowchart",
    options: {
      stub: [10, 20],
      gap: 1,
      cornerRadius: 2,
      alwaysRespectStubs: true,
      midpoint: 0.5,
      orientationThreshold: 5
    }
  }
})

如果需要调整连接器的外观样式（线条颜色、粗细、虚线效果等），需要在paintStyle参数中配置，不属于connector的options范围：

instance.connect({
  source: "节点1ID",
  target: "节点2ID",
  paintStyle: {
    stroke: "#2c3e50",
    strokeWidth: 2,
    dashstyle: "2 4" // 虚线配置，可选
  }
})

内容的提问来源于stack exchange，提问作者Ali Sertaç Cebeci