Immediate-Mode-UI / Nuklear

A single-header ANSI C immediate mode cross-platform GUI library
https://immediate-mode-ui.github.io/Nuklear/doc/index.html
Other
9.08k stars 544 forks source link

Broken layout in demos if you increase the size font. #496

Open cesss opened 2 years ago

cesss commented 2 years ago

I tried to use the demos with Roboto size larger than 16, and the layout of the dialogs gets broken: some buttons get icons over the text, some buttons/labels are not enlarged to fit their text, etc... doesn't Nuklear have an automatic layout feature that takes care of increasing the font size?

cesss commented 2 years ago

Try for example the demos with Roboto size 24, or size 32, and you'll see what I mean.

cesss commented 2 years ago

I've been trying to find the reason. It seems there are two issues: the first one is that the minimum row height automatically guessed by Nuklear is not enough when the font is large. I don't know why, but widgets touch or even overlap vertically if you use Roboto size 32 for example.

The other issue is horizontal overlaps. This one I guess is related to the demos using a static layout that doesn't grow when the window grows (I'm guessing this because the most basic demo has a dynamic layout, and there are no horizontal overlaps if you make the window wide enough, so maybe just by modifying the demos making them use the same layout as the most basic demo, horizontal overlaps would be fixed).

Therefore, the most worrying issue seems to be in the minimum row height.

Yes, I tried to call nk_layout_reset_min_row_height() in the demo loop, but it doesn't do any change at all.

cesss commented 2 years ago

Found the reason: The demos are hardcoding the row height instead of leaving it as automatic. So, for the moment, I have a proper way of avoiding vertical overlap problems.

But, regarding horizontal overlaps, I'm wondering: Can I ask Nuklear what's the minimum width a widget requires for not clipping labels nor shapes? This way, I could create the rows with a proper width, if I can know in advance the width that the widgets need.

cesss commented 2 years ago

Regarding the minimum width of a widget, I searched the old repo, and found that @vurtun was not a friend of automatic layout (which is a bummer, because I need automatic layout, something like AntTweakBar, in which you just say "put three toggles, two sliders, and one input box, do it like you wish but without any overlaps and with proper spacing, I don't care how you do it, just give me a dialog with these widgets properly sized").

Anyway, there was a commit for a function that returned the width of a string when rendered with a specific font. It's not the minimum widget width, but, well, better than nothing. Maybe I could survive with that.

Unfortunately, it seems that commit never made it into master and now the nk_font struct has changed and it's not compatible with that commit anyway.

dumblob commented 2 years ago

Yep, you correctly found out how it is. If you decided to write the functionality for what you need for Nuklear, feel free to make it as PR as we are now open to fully automated layouting (in a sense of enablement e.g. through exposition of needed internals).

Even if it is just a guide, we will be glad to accept it in our wiki (everybody has permission to edit the wiki - if not, please let me know).

cesss commented 2 years ago

I think that if a row height of 0 has the meaning of "automatic height", so that the row gets automatically the height it needs for arranging its widgets, then there should be also supported to define a width of 0 to the row widgets, meaning that they are given the minimum width they need.

Of course there are some widgets that don't have a really strictly needed minimum width (ie: can you say what's the minimum width for a slider, or for an input box?), but the same could be said for the vertical height of some widgets (ie: what's the minimum height for a listbox, or for a multiline text input?).

So, one property would be needed for all widgets: default width, and default height. For some widgets, these defaults would actually be the minimum size required to successfully draw the whole widget (eg: pushbuttons, togglebuttons, etc). For some other widgets, these defaults would be a preference (eg: default number of chars in an input box, for example).

Has Nuklear these defaults already implemented?

dumblob commented 1 year ago

Has Nuklear these defaults already implemented?

Not really. Actually there has been a lot of discussion in the past (in the old repo especially) about layouting (which by definition is the primary consumer of widget dimensions and offsets and a producer of new/adjusted sizes and offsets) but this was all left to users to keep Nuklear minimal. So you could e.g. use cassowary and then the resulting sizes just feed in Nuklear and you are good to go every frame :wink:.

But we are open to some minimal changes allowing much more even without employing such heavy-duty solutions as cassowary.

FrostKiwi commented 1 year ago

FWIW, I have used a “size multiplier macro” thingy to implement DPI scaling. Basically a MACRO, which inserts a scaler for every size concerning layouting. That scaler read from the DPI scaling, that the window was started with to scale both Font and layout in tandem. Though font scaling needed a bit extra logic because of https://github.com/Immediate-Mode-UI/Nuklear/wiki/Complete-font-guide#font-sharpness , to read from an array of known sharp sizes and take the closest fit.

dumblob commented 1 year ago

@FrostKiwi wanna submit your example code as another good example?

Or if it is too huge, then at least link to it from our readme and/or wiki with a description what issues it tackles (e.g. autoscaling incl. font and its sharpness, ...)?