New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Node Graph Editors with ImGui #306

Open
emoon opened this Issue Aug 24, 2015 · 79 comments

Comments

@emoon
Contributor

emoon commented Aug 24, 2015

Hi,

So I'm thinking of using ImGui for doing a basic node graph that can be used to edit materials. There are lots of programs that does this but for example:

http://keenleveldesign.com/pimp/protools/shaderfusion/ShaderFusionReleasePromo/shaderfusion01.jpg

I wonder how one would go about doing something similar with ImGui. Having separate windows for each box is likely (?) the best approach as it would allow the user to move them around and what not.

I guess adding some custom stuff for doing the connections + lines as well shouldn't be too hard but I just wanted your thoughts about it.

Cheers!

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Aug 24, 2015

Owner

You can start with actual ImGui Windows but as you dig into connections and more features they will likely get in your way? It may be more awkward to restrict them within a given spot, etc. One benefit is that they will handle overlapping for you.

Creating your own mini-window not too hard:

  • do your drawing via the drawlist API
  • perhaps push a clipping rectangle
  • use InvisibleButton() + IsItemActive() (or MouseClickedPos and GetMouseDragDelta) to handle moving.

If you can avoid overlapping it'll be simpler. If you can't the next easiest thing would probably be to handle ordering/sorting them yourself.

Owner

ocornut commented Aug 24, 2015

You can start with actual ImGui Windows but as you dig into connections and more features they will likely get in your way? It may be more awkward to restrict them within a given spot, etc. One benefit is that they will handle overlapping for you.

Creating your own mini-window not too hard:

  • do your drawing via the drawlist API
  • perhaps push a clipping rectangle
  • use InvisibleButton() + IsItemActive() (or MouseClickedPos and GetMouseDragDelta) to handle moving.

If you can avoid overlapping it'll be simpler. If you can't the next easiest thing would probably be to handle ordering/sorting them yourself.

@emoon

This comment has been minimized.

Show comment
Hide comment
@emoon

emoon Aug 24, 2015

Contributor

Thanks for the reply. That seems reasonable. I think I will just go for non-overlapping as this is mostly for a prototype so that should be fine.

Contributor

emoon commented Aug 24, 2015

Thanks for the reply. That seems reasonable. I think I will just go for non-overlapping as this is mostly for a prototype so that should be fine.

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Aug 25, 2015

Owner

Here's a proof of concept demo. It's quite incomplete but shows that it is possible.
You'll need to update to latest because I have fixed a bug with the ImDrawList / channel API. Drawing channels are very convenient to allow out-of-order rendering (here we draw the node background after the nodes are filled with contents).

I'm declaring some ImVec2 operators to make the code simpler. If you have your own math types with conversions via IM_VEC2_CLASS_EXTRA you are probably better off using them.

Sort of work but I'm not very happy with it because it wasn't that trivial to pull off (3 hours including bugfix) and I had to dodge a few non-obvious trap. I'll probably keep massaging that code.

I'll move the hermite curve rendering to new drawing API. Do you know of a good non-stupid reference for API that handle various types of curves? (bezier, hermite, catmull rom. etc.). They are easy to implement but I wonder if there's a way of ordering parameters that's more standard or obvious. An API to handle multiple points should be available so that thick splines can have their end connecting nicely.

node_graph_editor

Code
https://gist.github.com/ocornut/7e9b3ec566a333d725d4

Owner

ocornut commented Aug 25, 2015

Here's a proof of concept demo. It's quite incomplete but shows that it is possible.
You'll need to update to latest because I have fixed a bug with the ImDrawList / channel API. Drawing channels are very convenient to allow out-of-order rendering (here we draw the node background after the nodes are filled with contents).

I'm declaring some ImVec2 operators to make the code simpler. If you have your own math types with conversions via IM_VEC2_CLASS_EXTRA you are probably better off using them.

Sort of work but I'm not very happy with it because it wasn't that trivial to pull off (3 hours including bugfix) and I had to dodge a few non-obvious trap. I'll probably keep massaging that code.

I'll move the hermite curve rendering to new drawing API. Do you know of a good non-stupid reference for API that handle various types of curves? (bezier, hermite, catmull rom. etc.). They are easy to implement but I wonder if there's a way of ordering parameters that's more standard or obvious. An API to handle multiple points should be available so that thick splines can have their end connecting nicely.

node_graph_editor

Code
https://gist.github.com/ocornut/7e9b3ec566a333d725d4

@emoon

This comment has been minimized.

Show comment
Hide comment
@emoon

emoon Aug 25, 2015

Contributor

👍 thanks! :)

Contributor

emoon commented Aug 25, 2015

👍 thanks! :)

@emoon

This comment has been minimized.

Show comment
Hide comment
@emoon

emoon Aug 25, 2015

Contributor

Yeah I have been thinking about what curves to actually use for the lines. I thought about just using b-spline or something similar but I have no idea what "real" editors are using.

Contributor

emoon commented Aug 25, 2015

Yeah I have been thinking about what curves to actually use for the lines. I thought about just using b-spline or something similar but I have no idea what "real" editors are using.

@NocturnDragon

This comment has been minimized.

Show comment
Hide comment
@NocturnDragon

NocturnDragon Aug 25, 2015

Hi,
Rectangular links could also be a (simpler) possibility.
i.e. https://youtu.be/KvExDzISYUc?t=9s

NocturnDragon commented Aug 25, 2015

Hi,
Rectangular links could also be a (simpler) possibility.
i.e. https://youtu.be/KvExDzISYUc?t=9s

@paulsapps

This comment has been minimized.

Show comment
Hide comment
@paulsapps

paulsapps Aug 25, 2015

@ocornut nice!! 👍 @NocturnDragon what algorithm does the rect layouts use? I notice it somehow seems to avoid overlapping itself?

paulsapps commented Aug 25, 2015

@ocornut nice!! 👍 @NocturnDragon what algorithm does the rect layouts use? I notice it somehow seems to avoid overlapping itself?

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Aug 25, 2015

Owner

I'm not sure those node/graph should or will be a concept of core ImGui by the way. It's more of an example code.

My intuition is the real value will be to keep massaging and improving the lower-level stuff so that it becomes more easier and natural to create this sort of thing from scratch.

Owner

ocornut commented Aug 25, 2015

I'm not sure those node/graph should or will be a concept of core ImGui by the way. It's more of an example code.

My intuition is the real value will be to keep massaging and improving the lower-level stuff so that it becomes more easier and natural to create this sort of thing from scratch.

@dumblob

This comment has been minimized.

Show comment
Hide comment
@dumblob

dumblob Aug 25, 2015

Do you know of a good non-stupid reference for API that handle various types of curves? (bezier, hermite, catmull rom. etc.).

I asked the creator of Fog framework who has a lot of experience with vector libraries (Cairo, AGG, etc.) and he told me, that in Fog (and also it's successor Blend 2D) he supports only quad and cubic Bezier curves, because it's enough (and it's much easier to translate these into any other curve needed e.g. by the rendering engine). He also told me, that e.g. Cairo supports only cubic curves.

So, in the name of simplicity, feel free to take a look at the API of Bezier curves in Fog.

dumblob commented Aug 25, 2015

Do you know of a good non-stupid reference for API that handle various types of curves? (bezier, hermite, catmull rom. etc.).

I asked the creator of Fog framework who has a lot of experience with vector libraries (Cairo, AGG, etc.) and he told me, that in Fog (and also it's successor Blend 2D) he supports only quad and cubic Bezier curves, because it's enough (and it's much easier to translate these into any other curve needed e.g. by the rendering engine). He also told me, that e.g. Cairo supports only cubic curves.

So, in the name of simplicity, feel free to take a look at the API of Bezier curves in Fog.

@emoon

This comment has been minimized.

Show comment
Hide comment
@emoon

emoon Aug 25, 2015

Contributor

#306 (comment)

Fully agree that this shouldn't be part of core ImGui but an interesting use-case to support with the API itself as you say.

Contributor

emoon commented Aug 25, 2015

#306 (comment)

Fully agree that this shouldn't be part of core ImGui but an interesting use-case to support with the API itself as you say.

@emoon

This comment has been minimized.

Show comment
Hide comment
@emoon

emoon Aug 25, 2015

Contributor

Small comment. I tested your prototype and when dragging the color values it seems to always reset back to default. I haven't investigated yet but just wanted to let you know.

Contributor

emoon commented Aug 25, 2015

Small comment. I tested your prototype and when dragging the color values it seems to always reset back to default. I haven't investigated yet but just wanted to let you know.

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Aug 25, 2015

Owner

Yeah they are just dummy values, didn't want to clutter the example with too much things.

ImGui::SliderFloat("##value", &node->Value, 0.0f, 1.0f, "Alpha %.2f");
float dummy_color[3] = { node->Pos.x / ImGui::GetWindowWidth(), node->Pos.y / ImGui::GetWindowHeight(), fmodf((float)node->ID * 0.5f, 1.0f) };
ImGui::ColorEdit3("##color", &dummy_color[0]);

If you aren't in a hurry I'll keep working on that in the future, add the linkage, move curves rendering to the main api and generally simplify / clean up / clarify where I can.

Owner

ocornut commented Aug 25, 2015

Yeah they are just dummy values, didn't want to clutter the example with too much things.

ImGui::SliderFloat("##value", &node->Value, 0.0f, 1.0f, "Alpha %.2f");
float dummy_color[3] = { node->Pos.x / ImGui::GetWindowWidth(), node->Pos.y / ImGui::GetWindowHeight(), fmodf((float)node->ID * 0.5f, 1.0f) };
ImGui::ColorEdit3("##color", &dummy_color[0]);

If you aren't in a hurry I'll keep working on that in the future, add the linkage, move curves rendering to the main api and generally simplify / clean up / clarify where I can.

@emoon

This comment has been minimized.

Show comment
Hide comment
@emoon

emoon Aug 25, 2015

Contributor

Not in a major hurry no so great stuff here :) I also think it's good in general to have a example that "bends" the regular use-case a bit.

Contributor

emoon commented Aug 25, 2015

Not in a major hurry no so great stuff here :) I also think it's good in general to have a example that "bends" the regular use-case a bit.

@emoon

This comment has been minimized.

Show comment
Hide comment
@emoon

emoon Aug 25, 2015

Contributor

Add yeah I agree that general curve rendering would fit good in the API, and getting linkage in the example would be great of course.

Contributor

emoon commented Aug 25, 2015

Add yeah I agree that general curve rendering would fit good in the API, and getting linkage in the example would be great of course.

@bkaradzic

This comment has been minimized.

Show comment
Hide comment
@bkaradzic

bkaradzic Aug 26, 2015

Contributor

Awesome work! 👍

Rectangular links could also be a (simpler) possibility.

+1 for rectangular and 45 degree angle links. I find them way more readable than curves/spaghetti stuff. :)

Contributor

bkaradzic commented Aug 26, 2015

Awesome work! 👍

Rectangular links could also be a (simpler) possibility.

+1 for rectangular and 45 degree angle links. I find them way more readable than curves/spaghetti stuff. :)

@ocornut ocornut added the in progress label Aug 26, 2015

@bagobor

This comment has been minimized.

Show comment
Hide comment
@bagobor

bagobor Aug 27, 2015

Any plans to switch to nanovg renderer? )

bagobor commented Aug 27, 2015

Any plans to switch to nanovg renderer? )

@emoon

This comment has been minimized.

Show comment
Hide comment
@emoon

emoon Aug 27, 2015

Contributor

ImGui already does anti-aliased text and lines so I'm not sure why that would be needed?

Contributor

emoon commented Aug 27, 2015

ImGui already does anti-aliased text and lines so I'm not sure why that would be needed?

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Aug 27, 2015

Owner

Probably not because NanoVG is rather runtime heavy for the performance we are aiming for. But as emoon say is there is a specific reason/feature you would want it? Also please open a new topic for that. Thanks!

Owner

ocornut commented Aug 27, 2015

Probably not because NanoVG is rather runtime heavy for the performance we are aiming for. But as emoon say is there is a specific reason/feature you would want it? Also please open a new topic for that. Thanks!

@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 Oct 26, 2015

Just to say that I'm also developing my own version based on the code posted by Omar.
It's still w.i.p., but at least the node types are not hard-coded.
nge
My code is here: https://github.com/Flix01/imgui/tree/2015-10-Addons
And a live test is here (you have to click on a button to start it): Demo.

Flix01 commented Oct 26, 2015

Just to say that I'm also developing my own version based on the code posted by Omar.
It's still w.i.p., but at least the node types are not hard-coded.
nge
My code is here: https://github.com/Flix01/imgui/tree/2015-10-Addons
And a live test is here (you have to click on a button to start it): Demo.

@adam4813

This comment has been minimized.

Show comment
Hide comment
@adam4813

adam4813 Oct 26, 2015

adam4813 commented Oct 26, 2015

@bkaradzic

This comment has been minimized.

Show comment
Hide comment
@bkaradzic

bkaradzic Oct 26, 2015

Contributor

@Flix01 Awesome! 👍

Contributor

bkaradzic commented Oct 26, 2015

@Flix01 Awesome! 👍

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Oct 26, 2015

Owner

Adam: they are just lines. You can just draw shapes or images and that's a background done..

Owner

ocornut commented Oct 26, 2015

Adam: they are just lines. You can just draw shapes or images and that's a background done..

@Hevedy

This comment has been minimized.

Show comment
Hide comment
@Hevedy

Hevedy Oct 29, 2015

@Flix01 @ocornut Is possible an example of Zoom In/Back / Resize effect to the complete viewport/window of the nodes ? and relative mouse displacement based in the zoom level

Hevedy commented Oct 29, 2015

@Flix01 @ocornut Is possible an example of Zoom In/Back / Resize effect to the complete viewport/window of the nodes ? and relative mouse displacement based in the zoom level

@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 Oct 29, 2015

@Hevedy Partially using:

ImGui::GetIO().FontAllowUserScaling = true;

CTRL+mouse wheel should increase the font size and the node sizes, but their position stays the same.

Flix01 commented Oct 29, 2015

@Hevedy Partially using:

ImGui::GetIO().FontAllowUserScaling = true;

CTRL+mouse wheel should increase the font size and the node sizes, but their position stays the same.

@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 Oct 29, 2015

I've just implemented a basic node copy/paste functionality.

However there are some problems with the popup menus: if I right-click on a node and then right-click on another without closing the first menu, a (wrong) menu appears in the position of the old one. It should close the old one and open the correct menu on the new node instead... I don't know how to fix it.

You can check the live test linked above, that keeps updating too (even if it does not support serialization).

[Edit] I discovered that the problem is composed by two sub-issues:

  1. the popup menu position is wrong. I've managed to solve this using PushID()/PopID() guards around it.
  2. the popup menu is wrong (the "add node" menu appears instead of the "Node Copy/Paste/Delete"). This happens because while one menu is open, another node in the node graph window can't receive the "mouse hover state" (probably because the focus goes to the open popup window): so the editor thinks that the user has clicked on an empty space and not on a node, and incorrectly shows him the "add node" menu.
    I don't know how to fix this: is it possible at least to detect if a popup menu is currently being displayed ?
    If so, I could prevent another menu to open, and the click could probably just cause the first menu to close.
    [Edit] No matter: I think I can add a custom variable to detect if a menu is being displayed.

Flix01 commented Oct 29, 2015

I've just implemented a basic node copy/paste functionality.

However there are some problems with the popup menus: if I right-click on a node and then right-click on another without closing the first menu, a (wrong) menu appears in the position of the old one. It should close the old one and open the correct menu on the new node instead... I don't know how to fix it.

You can check the live test linked above, that keeps updating too (even if it does not support serialization).

[Edit] I discovered that the problem is composed by two sub-issues:

  1. the popup menu position is wrong. I've managed to solve this using PushID()/PopID() guards around it.
  2. the popup menu is wrong (the "add node" menu appears instead of the "Node Copy/Paste/Delete"). This happens because while one menu is open, another node in the node graph window can't receive the "mouse hover state" (probably because the focus goes to the open popup window): so the editor thinks that the user has clicked on an empty space and not on a node, and incorrectly shows him the "add node" menu.
    I don't know how to fix this: is it possible at least to detect if a popup menu is currently being displayed ?
    If so, I could prevent another menu to open, and the click could probably just cause the first menu to close.
    [Edit] No matter: I think I can add a custom variable to detect if a menu is being displayed.
@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 Nov 2, 2015

@Hevedy I've added proper zoom. It's still WIP ATM, but if you have Firefox you can test it using CTRL+mouse wheel in the test demo above.

Flix01 commented Nov 2, 2015

@Hevedy I've added proper zoom. It's still WIP ATM, but if you have Firefox you can test it using CTRL+mouse wheel in the test demo above.

@irenekaea

This comment has been minimized.

Show comment
Hide comment
@irenekaea

irenekaea Nov 25, 2015

untitled
Hello, I am currently using Imgui to create decision trees for my school game project, and this is the WIP (which is due next week). I am really interested in making the zooming (CTRL + MW) and I read through @Flix01 's code, however I only found a part whereby it commented "fixes zooming a bit", I read the code and I couldnt understand how the zooming is done. Is it possible to explain on how the zooming is done? Is it just zooming the font size as what @Flix01 previously mentioned?

Thank you.

irenekaea commented Nov 25, 2015

untitled
Hello, I am currently using Imgui to create decision trees for my school game project, and this is the WIP (which is due next week). I am really interested in making the zooming (CTRL + MW) and I read through @Flix01 's code, however I only found a part whereby it commented "fixes zooming a bit", I read the code and I couldnt understand how the zooming is done. Is it possible to explain on how the zooming is done? Is it just zooming the font size as what @Flix01 previously mentioned?

Thank you.

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Nov 25, 2015

Owner

Irene, one issue you'll be running into is that ImGui currently render fonts into a texture when you create the font atlas and so those have a fixed resolution. So zooming is possible but the zooming quality will be quite poor. If you want to zoom the font you should add a secondary font using a smoother font that has anti-aliasing (e.g. Arial), render it in higher size (e.g. 30) and then scale it down using e.g. SetWindowFontScale(). It isn't a very well supported path and will probably be a little awkward, but it should work.

I haven't looked at Flix01's code so I can't help on the other details yet.

Owner

ocornut commented Nov 25, 2015

Irene, one issue you'll be running into is that ImGui currently render fonts into a texture when you create the font atlas and so those have a fixed resolution. So zooming is possible but the zooming quality will be quite poor. If you want to zoom the font you should add a secondary font using a smoother font that has anti-aliasing (e.g. Arial), render it in higher size (e.g. 30) and then scale it down using e.g. SetWindowFontScale(). It isn't a very well supported path and will probably be a little awkward, but it should work.

I haven't looked at Flix01's code so I can't help on the other details yet.

@irenekaea

This comment has been minimized.

Show comment
Hide comment
@irenekaea

irenekaea Nov 25, 2015

@ocornut Thank you for the quick response, I will go and try it out! 😄

irenekaea commented Nov 25, 2015

@ocornut Thank you for the quick response, I will go and try it out! 😄

@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 Nov 26, 2015

I haven't looked at Flix01's code so I can't help on the other details yet.

Nope, of course I didn't mind having bad quality fonts while zooming.
The main problem was that by applying the default ImGui zooming functionality with:

ImGui::GetIO().FontAllowUserScaling = true;

alone, not all the parts of the nodes zoom properly.

So basically in my code I had to zoom everything else: node widths, connection circles, the control point distance of Bezier lines, and so on, and I used "currentFontWindowScale" (referenced by the comment "Fixes zooming a bit") as a scale factor.

However it's still not perfect: now if you change the zoom level and then create a node, the node position is wrong for example.

Flix01 commented Nov 26, 2015

I haven't looked at Flix01's code so I can't help on the other details yet.

Nope, of course I didn't mind having bad quality fonts while zooming.
The main problem was that by applying the default ImGui zooming functionality with:

ImGui::GetIO().FontAllowUserScaling = true;

alone, not all the parts of the nodes zoom properly.

So basically in my code I had to zoom everything else: node widths, connection circles, the control point distance of Bezier lines, and so on, and I used "currentFontWindowScale" (referenced by the comment "Fixes zooming a bit") as a scale factor.

However it's still not perfect: now if you change the zoom level and then create a node, the node position is wrong for example.

@irenekaea

This comment has been minimized.

Show comment
Hide comment
@irenekaea

irenekaea Nov 27, 2015

Oh i see.. thanks for the reply 😄

irenekaea commented Nov 27, 2015

Oh i see.. thanks for the reply 😄

@irenekaea

This comment has been minimized.

Show comment
Hide comment
@irenekaea

irenekaea Jan 21, 2016

@Flix01 I found out that if you inverse your scale on the position when you create a new node the position will be correct because when you render you will scale it back. I managed to implement zooming in my game editor :)

irenekaea commented Jan 21, 2016

@Flix01 I found out that if you inverse your scale on the position when you create a new node the position will be correct because when you render you will scale it back. I managed to implement zooming in my game editor :)

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Jan 21, 2016

Owner

Pictures or gifs please! :)

Owner

ocornut commented Jan 21, 2016

Pictures or gifs please! :)

@irenekaea

This comment has been minimized.

Show comment
Hide comment

irenekaea commented Jan 21, 2016

ezgif com-gif-maker

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Jan 21, 2016

Owner

Thanks!

You could adjust the tangeant according to the direction of the side they come from to look nicer.

(sorry to intrude with unwanted advice, but if I might bring a bit of game experience here, beware of using too much logic-with-box-and-wires! It is an attractive prospect but often a false economy to create big systems when writing the corresponding code could be so much easier and flexible. Ask yourself the question if raw code wouldn't just be faster :)

Owner

ocornut commented Jan 21, 2016

Thanks!

You could adjust the tangeant according to the direction of the side they come from to look nicer.

(sorry to intrude with unwanted advice, but if I might bring a bit of game experience here, beware of using too much logic-with-box-and-wires! It is an attractive prospect but often a false economy to create big systems when writing the corresponding code could be so much easier and flexible. Ask yourself the question if raw code wouldn't just be faster :)

@irenekaea

This comment has been minimized.

Show comment
Hide comment
@irenekaea

irenekaea Jan 21, 2016

@ocornut thanks for the advice! Hmm as our editor is make for designer (he do not know how to code), so we would like to give him an editor that allows him to build the game logic without coding. Currently the game editor will output a file such that the game itself will create the decision tree using the file so its not as lag, as for now :)

irenekaea commented Jan 21, 2016

@ocornut thanks for the advice! Hmm as our editor is make for designer (he do not know how to code), so we would like to give him an editor that allows him to build the game logic without coding. Currently the game editor will output a file such that the game itself will create the decision tree using the file so its not as lag, as for now :)

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Jan 21, 2016

Owner

Yes but you are creating a system that isn't necessarily easier to use than coding, it's just coding with boxes and wire. Not very easy to use, and spending lot of coding energy to create this system. Perhaps it'd be faster if you coded what the designer wanted! Or if the designer learns to code! I don't know, it's just an idea :) I don't know the scope or features of your game or technology. But I've seen and myself created so many of those do-everything systems which many times ends up becoming do-nothing-well-systems. There is room for that sort of tool, but always reevaluate the cost and benefits while you are making it.

Owner

ocornut commented Jan 21, 2016

Yes but you are creating a system that isn't necessarily easier to use than coding, it's just coding with boxes and wire. Not very easy to use, and spending lot of coding energy to create this system. Perhaps it'd be faster if you coded what the designer wanted! Or if the designer learns to code! I don't know, it's just an idea :) I don't know the scope or features of your game or technology. But I've seen and myself created so many of those do-everything systems which many times ends up becoming do-nothing-well-systems. There is room for that sort of tool, but always reevaluate the cost and benefits while you are making it.

@bkaradzic

This comment has been minimized.

Show comment
Hide comment
@bkaradzic

bkaradzic Jan 22, 2016

Contributor

I noticed even simple node graph with spaghetti connectors are less readable than node graphs with L shaped connectors. Image above has only 10 connectors and this has 20+:
czq2d-fwaaawrht png_large

Contributor

bkaradzic commented Jan 22, 2016

I noticed even simple node graph with spaghetti connectors are less readable than node graphs with L shaped connectors. Image above has only 10 connectors and this has 20+:
czq2d-fwaaawrht png_large

@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 Jan 22, 2016

@irenekaea

I found out that if you inverse your scale on the position when you create a new node the position will be correct because when you render you will scale it back. I managed to implement zooming in my game editor :)

Thanks. I'm not sure why I didn't manage to fix it...

P.S: if you put node connectors on the top and on the bottom, you can probably add the "Bezier control point" on the Y axis, so that the vertical connections look more "vertical" at their edges.

@paulsapps

How many nodes can it handle before it gets too laggy?

Not many I guess. "Closing" the nodes helps.
I don't know whether "offscreen nodes" are clamped by default by ImGui or not...

Flix01 commented Jan 22, 2016

@irenekaea

I found out that if you inverse your scale on the position when you create a new node the position will be correct because when you render you will scale it back. I managed to implement zooming in my game editor :)

Thanks. I'm not sure why I didn't manage to fix it...

P.S: if you put node connectors on the top and on the bottom, you can probably add the "Bezier control point" on the Y axis, so that the vertical connections look more "vertical" at their edges.

@paulsapps

How many nodes can it handle before it gets too laggy?

Not many I guess. "Closing" the nodes helps.
I don't know whether "offscreen nodes" are clamped by default by ImGui or not...

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Jan 22, 2016

Owner

I don't know whether "offscreen nodes" are clamped by default by ImGui or not...

The ImGui:: widgets perform coarse clipping, but anything in the ImDrawList API doesn't.
Either way it would be in your interest to do coarse clipping yourself, since you are probably calling dozens of functions per node. Even when clipping ImGui needs to calculate the layout, which is minor but adds up if you have thousands of calls.

Owner

ocornut commented Jan 22, 2016

I don't know whether "offscreen nodes" are clamped by default by ImGui or not...

The ImGui:: widgets perform coarse clipping, but anything in the ImDrawList API doesn't.
Either way it would be in your interest to do coarse clipping yourself, since you are probably calling dozens of functions per node. Even when clipping ImGui needs to calculate the layout, which is minor but adds up if you have thousands of calls.

@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 commented Jan 22, 2016

Thanks

@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 Jan 25, 2016

Just to say that I've added manual node culling (the links are still not culled, but it's better than nothing).

However zooming is still buggy (if you change the zoom level and then create a node, the node position is wrong).

Another problem with my zooming is that I'm using

ImGui::GetIO().FontAllowUserScaling = true;

but this seems to zoom from the window origin, not from the mouse position.
So it should be better to always use

ImGui::GetIO().FontAllowUserScaling = false;

and manually rewrite all the zooming code.

In short: my zooming code is still buggy.

Flix01 commented Jan 25, 2016

Just to say that I've added manual node culling (the links are still not culled, but it's better than nothing).

However zooming is still buggy (if you change the zoom level and then create a node, the node position is wrong).

Another problem with my zooming is that I'm using

ImGui::GetIO().FontAllowUserScaling = true;

but this seems to zoom from the window origin, not from the mouse position.
So it should be better to always use

ImGui::GetIO().FontAllowUserScaling = false;

and manually rewrite all the zooming code.

In short: my zooming code is still buggy.

@irenekaea

This comment has been minimized.

Show comment
Hide comment
@irenekaea

irenekaea Jan 25, 2016

When you create a node, the position that should be store in the node should be (current position / current font scale). That should work, currently my zooming works fine and the position is correct.

irenekaea commented Jan 25, 2016

When you create a node, the position that should be store in the node should be (current position / current font scale). That should work, currently my zooming works fine and the position is correct.

@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 Jan 25, 2016

@irenekaea
Thanks. It should be fixed now. The problem was that I had to scale the position in the popup-menu code (for some reasons it didn't work when I did it in the addNode(...) method).

I tried also to center zooming around the mouse position: I thought I did it, but then I discovered that it currently works only until I shift the window...
I think I'll fix it someday.

So I think I can keep on using:

ImGui::GetIO().FontAllowUserScaling = true;

for zooming, instead of rewriting the zooming code manually like I wanted to do in my last post :).

Thanks for your tip!

[EDIT:] Fixed all zooming issues: now I don't use ImGui::GetIO().FontAllowUserScaling anymore and zooming always happens around the scrolled center of the window (I guess this is what the user expects).
Now I can consider my NodeGraphEditor finished (unless I discover further bugs...).

If you have Firefox (or a similar capable browser), you can test my updated code here (you have to click on a button to start it): Demo.

Flix01 commented Jan 25, 2016

@irenekaea
Thanks. It should be fixed now. The problem was that I had to scale the position in the popup-menu code (for some reasons it didn't work when I did it in the addNode(...) method).

I tried also to center zooming around the mouse position: I thought I did it, but then I discovered that it currently works only until I shift the window...
I think I'll fix it someday.

So I think I can keep on using:

ImGui::GetIO().FontAllowUserScaling = true;

for zooming, instead of rewriting the zooming code manually like I wanted to do in my last post :).

Thanks for your tip!

[EDIT:] Fixed all zooming issues: now I don't use ImGui::GetIO().FontAllowUserScaling anymore and zooming always happens around the scrolled center of the window (I guess this is what the user expects).
Now I can consider my NodeGraphEditor finished (unless I discover further bugs...).

If you have Firefox (or a similar capable browser), you can test my updated code here (you have to click on a button to start it): Demo.

@ocornut ocornut removed the in progress label Apr 2, 2016

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Apr 16, 2016

Owner

Really cool stuff Richard (although I would debate the idea of programming a Space Invaders with nodes! :).

Did you evolve the proof of concept code in way that would be interesting to reuse? Did it require some major rework to scale to that level of actual use, or did copy-pasting-hacking do the job well enough? Is the software available? I could a link and some shots/video alongside future releases. Thanks!

Owner

ocornut commented Apr 16, 2016

Really cool stuff Richard (although I would debate the idea of programming a Space Invaders with nodes! :).

Did you evolve the proof of concept code in way that would be interesting to reuse? Did it require some major rework to scale to that level of actual use, or did copy-pasting-hacking do the job well enough? Is the software available? I could a link and some shots/video alongside future releases. Thanks!

@brucelane

This comment has been minimized.

Show comment
Hide comment
@brucelane

brucelane Apr 16, 2016

hi, I'm looking forward to have nodes in my app, is there a plan to integrate this in imgui? or sample source code to get started?

brucelane commented Apr 16, 2016

hi, I'm looking forward to have nodes in my app, is there a plan to integrate this in imgui? or sample source code to get started?

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Apr 16, 2016

Owner

@brucelane All the sample source code are linked in this thread. I'm not sure what part of it makes sense to integrate in core imgui yet, as it connect tightly with our own data structures.

Owner

ocornut commented Apr 16, 2016

@brucelane All the sample source code are linked in this thread. I'm not sure what part of it makes sense to integrate in core imgui yet, as it connect tightly with our own data structures.

@brucelane

This comment has been minimized.

Show comment
Hide comment
@brucelane

brucelane Apr 16, 2016

thank you, I wiil dive into the code soon!

brucelane commented Apr 16, 2016

thank you, I wiil dive into the code soon!

@richardassar

This comment has been minimized.

Show comment
Hide comment
@richardassar

richardassar Apr 16, 2016

Thanks @ocornut :-)

I appreciate the feedback. Perhaps a live debate is in order ;)

I built the compiler on top of what was already present in @Flix01's fork. No changes were made to ImGui core other than increasing the drawlist size and a few convenience functions (e.g. listbox for ImVector) so no need for me to submit pull requests.

I hacked things in where necessary around the framework @Flix01 had laid down, however the compiler and run-time/debugging support code can be easily decoupled from this.

A lot of UI/rendering work and changes to the serialisation code, among other things, was necessary. The development of the compiler and supporting systems was pretty involved, a solo project comprising about 6 weeks of work.

Fast compilation and fast execution were key goals. I'm constructing LLVM-IR and compiling just-in-time, so can patch functions and data live. Execution is not performed by simply walking an expression tree. I run with (optional) optimisation passes to gain speed, as in Clang's -O3, especially important for tight and/or nested loops (unrolling and auto-vectorisation come for free).

The videos do not demonstrate all of the features I've added but I'll be making more footage available soon. A quick list of the main features is:

  • Visualisation of active control and data flow paths
  • Data flow graphing
  • Execution profiling
  • Custom structs
  • Audio programming (ALSA audio and MIDI in/out)
  • Mouse gestures for quick input
  • Other things I have forgotten

The next step is to incorporate KernelGEN / Pollyhedral for transparent GPU acceleration. This would enable physics simulation, GPU-accelerated DSP, machine learning (think Google's TensorFlow).

I'm looking to add shader support also and in the same effort make some aspects of the compiler "programmable" to allow for a multitude of representations.

I've a lot more video footage and ideas, for one it would be nice to have real-time collaboration like flowhub.io - worth considering but not an immediate priority. Adding more complex OOP idioms (inheritence, templates, exceptions, lambdas) is a near-term goal.

Also, for fun I want to try various backends (z80, Atmega, ARM, etc.) so I run generated code on a Gameboy classic, for a laugh. I've a GBA and EZFLASH cart lying around so this is definitely on the cards.

The project is aimed at finding my next games industry role, whatever that may be - currently an ongoing effort. I'm also considering this as the foundation for a start-up company with the aim of competing against MaxMSP and Vuo, or to license the technology to large game studios bent on sticking to their bespoke engines and behemoth code-bases which they continue to over-invest in whilst they simultaneously waste their time staring at compiler progress bars - destroying all passion and creativity ;-)

For now the project will remain closed source and once I've secured a job/company/whatever I will consider releasing it for free to build a community.

richardassar commented Apr 16, 2016

Thanks @ocornut :-)

I appreciate the feedback. Perhaps a live debate is in order ;)

I built the compiler on top of what was already present in @Flix01's fork. No changes were made to ImGui core other than increasing the drawlist size and a few convenience functions (e.g. listbox for ImVector) so no need for me to submit pull requests.

I hacked things in where necessary around the framework @Flix01 had laid down, however the compiler and run-time/debugging support code can be easily decoupled from this.

A lot of UI/rendering work and changes to the serialisation code, among other things, was necessary. The development of the compiler and supporting systems was pretty involved, a solo project comprising about 6 weeks of work.

Fast compilation and fast execution were key goals. I'm constructing LLVM-IR and compiling just-in-time, so can patch functions and data live. Execution is not performed by simply walking an expression tree. I run with (optional) optimisation passes to gain speed, as in Clang's -O3, especially important for tight and/or nested loops (unrolling and auto-vectorisation come for free).

The videos do not demonstrate all of the features I've added but I'll be making more footage available soon. A quick list of the main features is:

  • Visualisation of active control and data flow paths
  • Data flow graphing
  • Execution profiling
  • Custom structs
  • Audio programming (ALSA audio and MIDI in/out)
  • Mouse gestures for quick input
  • Other things I have forgotten

The next step is to incorporate KernelGEN / Pollyhedral for transparent GPU acceleration. This would enable physics simulation, GPU-accelerated DSP, machine learning (think Google's TensorFlow).

I'm looking to add shader support also and in the same effort make some aspects of the compiler "programmable" to allow for a multitude of representations.

I've a lot more video footage and ideas, for one it would be nice to have real-time collaboration like flowhub.io - worth considering but not an immediate priority. Adding more complex OOP idioms (inheritence, templates, exceptions, lambdas) is a near-term goal.

Also, for fun I want to try various backends (z80, Atmega, ARM, etc.) so I run generated code on a Gameboy classic, for a laugh. I've a GBA and EZFLASH cart lying around so this is definitely on the cards.

The project is aimed at finding my next games industry role, whatever that may be - currently an ongoing effort. I'm also considering this as the foundation for a start-up company with the aim of competing against MaxMSP and Vuo, or to license the technology to large game studios bent on sticking to their bespoke engines and behemoth code-bases which they continue to over-invest in whilst they simultaneously waste their time staring at compiler progress bars - destroying all passion and creativity ;-)

For now the project will remain closed source and once I've secured a job/company/whatever I will consider releasing it for free to build a community.

@bkaradzic

This comment has been minimized.

Show comment
Hide comment
@bkaradzic

bkaradzic May 26, 2016

Contributor

@Evil-Spirit It seems your thing is Qt based... Topic here is "Node Graph with ImGui" not with Qt.

Contributor

bkaradzic commented May 26, 2016

@Evil-Spirit It seems your thing is Qt based... Topic here is "Node Graph with ImGui" not with Qt.

@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 Aug 17, 2016

Just to say that in the "Pull requests" section here #746, @thedmd posted this awesome animated gif:
ngedmd
showing his own implementation with multiple selections, link selection and other amazing features!

Just thought it was better to link his gif here...

Flix01 commented Aug 17, 2016

Just to say that in the "Pull requests" section here #746, @thedmd posted this awesome animated gif:
ngedmd
showing his own implementation with multiple selections, link selection and other amazing features!

Just thought it was better to link his gif here...

@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 Sep 22, 2016

Made some updates to my version. Added multiple node selection (with CTRL+LMB or by mouse rectangle selection), node renaming (by double clicking on its name) and link hovering (by holding down SHIFT).
nodegrapheditor
Not as clean as @thedmd's, but this is what I got...

Flix01 commented Sep 22, 2016

Made some updates to my version. Added multiple node selection (with CTRL+LMB or by mouse rectangle selection), node renaming (by double clicking on its name) and link hovering (by holding down SHIFT).
nodegrapheditor
Not as clean as @thedmd's, but this is what I got...

@stuaxo

This comment has been minimized.

Show comment
Hide comment
@stuaxo

stuaxo Aug 19, 2017

I think nodebox has (had?) a node system where you could customise the way connections were drawn, maybe this could too ?

That way people building stuff with it can choose how straight or curvey / whatever the wires are.

stuaxo commented Aug 19, 2017

I think nodebox has (had?) a node system where you could customise the way connections were drawn, maybe this could too ?

That way people building stuff with it can choose how straight or curvey / whatever the wires are.

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut

ocornut Dec 7, 2017

Owner

FYI here's some code someone sent me to compute the distance to a bezier, which is useful if you want your node editor to be able to click/select the curves:

float GetClosestPointToCubicBezier(int iterations, float fx, float fy, float start, float end, int slices, const ImVec2 & P0, const ImVec2 & P1, const ImVec2 & P2, const ImVec2 & P3) 
{
	if (iterations <= 0) 
		return (start + end) / 2;

	float tick = (end - start) / float(slices);
	float best = 0;
	float bestDistance = FLT_MAX;
	float t = start;
		
	while (t <= end) 
	{
		// B(t) = (1-t)**3 p0 + 3(1 - t)**2 t P1 + 3(1-t)t**2 P2 + t**3 P3
		float x = (1-t)*(1-t)*(1-t)*P0.x + 3*(1-t)*(1-t)*t*P1.x + 3*(1-t)*t*t*P2.x + t*t*t*P3.x;
		float y = (1-t)*(1-t)*(1-t)*P0.y + 3*(1-t)*(1-t)*t*P1.y + 3*(1-t)*t*t*P2.y + t*t*t*P3.y;
		float dx = x - fx;
		float dy = y - fy;
		float currentDistance = dx*dx + dy*dy;
		if (currentDistance < bestDistance) 
		{
			bestDistance = currentDistance;
			best = t;
		}
		t += tick;
	}

	return GetClosestPointToCubicBezier(iterations - 1, fx, fy, Max<float>(best - tick, 0.0), Min<float>(best + tick, 1.0), slices, P0, P1, P2, P3);
}

ImVec2 GetClosestPointToCubicBezier(const ImVec2 & pos, const ImVec2 & P0, const ImVec2 & P1, const ImVec2 & P2, const ImVec2 & P3, int slices, int iterations)
{
	float t = GetClosestPointToCubicBezier(iterations, pos.x, pos.y, 0.0, 1.0, slices, P0, P1, P2, P3);
	float x = (1-t)*(1-t)*(1-t)*P0.x + 3*(1-t)*(1-t)*t*P1.x + 3*(1-t)*t*t*P2.x + t*t*t*P3.x;
	float y = (1-t)*(1-t)*(1-t)*P0.y + 3*(1-t)*(1-t)*t*P1.y + 3*(1-t)*t*t*P2.y + t*t*t*P3.y;
	return ImVec2(x,y);
}

EDIT
The author suggested
"default values that worked ok for me: slices = 4, iterations = 5"
"with iterations = 7" you start getting something precise.

Usage would differ if you need it to display a point on the bezier or just to select the bezier.
And you'd probably want to at least do a bounding box test earlier.

May integrate that sort of function as a math helper in imgui_internal.h api, I haven't tried to use this code however.
And if you think you have a better solution that brute-forcing feel free to post them!

Owner

ocornut commented Dec 7, 2017

FYI here's some code someone sent me to compute the distance to a bezier, which is useful if you want your node editor to be able to click/select the curves:

float GetClosestPointToCubicBezier(int iterations, float fx, float fy, float start, float end, int slices, const ImVec2 & P0, const ImVec2 & P1, const ImVec2 & P2, const ImVec2 & P3) 
{
	if (iterations <= 0) 
		return (start + end) / 2;

	float tick = (end - start) / float(slices);
	float best = 0;
	float bestDistance = FLT_MAX;
	float t = start;
		
	while (t <= end) 
	{
		// B(t) = (1-t)**3 p0 + 3(1 - t)**2 t P1 + 3(1-t)t**2 P2 + t**3 P3
		float x = (1-t)*(1-t)*(1-t)*P0.x + 3*(1-t)*(1-t)*t*P1.x + 3*(1-t)*t*t*P2.x + t*t*t*P3.x;
		float y = (1-t)*(1-t)*(1-t)*P0.y + 3*(1-t)*(1-t)*t*P1.y + 3*(1-t)*t*t*P2.y + t*t*t*P3.y;
		float dx = x - fx;
		float dy = y - fy;
		float currentDistance = dx*dx + dy*dy;
		if (currentDistance < bestDistance) 
		{
			bestDistance = currentDistance;
			best = t;
		}
		t += tick;
	}

	return GetClosestPointToCubicBezier(iterations - 1, fx, fy, Max<float>(best - tick, 0.0), Min<float>(best + tick, 1.0), slices, P0, P1, P2, P3);
}

ImVec2 GetClosestPointToCubicBezier(const ImVec2 & pos, const ImVec2 & P0, const ImVec2 & P1, const ImVec2 & P2, const ImVec2 & P3, int slices, int iterations)
{
	float t = GetClosestPointToCubicBezier(iterations, pos.x, pos.y, 0.0, 1.0, slices, P0, P1, P2, P3);
	float x = (1-t)*(1-t)*(1-t)*P0.x + 3*(1-t)*(1-t)*t*P1.x + 3*(1-t)*t*t*P2.x + t*t*t*P3.x;
	float y = (1-t)*(1-t)*(1-t)*P0.y + 3*(1-t)*(1-t)*t*P1.y + 3*(1-t)*t*t*P2.y + t*t*t*P3.y;
	return ImVec2(x,y);
}

EDIT
The author suggested
"default values that worked ok for me: slices = 4, iterations = 5"
"with iterations = 7" you start getting something precise.

Usage would differ if you need it to display a point on the bezier or just to select the bezier.
And you'd probably want to at least do a bounding box test earlier.

May integrate that sort of function as a math helper in imgui_internal.h api, I haven't tried to use this code however.
And if you think you have a better solution that brute-forcing feel free to post them!

@richardassar

This comment has been minimized.

Show comment
Hide comment
@richardassar

richardassar Dec 7, 2017

richardassar commented Dec 7, 2017

@itamago

This comment has been minimized.

Show comment
Hide comment
@itamago

itamago Dec 7, 2017

Note : this solution works for any order of bezier curves, by changing the formulas at both lines : "float x=..." and "float y=..."

Note2 : for quadratic bezier, there is a solution without brute-forcing http://blog.gludion.com/2009/08/distance-to-quadratic-bezier-curve.html

itamago commented Dec 7, 2017

Note : this solution works for any order of bezier curves, by changing the formulas at both lines : "float x=..." and "float y=..."

Note2 : for quadratic bezier, there is a solution without brute-forcing http://blog.gludion.com/2009/08/distance-to-quadratic-bezier-curve.html

@Flix01

This comment has been minimized.

Show comment
Hide comment
@Flix01

Flix01 Dec 7, 2017

@ocornut: thanks!

I'm already using my own code to do that (I use it only to delete single links when SHIFT is pressed, like in the .gif above).

Basically I use GetSquaredDistanceToBezierCurve(...) here, and I already perform a bounding box test earlier here; so I don't know if that code is actually faster... but it's always good to have an alternative 😃.

Flix01 commented Dec 7, 2017

@ocornut: thanks!

I'm already using my own code to do that (I use it only to delete single links when SHIFT is pressed, like in the .gif above).

Basically I use GetSquaredDistanceToBezierCurve(...) here, and I already perform a bounding box test earlier here; so I don't know if that code is actually faster... but it's always good to have an alternative 😃.

@thedmd

This comment has been minimized.

Show comment
Hide comment
@thedmd

thedmd Dec 10, 2017

Contributor

I just want to let you know code for Node Editor was just published on github:
See: imgui-node-editor
Edit: Fixed url
node_editor_preview

Contributor

thedmd commented Dec 10, 2017

I just want to let you know code for Node Editor was just published on github:
See: imgui-node-editor
Edit: Fixed url
node_editor_preview

@brucelane

This comment has been minimized.

Show comment
Hide comment
@brucelane

brucelane Dec 10, 2017

the url is not good but I found it
thank you!

brucelane commented Dec 10, 2017

the url is not good but I found it
thank you!

@ocornut

This comment has been minimized.

Show comment
Hide comment
@ocornut
Owner

ocornut commented Dec 10, 2017

Here's the right URL... https://github.com/thedmd/imgui-node-editor
Thanks @thedmd!

@brucelane

This comment has been minimized.

Show comment
Hide comment
@brucelane

brucelane Dec 11, 2017

just tryed it, compiles fine, runs fine, it's fantastic! thank you very much @thedmd ! I am losing myself in javascript these days, can't wait to be back to this!

brucelane commented Dec 11, 2017

just tryed it, compiles fine, runs fine, it's fantastic! thank you very much @thedmd ! I am losing myself in javascript these days, can't wait to be back to this!

@ChemiaAion

This comment has been minimized.

Show comment
Hide comment
@ChemiaAion

ChemiaAion Jan 25, 2018

I took what @emoon and @ocornut prototyped here and did this mockup for further play.
It uses a little of modern C++ features but these could be easily removed/replaced.
https://gist.github.com/ChemiaAion/0b93553b06beac9fd3824cfeb989d50e

rtj-nodes

Legend:
Mouse left-button: selection (shift/ctrl modifiers) and dragging, collapsing on double click, new connections;
Mouse right-button: new nodes (pop-up), canvas movement;
Mouse wheel-button: canvas movement/zooming (wheel-pressed/shift/ctrl modifiers);
For now: connections could be single selected and dragged only (by left-button);

Test-it:
static ImGui::Nodes nodes_;
(...)
ImGui::Begin("Nodes");
nodes_.ProcessNodes();
ImGui::End();
(...)

ChemiaAion commented Jan 25, 2018

I took what @emoon and @ocornut prototyped here and did this mockup for further play.
It uses a little of modern C++ features but these could be easily removed/replaced.
https://gist.github.com/ChemiaAion/0b93553b06beac9fd3824cfeb989d50e

rtj-nodes

Legend:
Mouse left-button: selection (shift/ctrl modifiers) and dragging, collapsing on double click, new connections;
Mouse right-button: new nodes (pop-up), canvas movement;
Mouse wheel-button: canvas movement/zooming (wheel-pressed/shift/ctrl modifiers);
For now: connections could be single selected and dragged only (by left-button);

Test-it:
static ImGui::Nodes nodes_;
(...)
ImGui::Begin("Nodes");
nodes_.ProcessNodes();
ImGui::End();
(...)

@ocornut ocornut changed the title from Material Editor/Node Graph with ImGui to Node Graph Editors with ImGui Apr 11, 2018

@ocornut

This comment has been minimized.

Show comment
Hide comment
Owner

ocornut commented Apr 11, 2018

@ArnCarveris

This comment has been minimized.

Show comment
Hide comment
@ArnCarveris

ArnCarveris Apr 11, 2018

Nice, this internal development? No source code will be provided?

ArnCarveris commented Apr 11, 2018

Nice, this internal development? No source code will be provided?

@zahirzohair

This comment has been minimized.

Show comment
Hide comment
@zahirzohair

zahirzohair Apr 17, 2018

is there anyone who give me and example of zooming function that enable mousewheel to zoom in and out at it's position?

zahirzohair commented Apr 17, 2018

is there anyone who give me and example of zooming function that enable mousewheel to zoom in and out at it's position?

@ChemiaAion

This comment has been minimized.

Show comment
Hide comment
@ChemiaAion

ChemiaAion Apr 17, 2018

@zahirzohair: check mine gist (linked above on Jan-25): lines 255-302.

ChemiaAion commented Apr 17, 2018

@zahirzohair: check mine gist (linked above on Jan-25): lines 255-302.

@zahirzohair

This comment has been minimized.

Show comment
Hide comment
@zahirzohair

zahirzohair Apr 17, 2018

@ChemiaAion thank you very much for that fast reply. i got the idea and it works.

zahirzohair commented Apr 17, 2018

@ChemiaAion thank you very much for that fast reply. i got the idea and it works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment