Not clear on how to detect which two nodes were connected in the GUI

[KoreyPeters]

I'm trying to build a flow designer, where you pull nodes out of a sidebar on the left and then connect outputs to inputs as desired in the GUI. I can listen to the on:connect event and determine that two anchors had connection events, but I can't find anything in those events that would allow me to link them together.

Is there a standard use case for this that I'm missing? Thanks.

[briangregoryholmes]

Hey, Korey. Do you mind expanding a bit on what you're trying to achieve? Less about the specific API and more just what you'd be using the functionality for. I'm sure there's an existing solution or one that I can quickly add, but I can't say I'm 100% clear on what you're looking for. I think maybe you're just asking for the connection event fired on the Anchor component to include information about which Node/Anchor it just connected to?

[KoreyPeters]

I've drawn a diagram to hopefully assist. I want to be notified somewhere (maybe in Node 1, maybe in Node 2, maybe in the Svelvet container) that Node 1 and Node 2 were connected.

Hopefully that makes more sense. As it stands now, the on:connected event tells me that the Anchor on Node 1 was connected to something, and that the Anchor on Node 2 was connected to something, but neither event says that there is a line between Node 1 and Node 2. I'm left guessing which two nodes were connected.

[briangregoryholmes]

Got it. I can add the information about the other Node to the event detail. I think I'll also add an event on the Svelvet component that fires whenever a new Edge/Connection is made with similar information. Should be able to get to this tonight.

In the meantime, if you just wanted to get something working, you could push the Node objects into an array whenever on:connection fires and then just have a reactive statement that runs when the length is equal to 2.

Also, do you mind maybe describing a bit about what Step 5 would be? It's helpful to build these APIs around some concrete use cases.

[KoreyPeters]

Thanks, Brian. I had considered the "push node objects into an array", but was hoping for a more "blessed" solution. I'll probably implement that today. Either or both of the solutions you referred to would be great.

I'm creating a visual builder for an event-processing/rules engine system. For an example of something very similar to what I'm building, check out Amazon Connect's Contact Flow Builder (https://www.youtube.com/watch?v=ujnzVO8Kbnw). So "Step 5" is to use the information of how the nodes are connected to build out configuration for an event-processing/rules-engine system I'm building without forcing the business users to learn the complex JSON structure the system uses behind the scenes.

Hopefully that makes sense.

[rungdung]

Implementing this would also implicitly create a workaround for #365, as now we can add the connections made by the user to the connections property of Nodes. This and position binding creates a possibly fully functional workaround in a way.

[briangregoryholmes]

This is live now if you want to test it out. Updated the Anchor event and added a new one on Svelvet. There’s two new types for the events as well: SvelvetConnectionEvent and AnchorConnectionEvent.

The implementation is subject to change.

I would also look in to seeing if you can implement this with the Data Flow system, Korey. Either way, I understand exactly what you’re going for now and will think about a tailored solution for this kind of use case. No timeline on that.

[AlloryDante]

I have also submited this: #463

I am trying to achive something similar to voiceflow. Maybe it will give some ideeas to look into...