The 2D layer · function

layoutUiTree

Lay a tree out into x, y, w, h.

Explained in Sprites and tilemaps.

function layoutUiTree(root: UiNode, x: number, y: number, w: number, h: number): void
import { layoutUiTree } from '@driftengine/ui2d';

Parameters

ParameterTypeDescription
rootUiNode
xnumber
ynumber
wnumber
hnumber

In depth

Two passes, bottom-up then top-down, and no third. The measure pass answers what every node comes to on its own; the place pass hands out the space that exists and distributes what is left over. A fit size that depended on the space it was given would need a third pass and a rule for when to stop, which is where a layout engine stops being explicable.

Allocates nothing. Every number it produces is written into a UiRect the node already owns, so a tree laid out every frame costs no garbage. That is the rule this whole module is shaped by, and it is why the node is an object with fields rather than a description that gets resolved into one.

The box is what is available, and the root resolves its own size against it like any other node: grow fills it, a number is that number, and fit — the default — comes to whatever its contents do. So the same call lays out a full-screen HUD and a tooltip, and a caller does not have to measure a menu itself before it can place one. Nothing is clamped to the box: a fit root with more in it than fits reports the size it really is, because a silently truncated layout is worse than one that visibly overflows.