How to make a simple node editor using UI Elements?

Hi,

I’ve been trying to learn how to make a node editor tool in unity but I’d like to try it in UI Elements. I think GUILayout.Window is a pretty good solution and drag feature comes out of the box. There is a good sample here:

UI Elements do have a similar feature in examples in github repo. I noticed that in this sample have a similar window element but it fills in its container. I couldn’t find any solution to make similar behavior like GUILayout.Window.

Also, I’ve tried to dig in this repo for graph editor like node editor. But it’s beyond complicated and huge project.

Thanks in advance!

1 Like

The end of this short video on UIElements shows a bit on how to make a draggable, floating, element. But I’d suggest watching the entire video if you’re new to UIElements.

And for completeness, there is a node-based system implemented in UIElements already. It’s called GraphView and it’s what products like ShaderGraph and Visual Effects Graph use. However, we don’t officially support the GraphView API so there’s not a lot of documentation. It’s also overkill for most applications. Using the video above and if you search for GraphView.Edge in the codebase to see how the edges are drawn, you should have something basic to start with.

1 Like

@cemugurk Check out Sleipnir on GitHub: GitHub - red-owl-games/Sleipnir: A Graph Framework for Unity

It’s not exactly production ready (imo), but it should get you started in terms of how to go about building your own.

1 Like

There you go:

7 Likes