imnodes icon indicating copy to clipboard operation
imnodes copied to clipboard

Add zoom functionality to node editor

Open Auburn opened this issue 2 years ago • 12 comments

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

Auburn avatar Feb 04 '24 00:02 Auburn

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.

Fattorino avatar Feb 04 '24 20:02 Fattorino

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

Auburn avatar Feb 04 '24 22:02 Auburn

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

Fattorino avatar Feb 04 '24 22:02 Fattorino

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

Auburn avatar Feb 18 '24 14:02 Auburn

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 👍

Nelarius avatar Feb 23 '24 07:02 Nelarius

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

ElectroGamesDev avatar Mar 22 '24 01:03 ElectroGamesDev

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

Auburn avatar Mar 22 '24 13:03 Auburn