From ead6a083d4082cfb58259d6852613ac429a7ffba Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeuxx@gmail.com>
Date: Sat, 14 Mar 2020 12:18:57 -0700
Subject: [PATCH] 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                  | 57 ++++++++++++++++++++++++++++++++
 src/components/ColorPicker.tsx | 59 +---------------------------------
 src/renderer/renderScene.ts    | 16 +++++++++
 3 files changed, 74 insertions(+), 58 deletions(-)
 create mode 100644 src/colors.ts

diff --git a/src/colors.ts b/src/colors.ts
new file mode 100644
index 0000000000..a9305390b9
--- /dev/null
+++ b/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",
+  ],
+};
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index 3f3247a440..8a1b0e1e83 100644
--- a/src/components/ColorPicker.tsx
+++ b/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",
-  ],
-};
diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts
index 13666be936..c7997b6262 100644
--- a/src/renderer/renderScene.ts
+++ b/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