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

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

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