ModeSwitcher

import { ModeSwitcher } from 'pixi-silk/ui/modes';

Experimental

Quick mode switching for editors, the hold-a-key ring of paint and 3D tools.

Hold the key: a ring of modes opens under the pointer, the most recently used first (the previous mode sits on top). Release over a mode to switch, or click it.
Tap the key: swap back to the previous mode, no ring.
Long-press longPressTarget on touch screens: the same ring, picked by sliding the finger.

The keyboard only acts while the pointer is over the canvas (it moved there in the last few seconds) and never while a text field has focus. Keep the switcher on top of the stage. Key handling listens on window. The switcher picks modes only: your app decides what each mode does.

Experimental: the API may change in a minor release.

Extends#

Container

Constructors#

Constructor#

new ModeSwitcher(options: ModeSwitcherOptions): ModeSwitcher;

Experimental

Parameters#

Parameter	Type
`options`	`ModeSwitcherOptions`

Returns#

ModeSwitcher

Overrides#

Container.constructor

Properties#

Property	Modifier	Type	Description	Defined in
`menu`	`readonly`	`RadialMenu`	`Experimental` The ring. Style it through the `menu` option.	ui/modes.ts:70
`state`	`readonly`	`ModeSwitcherState`	`Experimental` Current, previous and recent modes. Read them, and switch with ModeSwitcher.set.	ui/modes.ts:68

Accessors#

mode#

Get Signature#

get mode(): string;

Experimental

Current mode id.

Returns

string

Methods#

destroy()#

destroy(options?: DestroyOptions): void;

Experimental

Stops the hold timer, the key listener and the long-press gesture.

Parameters#

Parameter	Type
`options?`	`DestroyOptions`

Returns#

void

Overrides#

Container.destroy

open()#

open(
   x: number, 
   y: number, 
   pointer?: RadialPointer
): void;

Experimental

Opens the ring at (x, y) in the switcher’s coordinates. Pass the pointer that is down, if any.

Parameters#

Parameter	Type
`x`	`number`
`y`	`number`
`pointer?`	`RadialPointer`

Returns#

void

set()#

set(id: string): void;

Experimental

Switches to id (no-op for the current mode or an unknown id).

Parameters#

Parameter	Type
`id`	`string`

Returns#

void

tick()#

tick(dt: number): boolean;

Experimental

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

Parameters#

Parameter	Type
`dt`	`number`

Returns#

boolean

toggle()#

toggle(): void;

Experimental

Swaps back to the previous mode. No-op before the first switch.

Returns#

void