simonkrauter/NiGui

What do the different WidthModes (and HeightModes) actually mean?

SaeedBaig opened this issue · 2 comments

I'm doing some stuff with trying to align/display images in a scrolling container. Say I have a 16:9 image I want to display in scrolling container that fills a 500x600 window (similar code as example_09_font_size.nim).

With these types of settings, the images are all cut off within their containers:

image_container.widthMode = WidthMode_Fill
image_container.heightMode = HeightMode_Expand
...
control.heightMode = HeightMode_Expand
control.widthMode = WidthMode_Expand
control.onDraw = proc (event: DrawEvent) = event.control.canvas.drawImage(image, width=160, height=90)

Screenshot_20230131_202428
No permutation of Expands and Autos or whatever seems to make it better and give the uncropped images.

The only thing that worked is specifying a container height >= the image height:

image_container.height = 90 + 35   # buffer

Screenshot_20230131_203359

But I feel like there should be an easier way for a container to accomodate its content's height without manually setting it (what else could all these Expands and Autos be for?); I think my lack of fundamental understanding of how the different modes actually work is bottlenecking my ability to make progress.

There's, asfaik, _Expand, _Fill, _Auto, _Static, but what exactly do they mean? The example_10_drawing.nim code says _Fill is to "fill out the whole window", but that sound like _Expand to me (especially from the example_03_layout_container.nim code, where all the widthmodes are Expand and seem to fill out the window just fine).

So, long story short... what do the different width/height modes actually mean?

I have extended the example_03_layout_container.nim to show the difference of Fill and Expand.

Here a description:

  • Static: Size is given by a fixed number.
  • Auto: Size is calculated based on content (fit to content).
  • Fill: Widget will expand to the size of the container, not forcing the container to expand.
  • Expand: Widget will expand to the size of the container, forcing the container to expand.

In case of drawing images, there is currently no way to apply the image size to the widget size automatically.

Thanks, I think I got it now 👍 Shame that images can't Expand their containers, but at least I have a solution for my purposes, and won't be experimenting blindly when it comes to modes anymore.
(you can close the issue if you want)