Layout

The layout system tries to imitate or was inspired by the Flexbox model... kind of... Everything that is drawn on the screen extends src/core/CanvasElement but everything used for ui layout extends src/layout/LayoutElement

Layout

The class src/layout/Layout is in charge of creating either a vertical (column) or horizontal (row) layout. A Layout is a LayoutElement that contains an array of LayoutElements and handles how to render them, spacing between them, etc... Internally, depending on the value of it's direction config property, it will adjust the main and cross axis positioning of the items.

main axis

This is the main axis in which the items flow... for a row it will be the x axis, and for a column, the y axis.

cross axis

The perpendicular axis to the main axis.

width / height

A LayoutElement has to provide it's width and height so the layout system can know how to distribute them on the available space.

parent

Every layout that is nested must set the parent of it's child layout to itself, this is to allow elements to travel up in the parent chain to reach the top-most node, the WinNode that holds them.

render

This methos is called to render the element, it will be passed the draw context and max available widht and height space to use.

renderContents

This is called by the render function, it is separated so the render can add spacings like margins or padding so the render contents only focused on rendering it's contents and ignore those details.