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:
Kostas Bariotis 2020-04-07 14:02:42 +01:00 committed by GitHub
parent 0c3d34261e
commit 67805bc7a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 154 additions and 2 deletions

View file

@ -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(