feat: add connectionMode property to allow connection between handles of any type

[muccijacopo]

It would be nice if it wasn't required to specify the type property on HandleComponent, so that if a handle is not yet connected could be both a source or target.

[artem-mangilev]

Thanks for your issue! The ability to create edges in both directions between two nodes should definitely be possible. I've added this to the backlog.

[artem-mangilev]

I guess what we need is the following:

• The HandleComponent still requires the type property.
• For example, we have node A with a HandleComponent where type === 'source' and node B with a HandleComponent where type === 'target'
• you can connect them in both directions
• However, for both connect directions, it creates an A --> B edge because of the specified type in the HandleComponents.

Is this approach acceptable for you?

[muccijacopo]

Yes, that would be definitely an improvement. Actually for my use case I would need a "dynamic" type so that the user can decide the direction. Eg. drag from a handle (and it will become a source) to another handle (that will become a target), maybe it could be done programmatically (?)

[artem-mangilev]

In this case, I'm not sure how to draw the flow edges without knowing if a certain handle is a source or target. As a result, there's a high probability that the flow may visually change (arrows swapped) when you create an edge and then reload the page (fetching the edges you saved before the reload and re-drawing them).

I guess that is the reason why reactflow team also decided to make type field required https://reactflow.dev/api-reference/components/handle

[muccijacopo]

In React Flow the type field is required, but you can set source on all handles and it will automatically create the flow edge with the correct direction. In ngx-vflow the edge cannot be attached to a source handle.

"there's a high probability that the flow may visually change (arrows swapped) when you create an edge and then reload the page" why is that? The edge direction should not be based on sourceHandle and targetHandle properties?

I've created this sandbox with React Flow to reproduce this issue. https://codesandbox.io/s/thirsty-aj-vwp9xg

[artem-mangilev]

Thanks for the demo! As I see there is special mode for such connections, without this enum nothing is rendered connectionMode={ConnectionMode.Loose}.

I agree with you that ngx-vflow should also have this functionality, I will implement this feature in the next release

[muccijacopo]

@artem-mangilev You're right. From the React Flow doc

A loose connection mode will allow you to connect handles of any type to one another. The strict mode will only allow you to connect source handles to target handles.

Maybe I should rename this issue 😄 Thanks for adding this to the roadmap!

[artem-mangilev]

Hi @muccijacopo ! I added the requested feature in this release: https://github.com/artem-mangilev/ngx-vflow/releases/tag/v0.8.0

[muccijacopo]

Awesome! @artem-mangilev Thanks for supporting this feature. I'm closing this issue.