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.

packages/editor/editor.css

@@ -29,6 +29,7 @@
 	--layer-shapes: 300;
 	--layer-overlays: 400;
 	--layer-following-indicator: 1000;
+	--layer-blocker: 10000;
 	/* Misc */
 	--tl-zoom: 1;
 
@@ -1501,3 +1502,18 @@ it from receiving any pointer events or affecting the cursor. */
 	font-size: 12px;
 	font-family: monospace;
 }
+
+/* ---------------- Hit test blocker ---------------- */
+
+.tl-hit-test-blocker {
+	position: absolute;
+	z-index: var(--layer-blocker);
+	inset: 0px;
+	width: 100%;
+	height: 100%;
+	pointer-events: all;
+}
+
+.tl-hit-test-blocker__hidden {
+	display: none;
+}

packages/editor/src/lib/components/default-components/DefaultCanvas.tsx

@@ -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',
+			})}
+		/>
+	)
+}