LayerTree

import { LayerTree } from 'pixi-silk/ui/layers';

Experimental

A layer list for editors: rows with expand arrows, icons, names, and eye and lock toggles. It shows any tree through a TreeAdapter. Only the rows in view are drawn, from a pool.

• Click selects, Shift + click selects a range, cmd or ctrl + click toggles. The rows follow a Selection store, so the canvas and the list stay in sync both ways.
• Drag rows to reorder them, or onto a group to move them inside. The pointer’s x picks the depth below the last row of a group. On touch, hold a row to drag it.
• Double click a name, or press Enter or F2, to rename it in place.

Call LayerTree.refresh when the data changes outside the tree: it does not watch your data.

Example#

const tree = new LayerTree({ adapter: pixiTreeAdapter(), root: world, selection, history });

panel.content.add(tree, { grow: 1, onSize: (w, h) => tree.resize(w, h) });

Experimental: the API may change in a minor release.

Extends#

• Container

Type Parameters#

Constructors#

Constructor#

new LayerTree<T>(options: LayerTreeOptions<T>): LayerTree<T>;

Experimental

Parameters#

Returns#

LayerTree<T>

Overrides#

Container.constructor

Properties#

Accessors#

listHeight#

Get Signature#

get listHeight(): number;

Experimental

Height of the list.

Returns

number

listWidth#

Get Signature#

get listWidth(): number;

Experimental

Width of the list.

Returns

number

rows#

Get Signature#

get rows(): readonly FlatRow<T>[];

Experimental

The listed rows, top to bottom: every row under expanded groups, not only those scrolled into view.

Returns

readonly FlatRow<T>[]

Methods#

collapse()#

collapse(node: T): this;

Experimental

Folds the children of node away.

Parameters#

Returns#

this

destroy()#

destroy(options?: DestroyOptions): void;

Experimental

Removes the window listeners and the rename field, and stops the motion.

Parameters#

Returns#

void

Overrides#

Container.destroy

dragTo()#

dragTo(x: number, y: number): void;

Experimental

Moves a press to a point in the tree’s space, as the pointer does: past a few pixels it drags the rows.

Parameters#

Returns#

void

expand()#

expand(node: T, deep?: boolean): this;

Experimental

Lists the children of node. With deep, of everything under it too.

Parameters#

Returns#

this

handleKey()#

handleKey(code: string, shift?: boolean): boolean;

Experimental

Handles a key the way the tree does while focused: arrows, Home, End, Enter and F2. Returns true when it used the key. The tree calls it from keydown. Call it yourself for tests or your own key routing.

Parameters#

Returns#

boolean

isExpanded()#

isExpanded(node: T): boolean;

Experimental

True when the children of node are listed.

Parameters#

Returns#

boolean

refresh()#

refresh(): this;

Experimental

Lists the rows again from the adapter. Call it when the data changed outside the tree.

Returns#

this

release()#

release(): void;

Experimental

Ends a press: drops dragged rows, or finishes a click.

Returns#

void

rename()#

rename(node: T): this;

Experimental

Starts renaming node in place. Does nothing without adapter.setName.

Parameters#

Returns#

this

resize()#

resize(width: number, height: number): this;

Experimental

Changes the size of the list. Call it from the panel’s onSize.

Parameters#

Returns#

this

reveal()#

reveal(node: T, animate?: boolean): this;

Experimental

Opens the groups above node and scrolls its row into view.

Parameters#

Returns#

this

tick()#

tick(dt: number): boolean;

Experimental

Advances the motion by dt seconds (only needed with ticker: null). Returns true while moving.

Parameters#

Returns#

boolean

toggle()#

toggle(node: T, deep?: boolean): this;

Experimental

Folds or unfolds node.

Parameters#

Returns#

this