grezi-docs/src/viewboxes.md
2024-10-17 17:23:12 -06:00

2.2 KiB

Viewboxes

Viewboxes are the mechanism by which things are positioned on the screen.

Viewboxes allow you to split the screen (Size) into many different sections. You can then anchor objects to specific anchor points within each box you create.

For instance: Here's a few Viewboxes:

TopHeaderView: Size[0] ^
    100~,
    0-,
]

TopHeaderHalves: TopHeaderView[1] >
    1:2,
    1:2,
]

TopHeaderThirdsLeft: TopHeaderHalves[0] ^
    1:3,
    1:3,
    1:3,
]

The viewboxes above resolve to these

  • TopHeaderView TopHeaderView viewbox image
  • TopHeaderHalves TopHeaderHalves viewbox image
  • TopHeaderThirdsLeft TopHeaderThirdsLeft viewbox image

The only Viewbox that's provided for you is Size, which is just one box, that is the full size of the screen.

  • TopHeaderView splits Size into 2 boxes

    • One box is 100 logical pixels long
    • And the second box has a minimum length of 0 logical pixels (you can use 0- to just make the box take the rest of the splitting area).
  • TopHeaderHalves splits TopHeaderView into 2 more boxes

    • One box takes one half of the splitting area
    • And the other box takes the other half of the splitting area
  • Finally, TopHeaderThirdsLeft splits TopHeaderView into 3 more boxes

    • One box takes one third of the splitting area
    • Another box takes one third of the splitting area
    • And the last box takes one third of the splitting area

You'll also notice that each viewbox is split in different directions

  • ^ and _ mean that the viewbox is splititng horizontally, or that the boxes are travelling downwards as the box index increases
  • > and < mean that the viewbox is splitting vertically, or that the boxes are travelling to the right as the box index increases

Viewboxes support many constraints aside from just ratios

  • {number}%: Allocates a given percentage of the splitting area
  • {number}-: Allocates at least a given size of the splitting area
  • {number}+: Allocates at most a given size of the splitting area
  • {number}~: Allocates the exact size given of the splitting area
  • {number}:{number}: Allocates the given ratio of the splitting area