[Question] How to make Left to Right?

[jamesdwilson]

Is it possible to make the flow of the nodes left to right instead of top to bottom?

Thank you!

[jamesdwilson]

In src/components/Ports/Ports.default.tsx

I changed

      <PortsGroupDefault config={config} side="top">
...
      <PortsGroupDefault config={config} side="bottom">

to:

      <PortsGroupDefault config={config} side="left">
...
      <PortsGroupDefault config={config} side="right">

and that seems to work. Do you think this is a good solution?

[jamesdwilson]

Can you please expose this as a prop either way?

[jamesdwilson]

Okay I solved it in a better way I think by copying Ports.default.tsx from the libary to my local project as PortsLtr.tsx and then consumed it as so:

 <FlowChart
                    chart={chart}
                    callbacks={stateActions}
                    Components={{
                        NodeInner: NodeInnerCustom,
                        Ports: PortsLtr
                    }}
                />

Open to better ideas.

[MehdiSaffar]

I also did something similar because I didn't want the nodes to hook to the bottom/top/left/right but wanted the links to end at the center behind the node.

Something like this:

[jason-james]

I also did something similar because I didn't want the nodes to hook to the bottom/top/left/right but wanted the links to end at the center behind the node.

Something like this:

This looks nice, could you share your changes?

[mrkchang]

Yes. Would be great to have this as a property. Personally prefer L->R

[mrkchang]

Actually you can just change your port type: type: "left" and it'll do the job

[jamesdwilson]

Actually you can just change your port type: type: "left" and it'll do the job

@mrkchang can you please post a code sample?