Camera

The camera is represented by a Viewport:

interface Viewport {
  x: number
  y: number
  zoom: number
}

Control

editor.setViewport({ x: 0, y: 0, zoom: 1 })
editor.zoomIn()

The default range is 0.1 to 8. Customize via props:

<Tsdraw cameraOptions={{ zoomRange: { min: 0.5, max: 4 } }} />

Users can pan via:

Fast pans include deceleration momentum (slide).

Convert between screen (pixel) and page (canvas) space:

import { screenToPage, pageToScreen } from '@tsdraw/core'

const pagePoint = screenToPage(viewport, x, y)

<Tsdraw onCameraChange={(vp) => console.log(vp)} />