How GNUI Works

How GNUI Works

GNUI uses a "Box Tree" UI system, meaning each element is a Box, and its parent and children, all boxes that are connected to each other as a tree. with the exception of the root Box. wich is a Canvas.

Box Coordinates

GNUI uses three different coordinates for its boxes Box.Dimensions, Box.Anchor and Box.ContainmentRect.

Coordinate	Description
Box.Dimensions	the Raw data positions given to the box
Box.Anchor	Determins where to attach to its parent, (0<->1, left<->right, up<->down)
Box.ContainmentRect	the final output dimensions with anchors applied. incredibly handy piece of data.

all of each axis represent the points shown bellow for each end.

More about the anchor

assuming the box in question has a parent, the anchor will determine where the box will be attached to its parent.

here are some examples bellow. the gray box represents the parent box and the brighter box represents box in question.

Box Calculation (ContainmentRect)

the final box dimensions, aka the Box.ContainmentRect is calculated by

1. shifting the box by its Box.Dimensions
2. shifting it again by its parent's Final dimensions * its own Box.Anchor

Minimum Size & Grow Direction

the minimum size of the box is determined by the Box.CustomMinimumSize and Box.SystemMinimumSize, they tell the smallest size a box can be from its final dimensions.
While Box.GrowDirection determines the direction in which the box grows into when is too small for the parent container.

the image bellow shows how Box.GrowDirection works. the darker box represents the parent box and the lighter box represents box in question.

Now that you know how boxes work, you can start styling them!