TransformGizmo

import { TransformGizmo } from 'pixi-silk/ui/gizmo';

Transform handles for editors: move, rotate, scale and a bounding box with resize and rotate handles.

move: X and Y arrows lock to an axis, the centre square moves freely.
rotate: a ring. The swept angle is shaded and read out, with snap ticks while snapping.
scale: axis handles with cube ends, the centre ring scales evenly.
box: eight resize handles, rotate zones right outside the corners. Shift keeps the aspect, Alt resizes from the centre.
universal: move, rotate and scale at once.

Shift snaps moves, angles and scales to steps (in box mode it locks the aspect and snaps angles). Handles light up under the pointer and grow for touch. Put the gizmo in an overlay above the scene. It follows the target every frame and writes the new transform into it.

Extends#

Container

Constructors#

Constructor#

new TransformGizmo(options?: TransformGizmoOptions): TransformGizmo;

Parameters#

Parameter	Type
`options`	`TransformGizmoOptions`

Returns#

TransformGizmo

Overrides#

Container.constructor

Properties#

Property	Modifier	Type	Description	Defined in
`snap`	`public`	`GizmoSnap`	Snap steps and whether snapping is on without Shift. Change it at any time.	ui/gizmo.ts:218
`state`	`readonly`	`GizmoState`	Signals to read and write. See GizmoState.	ui/gizmo.ts:216

Accessors#

target#

Get Signature#

get target(): Container<ContainerChild> | null;

Object being transformed.

Returns

Container<ContainerChild> | null

transitioning#

Get Signature#

get transitioning(): boolean;

True while the handles pop or glide in. The gizmo ignores the pointer meanwhile.

Returns

boolean

Methods#

attach()#

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

Transforms target from now on (null hides the gizmo). Ends a drag in progress. Uses transition when it moves to another object.

Parameters#

Parameter	Type
`target`	`Container`<`ContainerChild`> \| `null`

Returns#

void

destroy()#

destroy(options?: DestroyOptions): void;

Stops the animation. Destroys children by default. The target is left alone.

Parameters#

Parameter	Type
`options?`	`DestroyOptions`

Returns#

void

Overrides#

Container.destroy

grab()#

grab(e: FederatedPointerEvent, handle?: GizmoHandle): void;

Starts dragging from a pointer press that landed elsewhere, such as on the object itself: press an object and move it in one go. Defaults to a free move.

Parameters#

Parameter	Type
`e`	`FederatedPointerEvent`
`handle?`	`GizmoHandle`

Returns#

void

pick()#

pick(x: number, y: number): GizmoHandle | null;

The handle under (x, y) in gizmo space, or null. Always null without a target or during a transition.

Parameters#

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

Returns#

GizmoHandle | null

read()#

read(): GizmoTransform;

Current transform of the target. Identity when there is no target.

Returns#

GizmoTransform

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