PanZoomControls

Camera controls for 2D pan and zoom with an orthographic camera.

Dragging with the left mouse button pans the view and the scroll wheel zooms around the cursor, keeping the point under the pointer fixed. Movement applies immediately with no inertia or damping.

const camera = new OrthographicCamera({
  left: 0,
  right: 1024,
  top: 0,
  bottom: 1024,
});

const idetik = new Idetik({
  canvas,
  viewports: [{
    camera,
    layers: [imageLayer],
    cameraControls: new PanZoomControls(camera),
  }],
});

Implements CameraControls.

Constructor

Creates pan and zoom controls for the given camera.

new PanZoomControls(camera, params?): PanZoomControls;

Parameter	Description
camera: OrthographicCamera	The orthographic camera to control.
params?: PanZoomControlsProps	Initialization properties.

Types

PanZoomControlsProps

Initialization properties for constructing pan and zoom controls.

Property	Description
scrollZoom?: ScrollZoomMode	When the scroll wheel zooms. Defaults to "always".

Accessors

isMoving boolean

Whether a pan drag is in progress.

get isMoving(): boolean;

Methods

onEvent() void

Handles a pointer or wheel event. Called automatically by the owning viewport unless a layer stops propagation.

onEvent(event): void;

Parameter	Description
event: EventContext	The event with clip and world coordinates attached.

onUpdate() void

Does nothing. Pan and zoom apply immediately with no inertia.

onUpdate(_delta): void;

Parameter	Description
_delta: number	Time since the last frame in seconds. Unused.