jsPlumb flowchart connector layout direction change in 5x

Question

I am using jsPlumb 5x for a flowchart application. Used packages are @jsplumb/connector-flowchart and @jsplumb/browser-ui. I decided to use flowchart connectors. I couldn't find a way to change the connector layout.

Is there any way to change the style so that new layout looks like the above?

Current connector layout:

Currently, I define connectors inside instance.connect method as described here:

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

The layout works as intended on jsPlumb 2x with the following code:

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

Is there any way to change flowchart connectors layouts on 5x?

Answer 1

I think the problem here might be the anchors you're using - it doesn't look like your edges are going from a Bottom edge to a Top edge.

You can read up on anchors on this page: https://docs.jsplumbtoolkit.com/community/lib/anchors

To specify Top and Bottom you can either provide those values in the defaults:

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

or in a connect call.

it is possible that in the migration from 2.x to 5.x you've got an Anchor or Anchors default somewhere, but note that all defaults in 5.x are now lower case: anchor / anchors etc.