Implement Gap and Wrap Properties on Flex Widgets

Cole Greenrequested to merge
nox7/openmw:flex-wrap-property into master

Description

This adds new opt-in wrap and gap properties to the Flex widgets.

Implementing gap removes the redundant technique of adding blank spacer elements for flex children to emulate it. This property works with or without autosize on flex widgets.

Wrap maintains backwards compatibility by emulating the original children size calculations but implements a new algorithm to keep track of flex children via tracks (something seen in grid implementations as well).

Wrap does not take effect when autoSize is set to true. This property only works with autoSize false (this is because there is no concept of max width/max height in the UIs yet). The goal of this MR is an incremental push to more flexible, responsive UI API for mod developers and any Lua re-implementations of UIs that currently exist.

The docs have also been updated to reflect and describe these new properties

All alignments function as expected. Examples below:

horizontal-wrap.gif

vertical-wrap.gif

wrap-different-sizes.png

wrap-text.png

Example with the Container type (borders for visuals of the containers' bounds) with gapping (slight cufoff on the right is from the borders on the flex element and not an incorrect calculation of size):

container-sizing.png

Stretch on cross-axis

stretch-cross-axis.gif

I have verified that the script settings still work and are rendering correctly, as well as the shaders menu.

Checklist

  • I have read the CONTRIBUTING guidelines
  • My code builds and runs locally
  • My code passes CI on my fork
  • I have included steps to replicate/confirm the changes below
  • I have attached necessary supporting files or assets

Steps to Test/Replicate

Run the following Lua code in a Player script:

MR5275-Example.lua

Edited by Cole Green

Merge request reports