mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
Add collaborators names (#1223)
* add random usernames * add username state * add username input * ability to set names * fix tests * set username oon mobile * remove auto generated names * remove commented code * always string * updaate snapshots * maintain username when clearing canvas * Update src/renderer/renderScene.ts Co-Authored-By: Lipis <lipiridis@gmail.com> * add border * fix styles Co-authored-by: Pete Hunt <petehunt@users.noreply.github.com> Co-authored-by: Faustino Kialungila <faustino.kialungila@gmail.com> Co-authored-by: Lipis <lipiridis@gmail.com>
This commit is contained in:
parent
0c3d34261e
commit
67805bc7a7
13 changed files with 154 additions and 2 deletions
|
@ -437,6 +437,7 @@ export class App extends React.Component<any, AppState> {
|
|||
} = {};
|
||||
const pointerViewportCoords: SceneState["remotePointerViewportCoords"] = {};
|
||||
const remoteSelectedElementIds: SceneState["remoteSelectedElementIds"] = {};
|
||||
const pointerUsernames: { [id: string]: string } = {};
|
||||
this.state.collaborators.forEach((user, socketID) => {
|
||||
if (user.selectedElementIds) {
|
||||
for (const id of Object.keys(user.selectedElementIds)) {
|
||||
|
@ -449,6 +450,9 @@ export class App extends React.Component<any, AppState> {
|
|||
if (!user.pointer) {
|
||||
return;
|
||||
}
|
||||
if (user.username) {
|
||||
pointerUsernames[socketID] = user.username;
|
||||
}
|
||||
pointerViewportCoords[socketID] = sceneCoordsToViewportCoords(
|
||||
{
|
||||
sceneX: user.pointer.x,
|
||||
|
@ -483,6 +487,7 @@ export class App extends React.Component<any, AppState> {
|
|||
remotePointerViewportCoords: pointerViewportCoords,
|
||||
remotePointerButton: cursorButton,
|
||||
remoteSelectedElementIds: remoteSelectedElementIds,
|
||||
remotePointerUsernames: pointerUsernames,
|
||||
shouldCacheIgnoreZoom: this.state.shouldCacheIgnoreZoom,
|
||||
},
|
||||
{
|
||||
|
@ -884,6 +889,7 @@ export class App extends React.Component<any, AppState> {
|
|||
socketID,
|
||||
pointerCoords,
|
||||
button,
|
||||
username,
|
||||
selectedElementIds,
|
||||
} = decryptedData.payload;
|
||||
this.setState((state) => {
|
||||
|
@ -894,6 +900,7 @@ export class App extends React.Component<any, AppState> {
|
|||
user.pointer = pointerCoords;
|
||||
user.button = button;
|
||||
user.selectedElementIds = selectedElementIds;
|
||||
user.username = username;
|
||||
state.collaborators.set(socketID, user);
|
||||
return state;
|
||||
});
|
||||
|
@ -947,6 +954,7 @@ export class App extends React.Component<any, AppState> {
|
|||
pointerCoords: payload.pointerCoords,
|
||||
button: payload.button || "up",
|
||||
selectedElementIds: this.state.selectedElementIds,
|
||||
username: this.state.username,
|
||||
},
|
||||
};
|
||||
return this._broadcastSocketData(
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue