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 editorNext
Snapshots