❔ ✅ WPF Node Editor - Who should handle connection between nodes
Note: this is the first post I publish. If this is not the correct place for it or something is wrong about it, I will edit/remove it
I am creating a node graph editor in c# WPF similar to Unity's Shader Graph. There is a canvas where all nodes are displayed. I have a "Node" UserControl which has a "Connector" UserControl. Connectors should be able to be dragged and dropped one on another to connect two nodes. When two nodes are connected a line should be drawn between the two connectors.
Im kind of new to WPF so it's hard for me to understand which control should handle which part of the code.
Who should handle the drag/drop and line drawing? Should the connector being dropped on another draw the line between the two?
Should the parent node be responsible for the dragging and dropping of the connector and line drawing? Or should the node notify the canvas about the event and make it so the canvas handles all of the node's connections?
Most important question: since there will be a variable number of connectors that will be generated at runtime, is it even a good idea to separate the connectors from the node control?
Thanks in advance
6 Replies
I know almost nothing about WPF, so this can't be claimed as "best practice" based on my lack of experience in context. Given that you intend to initiate connections from the nodes, I'd say that all nodes need to handle both
drag to initiate the connection attempt, and drop to complete it.
As for how to wire that into WPF, I'm out of my league.
Hopefully that helps your train of thought on it a bit 🙂The problem is that the Node and the Connector are separate.
The connector is a child of the node. The thing that you interact with is the connector, but the thing that contains the important data is the node.
Yes! Thanks for the feedback
I try to handle the event as locally as possible. I'd put the drop event on either the node or a connection point on the node. Possibly the node if it's easier to get access to data for validation.
You can check out what https://github.com/miroiu/nodify does. It's maybe a bit complicated to use though.
Was this issue resolved? If so, run
/close - otherwise I will mark this as stale and this post will be archived until there is new activity.I see, I'll try that. Thank you!
Was this issue resolved? If so, run
/close - otherwise I will mark this as stale and this post will be archived until there is new activity.