smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-04-14 16:40:58 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
David Luzar 2024-03-18 10:41:06 +01:00 • committed by GitHub
parent 068895db0e
commit 15bfa626b4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 36 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/excalidraw/components/canvases/InteractiveCanvas.tsx
View file

@ -86,7 +86,7 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
remoteSelectedElementIds.get(id)!.push(socketId); remoteSelectedElementIds.get(id)!.push(socketId);
} }
} }
if (!user.pointer) { if (!user.pointer || user.pointer.renderCursor === false) {
return; return;
} }
if (user.username) { if (user.username) {

1
packages/excalidraw/constants.ts
View file

@ -31,6 +31,7 @@ export const ELEMENT_SHIFT_TRANSLATE_AMOUNT = 5;
export const ELEMENT_TRANSLATE_AMOUNT = 1; export const ELEMENT_TRANSLATE_AMOUNT = 1;
export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30; export const TEXT_TO_CENTER_SNAP_THRESHOLD = 30;
export const SHIFT_LOCKING_ANGLE = Math.PI / 12; export const SHIFT_LOCKING_ANGLE = Math.PI / 12;
export const DEFAULT_LASER_COLOR = "red";
export const CURSOR_TYPE = { export const CURSOR_TYPE = {
TEXT: "text", TEXT: "text",
CROSSHAIR: "crosshair", CROSSHAIR: "crosshair",

8
packages/excalidraw/index.tsx
View file

@ -237,7 +237,13 @@ export { getFreeDrawSvgPath } from "./renderer/renderElement";
export { mergeLibraryItems, getLibraryItemsHash } from "./data/library"; export { mergeLibraryItems, getLibraryItemsHash } from "./data/library";
export { isLinearElement } from "./element/typeChecks"; 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 { export {
mutateElement, mutateElement,

25
packages/excalidraw/laser-trails.ts
View file

@ -5,6 +5,7 @@ import type App from "./components/App";
import { SocketId } from "./types"; import { SocketId } from "./types";
import { easeOut } from "./utils"; import { easeOut } from "./utils";
import { getClientColor } from "./clients"; import { getClientColor } from "./clients";
import { DEFAULT_LASER_COLOR } from "./constants";
export class LaserTrails implements Trail { export class LaserTrails implements Trail {
public localTrail: AnimatedTrail; public localTrail: AnimatedTrail;
@ -20,7 +21,7 @@ export class LaserTrails implements Trail {
this.localTrail = new AnimatedTrail(animationFrameHandler, app, { this.localTrail = new AnimatedTrail(animationFrameHandler, app, {
...this.getTrailOptions(), ...this.getTrailOptions(),
fill: () => "red", fill: () => DEFAULT_LASER_COLOR,
}); });
} }
@ -78,13 +79,15 @@ export class LaserTrails implements Trail {
return; return;
} }
for (const [key, collabolator] of this.app.state.collaborators.entries()) { for (const [key, collaborator] of this.app.state.collaborators.entries()) {
let trail!: AnimatedTrail; let trail!: AnimatedTrail;
if (!this.collabTrails.has(key)) { if (!this.collabTrails.has(key)) {
trail = new AnimatedTrail(this.animationFrameHandler, this.app, { trail = new AnimatedTrail(this.animationFrameHandler, this.app, {
...this.getTrailOptions(), ...this.getTrailOptions(),
fill: () => getClientColor(key, collabolator), fill: () =>
collaborator.pointer?.laserColor ||
getClientColor(key, collaborator),
}); });
trail.start(this.container); trail.start(this.container);
@ -93,21 +96,21 @@ export class LaserTrails implements Trail {
trail = this.collabTrails.get(key)!; trail = this.collabTrails.get(key)!;
} }
if (collabolator.pointer && collabolator.pointer.tool === "laser") { if (collaborator.pointer && collaborator.pointer.tool === "laser") {
if (collabolator.button === "down" && !trail.hasCurrentTrail) { if (collaborator.button === "down" && !trail.hasCurrentTrail) {
trail.startPath(collabolator.pointer.x, collabolator.pointer.y); trail.startPath(collaborator.pointer.x, collaborator.pointer.y);
} }
if ( if (
collabolator.button === "down" && collaborator.button === "down" &&
trail.hasCurrentTrail && 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) { if (collaborator.button === "up" && trail.hasCurrentTrail) {
trail.addPointToPath(collabolator.pointer.x, collabolator.pointer.y); trail.addPointToPath(collaborator.pointer.x, collaborator.pointer.y);
trail.endPath(); trail.endPath();
} }
} }

13
packages/excalidraw/types.ts
View file

@ -70,6 +70,19 @@ export type CollaboratorPointer = {
x: number; x: number;
y: number; y: number;
tool: "pointer" | "laser"; 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" }; export type DataURL = string & { _brand: "DataURL" };