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
  • 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
  • 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
  • Dependency missing.

    Dependency missing.

    I'm using imgui 1.83 docking, and I recently started getting into this extension, but it seem that the dependency (optional of course): https://github.com/thedmd/imgui/tree/feature/draw-list-fringe-scale is no longer available. Did the name change?

    Edit*: Also, if any dependency is still working or does work as of now, how do I properly download it, does it require overwriting my current imgui files?

    opened by Stanlyhalo 6
  • Avoid capturing imgui widget inputs when node is overlapped.

    Avoid capturing imgui widget inputs when node is overlapped.

    Hi, When a node is overlapped onto a ImGui widget, is there a way to prevent the widgets from responding to the click, hover, edit events ? In the example below, when i overlap the node onto the text box, the text box responds to the input and when overlapped onto the "Hello" button, the button responds to the click.

    test

    opened by AK-test-PK 6
  • CMake 3.17.2, readme command error. windows10

    CMake 3.17.2, readme command error. windows10

    CMake 3.17.2 Command: cmake -H. -BBuild -G "Visual Studio 15 2017 Win64" Cmake response: Argument "." to --help-command is not a CMake command. Use --help-command-list to see all commands.

    I change the command to cmake . -BBuild -G "Visual Studio 15 2017 Win64" It works. I run the command in the top-level directory.

    opened by Aincvy 6
  • Blueprints example doesn't use the main line version of ImGui

    Blueprints example doesn't use the main line version of ImGui

    I've been trying to implement a node type that has pins on all sides (not just left and right) and after a few hours studying the blueprints example I have discovered that the branched version of ImGui has features not merged into the main line.

    Specifcally, ImGui::BeginHorizontal and other "stacking" features that were added. I saw that it was created a long time ago now, but never merged.

    I'm unsure as to whether ImGui ended up implementing something else instead, but either way are there plans to update the example or provide another way to implement the positioning of pins?

    opened by cosmicr 1
  • 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 8
  • Fix for compatibility with latest imgui version (arg count for ImGui::isClippedEx())

    Fix for compatibility with latest imgui version (arg count for ImGui::isClippedEx())

    This ImGui commit removed the third argument for the function ImGui::IsClippedEx() https://github.com/ocornut/imgui/commit/3973de793316e84bee8719bf29091df1ad61b514 I just fixed it to build with the latest imgui version.

    opened by Guistac 1
  • Vertical Pins?

    Vertical Pins?

    I tried to check the example for this, but it's hard to understand where the vertical pins styling comes into play. Here is a picture of my current state, and my only 2 things I need help with, is making the link direction come from the bottom instead acting like it's coming out of the right side, also, I need help with making it so the pin/link point can be anywhere on the white quad (saw that this can be done in one of the gifs on the readme). image

    opened by Stanlyhalo 2
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ń
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 7.9k Oct 4, 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 244 Sep 28, 2022
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 198 Oct 4, 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 42k Oct 6, 2022
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.7k Sep 29, 2022
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 33 Aug 25, 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 22 Sep 28, 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 2 Dec 2, 2021
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 6 Jul 20, 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 21 Sep 7, 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 263 Oct 2, 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 94 Sep 21, 2022
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 207 Sep 23, 2022
Unity OnGUI(IMGUI) extensions for Rapid prototyping/development

RapidGUI Unity IMGUI extensions for Rapid prototyping/development. Installation Install via OpenUPM The package is available on the openupm registry.

null 246 Sep 24, 2022
A permissively licensed markdown single-header library for Dear ImGui.

Support development of imgui_markdown through GitHub Sponsors or Patreon imgui_markdown Markdown For Dear ImGui A permissively licensed markdown singl

Juliette Foucaut 821 Oct 4, 2022