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:
parent
507bba82fd
commit
39dbbca90e
29 changed files with 1625 additions and 640 deletions
|
@ -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,
|
||||
})
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue