DOM 2D Camera

A wrapper for camera-2d that supports pan, zoom, and rotate.

Controls are as follows:

• Pan - Left click and hold + mouse move
• Zoom - Scroll or Alt + Left click and hold with vertical mouse move
• Rotate - Right click or Control + Left click

Based on orbit-camera.

Also see:

• regl-scatterplot for an application and a demo.

Install

npm i @flekschas/dom-2d-camera

// Peer dependencies are not automatically included. To install them do:
npm i camera-2d-simple gl-matrix

API

import createDom2dCamera from "@flekschas/dom-2d-camera";

camera = createDom2dCamera(element, options = {})

Bins a camera-2d-simple instance to the DOM element. This effectively attaches event listeners required for pan&zoom interaction.

The following options are available:

• distance: initial distance of the camera. [dtype: number, default: 1]
• target: x, y position the camera is looking in GL coordinates. [dtype: array of numbers, default: [0,0]]
• rotation: rotation in radians around the z axis. [dtype: number, default: 0]
• isNdc: if true the camera operates in normalized device coordinates. This is useful when the camera is used in a WebGL program. [dtype: bool, default: false]
• isFixed: if true panning, rotating, and zooming is disabled. [dtype: bool, default: false]
• isPan: if true panning is enabled. [dtype: bool, default: true]
• panSpeed: initial panning speed. [dtype: number, default: 1]
• isRotate: if true rotation is enabled. [dtype: bool, default: true]
• rotateSpeed: initial panning speed. [dtype: number, default: 1]
• isZoom: if true zooming is enabled. [dtype: bool, default: true]
• zoomSpeed: initial zooming speed. [dtype: number, default: 1]
• onKeyDown: callback handler for keyDown [dtype: function, default: () => {}]
• onKeyUp: callback handler for keyUp [dtype: function, default: () => {}]
• onMouseDown: callback handler for mouseDown [dtype: function, default: () => {}]
• onMouseUp: callback handler for mouseUp [dtype: function, default: () => {}]
• onMouseMove: callback handler for mouseMove [dtype: function, default: () => {}]
• onWheel: callback handler for wheel [dtype: function, default: () => {}]

Returns a new 2D camera object.

Note the event callback functions are always triggered after the camera updated! This is useful if your main application wants to listen to that specific event and be sure that the camera is up to date.

The camera's API is augmented with the following additional endpoints:

camera.tick()

Call this at the beginning of each frame to update the current position of the camera.

camera.refresh()

Call after the width and height of the related canvas object changed.

Note: the camera does not update the width and height unless you tell it to using this function!

Returns [relX, relY] the WebGL position of x and y.

camera.dispose()

Unsubscribes all event listeners.

camera.config(options)

Configure the canvas camera. options accepts the following options:

• isFixed: if true panning, rotating, and zooming is disabled. [default: false]
• isPan: if true panning is enabled. [dtype: bool, default: true]
• panSpeed: panning speed. [dtype: float, default: 1.0]
• isRotate: if true rotation is enabled. [dtype: bool, default: true]
• rotateSpeed: rotation speed. [dtype: float, default: 1.0]
• isZoom: if true zooming is enabled. [dtype: bool, default: true]
• zoomSpeed: zooming speed. [dtype: float, default: 1.0]