From 15bfa626b41c3981aed557666f67be3453243b29 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Mon, 18 Mar 2024 10:41:06 +0100
Subject: [PATCH] feat: support to not render remote cursor & username (#7130)

---
 .../components/canvases/InteractiveCanvas.tsx |  2 +-
 packages/excalidraw/constants.ts              |  1 +
 packages/excalidraw/index.tsx                 |  8 +++++-
 packages/excalidraw/laser-trails.ts           | 25 +++++++++++--------
 packages/excalidraw/types.ts                  | 13 ++++++++++
 5 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
index 163756d57..e5cd60f62 100644
--- a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
+++ b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
@@ -86,7 +86,7 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
           remoteSelectedElementIds.get(id)!.push(socketId);
         }
       }
-      if (!user.pointer) {
+      if (!user.pointer || user.pointer.renderCursor === false) {
         return;
       }
       if (user.username) {
diff --git a/packages/excalidraw/constants.ts b/packages/excalidraw/constants.ts
index ad87cb9e1..29659f86a 100644
--- a/packages/excalidraw/constants.ts
+++ b/packages/excalidraw/constants.ts
@@ -31,6 +31,7 @@ export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
 export const ELEMENT_TRANSLATE_AMOUNT = 1;
 export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
 export const SHIFT_LOCKING_ANGLE = Math.PI / 12;
+export const DEFAULT_LASER_COLOR = "red";
 export const CURSOR_TYPE = {
   TEXT: "text",
   CROSSHAIR: "crosshair",
diff --git a/packages/excalidraw/index.tsx b/packages/excalidraw/index.tsx
index 66eb91044..e1dc29e66 100644
--- a/packages/excalidraw/index.tsx
+++ b/packages/excalidraw/index.tsx
@@ -237,7 +237,13 @@ export { getFreeDrawSvgPath } from "./renderer/renderElement";
 export { mergeLibraryItems, getLibraryItemsHash } from "./data/library";
 export { isLinearElement } from "./element/typeChecks";
 
-export { FONT_FAMILY, THEME, MIME_TYPES, ROUNDNESS } from "./constants";
+export {
+  FONT_FAMILY,
+  THEME,
+  MIME_TYPES,
+  ROUNDNESS,
+  DEFAULT_LASER_COLOR,
+} from "./constants";
 
 export {
   mutateElement,
diff --git a/packages/excalidraw/laser-trails.ts b/packages/excalidraw/laser-trails.ts
index a58efddef..e2ef258b0 100644
--- a/packages/excalidraw/laser-trails.ts
+++ b/packages/excalidraw/laser-trails.ts
@@ -5,6 +5,7 @@ import type App from "./components/App";
 import { SocketId } from "./types";
 import { easeOut } from "./utils";
 import { getClientColor } from "./clients";
+import { DEFAULT_LASER_COLOR } from "./constants";
 
 export class LaserTrails implements Trail {
   public localTrail: AnimatedTrail;
@@ -20,7 +21,7 @@ export class LaserTrails implements Trail {
 
     this.localTrail = new AnimatedTrail(animationFrameHandler, app, {
       ...this.getTrailOptions(),
-      fill: () => "red",
+      fill: () => DEFAULT_LASER_COLOR,
     });
   }
 
@@ -78,13 +79,15 @@ export class LaserTrails implements Trail {
       return;
     }
 
-    for (const [key, collabolator] of this.app.state.collaborators.entries()) {
+    for (const [key, collaborator] of this.app.state.collaborators.entries()) {
       let trail!: AnimatedTrail;
 
       if (!this.collabTrails.has(key)) {
         trail = new AnimatedTrail(this.animationFrameHandler, this.app, {
           ...this.getTrailOptions(),
-          fill: () => getClientColor(key, collabolator),
+          fill: () =>
+            collaborator.pointer?.laserColor ||
+            getClientColor(key, collaborator),
         });
         trail.start(this.container);
 
@@ -93,21 +96,21 @@ export class LaserTrails implements Trail {
         trail = this.collabTrails.get(key)!;
       }
 
-      if (collabolator.pointer && collabolator.pointer.tool === "laser") {
-        if (collabolator.button === "down" && !trail.hasCurrentTrail) {
-          trail.startPath(collabolator.pointer.x, collabolator.pointer.y);
+      if (collaborator.pointer && collaborator.pointer.tool === "laser") {
+        if (collaborator.button === "down" && !trail.hasCurrentTrail) {
+          trail.startPath(collaborator.pointer.x, collaborator.pointer.y);
         }
 
         if (
-          collabolator.button === "down" &&
+          collaborator.button === "down" &&
           trail.hasCurrentTrail &&
-          !trail.hasLastPoint(collabolator.pointer.x, collabolator.pointer.y)
+          !trail.hasLastPoint(collaborator.pointer.x, collaborator.pointer.y)
         ) {
-          trail.addPointToPath(collabolator.pointer.x, collabolator.pointer.y);
+          trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
         }
 
-        if (collabolator.button === "up" && trail.hasCurrentTrail) {
-          trail.addPointToPath(collabolator.pointer.x, collabolator.pointer.y);
+        if (collaborator.button === "up" && trail.hasCurrentTrail) {
+          trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
           trail.endPath();
         }
       }
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index 2729bc037..d7f701ff8 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -70,6 +70,19 @@ export type CollaboratorPointer = {
   x: number;
   y: number;
   tool: "pointer" | "laser";
+  /**
+   * Whether to render cursor + username. Useful when you only want to render
+   * laser trail.
+   *
+   * @default true
+   */
+  renderCursor?: boolean;
+  /**
+   * Explicit laser color.
+   *
+   * @default string collaborator's cursor color
+   */
+  laserColor?: string;
 };
 
 export type DataURL = string & { _brand: "DataURL" };