Merge branch 'master' into zsviczian-fix-exportToSvg

# Conflicts:
#	src/scene/export.ts

package.json

@@ -54,7 +54,7 @@
     "react-dom": "18.2.0",
     "roughjs": "4.5.2",
     "sass": "1.51.0",
-    "socket.io-client": "4.6.1",
+    "socket.io-client": "2.3.1",
     "tunnel-rat": "0.1.2"
   },
   "devDependencies": {

src/components/App.tsx

@@ -2748,7 +2748,6 @@ class App extends React.Component<AppProps, AppState> {
     toast: {
       message: string;
       closable?: boolean;
-      spinner?: boolean;
       duration?: number;
     } | null,
   ) => {

src/components/Toast.scss

@@ -25,17 +25,6 @@
       white-space: pre-wrap;
     }
 
-    .Toast__message--spinner {
-      padding: 0 3rem;
-    }
-
-    .Toast__spinner {
-      position: absolute;
-      left: 1.5rem;
-      top: 50%;
-      margin-top: -8px;
-    }
-
     .close {
       position: absolute;
       top: 0;

src/components/Toast.tsx

@@ -1,7 +1,5 @@
-import clsx from "clsx";
 import { useCallback, useEffect, useRef } from "react";
 import { CloseIcon } from "./icons";
-import Spinner from "./Spinner";
 import "./Toast.scss";
 import { ToolButton } from "./ToolButton";
 
@@ -11,14 +9,12 @@ export const Toast = ({
   message,
   onClose,
   closable = false,
-  spinner = true,
   // To prevent autoclose, pass duration as Infinity
   duration = DEFAULT_TOAST_TIMEOUT,
 }: {
   message: string;
   onClose: () => void;
   closable?: boolean;
-  spinner?: boolean;
   duration?: number;
 }) => {
   const timerRef = useRef<number>(0);
@@ -48,18 +44,7 @@ export const Toast = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      {spinner && (
+      <p className="Toast__message">{message}</p>
-        <div className="Toast__spinner">
-          <Spinner />
-        </div>
-      )}
-      <p
-        className={clsx("Toast__message", {
-          "Toast__message--spinner": spinner,
-        })}
-      >
-        {message}
-      </p>
       {closable && (
         <ToolButton
           icon={CloseIcon}

src/excalidraw-app/app_constants.ts

@@ -7,8 +7,6 @@ export const SYNC_FULL_SCENE_INTERVAL_MS = 20000;
 export const SYNC_BROWSER_TABS_TIMEOUT = 50;
 export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps
 export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day
-export const PAUSE_COLLABORATION_TIMEOUT = 2000;
-export const RESUME_FALLBACK_TIMEOUT = 5000;
 
 export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB
 // 1 year (https://stackoverflow.com/a/25201898/927631)

src/excalidraw-app/collab/Collab.tsx

@@ -1,6 +1,6 @@
 import throttle from "lodash.throttle";
 import { PureComponent } from "react";
-import { ExcalidrawImperativeAPI, PauseCollaborationState } from "../../types";
+import { ExcalidrawImperativeAPI } from "../../types";
 import { ErrorDialog } from "../../components/ErrorDialog";
 import { APP_NAME, ENV, EVENT } from "../../constants";
 import { ImportedDataState } from "../../data/types";
@@ -16,7 +16,6 @@ import { Collaborator, Gesture } from "../../types";
 import {
   preventUnload,
   resolvablePromise,
-  upsertMap,
   withBatchedUpdates,
 } from "../../utils";
 import {
@@ -25,15 +24,12 @@ import {
   FIREBASE_STORAGE_PREFIXES,
   INITIAL_SCENE_UPDATE_TIMEOUT,
   LOAD_IMAGES_TIMEOUT,
-  PAUSE_COLLABORATION_TIMEOUT,
   WS_SCENE_EVENT_TYPES,
   SYNC_FULL_SCENE_INTERVAL_MS,
-  RESUME_FALLBACK_TIMEOUT,
 } from "../app_constants";
 import {
   generateCollaborationLinkData,
   getCollaborationLink,
-  getCollaborationLinkData,
   getCollabServer,
   getSyncableElements,
   SocketUpdateDataSource,
@@ -47,8 +43,8 @@ import {
   saveToFirebase,
 } from "../data/firebase";
 import {
-  importUsernameAndIdFromLocalStorage,
+  importUsernameFromLocalStorage,
-  saveUsernameAndIdToLocalStorage,
+  saveUsernameToLocalStorage,
 } from "../data/localStorage";
 import Portal from "./Portal";
 import RoomDialog from "./RoomDialog";
@@ -75,19 +71,16 @@ import { resetBrowserStateVersions } from "../data/tabSync";
 import { LocalData } from "../data/LocalData";
 import { atom, useAtom } from "jotai";
 import { appJotaiStore } from "../app-jotai";
-import { nanoid } from "nanoid";
 
 export const collabAPIAtom = atom<CollabAPI | null>(null);
 export const collabDialogShownAtom = atom(false);
 export const isCollaboratingAtom = atom(false);
 export const isOfflineAtom = atom(false);
-export const isCollaborationPausedAtom = atom(false);
 
 interface CollabState {
   errorMessage: string;
   username: string;
   activeRoomLink: string;
-  userId: string;
 }
 
 type CollabInstance = InstanceType<typeof Collab>;
@@ -101,7 +94,6 @@ export interface CollabAPI {
   syncElements: CollabInstance["syncElements"];
   fetchImageFilesFromFirebase: CollabInstance["fetchImageFilesFromFirebase"];
   setUsername: (username: string) => void;
-  isPaused: () => boolean;
 }
 
 interface PublicProps {
@@ -116,7 +108,6 @@ class Collab extends PureComponent<Props, CollabState> {
   excalidrawAPI: Props["excalidrawAPI"];
   activeIntervalId: number | null;
   idleTimeoutId: number | null;
-  pauseTimeoutId: number | null;
 
   private socketInitializationTimer?: number;
   private lastBroadcastedOrReceivedSceneVersion: number = -1;
@@ -124,13 +115,9 @@ class Collab extends PureComponent<Props, CollabState> {
 
   constructor(props: Props) {
     super(props);
-
-    const { username, userId } = importUsernameAndIdFromLocalStorage() || {};
-
     this.state = {
       errorMessage: "",
-      username: username || "",
+      username: importUsernameFromLocalStorage() || "",
-      userId: userId || "",
       activeRoomLink: "",
     };
     this.portal = new Portal(this);
@@ -162,7 +149,6 @@ class Collab extends PureComponent<Props, CollabState> {
     this.excalidrawAPI = props.excalidrawAPI;
     this.activeIntervalId = null;
     this.idleTimeoutId = null;
-    this.pauseTimeoutId = null;
   }
 
   componentDidMount() {
@@ -181,7 +167,6 @@ class Collab extends PureComponent<Props, CollabState> {
       fetchImageFilesFromFirebase: this.fetchImageFilesFromFirebase,
       stopCollaboration: this.stopCollaboration,
       setUsername: this.setUsername,
-      isPaused: this.isPaused,
     };
 
     appJotaiStore.set(collabAPIAtom, collabAPI);
@@ -207,13 +192,10 @@ class Collab extends PureComponent<Props, CollabState> {
     window.removeEventListener(EVENT.BEFORE_UNLOAD, this.beforeUnload);
     window.removeEventListener(EVENT.UNLOAD, this.onUnload);
     window.removeEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
-    // window.removeEventListener(
+    window.removeEventListener(
-    //   EVENT.VISIBILITY_CHANGE,
+      EVENT.VISIBILITY_CHANGE,
-    //   this.onVisibilityChange,
+      this.onVisibilityChange,
-    // );
+    );
-    window.removeEventListener(EVENT.BLUR, this.onVisibilityChange);
-    window.removeEventListener(EVENT.FOCUS, this.onVisibilityChange);
-
     if (this.activeIntervalId) {
       window.clearInterval(this.activeIntervalId);
       this.activeIntervalId = null;
@@ -222,10 +204,6 @@ class Collab extends PureComponent<Props, CollabState> {
       window.clearTimeout(this.idleTimeoutId);
       this.idleTimeoutId = null;
     }
-    if (this.pauseTimeoutId) {
-      window.clearTimeout(this.pauseTimeoutId);
-      this.pauseTimeoutId = null;
-    }
   }
 
   isCollaborating = () => appJotaiStore.get(isCollaboratingAtom)!;
@@ -329,128 +307,6 @@ class Collab extends PureComponent<Props, CollabState> {
     }
   };
 
-  fallbackResumeTimeout: null | ReturnType<typeof setTimeout> = null;
-
-  /**
-   * Handles the pause and resume states of a collaboration session.
-   * This function gets triggered when a change in the collaboration pause state is detected.
-   * Based on the state, the function carries out the following actions:
-   * 1. `PAUSED`: Saves the current scene to Firebase, disconnects the socket, and updates the scene to view mode.
-   * 2. `RESUMED`: Connects the socket, shows a toast message, sets a fallback to fetch data from Firebase, and resets the pause timeout if any.
-   * 3. `SYNCED`: Clears the fallback timeout if any, updates the collaboration pause state, and updates the scene to editing mode.
-   *
-   * @param state - The new state of the collaboration session. It is one of the values of `PauseCollaborationState` enum, which includes `PAUSED`, `RESUMED`, and `SYNCED`.
-   */
-  onPauseCollaborationChange = (state: PauseCollaborationState) => {
-    switch (state) {
-      case PauseCollaborationState.PAUSED: {
-        if (this.portal.socket) {
-          // Save current scene to firebase
-          this.saveCollabRoomToFirebase(
-            getSyncableElements(
-              this.excalidrawAPI.getSceneElementsIncludingDeleted(),
-            ),
-          );
-
-          this.portal.socket.disconnect();
-          this.portal.socketInitialized = false;
-          this.setIsCollaborationPaused(true);
-
-          this.excalidrawAPI.updateScene({
-            appState: { viewModeEnabled: true },
-          });
-        }
-        break;
-      }
-      case PauseCollaborationState.RESUMED: {
-        if (this.portal.socket && this.isPaused()) {
-          this.portal.socket.connect();
-          this.portal.socket.emit(WS_SCENE_EVENT_TYPES.INIT);
-
-          console.log("setting toast");
-          this.excalidrawAPI.setToast({
-            message: t("toast.reconnectRoomServer"),
-            duration: Infinity,
-            spinner: true,
-            closable: false,
-          });
-
-          // Fallback to fetch data from firebase when reconnecting to scene without collaborators
-          const fallbackResumeHandler = async () => {
-            const roomLinkData = getCollaborationLinkData(
-              this.state.activeRoomLink,
-            );
-            if (!roomLinkData) {
-              return;
-            }
-            const elements = await loadFromFirebase(
-              roomLinkData.roomId,
-              roomLinkData.roomKey,
-              this.portal.socket,
-            );
-            if (elements) {
-              this.setLastBroadcastedOrReceivedSceneVersion(
-                getSceneVersion(elements),
-              );
-
-              this.excalidrawAPI.updateScene({
-                elements,
-              });
-            }
-            this.onPauseCollaborationChange(PauseCollaborationState.SYNCED);
-          };
-
-          // Set timeout to fallback to fetch data from firebase
-          this.fallbackResumeTimeout = setTimeout(
-            fallbackResumeHandler,
-            RESUME_FALLBACK_TIMEOUT,
-          );
-
-          // When no users are in the room, we fallback to fetch data from firebase immediately and clear fallback timeout
-          this.portal.socket.on("first-in-room", () => {
-            if (this.portal.socket) {
-              this.portal.socket.off("first-in-room");
-              // Recall init event to initialize collab with other users (fixes https://github.com/excalidraw/excalidraw/pull/6638#issuecomment-1600799080)
-              this.portal.socket.emit(WS_SCENE_EVENT_TYPES.INIT);
-            }
-
-            fallbackResumeHandler();
-          });
-        }
-
-        // Clear pause timeout if exists
-        if (this.pauseTimeoutId) {
-          clearTimeout(this.pauseTimeoutId);
-        }
-
-        break;
-      }
-      case PauseCollaborationState.SYNCED: {
-        if (this.fallbackResumeTimeout) {
-          clearTimeout(this.fallbackResumeTimeout);
-          this.fallbackResumeTimeout = null;
-        }
-
-        if (this.isPaused()) {
-          this.setIsCollaborationPaused(false);
-
-          this.excalidrawAPI.updateScene({
-            appState: { viewModeEnabled: false },
-          });
-          console.log("resetting toast");
-          this.excalidrawAPI.setToast(null);
-          this.excalidrawAPI.scrollToContent();
-        }
-      }
-    }
-  };
-
-  isPaused = () => appJotaiStore.get(isCollaborationPausedAtom)!;
-
-  setIsCollaborationPaused = (isPaused: boolean) => {
-    appJotaiStore.set(isCollaborationPausedAtom, isPaused);
-  };
-
   private destroySocketClient = (opts?: { isUnload: boolean }) => {
     this.lastBroadcastedOrReceivedSceneVersion = -1;
     this.portal.close();
@@ -529,11 +385,6 @@ class Collab extends PureComponent<Props, CollabState> {
       });
     }
 
-    if (!this.state.userId) {
-      const userId = nanoid();
-      this.onUserIdChange(userId);
-    }
-
     if (this.portal.socket) {
       return null;
     }
@@ -648,7 +499,6 @@ class Collab extends PureComponent<Props, CollabState> {
                 elements: reconciledElements,
                 scrollToContent: true,
               });
-              this.onPauseCollaborationChange(PauseCollaborationState.SYNCED);
             }
             break;
           }
@@ -658,45 +508,33 @@ class Collab extends PureComponent<Props, CollabState> {
             );
             break;
           case "MOUSE_LOCATION": {
-            const {
+            const { pointer, button, username, selectedElementIds } =
-              pointer,
+              decryptedData.payload;
-              button,
+            const socketId: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["socketId"] =
-              username,
+              decryptedData.payload.socketId ||
-              selectedElementIds,
+              // @ts-ignore legacy, see #2094 (#2097)
-              userId,
+              decryptedData.payload.socketID;
-              socketId,
+
-            } = decryptedData.payload;
+            const collaborators = new Map(this.collaborators);
-            const collaborators = upsertMap(
+            const user = collaborators.get(socketId) || {}!;
-              userId,
+            user.pointer = pointer;
-              {
+            user.button = button;
-                username,
+            user.selectedElementIds = selectedElementIds;
-                pointer,
+            user.username = username;
-                button,
+            collaborators.set(socketId, user);
-                selectedElementIds,
-                socketId,
-              },
-              this.collaborators,
-            );
             this.excalidrawAPI.updateScene({
-              collaborators: new Map(collaborators),
+              collaborators,
             });
             break;
           }
           case "IDLE_STATUS": {
-            const { userState, username, userId, socketId } =
+            const { userState, socketId, username } = decryptedData.payload;
-              decryptedData.payload;
+            const collaborators = new Map(this.collaborators);
-            const collaborators = upsertMap(
+            const user = collaborators.get(socketId) || {}!;
-              userId,
+            user.userState = userState;
-              {
+            user.username = username;
-                username,
-                userState,
-                userId,
-                socketId,
-              },
-              this.collaborators,
-            );
             this.excalidrawAPI.updateScene({
-              collaborators: new Map(collaborators),
+              collaborators,
             });
             break;
           }
@@ -705,7 +543,6 @@ class Collab extends PureComponent<Props, CollabState> {
     );
 
     this.portal.socket.on("first-in-room", async () => {
-      console.log("first in room");
       if (this.portal.socket) {
         this.portal.socket.off("first-in-room");
       }
@@ -847,9 +684,7 @@ class Collab extends PureComponent<Props, CollabState> {
   };
 
   private onVisibilityChange = () => {
-    // if (document.hidden) {
+    if (document.hidden) {
-    console.log("VIS CHANGE");
-    if (!document.hasFocus()) {
       if (this.idleTimeoutId) {
         window.clearTimeout(this.idleTimeoutId);
         this.idleTimeoutId = null;
@@ -858,10 +693,6 @@ class Collab extends PureComponent<Props, CollabState> {
         window.clearInterval(this.activeIntervalId);
         this.activeIntervalId = null;
       }
-      this.pauseTimeoutId = window.setTimeout(
-        () => this.onPauseCollaborationChange(PauseCollaborationState.PAUSED),
-        PAUSE_COLLABORATION_TIMEOUT,
-      );
       this.onIdleStateChange(UserIdleState.AWAY);
     } else {
       this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD);
@@ -870,11 +701,6 @@ class Collab extends PureComponent<Props, CollabState> {
         ACTIVE_THRESHOLD,
       );
       this.onIdleStateChange(UserIdleState.ACTIVE);
-      if (this.pauseTimeoutId) {
-        window.clearTimeout(this.pauseTimeoutId);
-        this.onPauseCollaborationChange(PauseCollaborationState.RESUMED);
-        this.pauseTimeoutId = null;
-      }
     }
   };
 
@@ -891,19 +717,22 @@ class Collab extends PureComponent<Props, CollabState> {
   };
 
   private initializeIdleDetector = () => {
-    // document.addEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
+    document.addEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
-    // document.addEventListener(EVENT.VISIBILITY_CHANGE, this.onVisibilityChange);
+    document.addEventListener(EVENT.VISIBILITY_CHANGE, this.onVisibilityChange);
-    window.addEventListener(EVENT.BLUR, this.onVisibilityChange);
-    window.addEventListener(EVENT.FOCUS, this.onVisibilityChange);
   };
 
   setCollaborators(sockets: string[]) {
-    this.collaborators.forEach((value, key) => {
+    const collaborators: InstanceType<typeof Collab>["collaborators"] =
-      if (value.socketId && !sockets.includes(value.socketId)) {
+      new Map();
-        this.collaborators.delete(key);
+    for (const socketId of sockets) {
+      if (this.collaborators.has(socketId)) {
+        collaborators.set(socketId, this.collaborators.get(socketId)!);
+      } else {
+        collaborators.set(socketId, {});
       }
-    });
+    }
-    this.excalidrawAPI.updateScene({ collaborators: this.collaborators });
+    this.collaborators = collaborators;
+    this.excalidrawAPI.updateScene({ collaborators });
   }
 
   public setLastBroadcastedOrReceivedSceneVersion = (version: number) => {
@@ -989,12 +818,7 @@ class Collab extends PureComponent<Props, CollabState> {
 
   onUsernameChange = (username: string) => {
     this.setUsername(username);
-    saveUsernameAndIdToLocalStorage(username, this.state.userId);
+    saveUsernameToLocalStorage(username);
-  };
-
-  onUserIdChange = (userId: string) => {
-    this.setState({ userId });
-    saveUsernameAndIdToLocalStorage(this.state.username, userId);
   };
 
   render() {

src/excalidraw-app/collab/Portal.tsx

@@ -34,37 +34,11 @@ class Portal {
 
   open(socket: SocketIOClient.Socket, id: string, key: string) {
     this.socket = socket;
-    // @ts-ignore
-    window.socket = socket;
     this.roomId = id;
     this.roomKey = key;
 
-    this.initializeSocketListeners();
-
-    return socket;
-  }
-
-  close() {
-    if (!this.socket) {
-      return;
-    }
-    this.queueFileUpload.flush();
-    this.socket.close();
-    this.socket = null;
-    this.roomId = null;
-    this.roomKey = null;
-    this.socketInitialized = false;
-    this.broadcastedElementVersions = new Map();
-  }
-
-  initializeSocketListeners() {
-    if (!this.socket) {
-      return;
-    }
-
     // Initialize socket listeners
     this.socket.on("init-room", () => {
-      console.log("join room");
       if (this.socket) {
         this.socket.emit("join-room", this.roomId);
         trackEvent("share", "room joined");
@@ -80,6 +54,21 @@ class Portal {
     this.socket.on("room-user-change", (clients: string[]) => {
       this.collab.setCollaborators(clients);
     });
+
+    return socket;
+  }
+
+  close() {
+    if (!this.socket) {
+      return;
+    }
+    this.queueFileUpload.flush();
+    this.socket.close();
+    this.socket = null;
+    this.roomId = null;
+    this.roomKey = null;
+    this.socketInitialized = false;
+    this.broadcastedElementVersions = new Map();
   }
 
   isOpen() {
@@ -192,14 +181,13 @@ class Portal {
   };
 
   broadcastIdleChange = (userState: UserIdleState) => {
-    if (this.socket) {
+    if (this.socket?.id) {
       const data: SocketUpdateDataSource["IDLE_STATUS"] = {
         type: "IDLE_STATUS",
         payload: {
+          socketId: this.socket.id,
           userState,
           username: this.collab.state.username,
-          userId: this.collab.state.userId,
-          socketId: this.socket.id,
         },
       };
       return this._broadcastSocketData(
@@ -213,17 +201,16 @@ class Portal {
     pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"];
     button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];
   }) => {
-    if (this.socket) {
+    if (this.socket?.id) {
       const data: SocketUpdateDataSource["MOUSE_LOCATION"] = {
         type: "MOUSE_LOCATION",
         payload: {
+          socketId: this.socket.id,
           pointer: payload.pointer,
           button: payload.button || "up",
           selectedElementIds:
             this.collab.excalidrawAPI.getAppState().selectedElementIds,
           username: this.collab.state.username,
-          userId: this.collab.state.userId,
-          socketId: this.socket.id,
         },
       };
       return this._broadcastSocketData(

src/excalidraw-app/data/index.ts

@@ -106,21 +106,19 @@ export type SocketUpdateDataSource = {
   MOUSE_LOCATION: {
     type: "MOUSE_LOCATION";
     payload: {
+      socketId: string;
       pointer: { x: number; y: number };
       button: "down" | "up";
       selectedElementIds: AppState["selectedElementIds"];
       username: string;
-      userId: string;
-      socketId: string;
     };
   };
   IDLE_STATUS: {
     type: "IDLE_STATUS";
     payload: {
+      socketId: string;
       userState: UserIdleState;
       username: string;
-      userId: string;
-      socketId: string;
     };
   };
 };

src/excalidraw-app/data/localStorage.ts

@@ -8,14 +8,11 @@ import { clearElementsForLocalStorage } from "../../element";
 import { STORAGE_KEYS } from "../app_constants";
 import { ImportedDataState } from "../../data/types";
 
-export const saveUsernameAndIdToLocalStorage = (
+export const saveUsernameToLocalStorage = (username: string) => {
-  username: string,
-  userId: string,
-) => {
   try {
     localStorage.setItem(
       STORAGE_KEYS.LOCAL_STORAGE_COLLAB,
-      JSON.stringify({ username, userId }),
+      JSON.stringify({ username }),
     );
   } catch (error: any) {
     // Unable to access window.localStorage
@@ -23,14 +20,11 @@ export const saveUsernameAndIdToLocalStorage = (
   }
 };
 
-export const importUsernameAndIdFromLocalStorage = (): {
+export const importUsernameFromLocalStorage = (): string | null => {
-  username: string;
-  userId: string;
-} | null => {
   try {
     const data = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_COLLAB);
     if (data) {
-      return JSON.parse(data);
+      return JSON.parse(data).username;
     }
   } catch (error: any) {
     // Unable to access localStorage

src/excalidraw-app/index.tsx

@@ -65,7 +65,7 @@ import {
 import {
   getLibraryItemsFromStorage,
   importFromLocalStorage,
-  importUsernameAndIdFromLocalStorage,
+  importUsernameFromLocalStorage,
 } from "./data/localStorage";
 import CustomStats from "./CustomStats";
 import { restore, restoreAppState, RestoredDataState } from "../data/restore";
@@ -425,8 +425,7 @@ const ExcalidrawWrapper = () => {
         // don't sync if local state is newer or identical to browser state
         if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_DATA_STATE)) {
           const localDataState = importFromLocalStorage();
-          const username =
+          const username = importUsernameFromLocalStorage();
-            importUsernameAndIdFromLocalStorage()?.username ?? "";
           let langCode = languageDetector.detect() || defaultLang.code;
           if (Array.isArray(langCode)) {
             langCode = langCode[0];

src/locales/en.json

@@ -425,8 +425,7 @@
     "selection": "selection",
     "pasteAsSingleElement": "Use {{shortcut}} to paste as a single element,\nor paste into an existing text editor",
     "unableToEmbed": "Embedding this url is currently not allowed. Raise an issue on GitHub to request the url whitelisted",
-    "unrecognizedLinkFormat": "The link you embedded does not match the expected format. Please try to paste the 'embed' string provided by the source site",
+    "unrecognizedLinkFormat": "The link you embedded does not match the expected format. Please try to paste the 'embed' string provided by the source site"
-    "reconnectRoomServer": "Reconnecting to server"
   },
   "colors": {
     "transparent": "Transparent",

src/renderer/renderScene.ts

@@ -707,8 +707,8 @@ export const _renderScene = ({
           if (renderConfig.remoteSelectedElementIds[element.id]) {
             selectionColors.push(
               ...renderConfig.remoteSelectedElementIds[element.id].map(
-                (userId) => {
+                (socketId) => {
-                  const background = getClientColor(userId);
+                  const background = getClientColor(socketId);
                   return background;
                 },
               ),

src/scene/export.ts

@@ -15,6 +15,18 @@ import Scene from "./Scene";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 
+const createScene = (
+  elements: readonly NonDeletedExcalidrawElement[],
+): Scene | null => {
+  if (!elements || Scene.getScene(elements[0])) {
+    return null;
+  }
+  const scene = new Scene();
+  scene.replaceAllElements(elements);
+  elements?.forEach((el) => Scene.mapElementToScene(el, scene));
+  return scene;
+};
+
 export const exportToCanvas = async (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: AppState,
@@ -38,6 +50,7 @@ export const exportToCanvas = async (
     return { canvas, scale: appState.exportScale };
   },
 ) => {
+  const scene = createScene(elements);
   const [minX, minY, width, height] = getCanvasSize(elements, exportPadding);
 
   const { canvas, scale = 1 } = createCanvas(width, height);
@@ -79,6 +92,7 @@ export const exportToCanvas = async (
     },
   });
 
+  scene?.destroy();
   return canvas;
 };
 
@@ -105,6 +119,7 @@ export const exportToSvg = async (
     exportScale = 1,
     exportEmbedScene,
   } = appState;
+  const scene = createScene(elements);
   let metadata = "";
   if (exportEmbedScene) {
     try {
@@ -217,6 +232,7 @@ export const exportToSvg = async (
     renderEmbeddables: opts?.renderEmbeddables,
   });
 
+  scene?.destroy();
   return svgRoot;
 };
 

src/types.ts

@@ -56,7 +56,6 @@ export type Collaborator = {
   avatarUrl?: string;
   // user id. If supplied, we'll filter out duplicates when rendering user avatars.
   id?: string;
-  socketId?: string;
 };
 
 export type DataURL = string & { _brand: "DataURL" };
@@ -402,12 +401,6 @@ export enum UserIdleState {
   IDLE = "idle",
 }
 
-export enum PauseCollaborationState {
-  PAUSED = "paused",
-  RESUMED = "resumed",
-  SYNCED = "synced",
-}
-
 export type ExportOpts = {
   saveFileToDisk?: boolean;
   onExportToBackend?: (

src/utils.ts

@@ -914,14 +914,3 @@ export const isOnlyExportingSingleFrame = (
     )
   );
 };
-
-export const upsertMap = <T>(key: T, value: object, map: Map<T, object>) => {
-  if (!map.has(key)) {
-    map.set(key, value);
-  } else {
-    const old = map.get(key);
-    map.set(key, { ...old, ...value });
-  }
-
-  return map;
-};