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
This commit is contained in:
Steve Ruiz 2023-08-02 16:56:33 +01:00 committed by GitHub
parent 507bba82fd
commit 39dbbca90e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 1625 additions and 640 deletions

View file

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