Stack Layout

[fire]

As I want to create a Nuklear node based graphical language, I found that a stack layout implementation would achieve this. Would anyone want to work on it? Is it already available?

However, I will be unavailable for the next week, but this is exciting! So here's the concept that was implemented by the thedmd.

https://github.com/ocornut/imgui/pull/746 https://github.com/ocornut/imgui/pull/846

The image uses this design.

There are vertical and horzontal boxes. The layout inside is controlled by spacers that expand.

[fire]

thedmd designed this api. Hope it can be helpful.

IMGUI_API void BeginHorizontal(const char* str_id, const ImVec2& size = ImVec2(0, 0));
IMGUI_API void BeginHorizontal(const void* ptr_id, const ImVec2& size = ImVec2(0, 0));
IMGUI_API void EndHorizontal();
IMGUI_API void BeginVertical(const char* str_id, const ImVec2& size = ImVec2(0, 0));
IMGUI_API void BeginVertical(const void* ptr_id, const ImVec2& size = ImVec2(0, 0));
IMGUI_API void EndVertical();
IMGUI_API void Spring(float weight = 1.0f, float spacing = -1.0f);

[vurtun]

Hey and thanks for the issue. The stack layout looks a lot like flexbox from CSS which I am not a big fan of. I also don't understand what this has more to do with node editors since nodes based on free floating panels with content then elaborate layouting structures.

[fire]

This is a solution to connecting the end points of the connector in a node graph in an organized way.

You avoided this problem in your sample.

In the sample code I belive they use next frame calculatipns.

On Dec 25, 2016, at 8:43 PM, Micha Mettke notifications@github.com wrote:

Hey and thanks for the issue. The stack layout looks a lot like flexbox from CSS which I am not a big fan of. I also don't understand what this has to do with node editors since nodes based on free floating panels with content then elaborate layouting structures.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[fire]

@vurtun This seems like an elegant solution to calculating the locations of the end and start node spline points.

Any other suggestions for doing the same thing without this?

[dumblob]

Hi @fire, I'm following this issue and still don't quite understand what exactly is the issue you're trying to solve. Could you please show us two code samples, one in Nuklear and one in ImGui which exactly describes what is possible only in ImGui and not in Nuklear or what is easier to do in ImGui and messy in Nuklear? You can also start with the Nuklear node_editor demo to ease the showcase work. Thanks.

[fire]

@dumblob Consider that the whole point of this pull request is to implement in Nuklear the closed source example shown in the pictures. Implementing both demos means I don't need help and can submit a pull request, but I do need help!

Currently I'll have to implement "stack layout" on top of Nuklear and then implement the Unreal Engine blueprint graphical node layout on top of that.

Sorry for not being clear, as I had a impending trip I quickly wrote down the concept for the work and now that I'm back I can detail it.

I'm not that familiar with the internal details of how Nuklear works, but this work should be theoretically possible.

The above images is someone's implementation of Unreal Engine blueprint in imgui. There is no source available for that. Again, if I had that source it would be easier.

[fire]

https://www.youtube.com/watch?v=nk4Avxar35E

This video explains how the "spring" (they renamed it to spacer) works from the view of the developer.

IMGUI_API void Spring(float weight = 1.0f, float spacing = -1.0f);

[dumblob]

@fire I'm still completely lost. To me it seems you didn't read through all demos and didn't take a look at the Nuklear library itself (you don't need to read it whole, but just e.g. how menus are drawn).

The youtube video shows an extremely simple widget which you can very easily emulate with Nuklear's existing primitives and widgets. So look at those, try to come up with some code and if that code doesn't work exactly how you would like to, come back and reopen this issue.

[vurtun]

@fire I added row templates to nuklear in commit: da347eecdd70e7cc3d383a77d1d5cab561428b39. They don't support vertical layouts or weights for dynamic/variable widgets (at least the last part could be easily added, probably later). Don't know if it helps but it is a step.

[fire]

When I have some available time I'll take a look. Did some integration with Urho3d.

[thedmd]

Hey and thanks for the issue. The stack layout looks a lot like flexbox from CSS which I am not a big fan of. I also don't understand what this has more to do with node editors since nodes based on free floating panels with content then elaborate layouting structures.

@vurtun I hadn't looked at flexbox, so I do not know if comparison is accurate. Main problem I tried to solve is how to make things align to right side of panel. To make problem more complicated maximum width of a panel is determined by width of longest row. After doing calculations by hand I tried to factor that out out of nodes and that @fire posted is an result of that effort. This way I can focus of making most of nodes instead of struggling with alignment of things on each step of making an editor. I'm looking forward to learn about better solutions for this problem.