fix remote client colors

dwelle · Oct 10, 2023 · 86be977 · 86be977
1 parent 8fad7a8
commit 86be977
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/src/components/LaserTool/LaserPathManager.ts b/src/components/LaserTool/LaserPathManager.ts
@@ -281,7 +281,8 @@ export class LaserPathManager {
       state.svg.setAttribute("d", paths);
       state.svg.setAttribute(
         "fill",
-        collaborator.pointer?.laserColor || getClientColor(key),
+        collaborator.pointer?.laserColor ||
+          getClientColor(collaborator.id || key),
       );
     }
 

diff --git a/src/components/canvases/InteractiveCanvas.tsx b/src/components/canvases/InteractiveCanvas.tsx
@@ -96,13 +96,16 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
       if (user.userState) {
         pointerUserStates[socketId] = user.userState;
       }
-      pointerViewportCoords[socketId] = sceneCoordsToViewportCoords(
-        {
-          sceneX: user.pointer.x,
-          sceneY: user.pointer.y,
-        },
-        props.appState,
-      );
+      pointerViewportCoords[socketId] = {
+        ...sceneCoordsToViewportCoords(
+          {
+            sceneX: user.pointer.x,
+            sceneY: user.pointer.y,
+          },
+          props.appState,
+        ),
+        id: user.id || socketId,
+      };
       cursorButton[socketId] = user.button;
     });
 

diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts
@@ -598,9 +598,10 @@ const _renderInteractiveScene = ({
             selectionColors.push(
               ...renderConfig.remoteSelectedElementIds[element.id].map(
                 (socketId) => {
-                  const picture =
-                    appState.collaborators.get(socketId)?.avatarUrl;
-                  const background = getClientColor(picture || socketId);
+                  const { id } =
+                    renderConfig.remotePointerViewportCoords[socketId];
+
+                  const background = getClientColor(id);
                   return background;
                 },
               ),
@@ -731,7 +732,7 @@ const _renderInteractiveScene = ({
 
   // Paint remote pointers
   for (const clientId in renderConfig.remotePointerViewportCoords) {
-    let { x, y } = renderConfig.remotePointerViewportCoords[clientId];
+    let { x, y, id } = renderConfig.remotePointerViewportCoords[clientId];
 
     x -= appState.offsetLeft;
     y -= appState.offsetTop;
@@ -750,8 +751,7 @@ const _renderInteractiveScene = ({
     y = Math.max(y, 0);
     y = Math.min(y, normalizedHeight - height);
 
-    const picture = appState.collaborators.get(clientId)?.avatarUrl;
-    const background = getClientColor(picture || clientId);
+    const background = getClientColor(id);
 
     context.save();
     context.strokeStyle = background;

diff --git a/src/scene/types.ts b/src/scene/types.ts
@@ -31,7 +31,9 @@ export type InteractiveCanvasRenderConfig = {
   // collab-related state
   // ---------------------------------------------------------------------------
   remoteSelectedElementIds: { [elementId: string]: string[] };
-  remotePointerViewportCoords: { [id: string]: { x: number; y: number } };
+  remotePointerViewportCoords: {
+    [id: string]: { x: number; y: number; id: string };
+  };
   remotePointerUserStates: { [id: string]: string };
   remotePointerUsernames: { [id: string]: string };
   remotePointerButton?: { [id: string]: string | undefined };