jsPlumb 流程图连接器布局方向改变 5 倍

Question

我正在将 jsPlumb 5x 用于流程图应用程序。使用的包是@jsplumb/connector-flowchart 和@jsplumb/browser-ui。我决定使用流程图连接器。我找不到更改连接器布局的方法。

有什么方法可以改变样式，使新布局看起来像上面那样吗？

当前连接器布局：

目前，我在 instance.connect 方法中定义连接器 as described here:

connector: {
          type: FlowchartConnector.type,
          options: {
            stub: [10, 20],
            gap: 1,
            cornerRadius: 2,
            alwaysRespectStubs: true
          }
        },

布局在 jsPlumb 2x 上按预期工作，代码如下：

connector: ["Flowchart", {
          stub: [10, 20],
          gap: 1,
          cornerRadius: 2,
          alwaysRespectStubs: true
        }],

有什么方法可以更改 5x 上的流程图连接器布局吗？

Answer 1

我认为这里的问题可能是您使用的锚点 - 它看起来不像您的边从 Bottom 边到 Top 边。

您可以阅读此页面上的锚点：https://docs.jsplumbtoolkit.com/community/lib/anchors

要指定 Top 和 Bottom，您可以在默认值中提供这些值：

https://docs.jsplumbtoolkit.com/community/lib/defaults

或在 connect 通话中。

可能在从 2.x 到 5.x 的迁移过程中，您在某处有一个 Anchor 或 Anchors 默认值，但请注意 5.x 现在小写：anchor / anchors 等

jsPlumb 流程图连接器布局方向改变 5 倍

jsPlumb flowchart connector layout direction change in 5x

jsplumb