How can I create a UI node editor system?

Hello!

I was curious if anyone had any ideas on how you’d go about a UI node editor system?

Such as, creating the flow of how the nodes work when linked to each other, the placement of nodes itself (such as creating em, dragging them, connecting them to one another, etc.)

Any ideas would be appreciated!

And yes I did search before this, I couldnt find anything about how to create a system like this.

Well dragging is pretty straight forward, just see when the mouse is pressed on a hitbox. Get the initial offset, and keep applying the offset with the mouses current position to the frame. If you want to have dots, I would probably start with a variable to control how many inputs and outputs each node has. Create little hitbox dots(or you could do this using math, but it will probably be easier with studio instances). Something like this using bezier curves should help you create the actual lines. Note that it isn’t very performant, and you would probably want to implement the code with EditableImages eventually.

Use a Path2D to draw the line itself, and store the start and end Path2DControlPoints somewhere, pretty sure their properties can be changed once created.

Path2D control points are relative to the parent container.