Guides

import { Guides } from 'pixi-silk/ui/guides';

Experimental

Guide lines over a Camera’s world. Drag a guide out of a Ruler: the top ruler gives a horizontal one, the left a vertical one. Drag a guide to move it, drop it back on the ruler to remove it. A pill shows the position while dragging. Guides.bindSnap feeds the guides to a snap engine, so objects snap to them.

Works with mouse, pen and touch. Only the lines catch the pointer, so other presses reach the scene. Put it in screen space above the world, under the ruler.

Experimental: the API may change in a minor release.

Extends#

• Container

Constructors#

Constructor#

new Guides(options: GuidesOptions): Guides;

Experimental

Parameters#

Returns#

Guides

Overrides#

Container.constructor

Properties#

Accessors#

guides#

Get Signature#

get guides(): readonly Guide[];

Experimental

Every guide now, the value of state.guides. A guide being dragged out of the ruler is not in it yet.

Returns

readonly Guide[]

Methods#

add()#

add(axis: "x" | "y", at: number): Guide;

Experimental

Adds a guide at at world units and fades it in. x is a vertical line, y a horizontal one.

Parameters#

Returns#

Guide

bindSnap()#

bindSnap(engine: SnapEngine): () => void;

Experimental

Keeps engine.lines equal to the guides, so objects snap to them. It overwrites any lines the engine had. Returns the unbind function. Destroying the layer unbinds too.

Parameters#

Returns#

() => void

clear()#

clear(): this;

Experimental

Removes every guide, one by one, so state.guides changes once per guide.

Returns#

this

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

lines()#

lines(): {
  x: number[];
  y: number[];
};

Experimental

Guide positions, world units, in the shape SnapEngine takes for lines. x holds the vertical guides.

Returns#

{
  x: number[];
  y: number[];
}

move()#

move(id: number, at: number): this;

Experimental

Moves a guide to at world units, without snapping. An unknown id is a no-op.

Parameters#

Returns#

this

pick()#

pick(p: PointData): Guide | null;

Experimental

The guide nearest a point in this layer’s space, or null. The grab distance is 3 pixels plus part of the last pointer kind’s slop. Points over the ruler return null.

Parameters#

Returns#

Guide | null

remove()#

remove(id: number): this;

Experimental

Removes a guide at once from state.guides. Its line fades out. An unknown id is a no-op.

Parameters#

Returns#

this

tick()#

tick(dt: number): boolean;

Experimental

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

Parameters#

Returns#

boolean