Egui node graph is a featureful, customizable library to create node graph applications using egui

Related tags

GUI egui_node_graph
Overview

Egui Node Graph

There you have it! Now go build your next awesome node graph thing in Rust ๐Ÿฆ€

Latest version Documentation MIT unsafe forbidden

Showcase image

Egui node graph is a featureful, customizable library to create node graph applications using egui. The library takes care of presenting a node graph to your users, and allows customizing many aspects of the interaction, creating the semantics you want for your specific application.

Features and goals

This crate is meant to be a solid base for anyone wanting to expose a node graph interface to their users. Its main design goal is to be completely agnostic to the semantics of the graph, be it game logic, audio production, dialog trees, shader generators... we have you covered!

The purpose of this library is to draw your graphs and handle the common user interaction, like adding new nodes, moving nodes or creating connections. All the additional functionality is provided by the user by means of custom user types implementing several traits.

Usage

To see a node graph in action, simply clone this repository and launch the example using cargo run. This should open a window with an empty canvas. Right clicking anywhere on the screen will bring up the node finder menu.

The application code in the example is thoroughly commented and serves as a good introduction to embedding this library in your egui project.

A note on API visibility

Contrary to the general tendency in the Rust ecosytem, this library exposes all types and fields that may be remotely relevant to a user as public. This is done with the intent to be as flexible as possible, so no implementation details are hidden from users who wish to tinker with the internals. Note that this crate forbids use of unsafe so there is no risk of introducing UB by breaking any of its invariants.

That being said, for the most typical use cases, you will want to stick to the customization options this crate provides for you: The generic types in the GraphEditorState object and their associated traits are the main API, all of the other types and fields in this crate should be considered an implementation detail. The example project contains a detailed explanation of all the customization options and how are users supposed to interact with this crate.

Finally, this does not change the fact that this crate follows semantic versioning, as is usual in the Rust ecosystem. Any change to a public field is still considered breaking.

Use cases

Egui node graph is the library powering the graph user interface of Blackjack, a 3d procedural modelling software built in Rust using egui, rend3 and wgpu. Main interface of blackjack Are you using this crate for something cool? Add yourself to this section by sending a PR!

Contributing

Contributions are welcome! Before writing a PR, please get in touch by filing an issue ๐Ÿ˜„

Comments
  • Will blackjack use egui_node_graph ?

    Will blackjack use egui_node_graph ?

    The reason I am asking : After playing and extending a bit the provided egui_node_graph_example I started to dive into the next stage: Adapting a minimal version of the blackjack PolyAsm based graph compiler, so I can do node traversal and finally get some executable instructions. Unfortunately this is a bit outside my comfort zone and I ran into an error about wrong lifetimes and at several places I was not comfortable what I was doing to get things to compile and I was also in doubt how to adapt blackjack NodeData to egui_node_graph Node<NodeData>.user_data.

    Anyway, if you plan to make blackjack use egui_node_graph, then I probably could figure out myself how to get my minimal compiler example to work, otherwise a minimal working example of something like a graph compiler would be great.

    opened by rsaccon 7
  • change non recurring DFS

    change non recurring DFS

    I changed the implementation to non-recurring DFS. This will do the following well.

    1. This implementation does not use recursion, so it does not cause a stack overflow even if the number of nodes is large.
    2. #21

    inf

    opened by kkngsm 5
  • Color Matters (e.g. support light mode)

    Color Matters (e.g. support light mode)

    Now, if change to light mode : Light mode before modification

    This makes the right-click popup text unreadable. So I made the following modifications to accommodate light mode. Light mode after modification I would like to hear your opinions on the colors.

    This modified branch is kkngsm@fffdaebe8b5807528444056805429d1bb3c594cb

    opened by kkngsm 5
  • Visual Enhancement: Bezier Curves

    Visual Enhancement: Bezier Curves

    Hi,

    first of all, this library is a great starting point for anyone wanting to do nodegraphs. So thanks for releasing it!

    The Editor currently uses straight lines to connect the nodes. But Bezier Curves look so much nicer :)

    Luckily egui is adding support for cubic bezier curves. But since this is sadly only in their git, I am doing this writeup so once it ships, the implementation is straightforward.

    Here I have linked a demo on how bezier curves can be set up to look like they do in other editors. You can move the endpoints to see how it feels. Notably, the control points are half the distance (s in the demo) away from the endpoints, but on the same y coordinate.

    So, what has to be done here in the node graph?

    In egui_node_graph/src/editor_ui.rs; Instead of:

    painter.line_segment([src_pos, dst_pos], connection_stroke);
    

    Something like:

    let s = 0.5 * src_pos.distance(dst_pos);
    
    let control_pos1 = pos2(src_pos.x + s, src_pos.y);
    let control_pos2 = pos2(src_pos.x - s, src_pos.y);
    
    painter.add(Shape::CubicBezier(CubicBezierShape {
        fill: Color32::TRANSPARENT,
        points:[src_pos,control_pos1,control_pos2,dst_pos],
        closed: false,
        stroke: connection_stroke,
    }));
    
    opened by DrRuhe 5
  • Buttons drawn on (after) the graph doesn't working.

    Buttons drawn on (after) the graph doesn't working.

    https://github.com/setzer22/egui_node_graph/blob/75308d0e72dd604339cd864173ca31f1bc7a3fc7/egui_node_graph_example/src/app.rs#L388-L399

    If change it as follows, the switch doesn't work.

    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        let graph_response = egui::CentralPanel::default()
            .show(ctx, |ui| {
                self.state
                    .draw_graph_editor(ui, AllMyNodeTemplates, &mut self.user_state)
            })
            .inner;
        egui::TopBottomPanel::top("top").show(ctx, |ui| {
            egui::menu::bar(ui, |ui| {
                egui::widgets::global_dark_light_mode_switch(ui);
            });
        });
    
    opened by kkngsm 4
  • return disconnect responses before removal response

    return disconnect responses before removal response

    Currently egui_node_graph returns the node removal response before disconnection responses during node deletion. User code is likely to want to clean up connections before running any logic that handles node removal directly. This PR re-orders the responses so that disconnect responses are emitted before the removal response. This PR should be considered as introducing a breaking change, and one that isn't protected by types. As such it could lead to bugs in user code that depended on the old order. Still I think this is a more logical ordering so I am submitting this PR for consideration. Thank you.

    opened by bpostlethwaite 4
  • Fix #26 - use lambdas/a struct instead of macros

    Fix #26 - use lambdas/a struct instead of macros

    As discussed in #26 - using lambdas / structures instead of macros. I think this is much easier for someone to reason about at a glance, especially as it doesn't introduce any new syntax or semantics. The first block was trivial, but the second block required me to introduce a temporary struct Evaluator to hold all of the relevant state.

    I think the first block is uncontentious, but the second one might be a bit harder of a sell due to the increase in LoC. I think it's worth it, but you might not ๐Ÿ˜…

    opened by philpax 4
  • Hide close button of node widget

    Hide close button of node widget

    I'm working on my render graph editor. There are two special nodes called Input and Output. They should exist for all my node graphs, can not be created by the user, nor can be deleted.

    I want to hide the close button for my Input/Output node. Currently I found no existing way to do this.

    There can be a method fn can_delete(&self) -> bool for NodeDataTrait, so the nodes can decide whether it is deletable.

    I implemented it on my fork. I can make a pr if you like.

    opened by huisedenanhai 3
  • Change from DFS to BFS

    Change from DFS to BFS

    I changed the implementation from DFS to BFS. This will do the following well.

    1. This implementation does not use recursion, so it does not cause a stack overflow even if the number of nodes is large.
    2. Infinite loop countermeasure #21
    3. Easy to follow the process for those seeing the implementation for the first time(It might depend on the person.).
    opened by kkngsm 3
  • Make node finder search bar case insensitive

    Make node finder search bar case insensitive

    Just a simple quality of life feature to make the node finder search bar case insensitive by default. I'm fairly new to rust and open-source in general but excited to follow the development of blackjack and maybe contribute in the future. Really cool idea.

    image
    opened by matthijsjanssens 3
  • Fix some small stuff

    Fix some small stuff

    Fixes panning outside of the editor area, and being able to open a new finder by clicking inside the finder window. Also makes it so the finder area is always on top. It seemed to disappear when clicking twice in a editor area for some reason.

    Tested in my program and seems to work.

    opened by fkaa 3
  • Hierarchical design and many-to-many connections

    Hierarchical design and many-to-many connections

    Happy new year!

    I've finally managed to finish the redesign that I proposed in this thread, and now here's the PR for it!

    To accomplish the goals that I set out to achieve, I had to do almost a total rewrite of the library although I tried to keep it as spiritually close to the original as I could. Given how extreme this rewrite is, I won't be offended at all if you decide to reject this PR. Either way it was an extremely valuable exercise for me.

    To help you decide whether you actually want these changes, here's a list of pros and cons:

    Pros

    • The UI is much more flexible
      • Developers can inject their own custom nodes and ports
      • Colors for the general look and feel can be customized
    • It is easy to set connection limits for both input and output ports, or make their connections limitless
      • This means developers can set their input nodes to accept 1, N, or unlimited inputs
    • It is easy for application users to see what the limits are and to choose which connections to disconnect
    • Migration to this new API isn't too terrible (imho), the example application can be used as a reference
    • I personally think the API is overall simpler to use, but obviously I'm biased when I say that

    Cons

    • Massively changes the API
    • Ports are now inside of the node body instead of at the edge (see screenshot)
      • I do not prefer this change, but I couldn't figure out a way to make the node > port > hook hierarchy work without egui automatically wrapping the ports and hooks into the body of the node Screenshot from 2023-01-02 02-39-01

    After really getting into the weeds on this effort, I have a few conceptual concerns about using egui to produce node graphs.

    • As you've mentioned elsewhere, zooming is very challenging and not something that egui presently supports out of the box
    • Getting a desirable level of flexibility/extensibility involves some very convoluted trait relationships
    • egui is a very useful and powerful tool for developing conventional UIs, but I feel like we're rapidly approaching the limit of what it can support nicely. I'd like to incorporate more complex 2D rendering into my node graphs, but I have some doubts that egui is cut out for that.
    • I'm concerned about how well the immediate mode rendering will actually be able to scale if I want to use it for very large complex projects

    For all of the above reasons I'm thinking about exploring the possibility of developing a node graph editor on top of kayak_ui which is made for the bevy engine. I feel optimistic that with the benefits of an ECS and a retained mode rendering pipeline there will be a lot more opportunity to produce large scale, complex, aesthetically pleasing node graphs.

    opened by mxgrey 2
  • Incorrect draw order

    Incorrect draw order

    I have two, possibly related, issues with UI ordering

    1. Cables are above nodes

    Cables should render behind nodes. As you can see, if they are in front, it can look pretty janky. Screenshot 2022-11-12 at 1 41 47 PM

    2. Attempting to select a node selects most back node when layered

    If I click on the title "ObjRender", it brings the "Expression" node to the front. I expect the UI to reflect what I can interact with. "Expression" should only be selected if I click where I can see it, on the left. Screenshot 2022-11-12 at 1 50 47 PM

    opened by edeetee 1
  • Right click output - create node and connect

    Right click output - create node and connect

    If you right click a node output, it should show the add node ui, then automatically connect the added node to the clicked output if compatible.

    I'm happy to pick up this work.

    opened by edeetee 1
  • The example doesn't work with version 0.3.0

    The example doesn't work with version 0.3.0

    The example doesn't work with version 0.3.0. Are you gonna release a new version? or maybe add some more documentation to make it easier to get started?

    opened by TheKnarf 3
  • Cannot use more than one node_graph in an egui app

    Cannot use more than one node_graph in an egui app

    NodeIds use slotmaps to hold references. Slotmaps return the same sequence of IDs for a given KeyType.

    For example this runs with no panics

    use slotmap::SlotMap;
    
    fn main() {
        let mut sm1 = SlotMap::new();
        let mut sm2 = SlotMap::new();
        let sm1_key1 = sm1.insert("foo");
        let sm2_key1 = sm2.insert("bar");
    
        assert_eq!(sm1_key1, sm2_key1);
    }
    

    Egui Node Graph statically assigns the same KeyType to the node_graph slotmap and therefore multiple node_graphs in the same process will return the same keys. Since these keys go into the same "global" egui widget key-space egui complains about identical keys.

    opened by bpostlethwaite 1
Owner
null
Create dynamic grid-based layouts for egui

egui_grid Create dynamic grid layouts for egui. Grids are flexible, easy to create, with behavior similar to egui_extra's strip creation. They're comp

null 6 Apr 18, 2023
Provides event handling for egui in SDL2 window applications.

egui-sdl2-event Provides event handling for egui when SDL2 is used as the windowing system. This crate does not perform any rendering, but it can be c

Valtteri Vallius 8 Feb 15, 2023
Automatically create GUI applications from clap3 apps

Automatically create GUI applications from clap3 apps

Michaล‚ Gniadek 340 Dec 20, 2022
Highly customizable finder with high performance. Written in Rust and uses GTK

Findex Highly customizable finder with high performance. Written in Rust and uses GTK Installation Automatic Binary Clone from https://aur.archlinux.o

MD Gaziur Rahman Noor 442 Jan 1, 2023
D3D11 backend for egui library. Presumably for mods/cheats development

D3D11 backend for egui library. Presumably for mods/cheats development. Currently few features from egui are missing. WIP.

sy1ntexx 24 Jan 4, 2023
This project attempts to allow the creation of reusable egui-themes

egui stylist Note this project is considered to be experimental and -- while used in personal projects -- may have API breaking changes without warnin

Jacobsky 22 Dec 1, 2022
A simple GUI version of the pH calibration tool written in egui, based on the eframe template.

caliphui A simple GUI version of the pH calibration tool written in egui, based on the eframe template. Usage Native binaries are provided under relea

Peter Dunne 0 Dec 29, 2021
FLTK frontend for Egui WGPU backend.

Egui FLTK Frontend FLTK Frontend for Egui WGPU Backend On linux Debian/Ubuntu, make sure to install the latest main requirements: sudo apt-get update

Adia Robbie 5 Oct 25, 2022
egui: an easy-to-use immediate mode GUI in pure Rust

?? egui: an easy-to-use GUI in pure Rust egui is a simple, fast, and highly portable immediate mode GUI library for Rust. egui runs on the web, native

Emil Ernerfeldt 12.6k Jan 3, 2023
Egui bindings for macroquad

egui bindings for macroquad This is the easiest way to use egui. Just two functions! Web demo. Usage You need to call ui when you need to get informat

ilya sheprut 54 Dec 28, 2022
Egui bindings for miniquad

egui bindings for miniquad native On Linux you first must run apt install libx11-dev libxi-dev libgl1-mesa-dev (miniquad dependencies). cargo run --re

Fedor Logachev 48 Dec 28, 2022
Render egui with skia!

Skia backend for egui This is a drawing backend for egui that uses skia-safe. Usage Have a look at the metal or cpu examples to get started. Run the e

null 14 Dec 19, 2022
a day-planner/calendar app based on egui

Malakal Malakal is a day planner application. I crafted it because I was not able to find a comfortable calendar application for Linux. I myself have

null 5 Dec 21, 2022
Example showing how to use tokio and egui together.

Example using tokio with egui This example uses reqwest to send an HTTP request to httpbin. The parsed response contains an increment value (as provid

Jay Oster 10 Dec 25, 2022
A render-backend independant egui backend for sdl2

A Sdl2 + Egui Backend An egui backend for sdl2 unbound to any renderer-backend. You can include it like so: [dependencies] egui_sdl2_platform = "0.1.0

null 4 Dec 16, 2022
egui backend for D3D9.

egui-d3d9 egui backend for D3D9. Primarily intended for source games like CS:GO and GMod. It's not perfect by far, but it'll do. This is a rewrite of

unknowntrojan 6 Dec 25, 2022
A tool for creating egui Visuals (themes).

egui-visuals-utility A tool for creating egui Visuals (themes). The code is rather messy and might crash but it seems to work. To load the theme use s

null 7 Jan 13, 2023
egui port to Car Thing (and maybe an alternative Car Thing UI?)

tt This project contains a port of egui to the Spotify Car Thing although in the future I also plan for it to contain a custom Car Thing UI. Technical

Andy Bao 7 Dec 30, 2022
An interactive JSON tree visualiser for egui, with search and highlight functionality.

egui_json_tree An interactive JSON tree visualiser for egui, with search and highlight functionality. Usage use egui::{Color32}; use egui_json_tree::{

null 13 Sep 1, 2023