Assign a colors to each pointers (#944)

I'm using the client id as a random number to index on the color array. So far it's been working better than using a sequential increment as the colors in the array are sorted by proximity. Also, it has the advantage that everyone in the room will see the same color for the same person.

src/colors.ts

@@ -0,0 +1,57 @@
+// https://yeun.github.io/open-color/
+export default {
+  // Shade 0
+  canvasBackground: [
+    "#ffffff",
+    "#f8f9fa",
+    "#f1f3f5",
+    "#fff5f5",
+    "#fff0f6",
+    "#f8f0fc",
+    "#f3f0ff",
+    "#edf2ff",
+    "#e7f5ff",
+    "#e3fafc",
+    "#e6fcf5",
+    "#ebfbee",
+    "#f4fce3",
+    "#fff9db",
+    "#fff4e6",
+  ],
+  // Shade 6
+  elementBackground: [
+    "transparent",
+    "#ced4da",
+    "#868e96",
+    "#fa5252",
+    "#e64980",
+    "#be4bdb",
+    "#7950f2",
+    "#4c6ef5",
+    "#228be6",
+    "#15aabf",
+    "#12b886",
+    "#40c057",
+    "#82c91e",
+    "#fab005",
+    "#fd7e14",
+  ],
+  // Shade 9
+  elementStroke: [
+    "#000000",
+    "#343a40",
+    "#495057",
+    "#c92a2a",
+    "#a61e4d",
+    "#862e9c",
+    "#5f3dc4",
+    "#364fc7",
+    "#1864ab",
+    "#0b7285",
+    "#087f5b",
+    "#2b8a3e",
+    "#5c940d",
+    "#e67700",
+    "#d9480f",
+  ],
+};

src/components/ColorPicker.tsx

@@ -5,6 +5,7 @@ import "./ColorPicker.css";
 import { KEYS } from "../keys";
 import { t } from "../i18n";
 import { isWritableElement } from "../utils";
+import colors from "../colors";
 
 // This is a narrow reimplementation of the awesome react-color Twitter component
 // https://github.com/casesandberg/react-color/blob/master/src/components/twitter/Twitter.js
@@ -263,61 +264,3 @@ export function ColorPicker({
     </div>
   );
 }
-
-// https://yeun.github.io/open-color/
-const colors = {
-  // Shade 0
-  canvasBackground: [
-    "#ffffff",
-    "#f8f9fa",
-    "#f1f3f5",
-    "#fff5f5",
-    "#fff0f6",
-    "#f8f0fc",
-    "#f3f0ff",
-    "#edf2ff",
-    "#e7f5ff",
-    "#e3fafc",
-    "#e6fcf5",
-    "#ebfbee",
-    "#f4fce3",
-    "#fff9db",
-    "#fff4e6",
-  ],
-  // Shade 6
-  elementBackground: [
-    "transparent",
-    "#ced4da",
-    "#868e96",
-    "#fa5252",
-    "#e64980",
-    "#be4bdb",
-    "#7950f2",
-    "#4c6ef5",
-    "#228be6",
-    "#15aabf",
-    "#12b886",
-    "#40c057",
-    "#82c91e",
-    "#fab005",
-    "#fd7e14",
-  ],
-  // Shade 9
-  elementStroke: [
-    "#000000",
-    "#343a40",
-    "#495057",
-    "#c92a2a",
-    "#a61e4d",
-    "#862e9c",
-    "#5f3dc4",
-    "#364fc7",
-    "#1864ab",
-    "#0b7285",
-    "#087f5b",
-    "#2b8a3e",
-    "#5c940d",
-    "#e67700",
-    "#d9480f",
-  ],
-};

src/renderer/renderScene.ts

@@ -16,6 +16,13 @@ import { getZoomTranslation } from "../scene/zoom";
 import { getSelectedElements } from "../scene/selection";
 
 import { renderElement, renderElementToSvg } from "./renderElement";
+import colors from "../colors";
+
+function colorForClientId(clientId: string) {
+  // Naive way of getting an integer out of the clientId
+  const sum = clientId.split("").reduce((a, str) => a + str.charCodeAt(0), 0);
+  return colors.elementBackground[sum % colors.elementBackground.length];
+}
 
 export function renderScene(
   elements: readonly ExcalidrawElement[],
@@ -177,6 +184,13 @@ export function renderScene(
   // Paint remote pointers
   for (const clientId in sceneState.remotePointerViewportCoords) {
     const { x, y } = sceneState.remotePointerViewportCoords[clientId];
+
+    const color = colorForClientId(clientId);
+
+    const strokeStyle = context.strokeStyle;
+    const fillStyle = context.fillStyle;
+    context.strokeStyle = color;
+    context.fillStyle = color;
     context.beginPath();
     context.moveTo(x, y);
     context.lineTo(x + 1, y + 14);
@@ -185,6 +199,8 @@ export function renderScene(
     context.lineTo(x, y);
     context.fill();
     context.stroke();
+    context.strokeStyle = strokeStyle;
+    context.fillStyle = fillStyle;
   }
 
   // Paint scrollbars