Camera APIs (#1786)

This PR updates camera APIs:
- removes animateCamera
- adds animation support to setCamera
- makes camera commands accept points rather than an x/y
  - `centerOnPoint`
  - `pageToScreen`
  - `screenToPoint`
  - `pan`
  - `setCamera`
- makes `zoomToBounds` accept a `Box2d` rather than x/y/w/h
- removes the `getBoundingClientRects` call from `getPointerInfo`
- removes the resize observer from `useScreenBounds`, uses an interval
instead when focused

A big (unexpected) improvement here is that `getBoundingClientRects` was
being called on every pointer move. This is a relatively expensive call
(it forces reflow) which could impact interactions. It's now called at
most once per second, and we could probably improve on that too if we
needed by only updating while in the select state.

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Try the multiple editors example after scrolling / resizing
2. Use the camera commands (zoom in, etc)

- [x] Unit Tests

### Release Notes

- (editor) improve camera commands

packages/editor/src/lib/hooks/useCanvasEvents.ts

@@ -21,7 +21,7 @@ export function useCanvasEvents() {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_down',
-					...getPointerInfo(e, editor.getContainer()),
+					...getPointerInfo(e),
 				})
 			}
 
@@ -36,7 +36,7 @@ export function useCanvasEvents() {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_move',
-					...getPointerInfo(e, editor.getContainer()),
+					...getPointerInfo(e),
 				})
 			}
 
@@ -52,7 +52,7 @@ export function useCanvasEvents() {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_up',
-					...getPointerInfo(e, editor.getContainer()),
+					...getPointerInfo(e),
 				})
 			}
 
@@ -84,12 +84,10 @@ export function useCanvasEvents() {
 
 				const files = Array.from(e.dataTransfer.files)
 
-				const rect = editor.getContainer().getBoundingClientRect()
-
 				await editor.putExternalContent({
 					type: 'files',
 					files,
-					point: editor.screenToPage(e.clientX - rect.x, e.clientY - rect.y),
+					point: editor.screenToPage({ x: e.clientX, y: e.clientY }),
 					ignoreParent: false,
 				})
 			}