LayoutNode

import { LayoutNode } from 'pixi-silk/layout';

A box in a layout tree. Give it a style, children or a measure function, then call LayoutNode.calculate on the root. Each node’s LayoutNode.layout holds its box.

Layout is incremental. Changing a style, a child or the measure marks the node and its ancestors dirty. The next pass skips clean subtrees whose space did not change, and measured leaves cache their size per available space.

Type Parameters#

Type Parameter	Default type
`T`	`unknown`

Constructors#

Constructor#

new LayoutNode<T = unknown>(style?: LayoutStyle, measure?: MeasureFunction): LayoutNode<T>;

Parameters#

Parameter	Type
`style`	`LayoutStyle`
`measure?`	`MeasureFunction`

Returns#

LayoutNode<T>

Properties#

Property	Modifier	Type	Description	Defined in
`data`	`public`	`T` \| `undefined`	Anything you want to keep with the node, such as the display object it places.	layout/node.ts:16
`layout`	`readonly`	`ComputedLayout`	The box from the last pass, relative to the parent’s top-left corner.	layout/node.ts:14

Accessors#

children#

Get Signature#

get children(): readonly LayoutNode<T>[];

The child nodes in layout order.

Returns

readonly LayoutNode<T>[]

dirty#

Get Signature#

get dirty(): boolean;

True when the node or something under it changed since the last pass.

Returns

boolean

measure#

Get Signature#

get measure(): MeasureFunction | undefined;

Measures leaf content. A node with in-flow children ignores it. Setting it marks the node dirty.

Returns

MeasureFunction | undefined

Set Signature#

set measure(fn: MeasureFunction | undefined): void;

Parameters

Parameter	Type
`fn`	`MeasureFunction` \| `undefined`

Returns

void

parent#

Get Signature#

get parent(): LayoutNode<T> | null;

The parent node, or null for a root.

Returns

LayoutNode<T> | null

style#

Get Signature#

get style(): Readonly<LayoutStyle>;

The current style. Change it with LayoutNode.setStyle or LayoutNode.updateStyle.

Returns

Readonly<LayoutStyle>

Methods#

add()#

add(child: LayoutNode<T>, index?: number): this;

Adds child at index (default the end). A child of another node moves here.

Parameters#

Parameter	Type
`child`	`LayoutNode`<`T`>
`index`	`number`

Returns#

this

calculate()#

calculate(width?: number, height?: number): this;

Lays out the tree under this node. width and height are the space it fills, unless its style sets a size. Leave one out to size that axis to the content. The node itself sits at 0, 0.

Parameters#

Parameter	Type
`width?`	`number`
`height?`	`number`

Returns#

this

clear()#

clear(): this;

Removes every child. The children become roots of their own.

Returns#

this

markDirty()#

markDirty(): this;

Marks the node and its ancestors for the next pass. Call it when measured content changes (new text, a new texture). Style and child changes call it for you.

Returns#

this

remove()#

remove(child: LayoutNode<T>): this;

Removes child. Does nothing when it is not a child.

Parameters#

Parameter	Type
`child`	`LayoutNode`<`T`>

Returns#

this

setStyle()#

setStyle(style: LayoutStyle): this;

Replaces the whole style. Keys left out go back to their defaults. Marks the node dirty.

Parameters#

Parameter	Type
`style`	`LayoutStyle`

Returns#

this

updateStyle()#

updateStyle(patch: Partial<LayoutStyle>): this;

Merges patch into the style. A key set to undefined goes back to its default.

Parameters#

Parameter	Type
`patch`	`Partial`<`LayoutStyle`>

Returns#

this