Inspector

import { Inspector } from 'pixi-silk/ui/inspector';

Experimental

A property inspector built from a schema. Rows hold number fields you scrub or type, text fields, switches, segmented choices, colour swatches with a picker and vector rows with an aspect lock. Sections fold. It edits whatever its InspectorBinding points at: one object, a multi-selection (differing values show as Mixed) or a set of signals.

Every drag, toggle or commit goes through history as one undo step. Rows are laid out with the flex engine, and labels are SilkText. The inspector does not watch the edited objects: call Inspector.refresh when they change elsewhere.

Example#

const inspector = new Inspector({
    schema: [
        { type: 'vector', keys: ['position.x', 'position.y'], label: 'Position', unit: 'px' },
        { type: 'number', key: 'alpha', label: 'Opacity', min: 0, max: 1, step: 0.01 },
        { type: 'color', key: 'tint', label: 'Tint' },
    ],
    history,
});

selection.state.items.subscribe((items) => inspector.bind(items));
panel.content.add(inspector);

Experimental: the API may change in a minor release.

Extends#

• FlexContainer

Constructors#

Constructor#

new Inspector(options: InspectorOptions): Inspector;

Experimental

Parameters#

Returns#

Inspector

Overrides#

FlexContainer.constructor

Properties#

Accessors#

area#

Get Signature#

get area(): Size;

Experimental

The root’s layout area, from the last pass when it has no fixed size.

Returns

Size

Inherited from#

FlexContainer.area

binding#

Get Signature#

get binding(): InspectorBinding | null;

Experimental

What the rows edit, or null.

Returns

InspectorBinding | null

layoutStyle#

Get Signature#

get layoutStyle(): SmartLayout;

Experimental

The container’s own flex style.

Returns

SmartLayout

Inherited from#

FlexContainer.layoutStyle

orientation#

Get Signature#

get orientation(): "portrait" | "landscape";

Experimental

The orientation of the root’s layout area. A square counts as landscape.

Returns

"portrait" | "landscape"

Inherited from#

FlexContainer.orientation

schema#

Get Signature#

get schema(): readonly InspectorField[];

Experimental

The schema the rows were built from.

Returns

readonly InspectorField[]

Methods#

add()#

add<T extends ContainerChild>(child: T, style?: SmartLayout): T;

Experimental

Adds child with a layout style. Returns the child.

Type Parameters#

Parameters#

Returns#

T

Inherited from#

FlexContainer.add

bind()#

bind(target: 
  | InspectorBinding
  | readonly object[]
  | null): this;

Experimental

Points the rows at something to edit: a binding, a list of objects (edited together, with bindObjects), or null for nothing.

Parameters#

Returns#

this

closePopover()#

closePopover(): void;

Experimental

Closes an open colour picker.

Returns#

void

destroy()#

destroy(options?: DestroyOptions): void;

Experimental

Closes an open colour picker and stops following the binding.

Parameters#

Returns#

void

Overrides#

FlexContainer.destroy

field()#

field(key: string): Field | undefined;

Experimental

The field of a key (the first key of a vector row).

Parameters#

Returns#

Field | undefined

getLayout()#

getLayout(child: Container): SmartLayout;

Experimental

The layout style of child, or {} when it has none.

Parameters#

Returns#

SmartLayout

Inherited from#

FlexContainer.getLayout

invalidate()#

invalidate(child?: Container<ContainerChild>): this;

Experimental

Lays out again on the next frame. Pass a child whose content changed (new text, a new texture) so it is measured again.

Parameters#

Returns#

this

Inherited from#

FlexContainer.invalidate

refresh()#

refresh(): this;

Experimental

Reads every value again. Call it when the edited objects changed outside the inspector, such as during a gizmo drag.

Returns#

this

resize()#

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

Experimental

Root only: lays out in an area of this size, in local units. Without it the root sizes to its content.

Parameters#

Returns#

this

Inherited from#

FlexContainer.resize

setLayout()#

setLayout(child: Container, style: SmartLayout): this;

Experimental

Gives child a layout style, replacing the old one. It need not be a child yet.

Parameters#

Returns#

this

Inherited from#

FlexContainer.setLayout

setSchema()#

setSchema(schema: readonly InspectorField[]): this;

Experimental

Replaces the rows: the old fields are destroyed and new ones built from schema.

Parameters#

Returns#

this

setStyle()#

setStyle(style: SmartLayout): this;

Experimental

Replaces the container’s own flex style and lays out on the next frame.

Parameters#

Returns#

this

Inherited from#

FlexContainer.setStyle

slotOf()#

slotOf(child: Container): 
  | {
  height: number;
  width: number;
  x: number;
  y: number;
}
  | undefined;

Experimental

A copy of the slot child got in the last pass, in this container’s space. Undefined for a child without a style.

Parameters#

Returns#

| { height: number; width: number; x: number; y: number; } | undefined

Inherited from#

FlexContainer.slotOf

tick()#

tick(dt: number): boolean;

Experimental

Advances layout and transitions by dt seconds (only needed with ticker: null). Returns true while busy.

Parameters#

Returns#

boolean

Overrides#

FlexContainer.tick

updateLayout()#

updateLayout(): this;

Experimental

Lays out the whole tree now, from its root, instead of on the next frame.

Returns#

this

Inherited from#

FlexContainer.updateLayout