From 3b98e36914b5b665082e09a187f3b592d015425f Mon Sep 17 00:00:00 2001 From: Steve Ruiz Date: Tue, 9 Apr 2024 16:33:07 +0100 Subject: [PATCH] Perf: throttle `updateHoveredId` (#3419) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../src/lib/tools/selection-logic/updateHoveredId.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts b/packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts index 9f0d44202..f03d333c3 100644 --- a/packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts +++ b/packages/tldraw/src/lib/tools/selection-logic/updateHoveredId.ts @@ -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)