Lock camera zoom

Need to lock the camera at its current zoom level? You can use the camera controls API to keep the zoom level from changing.

import { Tldraw, TLUiOverrides } from 'tldraw'
import 'tldraw/tldraw.css'

const DEFAULT_CAMERA_STEPS = [0.1, 0.25, 0.5, 1, 2, 4, 8]

const overrides: TLUiOverrides = {
	actions(editor, actions) {
		actions.lockCameraZoom = {
			id: 'lock-camera-zoom',
			kbd: '!k',
			onSelect() {
				const isCameraZoomLockedAlready = editor.getCameraOptions().zoomSteps.length === 1
				editor.setCameraOptions({
					zoomSteps: isCameraZoomLockedAlready ? DEFAULT_CAMERA_STEPS : [editor.getZoomLevel()],
				})
			},
		}

		return actions
	},
}

export default function BasicExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw persistenceKey="example" overrides={overrides} />
		</div>
	)
}
Is this page helpful?
Prev
Controlling the editor
Next
Snapshots