Perf: block hit tests while moving camera (#3418)
This PR uses an element that prevents hit tests on shapes while the camera is moving. https://github.com/tldraw/tldraw/assets/23072548/9905f3d4-ba64-4e4d-ae99-194f513eaac8 ### Change Type - [x] `sdk` — Changes the tldraw SDK - [x] `improvement` — Improving existing features ### Test Plan 1. Move the camera. 2. Interact with the canvas. 3. Zoom in and out. ### Release Notes - Improves performance of canvas while the camera is moving.
This commit is contained in:
parent
3f64bf8c5b
commit
dadb57edcd
2 changed files with 30 additions and 0 deletions
|
@ -137,6 +137,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
|
|||
</div>
|
||||
<InFrontOfTheCanvasWrapper />
|
||||
</div>
|
||||
<MovingCameraHitTestBlocker />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
@ -590,3 +591,16 @@ function InFrontOfTheCanvasWrapper() {
|
|||
if (!InFrontOfTheCanvas) return null
|
||||
return <InFrontOfTheCanvas />
|
||||
}
|
||||
|
||||
function MovingCameraHitTestBlocker() {
|
||||
const editor = useEditor()
|
||||
const cameraState = useValue('camera state', () => editor.getCameraState(), [editor])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('tl-hit-test-blocker', {
|
||||
'tl-hit-test-blocker__hidden': cameraState === 'idle',
|
||||
})}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue