open-source-labs / Svelvet

๐ŸŽ› A Svelte library for building dynamic, infinitely customizable node-based user interfaces and flowcharts
https://svelvet.io
2.5k stars 161 forks source link

Specify Source Node ID, Source Node Anchor, Target Node ID, Target Node Anchor in Node Connect Function #507

Open cch264 opened 3 months ago

cch264 commented 3 months ago

Problem

I have a flow chart where each node has two inputs, and two outputs. When I want to programmatically connect a source node to a target node I am unable to utilize the Node slot connect function because the connect function only supports specifying a target node id and a target node anchor. This makes it impossible to connect a specific source node anchor to a specific target node anchor.

Programmatic connection use case: I have implemented drag and drop connection and disconnection logic to my app, which is only possible with the disconnect function and the kludge described below. It would be ideal if a more robust connect function was provided by Svelvet.

For anyone with the same dilemma, my current fix is to directly update the connections object passed to your Node components anchor with the new connection tuple. This works, but is not ideal because I am utilizing the provided disconnect function without issue, but need to use a bit of a hack to get the same functionality for adding new connections when source node has multiple output anchors.

Solution

Provide a Node connect function that allows specifying a source node connection tuple and a target node connection tuple similar to how the disconnect function is defined in the Svelvet component.

Not sure how this should be done, but I assume this functionality was left out for some reason. Is this feature on the roadmap?

Additional information

No response

๐Ÿ‘จโ€๐Ÿ‘งโ€๐Ÿ‘ฆ Contributing