sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve pointer syncing performance (#4883)

Browse Source 
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Milos Vetesnik 2022-03-06 23:11:14 +01:00 committed by GitHub
parent 5ca4f5bbf4
commit 6765fc16be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/excalidraw-app/app_constants.ts
View File

@ -5,6 +5,7 @@ export const FILE_UPLOAD_TIMEOUT = 300;
export const LOAD_IMAGES_TIMEOUT = 500; export const LOAD_IMAGES_TIMEOUT = 500;
export const SYNC_FULL_SCENE_INTERVAL_MS = 20000; export const SYNC_FULL_SCENE_INTERVAL_MS = 20000;
export const SYNC_BROWSER_TABS_TIMEOUT = 50; 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 export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB
// 1 year (https://stackoverflow.com/a/25201898/927631) // 1 year (https://stackoverflow.com/a/25201898/927631)

10
src/excalidraw-app/collab/CollabWrapper.tsx
View File

@ -16,6 +16,7 @@ import {
withBatchedUpdates, withBatchedUpdates,
} from "../../utils"; } from "../../utils";
import { import {
CURSOR_SYNC_TIMEOUT,
FILE_UPLOAD_MAX_BYTES, FILE_UPLOAD_MAX_BYTES,
FIREBASE_STORAGE_PREFIXES, FIREBASE_STORAGE_PREFIXES,
INITIAL_SCENE_UPDATE_TIMEOUT, INITIAL_SCENE_UPDATE_TIMEOUT,
@ -602,7 +603,9 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
window.clearTimeout(this.idleTimeoutId); window.clearTimeout(this.idleTimeoutId);
this.idleTimeoutId = null; this.idleTimeoutId = null;
} }
this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD); this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD);
if (!this.activeIntervalId) { if (!this.activeIntervalId) {
this.activeIntervalId = window.setInterval( this.activeIntervalId = window.setInterval(
this.reportActive, this.reportActive,
@ -677,7 +680,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
return this.excalidrawAPI.getSceneElementsIncludingDeleted(); return this.excalidrawAPI.getSceneElementsIncludingDeleted();
}; };
onPointerUpdate = (payload: { onPointerUpdate = throttle(
(payload: {
pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"]; pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"];
button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"]; button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];
pointersMap: Gesture["pointers"]; pointersMap: Gesture["pointers"];
@ -685,7 +689,9 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
payload.pointersMap.size < 2 && payload.pointersMap.size < 2 &&
this.portal.socket && this.portal.socket &&
this.portal.broadcastMouseLocation(payload); this.portal.broadcastMouseLocation(payload);
}; },
CURSOR_SYNC_TIMEOUT,
);
onIdleStateChange = (userState: UserIdleState) => { onIdleStateChange = (userState: UserIdleState) => {
this.setState({ userState }); this.setState({ userState });