diff --git a/src/excalidraw-app/app_constants.ts b/src/excalidraw-app/app_constants.ts index b4f41e09..6e3f2dc6 100644 --- a/src/excalidraw-app/app_constants.ts +++ b/src/excalidraw-app/app_constants.ts @@ -5,6 +5,7 @@ export const FILE_UPLOAD_TIMEOUT = 300; export const LOAD_IMAGES_TIMEOUT = 500; export const SYNC_FULL_SCENE_INTERVAL_MS = 20000; export const SYNC_BROWSER_TABS_TIMEOUT = 50; +export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB // 1 year (https://stackoverflow.com/a/25201898/927631) diff --git a/src/excalidraw-app/collab/CollabWrapper.tsx b/src/excalidraw-app/collab/CollabWrapper.tsx index 8ad093d2..7a132adc 100644 --- a/src/excalidraw-app/collab/CollabWrapper.tsx +++ b/src/excalidraw-app/collab/CollabWrapper.tsx @@ -16,6 +16,7 @@ import { withBatchedUpdates, } from "../../utils"; import { + CURSOR_SYNC_TIMEOUT, FILE_UPLOAD_MAX_BYTES, FIREBASE_STORAGE_PREFIXES, INITIAL_SCENE_UPDATE_TIMEOUT, @@ -602,7 +603,9 @@ class CollabWrapper extends PureComponent { window.clearTimeout(this.idleTimeoutId); this.idleTimeoutId = null; } + this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD); + if (!this.activeIntervalId) { this.activeIntervalId = window.setInterval( this.reportActive, @@ -677,15 +680,18 @@ class CollabWrapper extends PureComponent { return this.excalidrawAPI.getSceneElementsIncludingDeleted(); }; - onPointerUpdate = (payload: { - pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"]; - button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"]; - pointersMap: Gesture["pointers"]; - }) => { - payload.pointersMap.size < 2 && - this.portal.socket && - this.portal.broadcastMouseLocation(payload); - }; + onPointerUpdate = throttle( + (payload: { + pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"]; + button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"]; + pointersMap: Gesture["pointers"]; + }) => { + payload.pointersMap.size < 2 && + this.portal.socket && + this.portal.broadcastMouseLocation(payload); + }, + CURSOR_SYNC_TIMEOUT, + ); onIdleStateChange = (userState: UserIdleState) => { this.setState({ userState });