Flex layout implementation

[Osiris-Team]

Is there an implementation of css flexbox for this? I find it quite annoying to give absolute coordinates and sizes to almost all my components. https://www.w3.org/TR/css-flexbox-1/#box-model

Also it looks like I can't position text?

[SpaiR]

Unfortunately, Dear ImGui (the original library) is not built with layouts in mind. There are PR's like https://github.com/ocornut/imgui/pull/846, but as you can see from the date of its create (2016) and the fact that it's still not merged - widgets layout is not a main course of the library.

It's possible to implement stuff like that by yourself, but it's always a work from the ground. A hard work I might say.

Also, as the workaround solution you can try to use table API. It's pretty useful in situations when you need to spread items properly. Still, it's far away from functionality like flexbox though...

For the reference:

• https://github.com/ocornut/imgui/issues/97
• https://github.com/ocornut/imgui/issues/897
• https://github.com/ocornut/imgui/issues/319

[Osiris-Team]

Thanks @SpaiR , that's sad to hear though. I started working on a java flex layout implementation, using the table api like you said. And some basic functionality is already working:

        FlexLayout ly = new FlexLayout(null); // parent == null thus sets the window as its parent
        // Default alignment of FlexLayout is vertical
        ly.horizontal() // returns a new child FlexLayout with horizontal alignment
                .text("Some ").text("text!");
        ly.vertical() // returns a new child FlexLayout with vertical alignment
                .text("More ").text("text!");

If someone is interested in using/contributing, the source code for this is here: https://github.com/Osiris-Team/BetterDesktop/tree/main/src/main/java/com/osiris/betterdesktop/utils/flex I'll move it to a separate repo someday maybe.

Currently I am having troubles setting custom widths, specially heights for the components, no clue how to achieve that in imgui, since setNextItemWidth() is the only method that looked good, but doesnt exist for height.

[SpaiR]

@Osiris-Team You may find it interesting: https://www.reddit.com/r/java/comments/xarfpq/jvm_port_of_randrews_layout_a_simplefast_stacking/

[Osiris-Team]

Wow that looks exactly like what I was looking for! Thanks! But the API is kind of ugly, so I guess I'll still try developing it myself, but it's definitively a pretty good resource to see how they managed to create such a complex layout via imgui.

[Osiris-Team]

So in the end the library is not meant to be used with imgui it seems. I then lost it and made my own GUI library Desku available here: https://github.com/Osiris-Team/Desku Its uses chromium to render, thus the GUI is based on HTML/CSS/JS, however it removes the need to write in those languages and makes it possible to have a fully Java based GUI.

The main reason that I gave up imgui is, because its weird and harder to write async code that interacts with the UI. HTML/CSS are also much more developed/flexible GUI languages, thus it makes more sense to use them.

Besides that I have a full Java FlexBox "implementation", check out this class: https://github.com/Osiris-Team/Desku/blob/main/src/main/java/com/osiris/desku/ui/Component.java

The memory usage and the cpu usage are very low (around 17MB for an almost blank window + dev tools window, note that I substracted the reserved null heap from Java wich is around 160MB).