Perf: throttle updateHoveredId (#3419)

This PR throttles the `updateHoveredId` call so that it happens ever
30ms.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features

### Release Notes

- Improves canvas performance by throttling the update to the editor's
hovered id.
This commit is contained in:
Steve Ruiz 2024-04-09 16:33:07 +01:00 committed by GitHub
parent 988dbbde28
commit 3b98e36914
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,6 +1,6 @@
import { Editor, HIT_TEST_MARGIN, TLShape } from '@tldraw/editor'
import { Editor, HIT_TEST_MARGIN, TLShape, throttle } from '@tldraw/editor'
export function updateHoveredId(editor: Editor) {
function _updateHoveredId(editor: Editor) {
// todo: consider replacing `get hoveredShapeId` with this; it would mean keeping hoveredShapeId in memory rather than in the store and possibly re-computing it more often than necessary
const hitShape = editor.getShapeAtPoint(editor.inputs.currentPagePoint, {
hitInside: false,
@ -30,3 +30,6 @@ export function updateHoveredId(editor: Editor) {
return editor.setHoveredShape(shapeToHover.id)
}
export const updateHoveredId =
process.env.NODE_ENV === 'test' ? _updateHoveredId : throttle(_updateHoveredId, 32)