foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: sync backgroud color in collab mode

Browse Source
This commit is contained in:
Aakansha Doshi 2020-12-13 21:33:27 +05:30
parent 59cff0f219
commit 68636236a1
4 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,7 @@ export interface CollabAPI {
onPointerUpdate: CollabInstance["onPointerUpdate"];
initializeSocketClient: CollabInstance["initializeSocketClient"];
onCollabButtonClick: CollabInstance["onCollabButtonClick"];
broadcastElements: CollabInstance["broadcastElements"];
broadcastScene: CollabInstance["broadcastScene"];
}
type ReconciledElements = readonly ExcalidrawElement[] & {
@ -239,11 +239,9 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
return;
case SCENE.INIT: {
if (!this.portal.socketInitialized) {
const remoteElements = decryptedData.payload.elements;
const reconciledElements = this.reconcileElements(
remoteElements,
);
this.handleRemoteSceneUpdate(reconciledElements, {
const { elements, appState } = decryptedData.payload;
const reconciledElements = this.reconcileElements(elements);
this.handleRemoteSceneUpdate(reconciledElements, appState, {
init: true,
});
this.initializeSocket();
@ -254,6 +252,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
case SCENE.UPDATE:
this.handleRemoteSceneUpdate(
this.reconcileElements(decryptedData.payload.elements),
decryptedData.payload.appState,
);
break;
case "MOUSE_LOCATION": {
@ -323,6 +322,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
private handleRemoteSceneUpdate = (
elements: ReconciledElements,
appState: AppState,
{
init = false,
initFromSnapshot = false,
@ -334,6 +334,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
this.excalidrawRef.current!.updateScene({
elements,
appState,
commitToHistory: !!init,
});
@ -383,23 +384,29 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
this.portal.broadcastMouseLocation(payload);
};
broadcastElements = (
broadcastScene = (
elements: readonly ExcalidrawElement[],
state: AppState,
) => {
const didBackgroundUpdate =
this.excalidrawAppState?.viewBackgroundColor !==
state.viewBackgroundColor;
this.excalidrawAppState = state;
if (
getSceneVersion(elements) >
this.getLastBroadcastedOrReceivedSceneVersion()
this.getLastBroadcastedOrReceivedSceneVersion() ||
didBackgroundUpdate
) {
this.portal.broadcastScene(
SCENE.UPDATE,
getSyncableElements(elements),
false,
);
if (!didBackgroundUpdate) {
this.lastBroadcastedOrReceivedSceneVersion = getSceneVersion(elements);
this.queueBroadcastAllElements();
}
}
};
queueBroadcastAllElements = throttle(() => {
@ -466,7 +473,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
onPointerUpdate: this.onPointerUpdate,
initializeSocketClient: this.initializeSocketClient,
onCollabButtonClick: this.onCollabButtonClick,
broadcastElements: this.broadcastElements,
broadcastScene: this.broadcastScene,
})}
</>
);

1
src/excalidraw-app/collab/Portal.tsx
View File

@ -111,6 +111,7 @@ class Portal {
type: sceneType,
payload: {
elements: syncableElements,
appState: this.app.excalidrawAppState!,
},
};

2
src/excalidraw-app/data/index.ts
View File

@ -40,12 +40,14 @@ export type SocketUpdateDataSource = {
type: "SCENE_INIT";
payload: {
elements: readonly ExcalidrawElement[];
appState: AppState;
};
};
SCENE_UPDATE: {
type: "SCENE_UPDATE";
payload: {
elements: readonly ExcalidrawElement[];
appState: AppState;
};
};
MOUSE_LOCATION: {

2
src/excalidraw-app/index.tsx
View File

@ -256,7 +256,7 @@ function ExcalidrawWrapper(props: { collab: CollabAPI }) {
) => {
saveDebounced(elements, appState);
if (collab.isCollaborating) {
collab.broadcastElements(elements, appState);
collab.broadcastScene(elements, appState);
}
};