UiNode

A node.

interface UiNode

import type { UiNode } from '@driftengine/ui2d';

In depth

An object with mutable fields rather than a row of typed arrays, and this is the one place in this package where that is the right answer. An interface tree is tens or hundreds of nodes built once and mutated, not thousands rebuilt per frame — the case struct-of-arrays exists for. What the hot path needs is that laying one out and drawing it allocates nothing, and both write into fields that already exist.

Properties

Name	Type	Description
`children`readonly	`UiNode[]`
`parent`	`UiNode \| null`
`direction`	`'row' \| 'column'`
`width`	`UiSize`
`height`	`UiSize`
`paddingLeft`	`number`
`paddingTop`	`number`
`paddingRight`	`number`
`paddingBottom`	`number`
`gap`	`number`
`align`	`UiAlign`
`justify`	`UiJustify`
`absolute`	`boolean`
`x`	`number`
`y`	`number`
`contentWidth`	`number`
`contentHeight`	`number`
`hidden`	`boolean`
`clip`	`boolean`	Whether this node cuts its descendants to its own rectangle. See `uiClip.ts`.
`scrollX`	`number`	How far this node's contents are moved under it. See `uiScroll.ts`.
`scrollY`	`number`
`contentSpanX`	`number`	How far the placed children reach past this node's content origin, along each axis. More Written by `layoutUiTree` and independent of the current scroll, because it is measured relative to the content origin that the scroll already moved — the offset cancels. That independence is the point: an extent derived from placed positions plus the live scroll value is wrong the moment the two disagree, which is exactly when a caller is scrolling.
`contentSpanY`	`number`
`layer`	`number`	Draw order beyond tree order. See `uiLayer.ts`.
`rect`readonly	`UiRect`	Where this node ended up. Meaningless until `layoutUiTree` has run over its root.
`measuredWidth`	`number`	What it measured to along each axis, before the parent distributed anything.
`measuredHeight`	`number`
`background`	`Float32Array \| null`
`texture`	`number`
`frame`	`SpriteFrame \| null`
`tint`	`Float32Array \| null`
`text`	`string`
`interactive`	`boolean`
`focusable`	`boolean`
`hovered`	`boolean`
`pressed`	`boolean`
`name`	`string`