Layout V2

[rcoreilly]

CSS Flex model

• https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

• LayoutHoriz, LayoutVert -> Row, Col + Wrap versions

• MainAxis, CrossAxis

• Basis (min size): 0 = use content, else specified Min size

• Grow = stretch factor; default 0;

• Max = upper limit if non-0; default 0

Basically, we get rid of Pref size, change Max=-1 -> Grow, and rename stuff..

Simple Logic: No Pref or Shrink, only Min + Grow

• Set Basis to the minimum usable content size. 0 = auto

• Set Grow if you want to stretch

• There will always be a scrollbar at an appropriate level to handle case when Size < Min

• in practice, you would never use shrink without setting a reasonable min.

• in this case, it is equivalent to setting the min = basis, and adding grow (except for some kind of nonlinear math diffs).

Scrollbars: Overflow

Key constraint of our rendering model: every widget renders into its own non-overlapping box, so that rendering is fully independent and can be done efficiently for a single widget without having to re-render the entire scene. This is different from html but is a hard constraint for efficiency.

Basically, we want to set Hidden as the default, and Auto on specific layouts that handle scrolling.

• Visible: doesn't really work because it requires rendering outside the box model. This is a non-starter.
• Hidden: this should be the default -- no scrollbars
• Clip: don't use -- same as hidden.
• Scroll: always use a scrollbar. stupid.
• Auto: use a scrollbar.

Specific cases

Let's start bottom-up with specific cases and develop abstractions from there.

Terms:

• Space = padding + border etc

Label

• Basis = text render layout -- tricky b/c of iteration w/ wrap; optional min
• Add an elipses option

Widget Parts

• Basis = Content: text label size + specified icon size + Space
• Size = Basis + Stretch
• Stretch = default none; optionally stretch (up to max?), e.g., for textfield
• Scroll = never

Row / Column of Widgets (toolbar, etc)

• Basis = Content: sum of widgets + Space
• Size = Basis + Stretch
• Stretch = default none; optional
• Scroll = never

SliceView, TextEditor, TopAppBar: sized based on avail

• Basis = Available (parent) + Min default + optional Max (not content)
• Size = Basis + Stretch
• Stretch = default yes
• Scroll = never (done internally)

MapView, TreeView.. large Grid layouts

• Basis = Content + Min default + Max optional
• Size = Basis + Stretch
• Stretch = default yes
• Scroll = always

Scene / Tabs / Tab Panel etc

• Basis = Available (window, proportion of full window)
• Size = Basis + Stretch
• Stretch = always
• Scroll = only when below Min on everything else