import { useEffect } from 'react' import { BoxModel, TLCameraOptions, Tldraw, Vec, clamp, track, useEditor, useLocalStorageState, } from 'tldraw' import 'tldraw/tldraw.css' const CAMERA_OPTIONS: TLCameraOptions = { isLocked: false, wheelBehavior: 'pan', panSpeed: 1, zoomSpeed: 1, zoomSteps: [0.1, 0.25, 0.5, 1, 2, 4, 8], constraints: { initialZoom: 'fit-max', baseZoom: 'fit-max', bounds: { x: 0, y: 0, w: 1600, h: 900, }, behavior: { x: 'contain', y: 'contain' }, padding: { x: 100, y: 100 }, origin: { x: 0.5, y: 0.5 }, }, } const BOUNDS_SIZES: Record = { a4: { x: 0, y: 0, w: 1050, h: 1485 }, landscape: { x: 0, y: 0, w: 1600, h: 900 }, portrait: { x: 0, y: 0, w: 900, h: 1600 }, square: { x: 0, y: 0, w: 900, h: 900 }, } export default function CameraOptionsExample() { return (

) } const PaddingDisplay = track(() => { const editor = useEditor() const cameraOptions = editor.getCameraOptions() if (!cameraOptions.constraints) return null const { constraints: { padding: { x: px, y: py }, }, } = cameraOptions return (

) }) const BoundsDisplay = track(() => { const editor = useEditor() const cameraOptions = editor.getCameraOptions() if (!cameraOptions.constraints) return null const { constraints: { bounds: { x, y, w, h }, }, } = cameraOptions const d = Vec.ToAngle({ x: w, y: h }) * (180 / Math.PI) const colB = '#00000002' const colA = '#0000001F' return ( <>

) }) const components = { // These components are just included for debugging / visualization! OnTheCanvas: BoundsDisplay, InFrontOfTheCanvas: PaddingDisplay, } const CameraOptionsControlPanel = track(() => { const editor = useEditor() const [cameraOptions, setCameraOptions] = useLocalStorageState('camera ex1', CAMERA_OPTIONS) useEffect(() => { if (!editor) return editor.batch(() => { editor.setCameraOptions(cameraOptions) editor.setCamera(editor.getCamera(), { immediate: true, }) }) }, [editor, cameraOptions]) const { constraints } = cameraOptions const updateOptions = ( options: Partial< Omit & { constraints: Partial } > ) => { const { constraints } = options const cameraOptions = editor.getCameraOptions() setCameraOptions({ ...cameraOptions, ...options, constraints: constraints === undefined ? cameraOptions.constraints : { ...(cameraOptions.constraints! ?? CAMERA_OPTIONS.constraints), ...constraints, }, }) } return (

Lock Wheel behavior Pan Speed { const val = clamp(Number(e.target.value), 0, 2) updateOptions({ panSpeed: val }) }} /> Zoom Speed { const val = clamp(Number(e.target.value), 0, 2) updateOptions({ zoomSpeed: val }) }} /> Zoom Steps { try { const val = e.target.value.split(', ').map((v) => Number(v)) if (val.every((v) => typeof v === 'number' && Number.isFinite(v))) { updateOptions({ zoomSteps: val }) } } catch (e) { // ignore } }} /> Bounds {constraints ? ( <> Initial Zoom Base Zoom Origin X { const val = clamp(Number(e.target.value), 0, 1) updateOptions({ constraints: { origin: { ...constraints.origin, x: val, }, }, }) }} /> Origin Y { const val = clamp(Number(e.target.value), 0, 1) updateOptions({ constraints: { ...constraints, origin: { ...constraints.origin, y: val, }, }, }) }} /> Padding X { const val = clamp(Number(e.target.value), 0) updateOptions({ constraints: { ...constraints, padding: { ...constraints.padding, x: val, }, }, }) }} /> Padding Y { const val = clamp(Number(e.target.value), 0) updateOptions({ constraints: { padding: { ...constraints.padding, y: val, }, }, }) }} /> Behavior X Behavior Y ) : null}

) })

Camera options