perf: Improved pointer events related performance when the sidebar is docked with a large library open (#9086)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
This commit is contained in:
tothatt81 2025-02-04 22:05:56 +01:00 committed by GitHub
parent 424e94a403
commit 4f64372506
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 212 additions and 152 deletions

View file

@ -1522,13 +1522,17 @@ class App extends React.Component<AppProps, AppState> {
const allElementsMap = this.scene.getNonDeletedElementsMap();
const shouldBlockPointerEvents =
this.state.selectionElement ||
this.state.newElement ||
this.state.selectedElementsAreBeingDragged ||
this.state.resizingElement ||
(this.state.activeTool.type === "laser" &&
// technically we can just test on this once we make it more safe
this.state.cursorButton === "down");
// default back to `--ui-pointerEvents` flow if setPointerCapture
// not supported
"setPointerCapture" in HTMLElement.prototype
? false
: this.state.selectionElement ||
this.state.newElement ||
this.state.selectedElementsAreBeingDragged ||
this.state.resizingElement ||
(this.state.activeTool.type === "laser" &&
// technically we can just test on this once we make it more safe
this.state.cursorButton === "down");
const firstSelectedElement = selectedElements[0];
@ -6295,6 +6299,13 @@ class App extends React.Component<AppProps, AppState> {
private handleCanvasPointerDown = (
event: React.PointerEvent<HTMLElement>,
) => {
const target = event.target as HTMLElement;
// capture subsequent pointer events to the canvas
// this makes other elements non-interactive until pointer up
if (target.setPointerCapture) {
target.setPointerCapture(event.pointerId);
}
this.maybeCleanupAfterMissingPointerUp(event.nativeEvent);
this.maybeUnfollowRemoteUser();