SelectionGroup

import { SelectionGroup } from 'pixi-silk/ui/group';

Experimental

Several selected objects as one: a stand-in box around all of them that a TransformGizmo can move, resize and rotate. Every change of the box is applied to each object about the common pivot, whatever their parents.

const group = new SelectionGroup();
world.addChild(group);
const gizmo = new TransformGizmo({ mode: 'box', ...group.hooks() });
group.set(selected);
gizmo.attach(group.target);

The group draws nothing and catches no pointer. Add it to the space the objects live in (usually the camera’s world). It works on plain arrays of containers, so any selection store can drive it. Scaling a rotated group unevenly gives its objects a skew.

Experimental: the API may change in a minor release.

Extends#

• Container

Constructors#

Constructor#

new SelectionGroup(options?: SelectionGroupOptions): SelectionGroup;

Experimental

Parameters#

Returns#

SelectionGroup

Overrides#

Container.constructor

Properties#

Accessors#

target#

Get Signature#

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

Experimental

What to attach a gizmo to: the object itself when one is selected (so it keeps its own rotated frame), the group for several, null for none.

Returns

Container<ContainerChild> | null

targets#

Get Signature#

get targets(): readonly Container<ContainerChild>[];

Experimental

The objects the group moves, the value of state.targets.

Returns

readonly Container<ContainerChild>[]

Methods#

apply()#

apply(): this;

Experimental

Applies how the box changed since SelectionGroup.begin to every object, through setFromMatrix, then calls onApply. No-op before begin().

Returns#

this

begin()#

begin(): this;

Experimental

Remembers where the box and every object are: the start of a drag. Does nothing with fewer than two objects.

Returns#

this

end()#

end(): this;

Experimental

Ends a drag. The box keeps its rotation and size until the next set() or refit().

Returns#

this

hooks()#

hooks(): SelectionGroupHooks;

Experimental

onStart, onChange and onEnd for a TransformGizmo’s options. Allocates new closures each call.

Returns#

SelectionGroupHooks

refit()#

refit(): this;

Experimental

Fits the box around the objects again, square to the space, after they moved on their own. Resets the group’s rotation, skew, scale and pivot. Without a parent the box is empty.

Returns#

this

set()#

set(targets: readonly Container<ContainerChild>[]): this;

Experimental

Groups targets and fits the box around them, square to the space. The signal only changes when the set of objects changes, in any order.

Parameters#

Returns#

this