A wrapper for attaching a 2D camera to a DOM element
npm install 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.
```
npm i dom-2d-camera gl-matrix
Note that gl-matrix is a peer dependency and not automatically bundled with dom-2d-camera as you probably want to use it in your main application.
`javascript`
import createDom2dCamera from "dom-2d-camera";
Binds 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: true]isFixed
- : if true panning, rotating, and zooming is disabled. [dtype: bool, default: false]isPan
- : if true x and y panning is enabled. [dtype: bool | [bool, bool], default: true]isPanInverted
- : if true x and y panning is inverted. [dtype: bool | [bool, bool], default: false]isRotate
- : if true rotation is enabled. [dtype: bool, default: true]isZoom
- : if true x and y zooming is enabled. [dtype: bool | [bool, bool], default: true]panSpeed
- : panning speed. [dtype: number, default: 1]rotateSpeed
- : rotation speed. [dtype: number, default: 1]zoomSpeed
- : zooming speed. [dtype: number, default: 1]defaultMouseDownMoveAction
- : default behavior on mousedown + mousemove. [dtype: string, valid: pan or rotate, default: pan]mouseDownMoveModKey
- : modifier key for invoking opposite behavior on mousedown + mousemove.[dtype: string, valid: [alt, shift, ctrl, cmd, meta], default: alt]scaleBounds
- : see camera-2d [dtype: array, default: null]viewCenter
- : see camera-2d [dtype: array, default: null]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 x and y panning is enabled. [dtype: bool | [bool, bool], default: true]isPanInverted
- : if true x and y panning is inverted. [dtype: bool | [bool, bool], default: false]isRotate
- : if true rotation is enabled. [dtype: bool, default: true]isZoom
- : if true x and y zooming is enabled. [dtype: bool | [bool, bool], default: true]panSpeed
- : panning speed. [dtype: float, default: 1.0]rotateSpeed
- : rotation speed. [dtype: float, default: 1.0]zoomSpeed
- : zooming speed. [dtype: float, default: 1.0]defaultMouseDownMoveAction
- : default behavior on mousedown + mousemove. [dtype: string, valid: pan or rotate, default: pan]mouseDownMoveModKey
- : modifier key for invoking opposite behavior on mousedown + mousemove.[dtype: string, valid: [alt, shift, ctrl, cmd, meta], default: alt`]