Documentation Index
Fetch the complete documentation index at: https://docs.tsdraw.com/llms.txt
Use this file to discover all available pages before exploring further.
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()
Range
The default range is 0.1 to 8. Customize via props:
<Tsdraw cameraOptions={{ zoomRange: { min: 0.5, max: 4 } }} />
Interaction
Users can pan via:
- Hand tool
- Two-finger drag (trackpad/touch)
- Space + drag
Fast pans include deceleration momentum (slide).
Coordinates
Convert between screen (pixel) and page (canvas) space:
import { screenToPage, pageToScreen } from '@tsdraw/core'
const pagePoint = screenToPage(viewport, x, y)
Listeners
<Tsdraw onCameraChange={(vp) => console.log(vp)} />
