smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

sync remote selection (#1207)

Browse source 
* sync remote selection

* skip deleted elements

* remove unnecessary condition & change naming
This commit is contained in:
David Luzar 2020-04-04 16:02:16 +02:00 • committed by GitHub
parent adc099ed15
commit 23540eba4c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 94 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/App.tsx
View file

@ -103,7 +103,7 @@ import {
SHIFT_LOCKING_ANGLE,
} from "../constants";
import { LayerUI } from "./LayerUI";
import { ScrollBars } from "../scene/types";
import { ScrollBars, SceneState } from "../scene/types";
import { generateCollaborationLink, getCollaborationLinkData } from "../data";
import { mutateElement, newElementWith } from "../element/mutateElement";
import { invalidateShapeForElement } from "../renderer/renderElement";
@ -441,10 +441,17 @@ export class App extends React.Component<any, AppState> {
if (this.state.isCollaborating && !this.socket) {
this.initializeSocketClient({ showLoadingState: true });
}
const pointerViewportCoords: {
[id: string]: { x: number; y: number };
} = {};
const pointerViewportCoords: SceneState["remotePointerViewportCoords"] = {};
const remoteSelectedElementIds: SceneState["remoteSelectedElementIds"] = {};
this.state.collaborators.forEach((user, socketID) => {
if (user.selectedElementIds) {
for (const id of Object.keys(user.selectedElementIds)) {
if (!(id in remoteSelectedElementIds)) {
remoteSelectedElementIds[id] = [];
}
remoteSelectedElementIds[id].push(socketID);
}
}
if (!user.pointer) {
return;
}
@ -479,6 +486,7 @@ export class App extends React.Component<any, AppState> {
viewBackgroundColor: this.state.viewBackgroundColor,
zoom: this.state.zoom,
remotePointerViewportCoords: pointerViewportCoords,
remoteSelectedElementIds: remoteSelectedElementIds,
shouldCacheIgnoreZoom: this.state.shouldCacheIgnoreZoom,
},
{
@ -860,13 +868,18 @@ export class App extends React.Component<any, AppState> {
updateScene(decryptedData);
break;
case "MOUSE_LOCATION": {
const { socketID, pointerCoords } = decryptedData.payload;
const {
socketID,
pointerCoords,
selectedElementIds,
} = decryptedData.payload;
this.setState((state) => {
if (!state.collaborators.has(socketID)) {
state.collaborators.set(socketID, {});
}
const user = state.collaborators.get(socketID)!;
user.pointer = pointerCoords;
user.selectedElementIds = selectedElementIds;
state.collaborators.set(socketID, user);
return state;
});
@ -917,6 +930,7 @@ export class App extends React.Component<any, AppState> {
payload: {
socketID: this.socket.id,
pointerCoords: payload.pointerCoords,
selectedElementIds: this.state.selectedElementIds,
},
};
return this._broadcastSocketData(