39dbbca90e
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
34 lines
849 B
TypeScript
34 lines
849 B
TypeScript
import throttle from 'lodash.throttle'
|
|
import { useLayoutEffect } from 'react'
|
|
import { useEditor } from './useEditor'
|
|
|
|
export function useScreenBounds() {
|
|
const editor = useEditor()
|
|
|
|
useLayoutEffect(() => {
|
|
const updateBounds = throttle(
|
|
() => {
|
|
if (editor.instanceState.isFocused) {
|
|
editor.updateViewportScreenBounds()
|
|
}
|
|
},
|
|
200,
|
|
{
|
|
trailing: true,
|
|
}
|
|
)
|
|
|
|
// Rather than running getClientRects on every frame, we'll
|
|
// run it once a second or when the window resizes / scrolls.
|
|
updateBounds()
|
|
const interval = setInterval(updateBounds, 1000)
|
|
window.addEventListener('resize', updateBounds)
|
|
window.addEventListener('scroll', updateBounds)
|
|
|
|
return () => {
|
|
clearInterval(interval)
|
|
window.removeEventListener('resize', updateBounds)
|
|
window.removeEventListener('scroll', updateBounds)
|
|
}
|
|
})
|
|
}
|