Nelarius / imnodes

A small, dependency-free node editor for dear imgui
MIT License
1.97k stars 241 forks source link

Pan + zoom functionality using the MiniMap #109

Open jparismorgan opened 3 years ago

jparismorgan commented 3 years ago

This PR https://github.com/Nelarius/imnodes/pull/99 shows off what looks like pan and zoom functionality, but I'm not able to recreate it in my app or in the hello.cpp example. My end goal is to have pan & zoom on the main graph, and a nice to have would be if that is also reflected in the MiniMap.

In the pull request above, it seems to show off: 1) Pan / zoom on the MiniMap and have that change reflected in the main graph. 2) Have the MiniMap take over the full graph's window and be invisible (i.e. 'hidden' mode). I want this b/c it seems it would achieve my end goal.

In my modified hello.cpp and my own app, all I can do are: 1) Zoom in and out of the MiniMap, but this is not reflected in the main map. 2) Click on a node in the MiniMap and have it snap to that node in the main map.

I also checked out the commit from the original PR, https://github.com/Nelarius/imnodes/commit/132f9a782766f3f4736c6b43e7cc856ff5a5551b, but similarly can't achieve the functionality I'm looking for.

Any help appreciated, thank you!

  void show() {
    ImGui::Begin("simple node editor");
    ImNodes::BeginNodeEditor();
    ImNodes::BeginNode(1);

    ImNodes::BeginNodeTitleBar();
    ImGui::TextUnformatted("simple node :)");
    ImNodes::EndNodeTitleBar();

    ImNodes::BeginInputAttribute(2);
    ImGui::Text("input");
    ImNodes::EndInputAttribute();

    ImNodes::BeginOutputAttribute(3);
    ImGui::Indent(40);
    ImGui::Text("output");
    ImNodes::EndOutputAttribute();

    ImNodes::EndNode();

    ImNodes::MiniMap(.1f, ImNodesMiniMapLocation_BottomLeft);
    ImNodes::EndNodeEditor();
    ImGui::End();
  }
Nelarius commented 3 years ago

Hi @jparismorgan !

A couple things:

  1. There's a bug, thanks for bringing this up! πŸ˜… Zooming in and out on the minimap, and centering on the clicked node, was possible in 132f9a7, but it's not possible right now due to a regression in this commit https://github.com/Nelarius/imnodes/commit/160d7ce4528adc58caf5cd1f98301341560bb39f. I'll try to get it fixed ASAP.
  2. Zooming in and out of the main graph is not currently possible using ImNodes. There's an old ImGui issue with discussion on implementing zoom: https://github.com/ocornut/imgui/issues/772#issuecomment-244628219 but it's not something I've had a chance to experiment with.

If you get a chance to experiment with zooming on the main graph, feel free to share the results! Zooming has been requested here a few times, and I'm sure there would be interested parties πŸ™‚

Nelarius commented 3 years ago

I pushed a fix to the master branch: https://github.com/Nelarius/imnodes/commit/0fbc7f1a2aab73b3ad4be86241bf3f4802bdb800

jparismorgan commented 3 years ago

Thanks @Nelarius, the mini map zoom + click to pan is now working great. The drag to pan still seems broken / buggy though, not sure if you're seeing that also? Or if it's even supposed to work? I see it in the video on https://github.com/Nelarius/imnodes/pull/99, so perhaps?

That makes sense on the main graph not working. I read the comment but don't think I'll have the time to implement it any time soon. A good workaround seems to be the option that I saw in the video on https://github.com/Nelarius/imnodes/pull/99, where a hidden mode makes the mini map hidden, but you can still pan around. Is there a blocker to being able to ship that mode?

Nelarius commented 3 years ago

Panning without the minimap should definitely work. Panning around the main node graph is a separate feature from the minimap, and is enabled by default. So you should be able to pan without making any calls to ImNodes::MiniMap. The hidden mode in the video is the user's code for running the UI without the call to MiniMap, I think, and isn't actually a feature of the library itself.

Hope this helps clear things up! If you are still having an issue, perhaps you could describe what you are doing, and what you expect ImNodes to do?

jparismorgan commented 3 years ago

Panning without the minimap should definitely work.

Ah, well then this is my real issue, it does not work for me. I have filed a new bug here on that: https://github.com/Nelarius/imnodes/issues/114

The hidden mode in the video is the user's code for running the UI without the call to MiniMap, I think, and isn't actually a feature of the library itself.

If panning without the minimap should work then my question about hidden is unimportant - I just thought it was a hack to get panning without the minimap working.

If you are still having an issue, perhaps you could describe what you are doing, and what you expect ImNodes to do?

I would like to be able to click on the minimap, drag in a direction, and have the visualization of the nodes in the minimap move. Currently if I click on the minimap and drag in a direction, nothing happens. I suspect the reason is the same as why panning without the minimap doesn't work. Here is a video:

https://user-images.githubusercontent.com/1396242/127698073-ca885e96-df94-4ad2-a897-00f02f2dbd78.mov

Thanks for your help @Nelarius!