|
|
|
|
@ -133,6 +133,8 @@ import {
|
|
|
|
|
saveUsernameToLocalStorage,
|
|
|
|
|
} from "../data/localStorage";
|
|
|
|
|
|
|
|
|
|
import throttle from "lodash.throttle";
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @param func handler taking at most single parameter (event).
|
|
|
|
|
*/
|
|
|
|
|
@ -163,11 +165,14 @@ const gesture: Gesture = {
|
|
|
|
|
initialScale: null,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const SYNC_FULL_SCENE_INTERVAL_MS = 20000;
|
|
|
|
|
|
|
|
|
|
class App extends React.Component<any, AppState> {
|
|
|
|
|
canvas: HTMLCanvasElement | null = null;
|
|
|
|
|
rc: RoughCanvas | null = null;
|
|
|
|
|
portal: Portal = new Portal(this);
|
|
|
|
|
lastBroadcastedOrReceivedSceneVersion: number = -1;
|
|
|
|
|
broadcastedElementVersions: Map<string, number> = new Map();
|
|
|
|
|
removeSceneCallback: SceneStateCallbackRemover | null = null;
|
|
|
|
|
|
|
|
|
|
actionManager: ActionManager;
|
|
|
|
|
@ -474,6 +479,10 @@ class App extends React.Component<any, AppState> {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
queueBroadcastAllElements = throttle(() => {
|
|
|
|
|
this.broadcastScene(SCENE.UPDATE, /* syncAll */ true);
|
|
|
|
|
}, SYNC_FULL_SCENE_INTERVAL_MS);
|
|
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
|
|
|
|
if (this.state.isCollaborating && !this.portal.socket) {
|
|
|
|
|
this.initializeSocketClient({ showLoadingState: true });
|
|
|
|
|
@ -555,7 +564,8 @@ class App extends React.Component<any, AppState> {
|
|
|
|
|
getDrawingVersion(globalSceneState.getElementsIncludingDeleted()) >
|
|
|
|
|
this.lastBroadcastedOrReceivedSceneVersion
|
|
|
|
|
) {
|
|
|
|
|
this.broadcastScene(SCENE.UPDATE);
|
|
|
|
|
this.broadcastScene(SCENE.UPDATE, /* syncAll */ false);
|
|
|
|
|
this.queueBroadcastAllElements();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
history.record(this.state, globalSceneState.getElementsIncludingDeleted());
|
|
|
|
|
@ -1020,19 +1030,43 @@ class App extends React.Component<any, AppState> {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// maybe should move to Portal
|
|
|
|
|
broadcastScene = (sceneType: SCENE.INIT | SCENE.UPDATE) => {
|
|
|
|
|
broadcastScene = (sceneType: SCENE.INIT | SCENE.UPDATE, syncAll: boolean) => {
|
|
|
|
|
if (sceneType === SCENE.INIT && !syncAll) {
|
|
|
|
|
throw new Error("syncAll must be true when sending SCENE.INIT");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let syncableElements = getSyncableElements(
|
|
|
|
|
globalSceneState.getElementsIncludingDeleted(),
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (!syncAll) {
|
|
|
|
|
// sync out only the elements we think we need to to save bandwidth.
|
|
|
|
|
// periodically we'll resync the whole thing to make sure no one diverges
|
|
|
|
|
// due to a dropped message (server goes down etc).
|
|
|
|
|
syncableElements = syncableElements.filter(
|
|
|
|
|
(syncableElement) =>
|
|
|
|
|
!this.broadcastedElementVersions.has(syncableElement.id) ||
|
|
|
|
|
syncableElement.version >
|
|
|
|
|
this.broadcastedElementVersions.get(syncableElement.id)!,
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const data: SocketUpdateDataSource[typeof sceneType] = {
|
|
|
|
|
type: sceneType,
|
|
|
|
|
payload: {
|
|
|
|
|
elements: getSyncableElements(
|
|
|
|
|
globalSceneState.getElementsIncludingDeleted(),
|
|
|
|
|
),
|
|
|
|
|
elements: syncableElements,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
this.lastBroadcastedOrReceivedSceneVersion = Math.max(
|
|
|
|
|
this.lastBroadcastedOrReceivedSceneVersion,
|
|
|
|
|
getDrawingVersion(globalSceneState.getElementsIncludingDeleted()),
|
|
|
|
|
);
|
|
|
|
|
for (const syncableElement of syncableElements) {
|
|
|
|
|
this.broadcastedElementVersions.set(
|
|
|
|
|
syncableElement.id,
|
|
|
|
|
syncableElement.version,
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return this.portal._broadcastSocketData(data as SocketUpdateData);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
Pete Hunt
5 years ago
committed by
GitHub