RadialMenu

import { RadialMenu } from 'pixi-silk/ui/radial';

Pie / marking menu, the compact kind used in 3D, paint and modelling tools.

Press, drag towards an item, release: picked in one gesture (marking). Tap instead and it stays open for a second tap (sticky). Both work with mouse, pen and touch.
Selection is by angle, not by hit box. Past the dead zone the whole wedge counts, out to the falloff distance. Fast flicks land, and a wobbly finger keeps its item (hysteresis).
Leaving the menu does not close it unless closeOnLeave is set, and then only after a grace delay.
Items with children open the next ring around themselves. Rings nest to any depth.
Full circles or arcs (sweep), which turn away from screen edges.
Dead zone, falloff, size and timing adapt to the pointer kind (bigger and more forgiving for touch).

State lives in signals on state (phase, hover, path, kind) you can subscribe to. The menu draws into one SilkGraphics and only animates while something moves. It starts closed: add it to the stage, then call RadialMenu.openAt or use bindRadialTrigger.

Extends#

Container

Constructors#

Constructor#

new RadialMenu(options: RadialMenuOptions): RadialMenu;

Parameters#

Parameter	Type
`options`	`RadialMenuOptions`

Returns#

RadialMenu

Overrides#

Container.constructor

Properties#

Property	Modifier	Type	Description	Defined in
`state`	`readonly`	`RadialState`	Reactive state: subscribe to drive other UI from the menu.	ui/RadialMenu.ts:200

Accessors#

closeOnLeave#

Get Signature#

get closeOnLeave(): boolean;

Close when the pointer stays outside the falloff area for the profile’s leaveDelayMs. Can change at any time.

Returns

boolean

Set Signature#

set closeOnLeave(value: boolean): void;

Parameters

Parameter	Type
`value`	`boolean`

Returns

void

isOpen#

Get Signature#

get isOpen(): boolean;

True while open (not while closing).

Returns

boolean

Methods#

close()#

close(): void;

Closes the menu with an animation and calls onClose. Does nothing unless it is open.

Returns#

void

destroy()#

destroy(options?: DestroyOptions): void;

Stops the animation and the Escape listener. Destroys children by default.

Parameters#

Parameter	Type
`options?`	`DestroyOptions`

Returns#

void

Overrides#

Container.destroy

openAt()#

openAt(
   x: number, 
   y: number, 
   event?: RadialPointer
): void;

Opens the menu centred on (x, y) in the parent’s coordinates. Pass the pointer event that opened it so a press-drag-release picks in one gesture and the profile matches the device.

Parameters#

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

Returns#

void

pointerAt()#

pointerAt(x: number, y: number): void;

Steers the menu with a point in its own coordinates (screen scale, centre at 0, 0). Pointer events call this. Call it yourself for gamepads or tests.

Parameters#

Parameter	Type
`x`	`number`
`y`	`number`

Returns#

void

select()#

select(item: RadialItem): void;

Picks item as if the user released on it. Ignored when the menu is not open, or the item is disabled or not shown in it.

Parameters#

Parameter	Type
`item`	`RadialItem`

Returns#

void

setItems()#

setItems(items: RadialItem[]): void;

Replaces the items and rebuilds their icons. Open sub-rings close.

Parameters#

Parameter	Type
`items`	`RadialItem`[]

Returns#

void

tick()#

tick(dt: number): boolean;

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

Parameters#

Parameter	Type
`dt`	`number`

Returns#

boolean