Marquee

import { Marquee } from 'pixi-silk/ui/marquee';

Experimental

Rubber-band selection: drag on empty canvas to pick every object the rectangle touches (or fully contains). Shift adds to the selection, Alt takes away, Escape cancels.

Only left drags from the bare surface start it. A Camera keeps middle, right, Space and two-finger drags, and a pan that starts mid-drag cancels the marquee. The selection updates live through onChange. Near the edge of the view the camera pans, and the rectangle keeps its world corner.

It holds no selection of its own: plain arrays of containers in, plain arrays out. Hit tests use each object’s transformed bounds box, not its exact shape. Put it in screen space above the world. It listens for Escape on window.

Experimental: the API may change in a minor release.

Extends#

• Container

Constructors#

Constructor#

new Marquee(options: MarqueeOptions): Marquee;

Experimental

Parameters#

Returns#

Marquee

Overrides#

Container.constructor

Properties#

Accessors#

screenRect#

Get Signature#

get screenRect(): WorldRect | null;

Experimental

The rectangle in this overlay’s space (CSS pixels) now, or null when no drag is live.

Returns

WorldRect | null

Methods#

cancel()#

cancel(): void;

Experimental

Stops the drag. A live drag calls onChange with the selection from before the drag. Escape and a camera pan call it too. No-op without a drag.

Returns#

void

destroy()#

destroy(options?: DestroyOptions): void;

Experimental

Removes all internal references and listeners as well as removes children from the display list. Do not use a Container after calling destroy.

Parameters#

Returns#

void

Example#

container.destroy();
container.destroy(true);
container.destroy({ children: true });
container.destroy({ children: true, texture: true, textureSource: true });

Overrides#

Container.destroy

pick()#

pick(rect: WorldRect, mode?: MarqueeMode): readonly Container<ContainerChild>[];

Experimental

What a world rectangle picks, by hit or by testing the candidates. Does not change the selection.

Parameters#

Returns#

readonly Container<ContainerChild>[]

tick()#

tick(dt: number): boolean;

Experimental

Advances fades and auto-pan by dt seconds (clamped to 0..0.1). Only needed with ticker: null.

Parameters#

Returns#

boolean