{collaborator.username}
-
- {eyeIcon}
+
) : (
-
+ {isBeingFollowed && (
+
+ {eyeIcon}
+
+ )}
+ {statusIconJSX}
+ {
+ updateData(collaborator);
+ }}
+ name={collaborator.username || ""}
+ src={collaborator.avatarUrl}
+ className={statusClassNames}
+ />
+ {statusIconJSX && (
+
);
},
});
diff --git a/packages/excalidraw/clients.ts b/packages/excalidraw/clients.ts
index 354098918..439080bd5 100644
--- a/packages/excalidraw/clients.ts
+++ b/packages/excalidraw/clients.ts
@@ -1,3 +1,18 @@
+import {
+ COLOR_CHARCOAL_BLACK,
+ COLOR_VOICE_CALL,
+ COLOR_WHITE,
+ THEME,
+} from "./constants";
+import { roundRect } from "./renderer/roundRect";
+import { InteractiveCanvasRenderConfig } from "./scene/types";
+import {
+ Collaborator,
+ InteractiveCanvasAppState,
+ SocketId,
+ UserIdleState,
+} from "./types";
+
function hashToInteger(id: string) {
let hash = 0;
if (id.length === 0) {
@@ -11,14 +26,12 @@ function hashToInteger(id: string) {
}
export const getClientColor = (
- /**
- * any uniquely identifying key, such as user id or socket id
- */
- id: string,
+ socketId: SocketId,
+ collaborator: Collaborator | undefined,
) => {
// to get more even distribution in case `id` is not uniformly distributed to
// begin with, we hash it
- const hash = Math.abs(hashToInteger(id));
+ const hash = Math.abs(hashToInteger(collaborator?.id || socketId));
// we want to get a multiple of 10 number in the range of 0-360 (in other
// words a hue value of step size 10). There are 37 such values including 0.
const hue = (hash % 37) * 10;
@@ -38,3 +51,209 @@ export const getNameInitial = (name?: string | null) => {
firstCodePoint ? String.fromCodePoint(firstCodePoint) : "?"
).toUpperCase();
};
+
+export const renderRemoteCursors = ({
+ context,
+ renderConfig,
+ appState,
+ normalizedWidth,
+ normalizedHeight,
+}: {
+ context: CanvasRenderingContext2D;
+ renderConfig: InteractiveCanvasRenderConfig;
+ appState: InteractiveCanvasAppState;
+ normalizedWidth: number;
+ normalizedHeight: number;
+}) => {
+ // Paint remote pointers
+ for (const [socketId, pointer] of renderConfig.remotePointerViewportCoords) {
+ let { x, y } = pointer;
+
+ const collaborator = appState.collaborators.get(socketId);
+
+ x -= appState.offsetLeft;
+ y -= appState.offsetTop;
+
+ const width = 11;
+ const height = 14;
+
+ const isOutOfBounds =
+ x < 0 ||
+ x > normalizedWidth - width ||
+ y < 0 ||
+ y > normalizedHeight - height;
+
+ x = Math.max(x, 0);
+ x = Math.min(x, normalizedWidth - width);
+ y = Math.max(y, 0);
+ y = Math.min(y, normalizedHeight - height);
+
+ const background = getClientColor(socketId, collaborator);
+
+ context.save();
+ context.strokeStyle = background;
+ context.fillStyle = background;
+
+ const userState = renderConfig.remotePointerUserStates.get(socketId);
+ const isInactive =
+ isOutOfBounds ||
+ userState === UserIdleState.IDLE ||
+ userState === UserIdleState.AWAY;
+
+ if (isInactive) {
+ context.globalAlpha = 0.3;
+ }
+
+ if (renderConfig.remotePointerButton.get(socketId) === "down") {
+ context.beginPath();
+ context.arc(x, y, 15, 0, 2 * Math.PI, false);
+ context.lineWidth = 3;
+ context.strokeStyle = "#ffffff88";
+ context.stroke();
+ context.closePath();
+
+ context.beginPath();
+ context.arc(x, y, 15, 0, 2 * Math.PI, false);
+ context.lineWidth = 1;
+ context.strokeStyle = background;
+ context.stroke();
+ context.closePath();
+ }
+
+ // TODO remove the dark theme color after we stop inverting canvas colors
+ const IS_SPEAKING_COLOR =
+ appState.theme === THEME.DARK ? "#2f6330" : COLOR_VOICE_CALL;
+
+ const isSpeaking = collaborator?.isSpeaking;
+
+ if (isSpeaking) {
+ // cursor outline for currently speaking user
+ context.fillStyle = IS_SPEAKING_COLOR;
+ context.strokeStyle = IS_SPEAKING_COLOR;
+ context.lineWidth = 10;
+ context.lineJoin = "round";
+ context.beginPath();
+ context.moveTo(x, y);
+ context.lineTo(x + 0, y + 14);
+ context.lineTo(x + 4, y + 9);
+ context.lineTo(x + 11, y + 8);
+ context.closePath();
+ context.stroke();
+ context.fill();
+ }
+
+ // Background (white outline) for arrow
+ context.fillStyle = COLOR_WHITE;
+ context.strokeStyle = COLOR_WHITE;
+ context.lineWidth = 6;
+ context.lineJoin = "round";
+ context.beginPath();
+ context.moveTo(x, y);
+ context.lineTo(x + 0, y + 14);
+ context.lineTo(x + 4, y + 9);
+ context.lineTo(x + 11, y + 8);
+ context.closePath();
+ context.stroke();
+ context.fill();
+
+ // Arrow
+ context.fillStyle = background;
+ context.strokeStyle = background;
+ context.lineWidth = 2;
+ context.lineJoin = "round";
+ context.beginPath();
+ if (isInactive) {
+ context.moveTo(x - 1, y - 1);
+ context.lineTo(x - 1, y + 15);
+ context.lineTo(x + 5, y + 10);
+ context.lineTo(x + 12, y + 9);
+ context.closePath();
+ context.fill();
+ } else {
+ context.moveTo(x, y);
+ context.lineTo(x + 0, y + 14);
+ context.lineTo(x + 4, y + 9);
+ context.lineTo(x + 11, y + 8);
+ context.closePath();
+ context.fill();
+ context.stroke();
+ }
+
+ const username = renderConfig.remotePointerUsernames.get(socketId) || "";
+
+ if (!isOutOfBounds && username) {
+ context.font = "600 12px sans-serif"; // font has to be set before context.measureText()
+
+ const offsetX = (isSpeaking ? x + 0 : x) + width / 2;
+ const offsetY = (isSpeaking ? y + 0 : y) + height + 2;
+ const paddingHorizontal = 5;
+ const paddingVertical = 3;
+ const measure = context.measureText(username);
+ const measureHeight =
+ measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;
+ const finalHeight = Math.max(measureHeight, 12);
+
+ const boxX = offsetX - 1;
+ const boxY = offsetY - 1;
+ const boxWidth = measure.width + 2 + paddingHorizontal * 2 + 2;
+ const boxHeight = finalHeight + 2 + paddingVertical * 2 + 2;
+ if (context.roundRect) {
+ context.beginPath();
+ context.roundRect(boxX, boxY, boxWidth, boxHeight, 8);
+ context.fillStyle = background;
+ context.fill();
+ context.strokeStyle = COLOR_WHITE;
+ context.stroke();
+
+ if (isSpeaking) {
+ context.beginPath();
+ context.roundRect(boxX - 2, boxY - 2, boxWidth + 4, boxHeight + 4, 8);
+ context.strokeStyle = IS_SPEAKING_COLOR;
+ context.stroke();
+ }
+ } else {
+ roundRect(context, boxX, boxY, boxWidth, boxHeight, 8, COLOR_WHITE);
+ }
+ context.fillStyle = COLOR_CHARCOAL_BLACK;
+
+ context.fillText(
+ username,
+ offsetX + paddingHorizontal + 1,
+ offsetY +
+ paddingVertical +
+ measure.actualBoundingBoxAscent +
+ Math.floor((finalHeight - measureHeight) / 2) +
+ 2,
+ );
+
+ // draw three vertical bars signalling someone is speaking
+ if (isSpeaking) {
+ context.fillStyle = IS_SPEAKING_COLOR;
+ const barheight = 8;
+ const margin = 8;
+ const gap = 5;
+ context.fillRect(
+ boxX + boxWidth + margin,
+ boxY + (boxHeight / 2 - barheight / 2),
+ 2,
+ barheight,
+ );
+ context.fillRect(
+ boxX + boxWidth + margin + gap,
+ boxY + (boxHeight / 2 - (barheight * 2) / 2),
+ 2,
+ barheight * 2,
+ );
+ context.fillRect(
+ boxX + boxWidth + margin + gap * 2,
+ boxY + (boxHeight / 2 - barheight / 2),
+ 2,
+ barheight,
+ );
+ }
+ }
+
+ context.restore();
+ context.closePath();
+ }
+};
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 97ce14662..b02d919d4 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -89,6 +89,7 @@ import {
TOOL_TYPE,
EDITOR_LS_KEYS,
isIOS,
+ supportsResizeObserver,
} from "../constants";
import { ExportedElements, exportCanvas, loadFromBlob } from "../data";
import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
@@ -476,9 +477,6 @@ export const useExcalidrawSetAppState = () =>
export const useExcalidrawActionManager = () =>
useContext(ExcalidrawActionManagerContext);
-const supportsResizeObserver =
- typeof window !== "undefined" && "ResizeObserver" in window;
-
let didTapTwice: boolean = false;
let tappedTwiceTimer = 0;
let isHoldingSpace: boolean = false;
diff --git a/packages/excalidraw/components/Avatar.tsx b/packages/excalidraw/components/Avatar.tsx
index b7b1bf962..9ddc319c6 100644
--- a/packages/excalidraw/components/Avatar.tsx
+++ b/packages/excalidraw/components/Avatar.tsx
@@ -9,8 +9,7 @@ type AvatarProps = {
color: string;
name: string;
src?: string;
- isBeingFollowed?: boolean;
- isCurrentUser: boolean;
+ className?: string;
};
export const Avatar = ({
@@ -18,22 +17,14 @@ export const Avatar = ({
onClick,
name,
src,
- isBeingFollowed,
- isCurrentUser,
+ className,
}: AvatarProps) => {
const shortName = getNameInitial(name);
const [error, setError] = useState(false);
const loadImg = !error && src;
const style = loadImg ? undefined : { background: color };
return (
-
+ {statusIconJSX}
+
+ )}
+
+
{loadImg ? (
![]()
* {
+ pointer-events: var(--ui-pointerEvents);
+ }
}
&__footer {
diff --git a/packages/excalidraw/components/UserList.scss b/packages/excalidraw/components/UserList.scss
index fceb1e7c4..86c3179ad 100644
--- a/packages/excalidraw/components/UserList.scss
+++ b/packages/excalidraw/components/UserList.scss
@@ -1,16 +1,25 @@
@import "../css/variables.module";
.excalidraw {
+ --avatar-size: 1.75rem;
+ --avatarList-gap: 0.625rem;
+ --userList-padding: var(--space-factor);
+
+ .UserList-wrapper {
+ display: flex;
+ width: 100%;
+ justify-content: flex-end;
+ pointer-events: none !important;
+ }
+
.UserList {
pointer-events: none;
- /*github corner*/
- padding: var(--space-factor) var(--space-factor) var(--space-factor)
- var(--space-factor);
+ padding: var(--userList-padding);
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
- gap: 0.625rem;
+ gap: var(--avatarList-gap);
&:empty {
display: none;
@@ -18,15 +27,16 @@
box-sizing: border-box;
- // can fit max 4 avatars (3 avatars + show more) in a column
- max-height: 120px;
+ --max-size: calc(
+ var(--avatar-size) * var(--max-avatars, 2) + var(--avatarList-gap) *
+ (var(--max-avatars, 2) - 1) + var(--userList-padding) * 2
+ );
- // can fit max 4 avatars (3 avatars + show more) when there's enough space
- max-width: 120px;
+ // max width & height set to fix the max-avatars
+ max-height: var(--max-size);
+ max-width: var(--max-size);
// Tweak in 30px increments to fit more/fewer avatars in a row/column ^^
-
- overflow: hidden;
}
.UserList > * {
@@ -45,10 +55,11 @@
@include avatarStyles;
background-color: var(--color-gray-20);
border: 0 !important;
- font-size: 0.5rem;
+ font-size: 0.625rem;
font-weight: 400;
flex-shrink: 0;
color: var(--color-gray-100);
+ font-weight: bold;
}
.UserList__collaborator-name {
@@ -57,13 +68,82 @@
white-space: nowrap;
}
- .UserList__collaborator-follow-status-icon {
+ .UserList__collaborator--avatar-only {
+ position: relative;
+ display: flex;
+ flex: 0 0 auto;
+ .UserList__collaborator-status-icon {
+ --size: 14px;
+ position: absolute;
+ display: flex;
+ flex: 0 0 auto;
+ bottom: -0.25rem;
+ right: -0.25rem;
+ width: var(--size);
+ height: var(--size);
+ svg {
+ flex: 0 0 auto;
+ width: var(--size);
+ height: var(--size);
+ }
+ }
+ }
+
+ .UserList__collaborator-status-icons {
margin-left: auto;
flex: 0 0 auto;
- width: 1rem;
+ min-width: 2.25rem;
+ gap: 0.25rem;
+ justify-content: flex-end;
display: flex;
}
+ .UserList__collaborator.is-muted
+ .UserList__collaborator-status-icon-microphone-muted {
+ color: var(--color-danger);
+ filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5));
+ }
+
+ .UserList__collaborator-status-icon-speaking-indicator {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ justify-content: space-between;
+ width: 1rem;
+ padding: 0 3px;
+ box-sizing: border-box;
+
+ div {
+ width: 0.125rem;
+ height: 0.4rem;
+ // keep this in sync with constants.ts
+ background-color: #a2f1a6;
+ }
+
+ div:nth-of-type(1) {
+ animation: speaking-indicator-anim 1s -0.45s ease-in-out infinite;
+ }
+
+ div:nth-of-type(2) {
+ animation: speaking-indicator-anim 1s -0.9s ease-in-out infinite;
+ }
+
+ div:nth-of-type(3) {
+ animation: speaking-indicator-anim 1s -0.15s ease-in-out infinite;
+ }
+ }
+
+ @keyframes speaking-indicator-anim {
+ 0%,
+ 100% {
+ transform: scaleY(1);
+ }
+
+ 50% {
+ transform: scaleY(2);
+ }
+ }
+
--userlist-hint-bg-color: var(--color-gray-10);
--userlist-hint-heading-color: var(--color-gray-80);
--userlist-hint-text-color: var(--color-gray-60);
@@ -80,7 +160,7 @@
position: static;
top: auto;
margin-top: 0;
- max-height: 12rem;
+ max-height: 50vh;
overflow-y: auto;
padding: 0.25rem 0.5rem;
border-top: 1px solid var(--userlist-collaborators-border-color);
diff --git a/packages/excalidraw/components/UserList.tsx b/packages/excalidraw/components/UserList.tsx
index ba01b52dc..ced759333 100644
--- a/packages/excalidraw/components/UserList.tsx
+++ b/packages/excalidraw/components/UserList.tsx
@@ -1,6 +1,6 @@
import "./UserList.scss";
-import React from "react";
+import React, { useLayoutEffect } from "react";
import clsx from "clsx";
import { Collaborator, SocketId } from "../types";
import { Tooltip } from "./Tooltip";
@@ -12,9 +12,11 @@ import { Island } from "./Island";
import { searchIcon } from "./icons";
import { t } from "../i18n";
import { isShallowEqual } from "../utils";
+import { supportsResizeObserver } from "../constants";
+import { MarkRequired } from "../utility-types";
export type GoToCollaboratorComponentProps = {
- clientId: ClientId;
+ socketId: SocketId;
collaborator: Collaborator;
withName: boolean;
isBeingFollowed: boolean;
@@ -23,45 +25,41 @@ export type GoToCollaboratorComponentProps = {
/** collaborator user id or socket id (fallback) */
type ClientId = string & { _brand: "UserId" };
-const FIRST_N_AVATARS = 3;
+const DEFAULT_MAX_AVATARS = 4;
const SHOW_COLLABORATORS_FILTER_AT = 8;
const ConditionalTooltipWrapper = ({
shouldWrap,
children,
- clientId,
username,
}: {
shouldWrap: boolean;
children: React.ReactNode;
username?: string | null;
- clientId: ClientId;
}) =>
shouldWrap ? (
-
- {children}
-
+ {children}
) : (
- {children}
+ {children}
);
const renderCollaborator = ({
actionManager,
collaborator,
- clientId,
+ socketId,
withName = false,
shouldWrapWithTooltip = false,
isBeingFollowed,
}: {
actionManager: ActionManager;
collaborator: Collaborator;
- clientId: ClientId;
+ socketId: SocketId;
withName?: boolean;
shouldWrapWithTooltip?: boolean;
isBeingFollowed: boolean;
}) => {
const data: GoToCollaboratorComponentProps = {
- clientId,
+ socketId,
collaborator,
withName,
isBeingFollowed,
@@ -70,8 +68,7 @@ const renderCollaborator = ({
return (
@@ -82,7 +79,13 @@ const renderCollaborator = ({
type UserListUserObject = Pick<
Collaborator,
- "avatarUrl" | "id" | "socketId" | "username"
+ | "avatarUrl"
+ | "id"
+ | "socketId"
+ | "username"
+ | "isInCall"
+ | "isSpeaking"
+ | "isMuted"
>;
type UserListProps = {
@@ -97,13 +100,19 @@ const collaboratorComparatorKeys = [
"id",
"socketId",
"username",
+ "isInCall",
+ "isSpeaking",
+ "isMuted",
] as const;
export const UserList = React.memo(
({ className, mobile, collaborators, userToFollow }: UserListProps) => {
const actionManager = useExcalidrawActionManager();
- const uniqueCollaboratorsMap = new Map();
+ const uniqueCollaboratorsMap = new Map<
+ ClientId,
+ MarkRequired
+ >();
collaborators.forEach((collaborator, socketId) => {
const userId = (collaborator.id || socketId) as ClientId;
@@ -114,115 +123,147 @@ export const UserList = React.memo(
);
});
- const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap).filter(
- ([_, collaborator]) => collaborator.username?.trim(),
- );
+ const uniqueCollaboratorsArray = Array.from(
+ uniqueCollaboratorsMap.values(),
+ ).filter((collaborator) => collaborator.username?.trim());
const [searchTerm, setSearchTerm] = React.useState("");
- if (uniqueCollaboratorsArray.length === 0) {
- return null;
- }
+ const userListWrapper = React.useRef(null);
+
+ useLayoutEffect(() => {
+ if (userListWrapper.current) {
+ const updateMaxAvatars = (width: number) => {
+ const maxAvatars = Math.max(1, Math.min(8, Math.floor(width / 38)));
+ setMaxAvatars(maxAvatars);
+ };
+
+ updateMaxAvatars(userListWrapper.current.clientWidth);
+
+ if (!supportsResizeObserver) {
+ return;
+ }
+
+ const resizeObserver = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ const { width } = entry.contentRect;
+ updateMaxAvatars(width);
+ }
+ });
+
+ resizeObserver.observe(userListWrapper.current);
+
+ return () => {
+ resizeObserver.disconnect();
+ };
+ }
+ }, []);
+
+ const [maxAvatars, setMaxAvatars] = React.useState(DEFAULT_MAX_AVATARS);
const searchTermNormalized = searchTerm.trim().toLowerCase();
const filteredCollaborators = searchTermNormalized
- ? uniqueCollaboratorsArray.filter(([, collaborator]) =>
+ ? uniqueCollaboratorsArray.filter((collaborator) =>
collaborator.username?.toLowerCase().includes(searchTerm),
)
: uniqueCollaboratorsArray;
const firstNCollaborators = uniqueCollaboratorsArray.slice(
0,
- FIRST_N_AVATARS,
+ maxAvatars - 1,
);
- const firstNAvatarsJSX = firstNCollaborators.map(
- ([clientId, collaborator]) =>
- renderCollaborator({
- actionManager,
- collaborator,
- clientId,
- shouldWrapWithTooltip: true,
- isBeingFollowed: collaborator.socketId === userToFollow,
- }),
+ const firstNAvatarsJSX = firstNCollaborators.map((collaborator) =>
+ renderCollaborator({
+ actionManager,
+ collaborator,
+ socketId: collaborator.socketId,
+ shouldWrapWithTooltip: true,
+ isBeingFollowed: collaborator.socketId === userToFollow,
+ }),
);
return mobile ? (
- {uniqueCollaboratorsArray.map(([clientId, collaborator]) =>
+ {uniqueCollaboratorsArray.map((collaborator) =>
renderCollaborator({
actionManager,
collaborator,
- clientId,
+ socketId: collaborator.socketId,
shouldWrapWithTooltip: true,
isBeingFollowed: collaborator.socketId === userToFollow,
}),
)}
) : (
-
- {firstNAvatarsJSX}
+
+
+ {firstNAvatarsJSX}
- {uniqueCollaboratorsArray.length > FIRST_N_AVATARS && (
- {
- if (!isOpen) {
- setSearchTerm("");
- }
- }}
- >
-
- +{uniqueCollaboratorsArray.length - FIRST_N_AVATARS}
-
- maxAvatars - 1 && (
+ {
+ if (!isOpen) {
+ setSearchTerm("");
+ }
}}
- align="end"
- sideOffset={10}
>
-
- {uniqueCollaboratorsArray.length >=
- SHOW_COLLABORATORS_FILTER_AT && (
-
+
,
tablerIconProps,
);
+
+export const microphoneIcon = createIcon(
+
+ ,
+ tablerIconProps,
+);
+
+export const microphoneMutedIcon = createIcon(
+
+ ,
+ tablerIconProps,
+);
diff --git a/packages/excalidraw/constants.ts b/packages/excalidraw/constants.ts
index 09e497564..ad87cb9e1 100644
--- a/packages/excalidraw/constants.ts
+++ b/packages/excalidraw/constants.ts
@@ -20,6 +20,9 @@ export const isIOS =
export const isBrave = () =>
(navigator as any).brave?.isBrave?.name === "isBrave";
+export const supportsResizeObserver =
+ typeof window !== "undefined" && "ResizeObserver" in window;
+
export const APP_NAME = "Excalidraw";
export const DRAGGING_THRESHOLD = 10; // px
@@ -144,6 +147,11 @@ export const DEFAULT_VERTICAL_ALIGN = "top";
export const DEFAULT_VERSION = "{version}";
export const DEFAULT_TRANSFORM_HANDLE_SPACING = 2;
+export const COLOR_WHITE = "#ffffff";
+export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
+// keep this in sync with CSS
+export const COLOR_VOICE_CALL = "#a2f1a6";
+
export const CANVAS_ONLY_ACTIONS = ["selectAll"];
export const GRID_SIZE = 20; // TODO make it configurable?
diff --git a/packages/excalidraw/css/variables.module.scss b/packages/excalidraw/css/variables.module.scss
index 247e3f840..71097ba3e 100644
--- a/packages/excalidraw/css/variables.module.scss
+++ b/packages/excalidraw/css/variables.module.scss
@@ -116,8 +116,8 @@
}
@mixin avatarStyles {
- width: 1.25rem;
- height: 1.25rem;
+ width: var(--avatar-size, 1.5rem);
+ height: var(--avatar-size, 1.5rem);
position: relative;
border-radius: 100%;
outline-offset: 2px;
@@ -131,6 +131,10 @@
color: var(--color-gray-90);
flex: 0 0 auto;
+ &:active {
+ transform: scale(0.94);
+ }
+
&-img {
width: 100%;
height: 100%;
@@ -144,14 +148,14 @@
right: -3px;
bottom: -3px;
left: -3px;
- border: 1px solid var(--avatar-border-color);
border-radius: 100%;
}
- &--is-followed::before {
+ &.is-followed::before {
border-color: var(--color-primary-hover);
+ box-shadow: 0 0 0 1px var(--color-primary-hover);
}
- &--is-current-user {
+ &.is-current-user {
cursor: auto;
}
}
diff --git a/packages/excalidraw/laser-trails.ts b/packages/excalidraw/laser-trails.ts
index 49a0de5be..a58efddef 100644
--- a/packages/excalidraw/laser-trails.ts
+++ b/packages/excalidraw/laser-trails.ts
@@ -84,7 +84,7 @@ export class LaserTrails implements Trail {
if (!this.collabTrails.has(key)) {
trail = new AnimatedTrail(this.animationFrameHandler, this.app, {
...this.getTrailOptions(),
- fill: () => getClientColor(key),
+ fill: () => getClientColor(key, collabolator),
});
trail.start(this.container);
diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json
index ac9108a32..1213bc318 100644
--- a/packages/excalidraw/locales/en.json
+++ b/packages/excalidraw/locales/en.json
@@ -534,7 +534,10 @@
},
"hint": {
"text": "Click on user to follow",
- "followStatus": "You're currently following this user"
+ "followStatus": "You're currently following this user",
+ "inCall": "User is in a voice call",
+ "micMuted": "User's microphone is muted",
+ "isSpeaking": "User is speaking"
}
}
}
diff --git a/packages/excalidraw/renderer/interactiveScene.ts b/packages/excalidraw/renderer/interactiveScene.ts
index a6d997770..0fd814e89 100644
--- a/packages/excalidraw/renderer/interactiveScene.ts
+++ b/packages/excalidraw/renderer/interactiveScene.ts
@@ -15,7 +15,7 @@ import {
} from "../scene/scrollbars";
import { renderSelectionElement } from "../renderer/renderElement";
-import { getClientColor } from "../clients";
+import { getClientColor, renderRemoteCursors } from "../clients";
import {
isSelectedViaGroup,
getSelectedGroupIds,
@@ -29,7 +29,7 @@ import {
TransformHandleType,
} from "../element/transformHandles";
import { arrayToMap, throttleRAF } from "../utils";
-import { InteractiveCanvasAppState, Point, UserIdleState } from "../types";
+import { InteractiveCanvasAppState, Point } from "../types";
import { DEFAULT_TRANSFORM_HANDLE_SPACING, FRAME_STYLE } from "../constants";
import { renderSnaps } from "../renderer/renderSnaps";
@@ -726,14 +726,18 @@ const _renderInteractiveScene = ({
selectionColors.push(selectionColor);
}
// remote users
- if (renderConfig.remoteSelectedElementIds[element.id]) {
+ const remoteClients = renderConfig.remoteSelectedElementIds.get(
+ element.id,
+ );
+ if (remoteClients) {
selectionColors.push(
- ...renderConfig.remoteSelectedElementIds[element.id].map(
- (socketId: string) => {
- const background = getClientColor(socketId);
- return background;
- },
- ),
+ ...remoteClients.map((socketId) => {
+ const background = getClientColor(
+ socketId,
+ appState.collaborators.get(socketId),
+ );
+ return background;
+ }),
);
}
@@ -747,7 +751,7 @@ const _renderInteractiveScene = ({
elementX2,
elementY2,
selectionColors,
- dashed: !!renderConfig.remoteSelectedElementIds[element.id],
+ dashed: !!remoteClients,
cx,
cy,
activeEmbeddable:
@@ -858,143 +862,13 @@ const _renderInteractiveScene = ({
// Reset zoom
context.restore();
- // Paint remote pointers
- for (const clientId in renderConfig.remotePointerViewportCoords) {
- let { x, y } = renderConfig.remotePointerViewportCoords[clientId];
-
- x -= appState.offsetLeft;
- y -= appState.offsetTop;
-
- const width = 11;
- const height = 14;
-
- const isOutOfBounds =
- x < 0 ||
- x > normalizedWidth - width ||
- y < 0 ||
- y > normalizedHeight - height;
-
- x = Math.max(x, 0);
- x = Math.min(x, normalizedWidth - width);
- y = Math.max(y, 0);
- y = Math.min(y, normalizedHeight - height);
-
- const background = getClientColor(clientId);
-
- context.save();
- context.strokeStyle = background;
- context.fillStyle = background;
-
- const userState = renderConfig.remotePointerUserStates[clientId];
- const isInactive =
- isOutOfBounds ||
- userState === UserIdleState.IDLE ||
- userState === UserIdleState.AWAY;
-
- if (isInactive) {
- context.globalAlpha = 0.3;
- }
-
- if (
- renderConfig.remotePointerButton &&
- renderConfig.remotePointerButton[clientId] === "down"
- ) {
- context.beginPath();
- context.arc(x, y, 15, 0, 2 * Math.PI, false);
- context.lineWidth = 3;
- context.strokeStyle = "#ffffff88";
- context.stroke();
- context.closePath();
-
- context.beginPath();
- context.arc(x, y, 15, 0, 2 * Math.PI, false);
- context.lineWidth = 1;
- context.strokeStyle = background;
- context.stroke();
- context.closePath();
- }
-
- // Background (white outline) for arrow
- context.fillStyle = oc.white;
- context.strokeStyle = oc.white;
- context.lineWidth = 6;
- context.lineJoin = "round";
- context.beginPath();
- context.moveTo(x, y);
- context.lineTo(x + 0, y + 14);
- context.lineTo(x + 4, y + 9);
- context.lineTo(x + 11, y + 8);
- context.closePath();
- context.stroke();
- context.fill();
-
- // Arrow
- context.fillStyle = background;
- context.strokeStyle = background;
- context.lineWidth = 2;
- context.lineJoin = "round";
- context.beginPath();
- if (isInactive) {
- context.moveTo(x - 1, y - 1);
- context.lineTo(x - 1, y + 15);
- context.lineTo(x + 5, y + 10);
- context.lineTo(x + 12, y + 9);
- context.closePath();
- context.fill();
- } else {
- context.moveTo(x, y);
- context.lineTo(x + 0, y + 14);
- context.lineTo(x + 4, y + 9);
- context.lineTo(x + 11, y + 8);
- context.closePath();
- context.fill();
- context.stroke();
- }
-
- const username = renderConfig.remotePointerUsernames[clientId] || "";
-
- if (!isOutOfBounds && username) {
- context.font = "600 12px sans-serif"; // font has to be set before context.measureText()
-
- const offsetX = x + width / 2;
- const offsetY = y + height + 2;
- const paddingHorizontal = 5;
- const paddingVertical = 3;
- const measure = context.measureText(username);
- const measureHeight =
- measure.actualBoundingBoxDescent + measure.actualBoundingBoxAscent;
- const finalHeight = Math.max(measureHeight, 12);
-
- const boxX = offsetX - 1;
- const boxY = offsetY - 1;
- const boxWidth = measure.width + 2 + paddingHorizontal * 2 + 2;
- const boxHeight = finalHeight + 2 + paddingVertical * 2 + 2;
- if (context.roundRect) {
- context.beginPath();
- context.roundRect(boxX, boxY, boxWidth, boxHeight, 8);
- context.fillStyle = background;
- context.fill();
- context.strokeStyle = oc.white;
- context.stroke();
- } else {
- roundRect(context, boxX, boxY, boxWidth, boxHeight, 8, oc.white);
- }
- context.fillStyle = oc.black;
-
- context.fillText(
- username,
- offsetX + paddingHorizontal + 1,
- offsetY +
- paddingVertical +
- measure.actualBoundingBoxAscent +
- Math.floor((finalHeight - measureHeight) / 2) +
- 2,
- );
- }
-
- context.restore();
- context.closePath();
- }
+ renderRemoteCursors({
+ context,
+ renderConfig,
+ appState,
+ normalizedWidth,
+ normalizedHeight,
+ });
// Paint scrollbars
let scrollBars;
diff --git a/packages/excalidraw/scene/types.ts b/packages/excalidraw/scene/types.ts
index 02aa3b7bf..63a49fec5 100644
--- a/packages/excalidraw/scene/types.ts
+++ b/packages/excalidraw/scene/types.ts
@@ -1,6 +1,7 @@
import type { RoughCanvas } from "roughjs/bin/canvas";
import { Drawable } from "roughjs/bin/core";
import {
+ ExcalidrawElement,
ExcalidrawTextElement,
NonDeletedElementsMap,
NonDeletedExcalidrawElement,
@@ -13,6 +14,8 @@ import {
ElementsPendingErasure,
InteractiveCanvasAppState,
StaticCanvasAppState,
+ SocketId,
+ UserIdleState,
} from "../types";
import { MakeBrand } from "../utility-types";
@@ -46,11 +49,11 @@ export type SVGRenderConfig = {
export type InteractiveCanvasRenderConfig = {
// collab-related state
// ---------------------------------------------------------------------------
- remoteSelectedElementIds: { [elementId: string]: string[] };
- remotePointerViewportCoords: { [id: string]: { x: number; y: number } };
- remotePointerUserStates: { [id: string]: string };
- remotePointerUsernames: { [id: string]: string };
- remotePointerButton?: { [id: string]: string | undefined };
+ remoteSelectedElementIds: Map;
+ remotePointerViewportCoords: Map;
+ remotePointerUserStates: Map;
+ remotePointerUsernames: Map;
+ remotePointerButton: Map;
selectionColor?: string;
// extra options passed to the renderer
// ---------------------------------------------------------------------------
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index fefb82c2c..2729bc037 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -61,6 +61,9 @@ export type Collaborator = Readonly<{
id?: string;
socketId?: SocketId;
isCurrentUser?: boolean;
+ isInCall?: boolean;
+ isSpeaking?: boolean;
+ isMuted?: boolean;
}>;
export type CollaboratorPointer = {
@@ -319,9 +322,9 @@ export interface AppState {
y: number;
} | null;
objectsSnapModeEnabled: boolean;
- /** the user's clientId & username who is being followed on the canvas */
+ /** the user's socket id & username who is being followed on the canvas */
userToFollow: UserToFollow | null;
- /** the clientIds of the users following the current user */
+ /** the socket ids of the users following the current user */
followedBy: Set;
}
diff --git a/packages/excalidraw/utils.ts b/packages/excalidraw/utils.ts
index d27445dfa..493dce340 100644
--- a/packages/excalidraw/utils.ts
+++ b/packages/excalidraw/utils.ts
@@ -791,6 +791,14 @@ export const isShallowEqual = <
const aKeys = Object.keys(objA);
const bKeys = Object.keys(objB);
if (aKeys.length !== bKeys.length) {
+ if (debug) {
+ console.warn(
+ `%cisShallowEqual: objects don't have same properties ->`,
+ "color: #8B4000",
+ objA,
+ objB,
+ );
+ }
return false;
}
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 002/174] 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" };
From 7949aa1f1c0010866206ac4e7109139e2589aeb3 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi
Date: Thu, 28 Mar 2024 16:44:29 +0530
Subject: [PATCH 003/174] feat: upgrade mermaid-to-excalidraw to 0.3.0 (#7819)
---
packages/excalidraw/package.json | 2 +-
yarn.lock | 132 ++++++++++++++++++++-----------
2 files changed, 87 insertions(+), 47 deletions(-)
diff --git a/packages/excalidraw/package.json b/packages/excalidraw/package.json
index 5e5c52b21..0b12d46fa 100644
--- a/packages/excalidraw/package.json
+++ b/packages/excalidraw/package.json
@@ -58,7 +58,7 @@
"dependencies": {
"@braintree/sanitize-url": "6.0.2",
"@excalidraw/laser-pointer": "1.3.1",
- "@excalidraw/mermaid-to-excalidraw": "0.2.0",
+ "@excalidraw/mermaid-to-excalidraw": "0.3.0",
"@excalidraw/random-username": "1.1.0",
"@radix-ui/react-popover": "1.0.3",
"@radix-ui/react-tabs": "1.0.2",
diff --git a/yarn.lock b/yarn.lock
index 61def89e7..e9dc642c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1980,7 +1980,7 @@
resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz#6110f918d273fe2af8ea1c4398a88774bb9fc12f"
integrity sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg==
-"@braintree/sanitize-url@^6.0.2":
+"@braintree/sanitize-url@^6.0.1":
version "6.0.4"
resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz#923ca57e173c6b232bbbb07347b1be982f03e783"
integrity sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==
@@ -2147,13 +2147,13 @@
resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb"
integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg==
-"@excalidraw/mermaid-to-excalidraw@0.2.0":
- version "0.2.0"
- resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-0.2.0.tgz#1e0395cd2b1ce9f6898109f5dbf545f558f159cc"
- integrity sha512-FR+Lw9dt+mQxsrmRL7YNU2wrlNXD16ZLyuNoKrPzPy+Ds3utzY1+/2UNeNu7FMSUO4hKdkrmyO+PDp9OvOhuKw==
+"@excalidraw/mermaid-to-excalidraw@0.3.0":
+ version "0.3.0"
+ resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-0.3.0.tgz#94c438133fc66db6b920e237abda5152b62e6cb0"
+ integrity sha512-eyFN8y2ES3HFtETZWZZBakkSB5ROfnHJeCLeBlMgrIk1fxbXpPtxlu2VwGNpqPjDiCfV5FYnx7FaZ4CRiVRVMg==
dependencies:
"@excalidraw/markdown-to-text" "0.1.2"
- mermaid "10.2.3"
+ mermaid "10.9.0"
nanoid "4.0.2"
"@excalidraw/prettier-config@1.0.2":
@@ -3295,6 +3295,23 @@
resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.0.tgz#23509ebc1fa32f1b4d50d6a66c4032d5b8eaabdc"
integrity sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw==
+"@types/d3-scale-chromatic@^3.0.0":
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz#fc0db9c10e789c351f4c42d96f31f2e4df8f5644"
+ integrity sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==
+
+"@types/d3-scale@^4.0.3":
+ version "4.0.8"
+ resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.8.tgz#d409b5f9dcf63074464bf8ddfb8ee5a1f95945bb"
+ integrity sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==
+ dependencies:
+ "@types/d3-time" "*"
+
+"@types/d3-time@*":
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.3.tgz#3c186bbd9d12b9d84253b6be6487ca56b54f88be"
+ integrity sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==
+
"@types/debug@^4.0.0":
version "4.1.12"
resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.12.tgz#a155f21690871953410df4b6b6f53187f0500917"
@@ -4986,13 +5003,6 @@ cose-base@^1.0.0:
dependencies:
layout-base "^1.0.0"
-cose-base@^2.2.0:
- version "2.2.0"
- resolved "https://registry.yarnpkg.com/cose-base/-/cose-base-2.2.0.tgz#1c395c35b6e10bb83f9769ca8b817d614add5c01"
- integrity sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==
- dependencies:
- layout-base "^2.0.0"
-
cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
version "7.1.0"
resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
@@ -5094,21 +5104,21 @@ cytoscape-cose-bilkent@^4.1.0:
dependencies:
cose-base "^1.0.0"
-cytoscape-fcose@^2.1.0:
- version "2.2.0"
- resolved "https://registry.yarnpkg.com/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz#e4d6f6490df4fab58ae9cea9e5c3ab8d7472f471"
- integrity sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==
- dependencies:
- cose-base "^2.2.0"
-
-cytoscape@^3.23.0:
- version "3.27.0"
- resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.27.0.tgz#5141cd694570807c91075b609181bce102e0bb88"
- integrity sha512-pPZJilfX9BxESwujODz5pydeGi+FBrXq1rcaB1mfhFXXFJ9GjE6CNndAk+8jPzoXGD+16LtSS4xlYEIUiW4Abg==
+cytoscape@^3.28.1:
+ version "3.28.1"
+ resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.28.1.tgz#f32c3e009bdf32d47845a16a4cd2be2bbc01baf7"
+ integrity sha512-xyItz4O/4zp9/239wCcH8ZcFuuZooEeF8KHRmzjDfGdXsj3OG9MFSMA0pJE0uX3uCN/ygof6hHf4L7lst+JaDg==
dependencies:
heap "^0.2.6"
lodash "^4.17.21"
+"d3-array@1 - 2":
+ version "2.12.1"
+ resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+ integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
+ dependencies:
+ internmap "^1.0.0"
+
"d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3, d3-array@^3.2.0:
version "3.2.4"
resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
@@ -5225,6 +5235,11 @@ d3-hierarchy@3:
dependencies:
d3-color "1 - 3"
+d3-path@1:
+ version "1.0.9"
+ resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
+ integrity sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==
+
"d3-path@1 - 3", d3-path@3, d3-path@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
@@ -5245,6 +5260,14 @@ d3-random@3:
resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-3.0.1.tgz#d4926378d333d9c0bfd1e6fa0194d30aebaa20f4"
integrity sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==
+d3-sankey@^0.12.3:
+ version "0.12.3"
+ resolved "https://registry.yarnpkg.com/d3-sankey/-/d3-sankey-0.12.3.tgz#b3c268627bd72e5d80336e8de6acbfec9d15d01d"
+ integrity sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==
+ dependencies:
+ d3-array "1 - 2"
+ d3-shape "^1.2.0"
+
d3-scale-chromatic@3:
version "3.0.0"
resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz#15b4ceb8ca2bb0dcb6d1a641ee03d59c3b62376a"
@@ -5276,6 +5299,13 @@ d3-shape@3:
dependencies:
d3-path "^3.1.0"
+d3-shape@^1.2.0:
+ version "1.3.7"
+ resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.3.7.tgz#df63801be07bc986bc54f63789b4fe502992b5d7"
+ integrity sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==
+ dependencies:
+ d3-path "1"
+
"d3-time-format@2 - 4", d3-time-format@4:
version "4.1.0"
resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
@@ -5565,10 +5595,10 @@ domexception@^4.0.0:
dependencies:
webidl-conversions "^7.0.0"
-dompurify@3.0.3:
- version "3.0.3"
- resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.3.tgz#4b115d15a091ddc96f232bcef668550a2f6f1430"
- integrity sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ==
+dompurify@^3.0.5:
+ version "3.0.11"
+ resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.11.tgz#c163f5816eaac6aeef35dae2b77fca0504564efe"
+ integrity sha512-Fan4uMuyB26gFV3ovPoEoQbxRRPfTu3CvImyZnhGq5fsIEO+gEFLp45ISFt+kQBWsK5ulDdT0oV28jS1UrwQLg==
dotenv@16.0.1:
version "16.0.1"
@@ -5602,10 +5632,10 @@ electron-to-chromium@^1.4.601:
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.608.tgz#ff567c51dde4892ae330860c7d9f19571e9e1d69"
integrity sha512-J2f/3iIIm3Mo0npneITZ2UPe4B1bg8fTNrFjD8715F/k1BvbviRuqYGkET1PgprrczXYTHFvotbBOmUp6KE0uA==
-elkjs@^0.8.2:
- version "0.8.2"
- resolved "https://registry.yarnpkg.com/elkjs/-/elkjs-0.8.2.tgz#c37763c5a3e24e042e318455e0147c912a7c248e"
- integrity sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==
+elkjs@^0.9.0:
+ version "0.9.2"
+ resolved "https://registry.yarnpkg.com/elkjs/-/elkjs-0.9.2.tgz#3d4ef6f17fde06a5d7eaa3063bb875e25e59e972"
+ integrity sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw==
emoji-regex@^8.0.0:
version "8.0.0"
@@ -6871,6 +6901,11 @@ internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+internmap@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+ integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
+
interpret@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
@@ -7381,6 +7416,13 @@ jsonpointer@^5.0.0:
array-includes "^3.1.5"
object.assign "^4.1.3"
+katex@^0.16.9:
+ version "0.16.10"
+ resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.10.tgz#6f81b71ac37ff4ec7556861160f53bc5f058b185"
+ integrity sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==
+ dependencies:
+ commander "^8.3.0"
+
khroma@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/khroma/-/khroma-2.1.0.tgz#45f2ce94ce231a437cf5b63c2e886e6eb42bbbb1"
@@ -7418,11 +7460,6 @@ layout-base@^1.0.0:
resolved "https://registry.yarnpkg.com/layout-base/-/layout-base-1.0.2.tgz#1291e296883c322a9dd4c5dd82063721b53e26e2"
integrity sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==
-layout-base@^2.0.0:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/layout-base/-/layout-base-2.0.1.tgz#d0337913586c90f9c2c075292069f5c2da5dd285"
- integrity sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==
-
leven@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -7710,20 +7747,23 @@ merge2@^1.3.0, merge2@^1.4.1:
resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
-mermaid@10.2.3:
- version "10.2.3"
- resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.2.3.tgz#789d3b582c5da8c69aa4a7c0e2b826562c8c8b12"
- integrity sha512-cMVE5s9PlQvOwfORkyVpr5beMsLdInrycAosdr+tpZ0WFjG4RJ/bUHST7aTgHNJbujHkdBRAm+N50P3puQOfPw==
+mermaid@10.9.0:
+ version "10.9.0"
+ resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.9.0.tgz#4d1272fbe434bd8f3c2c150554dc8a23a9bf9361"
+ integrity sha512-swZju0hFox/B/qoLKK0rOxxgh8Cf7rJSfAUc1u8fezVihYMvrJAS45GzAxTVf4Q+xn9uMgitBcmWk7nWGXOs/g==
dependencies:
- "@braintree/sanitize-url" "^6.0.2"
- cytoscape "^3.23.0"
+ "@braintree/sanitize-url" "^6.0.1"
+ "@types/d3-scale" "^4.0.3"
+ "@types/d3-scale-chromatic" "^3.0.0"
+ cytoscape "^3.28.1"
cytoscape-cose-bilkent "^4.1.0"
- cytoscape-fcose "^2.1.0"
d3 "^7.4.0"
+ d3-sankey "^0.12.3"
dagre-d3-es "7.0.10"
dayjs "^1.11.7"
- dompurify "3.0.3"
- elkjs "^0.8.2"
+ dompurify "^3.0.5"
+ elkjs "^0.9.0"
+ katex "^0.16.9"
khroma "^2.0.0"
lodash-es "^4.17.21"
mdast-util-from-markdown "^1.3.0"
From 65bc500598b70be00c8d770f49928ff66f77470b Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Thu, 28 Mar 2024 14:52:23 +0100
Subject: [PATCH 004/174] fix: `excalidrawAPI.toggleSidebar` not switching
between tabs correctly (#7821)
---
packages/excalidraw/components/App.tsx | 18 +++-
.../components/Sidebar/Sidebar.test.tsx | 82 ++++++++++++++++++-
.../components/Sidebar/SidebarTab.tsx | 2 +-
3 files changed, 97 insertions(+), 5 deletions(-)
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index b02d919d4..b920a1037 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -3684,17 +3684,29 @@ class App extends React.Component {
tab,
force,
}: {
- name: SidebarName;
+ name: SidebarName | null;
tab?: SidebarTabName;
force?: boolean;
}): boolean => {
let nextName;
if (force === undefined) {
- nextName = this.state.openSidebar?.name === name ? null : name;
+ nextName =
+ this.state.openSidebar?.name === name &&
+ this.state.openSidebar?.tab === tab
+ ? null
+ : name;
} else {
nextName = force ? name : null;
}
- this.setState({ openSidebar: nextName ? { name: nextName, tab } : null });
+
+ const nextState: AppState["openSidebar"] = nextName
+ ? { name: nextName }
+ : null;
+ if (nextState && tab) {
+ nextState.tab = tab;
+ }
+
+ this.setState({ openSidebar: nextState });
return !!nextName;
};
diff --git a/packages/excalidraw/components/Sidebar/Sidebar.test.tsx b/packages/excalidraw/components/Sidebar/Sidebar.test.tsx
index 9787f9a73..6b60418b5 100644
--- a/packages/excalidraw/components/Sidebar/Sidebar.test.tsx
+++ b/packages/excalidraw/components/Sidebar/Sidebar.test.tsx
@@ -85,7 +85,7 @@ describe("Sidebar", () => {
});
});
- it("should toggle sidebar using props.toggleMenu()", async () => {
+ it("should toggle sidebar using excalidrawAPI.toggleSidebar()", async () => {
const { container } = await render(
@@ -158,6 +158,20 @@ describe("Sidebar", () => {
const sidebars = container.querySelectorAll(".sidebar");
expect(sidebars.length).toBe(1);
});
+
+ // closing sidebar using `{ name: null }`
+ // -------------------------------------------------------------------------
+ expect(window.h.app.toggleSidebar({ name: "customSidebar" })).toBe(true);
+ await waitFor(() => {
+ const node = container.querySelector("#test-sidebar-content");
+ expect(node).not.toBe(null);
+ });
+
+ expect(window.h.app.toggleSidebar({ name: null })).toBe(false);
+ await waitFor(() => {
+ const node = container.querySelector("#test-sidebar-content");
+ expect(node).toBe(null);
+ });
});
});
@@ -329,4 +343,70 @@ describe("Sidebar", () => {
);
});
});
+
+ describe("Sidebar.tab", () => {
+ it("should toggle sidebars tabs correctly", async () => {
+ const { container } = await render(
+
+
+
+ Library
+ Comments
+
+
+ ,
+ );
+
+ await withExcalidrawDimensions(
+ { width: 1920, height: 1080 },
+ async () => {
+ expect(
+ container.querySelector(
+ "[role=tabpanel][data-testid=library]",
+ ),
+ ).toBeNull();
+
+ // open library sidebar
+ expect(
+ window.h.app.toggleSidebar({ name: "custom", tab: "library" }),
+ ).toBe(true);
+ expect(
+ container.querySelector(
+ "[role=tabpanel][data-testid=library]",
+ ),
+ ).not.toBeNull();
+
+ // switch to comments tab
+ expect(
+ window.h.app.toggleSidebar({ name: "custom", tab: "comments" }),
+ ).toBe(true);
+ expect(
+ container.querySelector(
+ "[role=tabpanel][data-testid=comments]",
+ ),
+ ).not.toBeNull();
+
+ // toggle sidebar closed
+ expect(
+ window.h.app.toggleSidebar({ name: "custom", tab: "comments" }),
+ ).toBe(false);
+ expect(
+ container.querySelector(
+ "[role=tabpanel][data-testid=comments]",
+ ),
+ ).toBeNull();
+
+ // toggle sidebar open
+ expect(
+ window.h.app.toggleSidebar({ name: "custom", tab: "comments" }),
+ ).toBe(true);
+ expect(
+ container.querySelector(
+ "[role=tabpanel][data-testid=comments]",
+ ),
+ ).not.toBeNull();
+ },
+ );
+ });
+ });
});
diff --git a/packages/excalidraw/components/Sidebar/SidebarTab.tsx b/packages/excalidraw/components/Sidebar/SidebarTab.tsx
index 741a69fd1..f7eacc1b1 100644
--- a/packages/excalidraw/components/Sidebar/SidebarTab.tsx
+++ b/packages/excalidraw/components/Sidebar/SidebarTab.tsx
@@ -10,7 +10,7 @@ export const SidebarTab = ({
children: React.ReactNode;
} & React.HTMLAttributes) => {
return (
-
+
{children}
);
From 6b523563d804d48be260399fe45e30c394e07065 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Thu, 28 Mar 2024 14:58:47 +0100
Subject: [PATCH 005/174] fix: ejs support in html files (#7822)
---
excalidraw-app/index.html | 8 +-
excalidraw-app/package.json | 4 +-
excalidraw-app/vite.config.mts | 4 +
yarn.lock | 243 +++++++++++++++++++++++++++++++--
4 files changed, 240 insertions(+), 19 deletions(-)
diff --git a/excalidraw-app/index.html b/excalidraw-app/index.html
index 66f3afdab..2e1fa1adb 100644
--- a/excalidraw-app/index.html
+++ b/excalidraw-app/index.html
@@ -78,7 +78,7 @@
}
- <% if ("%PROD%" === "true") { %>
+ <% if (typeof PROD != 'undefined' && PROD == true) { %>
- <% if ("%VITE_APP_DEV_DISABLE_LIVE_RELOAD%" !== 'true') { %>
+ <% if (typeof VITE_APP_DEV_DISABLE_LIVE_RELOAD != 'undefined' &&
+ VITE_APP_DEV_DISABLE_LIVE_RELOAD != true) { %>
- <% if (typeof VITE_APP_DEV_DISABLE_LIVE_RELOAD != 'undefined' &&
- VITE_APP_DEV_DISABLE_LIVE_RELOAD != true) { %>
- <% } %>
- {searchIcon}
- {
- setSearchTerm(e.target.value);
- }}
- />
-
- )}
-
- {filteredCollaborators.length === 0 && (
-
);
},
@@ -236,10 +277,15 @@ export const UserList = React.memo(
return false;
}
+ const nextCollaboratorSocketIds = next.collaborators.keys();
+
for (const [socketId, collaborator] of prev.collaborators) {
const nextCollaborator = next.collaborators.get(socketId);
if (
!nextCollaborator ||
+ // this checks order of collaborators in the map is the same
+ // as previous render
+ socketId !== nextCollaboratorSocketIds.next().value ||
!isShallowEqual(
collaborator,
nextCollaborator,
diff --git a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
index e76d8ae68..163756d57 100644
--- a/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
+++ b/packages/excalidraw/components/canvases/InteractiveCanvas.tsx
@@ -66,42 +66,46 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
return;
}
- const cursorButton: {
- [id: string]: string | undefined;
- } = {};
- const pointerViewportCoords: InteractiveCanvasRenderConfig["remotePointerViewportCoords"] =
- {};
+ const remotePointerButton: InteractiveCanvasRenderConfig["remotePointerButton"] =
+ new Map();
+ const remotePointerViewportCoords: InteractiveCanvasRenderConfig["remotePointerViewportCoords"] =
+ new Map();
const remoteSelectedElementIds: InteractiveCanvasRenderConfig["remoteSelectedElementIds"] =
- {};
- const pointerUsernames: { [id: string]: string } = {};
- const pointerUserStates: { [id: string]: string } = {};
+ new Map();
+ const remotePointerUsernames: InteractiveCanvasRenderConfig["remotePointerUsernames"] =
+ new Map();
+ const remotePointerUserStates: InteractiveCanvasRenderConfig["remotePointerUserStates"] =
+ new Map();
props.appState.collaborators.forEach((user, socketId) => {
if (user.selectedElementIds) {
for (const id of Object.keys(user.selectedElementIds)) {
- if (!(id in remoteSelectedElementIds)) {
- remoteSelectedElementIds[id] = [];
+ if (!remoteSelectedElementIds.has(id)) {
+ remoteSelectedElementIds.set(id, []);
}
- remoteSelectedElementIds[id].push(socketId);
+ remoteSelectedElementIds.get(id)!.push(socketId);
}
}
if (!user.pointer) {
return;
}
if (user.username) {
- pointerUsernames[socketId] = user.username;
+ remotePointerUsernames.set(socketId, user.username);
}
if (user.userState) {
- pointerUserStates[socketId] = user.userState;
+ remotePointerUserStates.set(socketId, user.userState);
}
- pointerViewportCoords[socketId] = sceneCoordsToViewportCoords(
- {
- sceneX: user.pointer.x,
- sceneY: user.pointer.y,
- },
- props.appState,
+ remotePointerViewportCoords.set(
+ socketId,
+ sceneCoordsToViewportCoords(
+ {
+ sceneX: user.pointer.x,
+ sceneY: user.pointer.y,
+ },
+ props.appState,
+ ),
);
- cursorButton[socketId] = user.button;
+ remotePointerButton.set(socketId, user.button);
});
const selectionColor =
@@ -120,11 +124,11 @@ const InteractiveCanvas = (props: InteractiveCanvasProps) => {
scale: window.devicePixelRatio,
appState: props.appState,
renderConfig: {
- remotePointerViewportCoords: pointerViewportCoords,
- remotePointerButton: cursorButton,
+ remotePointerViewportCoords,
+ remotePointerButton,
remoteSelectedElementIds,
- remotePointerUsernames: pointerUsernames,
- remotePointerUserStates: pointerUserStates,
+ remotePointerUsernames,
+ remotePointerUserStates,
selectionColor,
renderScrollbars: false,
},
diff --git a/packages/excalidraw/components/icons.tsx b/packages/excalidraw/components/icons.tsx
index 967ae1976..063253f69 100644
--- a/packages/excalidraw/components/icons.tsx
+++ b/packages/excalidraw/components/icons.tsx
@@ -1798,7 +1798,7 @@ export const fullscreenIcon = createIcon(
);
export const eyeIcon = createIcon(
-
- {t("userList.search.empty")}
+
+ +{uniqueCollaboratorsArray.length - maxAvatars + 1}
+
+
+
+ {uniqueCollaboratorsArray.length >=
+ SHOW_COLLABORATORS_FILTER_AT && (
+
-
-
- )}
+
+
+
+ )}
+
+ {searchIcon}
+ {
+ setSearchTerm(e.target.value);
+ }}
+ />
)}
-
- {t("userList.hint.text")}
+
-
+ {filteredCollaborators.length === 0 && (
+
- {filteredCollaborators.map(([clientId, collaborator]) =>
- renderCollaborator({
- actionManager,
- collaborator,
- clientId,
- withName: true,
- isBeingFollowed: collaborator.socketId === userToFollow,
- }),
- )}
-
+ {t("userList.search.empty")}
+
+ )}
+
+ {t("userList.hint.text")}
+
+ {filteredCollaborators.map((collaborator) =>
+ renderCollaborator({
+ actionManager,
+ collaborator,
+ socketId: collaborator.socketId,
+ withName: true,
+ isBeingFollowed: collaborator.socketId === userToFollow,
+ }),
+ )}