Skip to content
pixi-silk
GitHub repository
Entry point

pixi-silk/ui/layers

LayerTree: a layer tree over any data through an adapter, with selection and history.

import { LayerTree, applyDrop, drawLayerIcon, dropTarget } from 'pixi-silk/ui/layers';

Classes#

ClassDescription
LayerTreeA 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.

Interfaces#

InterfaceDescription
DropTargetWhere a drop lands.
DropTargetOptionsOptions of dropTarget.
FlatRowOne visible row of a flattened tree.
LayerTreeOptionsOptions of LayerTree.
LayerTreeStateThe reactive state of a LayerTree.
MoveStepOne move of applyDrop: where a node was and where it went, as move() indices.
PixiTreeAdapterWhat pixiTreeAdapter returns: an adapter for containers, plus the lock state it keeps.
PixiTreeOptionsOptions of pixiTreeAdapter.
TreeAdapterHow a LayerTree reads and changes your data. Only getChildren and getName are required. The tree never holds its own copy of the data, so it can show a Pixi scene graph, a document model or a state store.

Type Aliases#

Type AliasDescription
LayerIconThe icon of a layer row: a built-in kind, or a function that draws one centred on (0, 0).
LayerKindWhat a layer is, for the icon in its row.

Functions#

FunctionDescription
applyDropMoves nodes to a drop target through adapter.move, keeping their order, and returns the moves. Undo them with undoMoves. Nodes already in place are moved too, so the list replays the same way.
drawLayerIconDraws the built-in icon of a layer kind. Centred on (x, y) in a size box. It adds to g and does not clear it.
dropTargetWhere a drag over the rows drops, for a pointer at y (in row space, 0 at the top of the first row). The middle of a row that takes children drops inside it. The top and bottom halves drop between rows. Below the last row of a subtree, x picks how far out the drop goes. Returns null for a drop the tree must refuse, such as a node into itself.
findParentThe parent of node, searched from root. For adapters without getParent.
flattenTreeLists the visible rows of a tree, depth first: the children of root (or root itself with showRoot), and the children of every expanded node under them.
pixiTreeAdapterA TreeAdapter for a Pixi scene graph. Rows list a container’s children front to back, so the last child is the top row. Names are label. Hiding sets visible. Locking turns pointer events off for the node and everything under it. Moves keep each node where it is on screen.
redoMovesApplies the moves of applyDrop again, after undoMoves.
topLevelNodesThe nodes of nodes that have no ancestor in nodes, in row order. Dragging a group moves its children with it.
undoMovesPuts back what applyDrop moved.
visibleRangeThe rows a list of count rows of rowHeight shows when scrolled to scrollY, plus overscan either side.