smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: throttle pointermove events per framerate (#4727)

Browse source
This commit is contained in:
David Luzar 2022-02-06 17:45:37 +01:00 • committed by GitHub
parent 96de887cc8
commit 8aff076782
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 75 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/App.tsx
View file

@ -212,6 +212,7 @@ import {
tupleToCoors,
viewportCoordsToSceneCoords,
withBatchedUpdates,
withBatchedUpdatesThrottled,
} from "../utils";
import ContextMenu, { ContextMenuOption } from "./ContextMenu";
import LayerUI from "./LayerUI";
@ -2921,7 +2922,7 @@ class App extends React.Component<AppProps, AppState> {
setCursor(this.canvas, CURSOR_TYPE.GRABBING);
let { clientX: lastX, clientY: lastY } = event;
const onPointerMove = withBatchedUpdates((event: PointerEvent) => {
const onPointerMove = withBatchedUpdatesThrottled((event: PointerEvent) => {
const deltaX = lastX - event.clientX;
const deltaY = lastY - event.clientY;
lastX = event.clientX;
@ -2984,6 +2985,7 @@ class App extends React.Component<AppProps, AppState> {
window.removeEventListener(EVENT.POINTER_MOVE, onPointerMove);
window.removeEventListener(EVENT.POINTER_UP, teardown);
window.removeEventListener(EVENT.BLUR, teardown);
onPointerMove.flush();
}),
);
window.addEventListener(EVENT.BLUR, teardown);
@ -3086,7 +3088,7 @@ class App extends React.Component<AppProps, AppState> {
isDraggingScrollBar = true;
pointerDownState.lastCoords.x = event.clientX;
pointerDownState.lastCoords.y = event.clientY;
const onPointerMove = withBatchedUpdates((event: PointerEvent) => {
const onPointerMove = withBatchedUpdatesThrottled((event: PointerEvent) => {
const target = event.target;
if (!(target instanceof HTMLElement)) {
return;
@ -3105,6 +3107,7 @@ class App extends React.Component<AppProps, AppState> {
this.savePointer(event.clientX, event.clientY, "up");
window.removeEventListener(EVENT.POINTER_MOVE, onPointerMove);
window.removeEventListener(EVENT.POINTER_UP, onPointerUp);
onPointerMove.flush();
});
lastPointerUp = onPointerUp;
@ -3640,8 +3643,8 @@ class App extends React.Component<AppProps, AppState> {
private onPointerMoveFromPointerDownHandler(
pointerDownState: PointerDownState,
): (event: PointerEvent) => void {
return withBatchedUpdates((event: PointerEvent) => {
) {
return withBatchedUpdatesThrottled((event: PointerEvent) => {
// We need to initialize dragOffsetXY only after we've updated
// `state.selectedElementIds` on pointerDown. Doing it here in pointerMove
// event handler should hopefully ensure we're already working with
@ -4062,6 +4065,10 @@ class App extends React.Component<AppProps, AppState> {
lastPointerUp = null;
if (pointerDownState.eventListeners.onMove) {
pointerDownState.eventListeners.onMove.flush();
}
window.removeEventListener(
EVENT.POINTER_MOVE,
pointerDownState.eventListeners.onMove!,