feat: support to not render remote cursor & username (#7130)

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) {

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",

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,

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();
         }
       }

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" };