pixi-silk/ui/panel

Panel: a docked, scrolling side panel drawn on the canvas.

import { Panel, ScrollView, dockAt, dockRect } from 'pixi-silk/ui/panel';

Classes#

Class	Description
Panel	A panel drawn on the canvas, with no DOM: a title bar, a body that scrolls, edges to resize and a chevron that folds it. Drag the title bar to move it, and drop it near a screen edge to dock it there. Size, position and folding glide on springs. Text is SilkText.
ScrollView	A clipped area that scrolls its ScrollView.content up and down, the way a native list does. Wheels and trackpads glide to their target, fingers fling with momentum and stretch past the ends, and a slim scrollbar fades in while it moves.

Interface	Description
PanelInsets	Space kept free along each screen edge, such as a toolbar or another docked panel.
PanelOptions	Options of Panel.
PanelRect	A rectangle in the panel’s parent space.
PanelState	The reactive state of a Panel.
PanelTextOptions	What the panels need to make a label.
PanelTheme	Colours and type of the editor panels. Every panel, the layer tree, the inspector and the minimap read the same tokens, so one theme restyles them all.
PanelViewport	The screen a panel docks in: numbers, or signals such as `camera.state.width` and `height`.
ScrollViewOptions	Options of ScrollView.
ScrollViewState	The reactive state of a ScrollView.

Type Alias	Description
PanelDock	A screen edge or corner a panel docks to.

Variable	Description
PANEL_THEME	The dark default theme of every panel. Override single tokens with a panel’s `theme` option.
PANEL_THEME_LIGHT	The light theme. Pass it as `theme`, or spread it and change a few tokens.

Function	Description
dockAt	The dock a drag points at: an edge or corner within `distance` of the pointer, or null. Corners win when both edges are near.
dockRect	Where a panel of `size` sits when docked to `dock` in a screen of `viewport`. Left and right panels span the height between the insets, top and bottom ones the width.
fitText	Sets `label` to `text`, cut with three dots to fit `width`. Returns true when it was cut. Long names in narrow rows stay on one line.
panelHitTest	A test for the camera’s `ignore` option: true for a point (in the stage’s space) over any of `targets`, so wheels and pans over panels stay with the panels.
panelText	A new SilkText label in the theme’s font, size and text colour.
resolvePanelTheme	The full theme for `input`: the dark default with `input` over it. Colours may be any Pixi colour.