A standalone Dear ImGui node graph implementation.

Last update: Dec 15, 2022

Related tags

Overview

ImNodes

A standalone Dear ImGui node graph implementation.

Library provides core features needed to create a node graph, while leaving it to the user to define content of node. Node layouting is left to the user, however comprehensible example is available which can be used as a base.

A (very) trivial example

static ImNodes::CanvasState canvas;

if (ImGui::Begin("ImNodes", nullptr, ImGuiWindowFlags_NoScrollbar | ImGuiWindowFlags_NoScrollWithMouse))
{
    ImNodes::BeginCanvas(&canvas);

    struct Node
    {
        ImVec2 pos{};
        bool selected{};
        ImNodes::Ez::SlotInfo inputs[1];
        ImNodes::Ez::SlotInfo outputs[1];
    };

    static Node nodes[3] = {
        {{50, 100}, false, {{"In", 1}}, {{"Out", 1}}},
        {{250, 50}, false, {{"In", 1}}, {{"Out", 1}}},
        {{250, 100}, false, {{"In", 1}}, {{"Out", 1}}},
    };

    for (Node& node : nodes)
    {
        if (ImNodes::Ez::BeginNode(&node, "Node Title", &node.pos, &node.selected))
        {
            ImNodes::Ez::InputSlots(node.inputs, 1);
            ImNodes::Ez::OutputSlots(node.outputs, 1);
            ImNodes::Ez::EndNode();
        }
    }

    ImNodes::Connection(&nodes[1], "In", &nodes[0], "Out");
    ImNodes::Connection(&nodes[2], "In", &nodes[0], "Out");

    ImNodes::EndCanvas();
}
ImGui::End();

Comments

Hitting delete with inactive Canvas deletes selected node
Just try the sample.cpp application:

Make sure a node is selectedl

Then select the Hello world windows

Hit the delete key

Notice the selected node gets deleted
opened by sphaero 6
Some fixes and improvements
Here are a couple of fixes and improvements I've made. Most of it is in ImNodes::Ez and I tried to keep the number of changes to the ImNodes namespace at a minimum. It's only improvements in ImNodes namespace the shouldn't affect any existing code that depends on it.

Fixed smoother zooming

Improved right alignment when title is wider than body

Moving group of selected nodes does not change selection

Clicking top-most node (as rendered) now selects it, not the bottom-most below it

Added styling variables and colors (with stacks)

Custom node rendering in ImNodes::Ez

Added IsHovered() function to check if node is hovered

Added support to handle multiple separate canvases by adding a Ez::Context

Support to color hovered node differently from others

Split rendering of nodes and connections into two layers
opened by roblunx 5

Cmake report error on Windows platform

CMake Error at C:/Program Files/CMake/share/cmake-3.11/Modules/FindPackageHandleStandardArgs.cmake:137 (message):
  Could NOT find PkgConfig (missing: PKG_CONFIG_EXECUTABLE)
Call Stack (most recent call first):
  C:/Program Files/CMake/share/cmake-3.11/Modules/FindPackageHandleStandardArgs.cmake:378 (_FPHSA_FAILURE_MESSAGE)
  C:/Program Files/CMake/share/cmake-3.11/Modules/FindPkgConfig.cmake:39 (find_package_handle_standard_args)
  CMakeLists.txt:28 (find_package)

opened by ychding11 4

Nodes with only output slots? Assertion error

Just comment a line which renders the input slots in sample.cpp:

ImNodes::Ez::InputSlots(node->input_slots.data(), node->input_slots.size());

ImNodes: /home/arnaud/src/build-ImNodes-Desktop-Default/imgui-1.70/imgui.cpp:6779: void ImGui::EndGroup(): Assertion `!window->DC.GroupStack.empty()' failed.

opened by sphaero 3

Input/Output more than one kind of value

Hello, I have a question about the I/O nodes. I was wondering how can one get a output to match more types? I tried something like this but it did not seem to work: {"ADD Vector3", []() -> MyNode* { return new MyNode("ADD Vector3", { {"A",WN Position | Rotation | Scale}, {"B",WN Position | Rotation | Scale} }, { {"Output" ,WN Position | Rotation | Scale} }); } }

Am i doing something wrong or is it not yet implemented?

Thank you and sorry for the trouble.

opened by KonstantinVeljanovski 3

Patch for imgui 1.85

Not sure if this is useful but it might help others?

When using imgui 1.85 the downloaded CMakeLists.txt ends up in the wrong dir. It's a matter of leaving out the 'v' in the version string.

However the downloaded CMakeLists.txt for Imgui needs patching:

115c115
<     ${IMGUI_ROOT_DIR}/imgui_draw.cpp ${IMGUI_ROOT_DIR}/imgui_widgets.cpp
---
>     ${IMGUI_ROOT_DIR}/imgui_draw.cpp ${IMGUI_ROOT_DIR}/imgui_widgets.cpp ${IMGUI_ROOT_DIR}/imgui_tables.cpp
151,161c151,161
< if (NOT CMAKE_SYSTEM_NAME STREQUAL Emscripten)
<     add_library(imgui-gl3w INTERFACE)
<     target_sources(imgui-gl3w INTERFACE ${IMGUI_EXAMPLES_DIR}/libs/gl3w/GL/gl3w.c)
<     target_compile_definitions(imgui-gl3w INTERFACE -DIMGUI_IMPL_OPENGL_LOADER_GL3W=1)
<     target_include_directories(imgui-gl3w INTERFACE ${IMGUI_EXAMPLES_DIR}/libs/gl3w)
<     if (APPLE)
<         target_link_libraries(imgui-gl3w INTERFACE "-framework CoreFoundation")
<     else ()
<         target_link_libraries(imgui-gl3w INTERFACE ${CMAKE_DL_LIBS})
<     endif ()
< endif ()
---
> #if (NOT CMAKE_SYSTEM_NAME STREQUAL Emscripten)
> #    add_library(imgui-gl3w INTERFACE)
> #    target_sources(imgui-gl3w INTERFACE ${IMGUI_EXAMPLES_DIR}/libs/gl3w/GL/gl3w.c)
> #    target_compile_definitions(imgui-gl3w INTERFACE -DIMGUI_IMPL_OPENGL_LOADER_GL3W=1)
> #    target_include_directories(imgui-gl3w INTERFACE ${IMGUI_EXAMPLES_DIR}/libs/gl3w)
> #    if (APPLE)
> #        target_link_libraries(imgui-gl3w INTERFACE "-framework CoreFoundation")
> #    else ()
> #        target_link_libraries(imgui-gl3w INTERFACE ${CMAKE_DL_LIBS})
> #    endif ()
> #endif ()
175c175
<         target_link_libraries(SDL2::SDL2 INTERFACE ${SDL2_LIBRARIES})
---
>         target_link_libraries(SDL2::SDL2 INTERFACE ${SDL2_LIBRARIES} ${CMAKE_DL_LIBS})
323c323
<         target_link_libraries (imgui-opengl3 INTERFACE imgui OpenGL::GL)
---
>         target_link_libraries (imgui-opengl3 INTERFACE imgui OpenGL::GL ${CMAKE_DL_LIBS})

opened by sphaero 2

Support for highlight around Node

Hi, I got really far now in my project using this lib. Thanks!

Now I'm wondering if ImNodes will have the "highlight" around the border of the node? kind of like a glow. My use case is that whenever I am to move the canvas' camera offset to a certain node (using find), i want to give a feedback to the user to signify that this is the node that's found.

opened by flamendless 2

Position of loaded nodes from file is not consistent/correct

I'm saving my nodes to an .ini file. Here's a screenshot before saving:

2021-03-25_22-10

And here's the content of the .ini saved file:

[node_0]
name = a
kind = VARIABLE
x = 1291.000000
y = 205.000000
value_slot = INTEGER
value = 3
input_1 = INTEGER
output_1 = INTEGER

[node_1]
name = b
kind = VARIABLE
x = 1740.000000
y = 203.000000
value_slot = INTEGER
value = 8
input_1 = INTEGER
output_1 = INTEGER

But everytime I load the node from the ini file. I get inconsistent results. Here are sample of loading them: 2021-03-25_22-11

For more information, here's a snippet how I save/load the node to the file:

//saving
for (Node* node : Nodes::v_nodes) //std::vector<Node*>
{
                //struct Node { ImVec2 m_pos }; //just like in the sample.cpp
		std::string str_x = std::to_string(node->m_pos.x);
		std::string str_y = std::to_string(node->m_pos.y);
		ini.SetValue(section, "x", str_x.c_str());
		ini.SetValue(section, "y", str_y.c_str());
}
//loading
const float x = std::stof(ini.GetValue(section, "x"));
const float y = std::stof(ini.GetValue(section, "y"));

Node* node = new Node();
node->m_pos = ImVec2(x, y);
Nodes::v_nodes.push_back(node);
//ImNodes::AutoPositionNode(node); //cant do this as there is no context yet
Nodes::first_load = true;

//in render
ImNodes::BeginCanvas(canvas);
if (Nodes::first_load)
{
		for (Node* node : Nodes::v_nodes)
			ImNodes::AutoPositionNode(node);

		Nodes::first_load = false;
}
ImNodes::EndCanvas();

opened by flamendless 2

Table not rendering correctly

The code

if (ImNodes::Ez::BeginNode(node, node->m_var_name, &node->m_pos, &node->m_selected))
{
  if (ImGui::BeginTable("test", 2))
  {
    ImGui::TableNextRow();
    ImGui::TableNextColumn();
    ImGui::Text("Name:");
    ImGui::Text("Value:");

    ImGui::TableNextColumn();
    ImGui::Text("%s", node->m_var_name);
    ImGui::Text("%s", node->m_var_value);

    ImGui::EndTable();
  }

  ImNodes::Ez::InputSlots(node->m_in_slots.data(), node->m_in_slots.size());  
  ImNodes::Ez::OutputSlots(node->m_out_slots.data(), node->m_out_slots.size());
  //more
  ImNodes::Ez::EndNode();
}

shows the screenshot below 2021-03-14_10-37

The use case is to cleanly show the names of the fields and the values of the fields in a tabular form.

opened by flamendless 2

Correct connection deletion order for multiple in/out situations.

Connecting two nodes to a single input creates a problem when deleting the input node, leaving a dangling connection. This is a valid situation in our use-case:

opened by aaronvark 2
Fix issue with not all connections being deleted when node deleted.

First if statement fixes issue with not all connections to node being deleted when node is deleted. Second if statement prevents redundant DeleteConnection() calls from occurring.

opened by Teknologicus 2
Better sample code and documentation

I pasted the sample code on the readme. I got this imgui/ImNodesEz.cpp:125: bool ImNodes::Ez::BeginNode(void*, const char*, ImVec2*, bool*): Assertion `GContext != nullptr' failed. Aborted (core dumped)

something something context. OK. You have another sample code. Looked through it. Ah!

Pasted this in: static ImNodes::Ez::Context* context = ImNodes::Ez::CreateContext();

Only to be met with a new assertion fail! imgui/imgui_draw.cpp:1792: void ImDrawListSplitter::SetCurrentChannel(ImDrawList*, int): Assertion `idx >= 0 && idx < _Count' failed.

Perhaps the sample code was written for a previous version of the library which is now outdated. In any case, having something to run and play with incrementally is immensely helpful.

opened by GreedyTactician 1

context menu on node content

Imagine I want to add a context menu on node content. In the sample.cpp:

                // Custom node content may go here
                ImGui::Text("Content of %s", node->Title);
                const char* names[5] = { "Label1", "Label2", "Label3", "Label4", "Label5" };
                for (int n = 0; n < 5; n++)
                {
                    ImGui::Selectable(names[n]);
                    if (ImGui::BeginPopupContextItem()) // <-- use last item id as popup id
                    {
                        ImGui::Text("This a popup for \"%s\"!", names[n]);
                        if (ImGui::Button("Close"))
                            ImGui::CloseCurrentPopup();
                        ImGui::EndPopup();
                    }
                    if (ImGui::IsItemHovered())
                        ImGui::SetTooltip("Right-click to open popup");
                }

This is just pasted from imgui_demo.cpp

This doesn't work. Only the context menu for adding nodes is opened.

opened by sphaero 1

Is general slot type provided?

In the example, I can only connect an input slot with an output slot. However, I want some general slots beyond input and output which can be connected each other even though the slots are in the same node. Could you please give me some suggestions? Thank you a lot.

opened by Cliff-Lin 3
Add picture inside of the node

Hi, first of all I want to thank the developers for efforts and spent time for lib dev!

Is it possible to add picture to the node background and custom setup the pins distance and positions inside of the node?

If not, is there any plans in future to add this feature?

Thank you!

opened by aabilityuk 3
Separator/CollapsingHeader exceeds node's width
if (ImNodes::Ez::BeginNode(node, node->m_var_name, &node->m_pos, &node->m_selected)) { ImGui::Separator(); //here //other drawings }

results to

More testing shows that anywhere the ImGui::Separator() is called as long as inside the ImNodes::Ez::BeginNode and ImNodes::Ez::EndNode it results to the same problem
bug
opened by flamendless 6