Revert "[RFC] Randomized names next to mouse pointers. (#971)" (#972)

This reverts commit dcb93f75e6b721738fad9d17d9197636fa8643cd.

src/components/App.tsx

@@ -42,7 +42,6 @@ import {
   SOCKET_SERVER,
   SocketUpdateDataSource,
   exportCanvas,
-  createNameFromSocketId,
 } from "../data";
 import { restore } from "../data/restore";
 
@@ -361,15 +360,13 @@ export class App extends React.Component<any, AppState> {
               }
               break;
             case "MOUSE_LOCATION":
-              const {
+              const { socketID, pointerCoords } = decryptedData.payload;
-                socketID,
-                pointerCoords,
-                username,
-              } = decryptedData.payload;
               this.setState(state => {
-                const user = state.collaborators.get(socketID) || {};
+                if (!state.collaborators.has(socketID)) {
+                  state.collaborators.set(socketID, {});
+                }
+                const user = state.collaborators.get(socketID)!;
                 user.pointer = pointerCoords;
-                user.username = username;
                 state.collaborators.set(socketID, user);
                 return state;
               });
@@ -414,7 +411,6 @@ export class App extends React.Component<any, AppState> {
         payload: {
           socketID: this.socket.id,
           pointerCoords: payload.pointerCoords,
-          username: createNameFromSocketId(this.socket.id),
         },
       };
       return this._broadcastSocketData(
@@ -2286,7 +2282,6 @@ export class App extends React.Component<any, AppState> {
     const pointerViewportCoords: {
       [id: string]: { x: number; y: number };
     } = {};
-    const pointerUsernames: { [id: string]: string } = {};
     this.state.collaborators.forEach((user, socketID) => {
       if (!user.pointer) {
         return;
@@ -2300,9 +2295,6 @@ export class App extends React.Component<any, AppState> {
         this.canvas,
         window.devicePixelRatio,
       );
-      if (user.username) {
-        pointerUsernames[socketID] = user.username;
-      }
     });
     const { atLeastOneVisibleElement, scrollBars } = renderScene(
       globalSceneState.getAllElements(),
@@ -2317,7 +2309,6 @@ export class App extends React.Component<any, AppState> {
         viewBackgroundColor: this.state.viewBackgroundColor,
         zoom: this.state.zoom,
         remotePointerViewportCoords: pointerViewportCoords,
-        remotePointerUsernames: pointerUsernames,
       },
       {
         renderOptimizations: true,

src/data/index.ts

@@ -43,7 +43,6 @@ export type SocketUpdateDataSource = {
     payload: {
       socketID: string;
       pointerCoords: { x: number; y: number };
-      username: string;
     };
   };
 };
@@ -360,93 +359,3 @@ export async function loadScene(id: string | null, privateKey?: string) {
     appState: data.appState && { ...data.appState },
   };
 }
-
-const ADJ = [
-  "aggressive",
-  "agreeable",
-  "ambitious",
-  "brave",
-  "calm",
-  "delightful",
-  "eager",
-  "faithful",
-  "gentle",
-  "happy",
-  "jolly",
-  "kind",
-  "lively",
-  "nice",
-  "obedient",
-  "polite",
-  "proud",
-  "silly",
-  "thankful",
-  "victorious",
-  "witty",
-  "wonderful",
-  "zealous",
-];
-
-const NOUN = [
-  "alligator",
-  "ant",
-  "bear",
-  "bee",
-  "bird",
-  "camel",
-  "cat",
-  "cheetah",
-  "chicken",
-  "chimpanzee",
-  "cow",
-  "crocodile",
-  "deer",
-  "dog",
-  "dolphin",
-  "duck",
-  "eagle",
-  "elephant",
-  "fish",
-  "fly",
-  "fox",
-  "frog",
-  "giraffe",
-  "goat",
-  "goldfish",
-  "hamster",
-  "hippopotamus",
-  "horse",
-  "kangaroo",
-  "kitten",
-  "lion",
-  "lobster",
-  "monkey",
-  "octopus",
-  "owl",
-  "panda",
-  "pig",
-  "puppy",
-  "rabbit",
-  "rat",
-  "scorpion",
-  "seal",
-  "shark",
-  "sheep",
-  "snail",
-  "snake",
-  "spider",
-  "squirrel",
-  "tiger",
-  "turtle",
-  "wolf",
-  "zebra",
-];
-
-export function createNameFromSocketId(socketId: string) {
-  const buf = new Buffer(socketId, "utf8");
-
-  return [
-    ADJ[buf.readUInt32LE(0) % ADJ.length],
-    NOUN[buf.readUInt32LE(4) % NOUN.length],
-  ].join(" ");
-}

src/renderer/renderScene.ts

@@ -167,7 +167,6 @@ export function renderScene(
   // Paint remote pointers
   for (const clientId in sceneState.remotePointerViewportCoords) {
     let { x, y } = sceneState.remotePointerViewportCoords[clientId];
-    const username = sceneState.remotePointerUsernames[clientId];
 
     const width = 9;
     const height = 14;
@@ -201,30 +200,6 @@ export function renderScene(
     context.lineTo(x, y);
     context.fill();
     context.stroke();
-
-    if (!isOutOfBounds && username) {
-      const offsetX = x + width;
-      const offsetY = y + height;
-      const paddingHorizontal = 4;
-      const paddingVertical = 4;
-      const measure = context.measureText(username);
-      const measureHeight =
-        measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;
-
-      context.fillRect(
-        offsetX,
-        offsetY,
-        measure.width + 2 * paddingHorizontal,
-        measureHeight + 2 * paddingVertical,
-      );
-      context.fillStyle = "white";
-      context.fillText(
-        username,
-        offsetX + paddingHorizontal,
-        offsetY + paddingVertical + measure.actualBoundingBoxAscent,
-      );
-    }
-
     context.strokeStyle = strokeStyle;
     context.fillStyle = fillStyle;
     context.globalAlpha = globalAlpha;

src/scene/export.ts

@@ -50,7 +50,6 @@ export function exportToCanvas(
       scrollY: normalizeScroll(-minY + exportPadding),
       zoom: 1,
       remotePointerViewportCoords: {},
-      remotePointerUsernames: {},
     },
     {
       renderScrollbars: false,

src/scene/types.ts

@@ -8,7 +8,6 @@ export type SceneState = {
   viewBackgroundColor: string | null;
   zoom: number;
   remotePointerViewportCoords: { [id: string]: { x: number; y: number } };
-  remotePointerUsernames: { [id: string]: string };
 };
 
 export type SceneScroll = {

src/types.ts

@@ -36,10 +36,7 @@ export type AppState = {
   openMenu: "canvas" | "shape" | null;
   lastPointerDownWith: PointerType;
   selectedElementIds: { [id: string]: boolean };
-  collaborators: Map<
+  collaborators: Map<string, { pointer?: { x: number; y: number } }>;
-    string,
-    { pointer?: { x: number; y: number }; username?: string }
-  >;
 };
 
 export type PointerCoords = Readonly<{