SelectionOutline

import { SelectionOutline } from 'pixi-silk/ui/outline';

Animated bounds around one or more objects, for hover and selection in editors.

• Follows rotated and nested objects with an oriented box, exactly, every frame.
• Several targets get one axis-aligned box around all of them.
• A new selection pops: the old frame shrinks away while the new one springs in. Set transition: 'glide' to slide one frame over instead.
• The selected frame has marching dashes and corner brackets. The hover line is quiet.

Add it to an overlay above the scene. It reads the targets every frame while it shows them. It ignores pointer events.

Extends#

• Container

Constructors#

Constructor#

new SelectionOutline(options?: SelectionOutlineOptions): SelectionOutline;

Parameters#

Returns#

SelectionOutline

Overrides#

Container.constructor

Properties#

Accessors#

popping#

Get Signature#

get popping(): boolean;

True while a frame pops in or out.

Returns

boolean

quad#

Get Signature#

get quad(): Quad | null;

The box as drawn now, or null when nothing is framed. Exact while following the same objects.

Returns

Quad | null

Methods#

destroy()#

destroy(options?: DestroyOptions): void;

Stops the animation. Destroys children by default. The targets are left alone.

Parameters#

Returns#

void

Overrides#

Container.destroy

hover()#

hover(target: Container<ContainerChild> | null): void;

Quiet outline around target (null hides it).

Parameters#

Returns#

void

select()#

select(targets: 
  | Container<ContainerChild>
  | readonly Container<ContainerChild>[]
  | null): void;

Selection frame around targets (null hides it).

Parameters#

Returns#

void

set()#

set(targets: 
  | Container<ContainerChild>
  | readonly Container<ContainerChild>[]
  | null, mode?: OutlineMode): void;

Frames targets (one object, several, or none to fade out). Setting the same objects again only changes the mode.

Parameters#

Returns#

void

tick()#

tick(dt: number): boolean;

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

Parameters#

Returns#

boolean