Add zoom functionality to node editor

Nelarius / imnodes

A small, dependency-free node editor for dear imgui

MIT License

1.94k stars 237 forks source link

Add zoom functionality to node editor #192

Open Auburn opened 5 months ago

Auburn commented 5 months ago

This is done in a different way than #134, everything between BeginNodeEditor() and EndNodeEditor() is managed through it's own ImGui context. I've found this causes less bugs with ImGui features compare to #134. I got the idea from here

In BeginNodeEditor() the second ImGui context has the input queue copied from the main context with mouse positions adjusted. Then in EndNodeEditor() the draw data is copied into the main ImGui context and transformed according to the zoom scaling.

To get it working add this after EndNodeEditor()

if( ImNodes::IsEditorHovered() && ImGui::GetIO().MouseWheel != 0 )
{
    float zoom = ImNodes::EditorContextGetZoom() + ImGui::GetIO().MouseWheel * 0.1f;
    ImNodes::EditorContextSetZoom( zoom, ImGui::GetMousePos() );
}

Having 2 ImGui contexts does cause some incorrect interactions between them both, I have fixed some of these by syncing up parts from each context but there are likely still some remaining,

nodeZoom

Fattorino commented 5 months ago

If you are curious you can see how I implemented it viewport_wrapper.h.

This is a little helper to render other contexts as widgets. Please note that it's not complete yet, and it will change in the following days.

Auburn commented 5 months ago

Yes you've used the same structure code from LumixEngine as I did, there were several input and config bugs from this implementation which I've fixed in this PR

Fattorino commented 5 months ago

yes yes it's almost identical, the main difference being the BeginChild which in my opinion is pretty handy and makes interactions more predictable and consistent. Tha's why the mention

Auburn commented 4 months ago

I think this probably needs an optional flag to enable it given that it makes use of a second ImGui context. Which can cause some ImGui features to behave differently

Nelarius commented 4 months ago

Thank you for implementing this @Auburn ! 🚀 It's very nice to see the state of the art in ImGui node editors advance, appreciate the pointers @Fattorino 👍

Regarding configuration, it looks like a runtime flag would be enough to direct draw commands at the original ImGui context? Perhaps something in ImNodesIO as it already contains a bunch of toggles, or alongside it, in the ImNodesContext.
I would also consider adding the zoom functionality to one of the examples 👍

ElectroGamesDev commented 3 months ago

I tried this fork but the node editor was no longer visible. Any idea why?

Auburn commented 3 months ago

It doesn't currently work with multiple node editor instances which I need to look into. I have tested it works in the examples, but I don't know what your setup is like