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>

src/components/App.tsx

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

src/components/LayerUI.tsx

@@ -133,6 +133,12 @@ export const LayerUI = React.memo(
                       <RoomDialog
                         isCollaborating={appState.isCollaborating}
                         collaboratorCount={appState.collaborators.size}
+                        username={appState.username}
+                        onUsernameChange={(username) => {
+                          setAppState({
+                            username,
+                          });
+                        }}
                         onRoomCreate={onRoomCreate}
                         onRoomDestroy={onRoomDestroy}
                       />

src/components/MobileMenu.tsx

@@ -90,6 +90,8 @@ export function MobileMenu({
                   <RoomDialog
                     isCollaborating={appState.isCollaborating}
                     collaboratorCount={appState.collaborators.size}
+                    username={appState.username}
+                    onUsernameChange={(username) => setAppState({ username })}
                     onRoomCreate={onRoomCreate}
                     onRoomDestroy={onRoomDestroy}
                   />

src/components/RoomDialog.scss

@@ -36,6 +36,33 @@
   background-color: #eee;
 }
 
+.RoomDialog-usernameContainer {
+  display: flex;
+  margin: 1.5em 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.RoomDialog-usernameLabel {
+}
+
+.RoomDialog-username {
+  min-width: 0;
+  flex: 1 1 auto;
+  margin-left: 1em;
+  display: inline-block;
+  cursor: pointer;
+  border: none;
+  height: 2.5rem;
+  line-height: 2.5rem;
+  padding: 0 0.5rem;
+  white-space: nowrap;
+  border-radius: var(--space-factor);
+  background-color: #fff;
+  border: 1px solid #eee;
+}
+
 .RoomDialog-link:hover {
   background-color: #eee;
 }

src/components/RoomDialog.tsx

@@ -11,14 +11,19 @@ import { AppState } from "../types";
 
 function RoomModal({
   activeRoomLink,
+  username,
+  onUsernameChange,
   onRoomCreate,
   onRoomDestroy,
 }: {
   activeRoomLink: string;
+  username: string;
+  onUsernameChange: (username: string) => void;
   onRoomCreate: () => void;
   onRoomDestroy: () => void;
 }) {
   const roomLinkInput = useRef<HTMLInputElement>(null);
+
   function copyRoomLink() {
     copyTextToSystemClipboard(activeRoomLink);
     if (roomLinkInput.current) {
@@ -71,6 +76,17 @@ function RoomModal({
               onPointerDown={selectInput}
             />
           </div>
+          <div className="RoomDialog-usernameContainer">
+            <label className="RoomDialog-usernameLabel" htmlFor="username">
+              Username:
+            </label>
+            <input
+              id="username"
+              value={username || ""}
+              className="RoomDialog-username"
+              onChange={(event) => onUsernameChange(event.target.value)}
+            />
+          </div>
           <p>{`🔒 ${t("roomDialog.desc_privacy")}`}</p>
           <p>
             <span role="img" aria-hidden="true">
@@ -99,11 +115,15 @@ function RoomModal({
 export function RoomDialog({
   isCollaborating,
   collaboratorCount,
+  username,
+  onUsernameChange,
   onRoomCreate,
   onRoomDestroy,
 }: {
   isCollaborating: AppState["isCollaborating"];
   collaboratorCount: number;
+  username: string;
+  onUsernameChange: (username: string) => void;
   onRoomCreate: () => void;
   onRoomDestroy: () => void;
 }) {
@@ -149,6 +169,8 @@ export function RoomDialog({
         >
           <RoomModal
             activeRoomLink={activeRoomLink}
+            username={username}
+            onUsernameChange={onUsernameChange}
             onRoomCreate={onRoomCreate}
             onRoomDestroy={onRoomDestroy}
           />