An implementation of node editor with ImGui-like API.

Overview

Node Editor in ImGui

Appveyor status Travis status

About

An implementation of node editor with ImGui-like API.

Project purpose is to serve as a basis for more complex solutions like blueprint editors.

node_editor_overview

Node Editor is build around an idea "draw your content, we do the rest", which mean interactions are handled by editor, content rendering is handled by user. Editor will take care of:

  • placing your node in the word
  • dragging nodes
  • zoom and scrolling
  • selection
  • various interaction that can be queried by API (creation, deletion, selection changes, etc.)

Here are some highlights:

  • Node movement and selection is handled internally

  • Node and pin contents are fully customizable

  • Fully styled, default theme is modeled after UE4 blueprints

    • Flexible enough to produce such nodes:

      image image image

    • Customizable links based on Bézier curves:

      image image image

  • Automatic highlights for nodes, pins and links:

    image

  • Smooth navigation and selection

  • Node state can be saved in user context, so layout will not break

  • Selection rectangles and group dragging

  • Context menu support

  • Basic shortcuts support (cut/copy/paste/delete)

  • ImGui style API

Editor is used to implement blueprint editor in Spark CE engine, it proved itself there by allowing to do everything we needed. Therefore it is now slowly moving into stable state from beeing a prototype.

Note: Project recently was restructured to mimic ImGui layout.

Please report issues or questions if something isn't clear.

Dependencies

  • Vanilla ImGui 1.72+
  • C++14

Dependencies for examples:

Optional extension you can pull into your local copy of ImGui node editor can take advantage of:

Building / Installing

Node Editor sources are located in root project directory. To use it, simply copy&paste sources into your project. Exactly like you can do with ImGui.

Examples

Examples can be build with CMake:

Windows:
    cmake -Hexamples -Bbuild -G "Visual Studio 15 2017 Win64"

macOS:
    cmake -Hexamples -Bbuild -G "Xcode"

Linux:
    cmake -Hexamples -Bbuild -G "Unix Makefiles"

Build:
    cmake --build build --config Release

Executables will be located in build\bin directory.

Quick Start

Main node editor header is located in imgui_node_editor.h.

Minimal example of one node can be found in simple-example.cpp. Press 'F' in editor to focus on editor content if you see only grid.

In"); ed::EndPin(); ImGui::SameLine(); ed::BeginPin(uniqueId++, ed::PinKind::Output); ImGui::Text("Out ->"); ed::EndPin(); ed::EndNode(); ed::End(); }">
# include <application.h>
# include <imgui_node_editor.h>

namespace ed = ax::NodeEditor;

static ed::EditorContext* g_Context = nullptr;

void Application_Initialize()
{
    g_Context = ed::CreateEditor();
}

void Application_Finalize()
{
    ed::DestroyEditor(g_Context);
}

void Application_Frame()
{
    ed::SetCurrentEditor(g_Context);

    ed::Begin("My Editor");

    int uniqueId = 1;

    // Start drawing nodes.
    ed::BeginNode(uniqueId++);
        ImGui::Text("Node A");
        ed::BeginPin(uniqueId++, ed::PinKind::Input);
            ImGui::Text("-> In");
        ed::EndPin();
        ImGui::SameLine();
        ed::BeginPin(uniqueId++, ed::PinKind::Output);
            ImGui::Text("Out ->");
        ed::EndPin();
    ed::EndNode();

    ed::End();
}

Result:

00-Simple

For more details please visit examples folder.

Blueprints Example

Preview2

Here is Node Editor at work in Spark CE

image image

Comments
  • Column problem

    Column problem

    I found a problem.

    This code causes assert in Suspend.

    ImGui::Begin("Begin");
    ImGui::Columns(2);
    ImGui::NextColumn();
    
    ed::SetCurrentEditor(g_Context);
    ed::Begin("My Editor", ImVec2(0.0, 0.0f));
    
    // assert!
    ed::Suspend();
    ed::Resume();
    
    ed::End();
    ed::SetCurrentEditor(nullptr);
    
    ImGui::Columns(1);
    mGui::End();
    
    

    But this codes runs with Begin and End child.

    ImGui::Begin("Begin");
    ImGui::Columns(2);
    ImGui::NextColumn();
    
    // add
    ImGui::BeginChild("Child");
    ed::SetCurrentEditor(g_Context);
    ed::Begin("My Editor", ImVec2(0.0, 0.0f));
    
    ed::Suspend();
    ed::Resume();
    
    ed::End();
    ed::SetCurrentEditor(nullptr);
    
    // add
    ImGui::EndChild();
    
    ImGui::Columns(1);
    mGui::End();
    

    Is it a bug?

    Best regards.

    bug 
    opened by durswd 11
  • Highlighting links

    Highlighting links

    Hi,

    Playing with big schematic , it tends to become unreadable with all the links. Is there a way to highlight all the links connected to a selected node ?

    opened by SadE54 10
  • ed::EditorContext::LoadSettings() - inverted

    ed::EditorContext::LoadSettings() - inverted "m_VisibleRect" test

    im on the develop branch.

    in imgui_node_editor.cpp.. in ed::EditorContext::LoadSettings() ...

    line 2045 there is this if statement, that guards assigning the deserialized m_Settings to the m_NavigateAction, specifically the scroll and zoom:

        if (ImRect_IsEmpty(m_Settings.m_VisibleRect))
        {
            m_NavigateAction.m_Scroll = m_Settings.m_ViewScroll;
            m_NavigateAction.m_Zoom   = m_Settings.m_ViewZoom;
        }
        else
        {
            m_NavigateAction.NavigateTo(m_Settings.m_VisibleRect, NavigateAction::ZoomMode::Exact, 0.0f);
        }
    

    I think this test is inverted. That is, that it should read: if (!ImRect_IsEmpty(m_Settings.m_VisibleRect))

    I found that when I invert this test, then my scroll and zoom deserialization works correctly.

    The json that is saved out during normal serialization has a valid rectangle like this: "visible_rect":{"max":{"x":1623.708251953125,"y":-1014.2291259765625},"min":{"x":718.125244140625,"y":-1469.4290771484375}}

    So the current code looks at that valid rectangle, and ImRect_IsEmpty correctly returns "false" (because it's not empty), and this skips the scroll and zoom assignment. What happens next is the "else" clause is used, which recomputes and uses new zoom and scroll values. So this "throws out" the deseralized zoom and scroll from the json file, and gives you a default-ish zoom and scroll.

    bug 
    opened by crolando 10
  • Nodes Break when moved to certain positions in local space

    Nodes Break when moved to certain positions in local space

    Hi, I have a really wierd problem. When nodes are moved out of or created outside a invisible wierd area of the local editor space they are no longer really interactable. They can only be selected with area selection. Pins are not interactable, they dont get tagged as HotObject when hovered. No connections can be made. it can be deleted and existing links it has can be selected and deleted aswell. In the gif below i try to demonstrate how the node breaks when moved.

    Node Editor Bugg Demonstration

    opened by FapianoSWE 10
  • Save/Load nodes and links to json

    Save/Load nodes and links to json

    Hi, dear community! Could anybody please help me to find out how to make a save/load logic for all nodes and links to/from json., It would be great to see a code sample and any advices would be appreciated!!! Thank you very much

    opened by aabilityuk 9
  • Node won't render.

    Node won't render.

    Hi, I'm using DearImGui docking branch 1.83, and I have initialized the editor context, and set the current example, and am currently using the default example for the simple node. I have the window created, and the node created, but nothing appears in the window. Any help would be appreciated.

    opened by Stanlyhalo 9
  • Disable mouse interaction

    Disable mouse interaction

    Ho, I would like to disable mouse interaction when custom mouse interaction happens. In the example below I want to drag item out of the list:

    imgui-node-editor-custom-drag

    Node selection should be turned off. Any ideas? Even if I had to modify the library?

    bug 
    opened by Namek 8
  • Link is not deleted when connected node is deleted

    Link is not deleted when connected node is deleted

    Hi

    I'm using the last develop branch and I can see that if i'm deleting a connected node , the link is not deleted and still exist in memory. It cannot be dwran anymore but you can see that the ports are still connected:

    MEFlow_qAALNJvyva MEFlow_3sk5fTfllB

    opened by SadE54 8
  • Nodes become inactive after scrolling (latest imgui docking branch)

    Nodes become inactive after scrolling (latest imgui docking branch)

    Steps to reproduce:

    1. Clone imgui-node-editor
    2. Replace all *.h and *.cpp imgui files in ThirdParty/imgui directory by files from latest imgui docking branch
    3. Add all required ImGuiKey_* to enum in imgui.h
    4. Compile Examples/BasicInteraction (for example)
    5. Move one of the nodes far away from starting position
    6. If try to move it again - fail, it is now inactive

    This is because the node now is out of the mouse viewport rect. If comment this line imgui/imgui.cpp#L4675 everything works fine, but I think it's a bad idea...

    If add this code before line #4675, we will be able to see that mouse viewport rect, out of which nodes become inactive

    auto rect = g.MouseViewport->GetRect();
    ImGui::GetWindowDrawList()->AddRect(rect.Min, rect.Max, IM_COL32(255, 0, 0, 255));
    

    mouse-viewport-rect

    investigate 
    opened by mtiapko 8
  • Question about

    Question about "simple" example

    In the Simple example, is it expected that one can drag out a connection from on Out pin, and drag it to an In pin? I'm not able to left-drag a connection out of the Out. Before diving too deep into debugging, I thought I should ask this question first :)

    question 
    opened by meshula 7
  • Configurable zoom level?

    Configurable zoom level?

    I wish that the zoom level was configurable, in my case I only want to zoom out, which means zoomLevel >= 1.0f.

    Also, there I think there is a bug. When I zoom in/out in a quick manner, it goes out of range. For example, I very often get the value: obraz

    which is not defined on this list:

    const float ed::NavigateAction::s_ZoomLevels[] =
    {
        0.1f, 0.15f, 0.20f, 0.25f, 0.33f, 0.5f, 0.75f, 1.0f, 1.25f, 1.50f, 2.0f, 2.5f, 3.0f, 4.0f, 5.0f, 6.0f, 7.0f, 8.0f
    };
    

    And from that value 0.8000... I can't easily get back to 1.0. Of course, there are more values not appearing on that list.

    enhancement 
    opened by Namek 6
  • struct EditorContext has inconsistent namespace

    struct EditorContext has inconsistent namespace

    in imgui_node_editor.h, struct EditorContext is forward declared in ax::NodeEditor namespace, while it is defined in ax::NodeEditor::Detail. It seems to be wanted as the reinterpret_cast tells in CreateEditor, but it provokes unknown symbol dependency reflection while using your library with my reflection meta compiler. Is there a strong reason why it is like this ? I suggest in imgui_node_editor.h something like this to avoid compiler misleading :

    namespace Detail
    {
        struct EditorContext;
    }
    using EditorContext = Detail::EditorContext;
    

    instead of struct EditorContext;

    opened by vlmillet 0
  • add export macro (ex: IMGUI_NODEEDITOR_API) in front of API functions to be able to use them from a dll/sharedlib

    add export macro (ex: IMGUI_NODEEDITOR_API) in front of API functions to be able to use them from a dll/sharedlib

    Hello, It would be nice to have an export macro to use your node editor as part of a dll.

    ex: IMGUI_NODE_EDITOR_API void BeginNode(NodeId id);

    It could be even two of them, to mimic how IMGUI used IMGUI_API and IMGUI_API_IMPL for public and internal api functions.

    opened by vlmillet 2
  • How to use index 0 as a node ID?

    How to use index 0 as a node ID?

    Is there a way to use index 0 as a node ID? Right now, if one of my nodes has an index of 0 it breaks the usability. Same thing is for links and pins.

    Example: The "Multiplier" node moves when I hold LMB even if it is not selected. Instead, a selection rectangle should be drawn:

    https://user-images.githubusercontent.com/83558889/204521694-5b72d4ee-a245-4cee-bcf1-10694f246b39.mp4

    The "Multiplier" node id is 0, and the following nodes' ids are 1 and 2. When the "Multiplier" node id is 1 and the following nodes' ids are 2 and 3 it behaves as expected.

    https://user-images.githubusercontent.com/83558889/204522834-d4777d0a-b188-40fa-ae06-601855e5baa9.mp4

    opened by dontweaks 0
  • How to delete the line linked to self ?

    How to delete the line linked to self ?

    I have tried the example, and found a shortcoming when linking the input and outout on the same control node. And I cannot delete it as the cursor cannot hover the link line to popup context menu. The image below shows what I have met. image

    The node type below is ok to delete even though It links to self. image

    opened by ChivenZhang 0
  • EditorContext::Begin: handle ImGuiEx::Canvas::Begin return at initial setup

    EditorContext::Begin: handle ImGuiEx::Canvas::Begin return at initial setup

    if ImGuiEx::Canvas::Begin returns false (which can happen if the window is too small and the canvas is Clipped), then the subsequent call to ImGuiEx::Canvas::End() will trigger an IM_ASSERT

    This is an issue I ran several times into.

    opened by pthom 0
  • cmake modular installation

    cmake modular installation

    I'm not sure weather this change helps or interrupts.

    It's definitely not finished and needs work but I require some help with that since I'm still new to CMake.

    Main reason I made these changes was to build my application in elegant way. I wanted to use your "application" class as starting point but I didn't want to wire CMakes to build directory.

    After introducing changes, building and installing. Integration with imgui-node-editor looks like this. image image

    Unfortunately I couldn't come up with solution to PUBLIC include directories. From my understanding mere linking to imgui_node_editor::imgui_node_editor should make them visible for the project but It doesn't. Hence ${CMAKE_INSTALL_PREFIX}/../imgui_...

    opened by Haranoi17 0
Releases(v0.9)
  • v0.9(Jul 16, 2019)

    This is pre 1.0 release with a goal of:

    • tidying things up
    • exposing current version over prototype in releases

    Marking this 0.9 leave some room for:

    • making a documentation
    • cleaning up public API if necessary

    Let's summarize changes:

    • editor now compile and works with vanilla ImGui 1.72+
    • no external dependencies beside ImGui
    • editor sources are contained inside NodeEditor directory
    • editor no longer use child window, now it acts like regular widget

    Major changes from prototype stage:

    • "NodeEditor" was renamed to "imgui_node_editor", both in term of project name and header file name (this is one change visible to the user)
    • imgui_canvas - widget was factored out from editor and now is an independent piece of code, it will live along node editor
    • imgui_extra_math - various utilities and extra operators that I found missing in imgui_internal.h
    • imgui_bezier_math - set of function to operate on cubic bezier curves, lenght, subdivision, sampling, derivative and more
    • imgui_node_editor.cpp - implementation of node editor
    • imgui_node_editor_api.cpp - public API implementation
    • imgui_node_editor_internal.* - internal structures of node editor
    • ax/Math2D was moved into utilities
    • picojson removed, replaced by crude_json made for node editor (I'm keeping original save data format)
    • blueprint builder was moved into utilities
    • new canvas sample was added
    • local copy of ImGui was updated to 1.72 (WIP) with optional extensions:
    Source code(tar.gz)
    Source code(zip)
  • v0.1-prototype(Jun 21, 2019)

Owner
Michał Cichoń
Michał Cichoń
Simple ImGui external base. Uses ImGui DX9.

ImGui External Base ??️ What is this? ⚡ Hello all! I used to use noteffex's loader base for all my external ImGui projects. I got bored of using this

Alfie 11 Jun 29, 2022
An addon of imgui for supporting docks in the imgui's window

An addon of imgui for support dock in the window

BB 207 Nov 29, 2022
Real-time GUI layout creator/editor for Dear ImGui

ImStudio Real-time GUI layout creator/editor for Dear ImGui Inspired by Code-Building/ImGuiBuilder Features Drag edit Property edit Covers most of the

null 303 Jan 9, 2023
Build performant, native and cross-platform desktop applications with Node.js and CSS like styling. 🚀

NodeGui Build performant, native and cross-platform desktop applications with Node.js and CSS like styling. ?? NodeGUI is powered by Qt5 ?? which make

NodeGui 8.1k Dec 30, 2022
This is a thin c-api wrapper programmatically generated for the excellent C++ immediate mode gui Dear ImGui.

cimgui This is a thin c-api wrapper programmatically generated for the excellent C++ immediate mode gui Dear ImGui. All imgui.h functions are programm

Victor Bombi 22 Jul 5, 2021
glw_imgui - C++ IMGUI implementation

glw_imgui - C++ IMGUI implementation Immediate Mode UI C++ implementation. IMGUI is a code-driven, simple and bloat-free GUI system, widely used in mo

null 51 Feb 8, 2022
Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies

Dear ImGui (This library is available under a free and permissive license, but needs financial support to sustain its continued improvements. In addit

omar 44.5k Jan 7, 2023
Advanced 2D Plotting for Dear ImGui

ImPlot ImPlot is an immediate mode, GPU accelerated plotting library for Dear ImGui. It aims to provide a first-class API that ImGui fans will love. I

Evan Pezent 2.9k Jan 9, 2023
CMakeLists wrapper around imgui

ImGui Wrappings This is a trifold wrapper for the Dear ImGui library. Ease integration with CMake, Provide an RAII mechanism for ImGui scopes, Provide

Oliver Smith 39 Dec 8, 2022
super duper simple gui for C, wrapping imgui and stb

super duper simle gui for C, wrapping imgui and stb You can use it as a static library with cmake. See the example directory for a complete example. E

Rasmus 11 May 19, 2022
KeyAuth login form made with ImGui.

KeyAuth-ImGui-Example KeyAuth ImGui Example Download Repository Download the DirectX SDK

Lolys 23 Dec 16, 2022
Dear ImGui prototyping wrapper.

LabImGui Prototyping framework LabImGui wraps up creating a window, GL bindings, and a full screen docking set up with ImGui so that all of the boiler

Nick Porcino 1 Dec 5, 2022
An integrated information center created with dear ImGui using modern C++ design / coding style.

ImGui info-center Introduction An integrated notification and information center created with dear ImGui. Interfaces and variables are designed under

Feej 7 Oct 29, 2022
ImGuiBase - A very good & simple external ImGui base

ImGuiBase Join CProject to learn about ImGui! https://discord.gg/dnkdDuUtQu Check out our website: https://cproject.xyz Check out the youtube tutorial

null 25 Dec 23, 2022
Addon widgets for GUI library Dear ImGui.

ImGui-Addons Addon widgets for GUI library Dear ImGui. File Dialog A simple cross-platform file dialog that uses dirent interface for reading director

null 286 Jan 7, 2023
This is a software renderer for Dear ImGui. I built it not out of a specific need, but because it was fun

Dear ImGui software renderer This is a software renderer for Dear ImGui. I built it not out of a specific need, but because it was fun. The goal was t

Emil Ernerfeldt 214 Dec 22, 2022
This is a collection of widgets and utilities for the immediate mode GUI (imgui) that I am developing for the critic2 GUI

ImGui Goodies This is a collection of widgets and utilities for the immediate mode GUI (imgui) that I am developing for the critic2 GUI. Currently, th

null 95 Nov 19, 2022
Immediate mode 3D gizmo for scene editing and other controls based on Dear Imgui

ImGuizmo Latest stable tagged version is 1.83. Current master version is 1.84 WIP. What started with the gizmo is now a collection of dear imgui widge

Cedric Guillemet 2.3k Dec 27, 2022
Nice things to use along dear imgui

Mini hexadecimal editor! Right-click for option menu. Features: Keyboard controls. Read-only mode. Optional Ascii display. Optional HexII display. Goto address. Highlight range/function. Read/Write handlers.

omar 664 Jan 1, 2023