@dwelle/excalidraw 0.5.0-bb58eff → 0.5.0-bcfbd91

package/dist/excalidraw/components/App.js

@@ -11,7 +11,7 @@ import { actions } from "../actions/register";
 import { trackEvent } from "../analytics";
 import { getDefaultAppState, isEraserActive, isHandToolActive, } from "../appState";
 import { copyTextToSystemClipboard, parseClipboard, } from "../clipboard";
-import { APP_NAME, CURSOR_TYPE, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, DEFAULT_VERTICAL_ALIGN, DRAGGING_THRESHOLD, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, ENV, EVENT, FRAME_STYLE, GRID_SIZE, IMAGE_MIME_TYPES, IMAGE_RENDER_TIMEOUT, isBrave, LINE_CONFIRM_THRESHOLD, MAX_ALLOWED_FILE_BYTES, MIME_TYPES, MQ_MAX_HEIGHT_LANDSCAPE, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_WIDTH_PORTRAIT, MQ_RIGHT_SIDEBAR_MIN_WIDTH, POINTER_BUTTON, ROUNDNESS, SCROLL_TIMEOUT, TAP_TWICE_TIMEOUT, TEXT_TO_CENTER_SNAP_THRESHOLD, THEME, THEME_FILTER, TOUCH_CTX_MENU_TIMEOUT, VERTICAL_ALIGN, YOUTUBE_STATES, ZOOM_STEP, POINTER_EVENTS, TOOL_TYPE, EDITOR_LS_KEYS, isIOS, supportsResizeObserver, } from "../constants";
+import { APP_NAME, CURSOR_TYPE, DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT, DEFAULT_VERTICAL_ALIGN, DRAGGING_THRESHOLD, ELEMENT_SHIFT_TRANSLATE_AMOUNT, ELEMENT_TRANSLATE_AMOUNT, ENV, EVENT, FRAME_STYLE, GRID_SIZE, IMAGE_MIME_TYPES, IMAGE_RENDER_TIMEOUT, isBrave, LINE_CONFIRM_THRESHOLD, MAX_ALLOWED_FILE_BYTES, MIME_TYPES, MQ_MAX_HEIGHT_LANDSCAPE, MQ_MAX_WIDTH_LANDSCAPE, MQ_MAX_WIDTH_PORTRAIT, MQ_RIGHT_SIDEBAR_MIN_WIDTH, POINTER_BUTTON, ROUNDNESS, SCROLL_TIMEOUT, TAP_TWICE_TIMEOUT, TEXT_TO_CENTER_SNAP_THRESHOLD, THEME, THEME_FILTER, TOUCH_CTX_MENU_TIMEOUT, VERTICAL_ALIGN, YOUTUBE_STATES, ZOOM_STEP, POINTER_EVENTS, TOOL_TYPE, EDITOR_LS_KEYS, isIOS, } from "../constants";
 import { exportAsImage, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { restore, restoreElements } from "../data/restore";
@@ -33,7 +33,7 @@ import { calculateScrollCenter, getElementsAtPosition, getElementsWithinSelectio
 import Scene from "../scene/Scene";
 import { getStateForZoom } from "../scene/zoom";
 import { findShapeByKey } from "../shapes";
-import { debounce, distance, getFontString, getNearestScrollableContainer, isInputLike, isToolIcon, isWritableElement, sceneCoordsToViewportCoords, tupleToCoors, viewportCoordsToSceneCoords, wrapEvent, updateObject, updateActiveTool, getShortcutKey, isTransparent, easeToValuesRAF, muteFSAbortError, isTestEnv, easeOut, arrayToMap, updateStable, addEventListener, normalizeEOL, getDateTime, } from "../utils";
+import { debounce, distance, getFontString, getNearestScrollableContainer, isInputLike, isToolIcon, isWritableElement, sceneCoordsToViewportCoords, tupleToCoors, viewportCoordsToSceneCoords, wrapEvent, updateObject, updateActiveTool, getShortcutKey, isTransparent, easeToValuesRAF, muteFSAbortError, isTestEnv, easeOut, updateStable, addEventListener, normalizeEOL, getDateTime, } from "../utils";
 import { createSrcDoc, embeddableURLValidator, maybeParseEmbedSrc, getEmbedLink, } from "../element/embeddable";
 import { ContextMenu, CONTEXT_MENU_SEPARATOR, } from "./ContextMenu";
 import LayerUI from "./LayerUI";
@@ -85,7 +85,6 @@ import { withBatchedUpdates, withBatchedUpdatesThrottled } from "../reactUtils";
 import { getRenderOpacity } from "../renderer/renderElement";
 import { textWysiwyg } from "../element/textWysiwyg";
 import { isOverScrollBars } from "../scene/scrollbars";
-import { syncInvalidIndices, syncMovedIndices } from "../fractionalIndex";
 import { isPointHittingLink, isPointHittingLinkIcon, } from "./hyperlink/helpers";
 const AppContext = React.createContext(null);
 const AppPropsContext = React.createContext(null);
@@ -128,6 +127,7 @@ export const useExcalidrawElements = () => useContext(ExcalidrawElementsContext)
 export const useExcalidrawAppState = () => useContext(ExcalidrawAppStateContext);
 export const useExcalidrawSetAppState = () => useContext(ExcalidrawSetAppStateContext);
 export const useExcalidrawActionManager = () => useContext(ExcalidrawActionManagerContext);
+const supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
 let didTapTwice = false;
 let tappedTwiceTimer = 0;
 let isHoldingSpace = false;
@@ -1139,7 +1139,7 @@ class App extends React.Component {
                     opacity: 100,
                     locked: false,
                 });
-                this.scene.insertElement(frame);
+                this.scene.addNewElement(frame);
                 for (const child of selectedElements) {
                     mutateElement(child, { frameId: frame.id });
                 }
@@ -1952,15 +1952,16 @@ class App extends React.Component {
         }), {
             randomizeSeed: !opts.retainSeed,
         });
-        const prevElements = this.scene.getElementsIncludingDeleted();
-        const nextElements = [...prevElements, ...newElements];
-        syncMovedIndices(nextElements, arrayToMap(newElements));
+        const allElements = [
+            ...this.scene.getElementsIncludingDeleted(),
+            ...newElements,
+        ];
         const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ x, y });
         if (topLayerFrame) {
             const eligibleElements = filterElementsEligibleAsFrameChildren(newElements, topLayerFrame);
-            addElementsToFrame(nextElements, eligibleElements, topLayerFrame);
+            addElementsToFrame(allElements, eligibleElements, topLayerFrame);
         }
-        this.scene.replaceAllElements(nextElements);
+        this.scene.replaceAllElements(allElements);
         newElements.forEach((newElement) => {
             if (isTextElement(newElement) && isBoundToContainer(newElement)) {
                 const container = getContainerElement(newElement, this.scene.getElementsMapIncludingDeleted());
@@ -2128,7 +2129,16 @@ class App extends React.Component {
         if (textElements.length === 0) {
             return;
         }
-        this.scene.insertElements(textElements);
+        const frameId = textElements[0].frameId;
+        if (frameId) {
+            this.scene.insertElementsAtIndex(textElements, this.scene.getElementIndex(frameId));
+        }
+        else {
+            this.scene.replaceAllElements([
+                ...this.scene.getElementsIncludingDeleted(),
+                ...textElements,
+            ]);
+        }
         this.setState({
             selectedElementIds: makeNextSelectedElementIds(Object.fromEntries(textElements.map((el) => [el.id, true])), this.state),
         });
@@ -3012,7 +3022,7 @@ class App extends React.Component {
                 this.scene.insertElementAtIndex(element, containerIndex + 1);
             }
             else {
-                this.scene.insertElement(element);
+                this.scene.addNewElement(element);
             }
         }
         this.setState({
@@ -4308,7 +4318,7 @@ class App extends React.Component {
             pressures,
         });
         const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
-        this.scene.insertElement(element);
+        this.scene.addNewElement(element);
         this.setState({
             draggingElement: element,
             editingElement: element,
@@ -4336,7 +4346,10 @@ class App extends React.Component {
             width,
             height,
         });
-        this.scene.insertElement(element);
+        this.scene.replaceAllElements([
+            ...this.scene.getElementsIncludingDeleted(),
+            element,
+        ]);
         return element;
     };
     //create rectangle element with youtube top left on nearest grid point width / hight 640/360
@@ -4371,7 +4384,10 @@ class App extends React.Component {
             height: embedLink.intrinsicSize.h,
             link,
         });
-        this.scene.insertElement(element);
+        this.scene.replaceAllElements([
+            ...this.scene.getElementsIncludingDeleted(),
+            element,
+        ]);
         return element;
     };
     createImageElement = ({ sceneX, sceneY, addToFrameUnderCursor = true, }) => {
@@ -4480,7 +4496,7 @@ class App extends React.Component {
                 points: [...element.points, [0, 0]],
             });
             const boundElement = getHoveredElementForBinding(pointerDownState.origin, this.scene.getNonDeletedElements(), this.scene.getNonDeletedElementsMap());
-            this.scene.insertElement(element);
+            this.scene.addNewElement(element);
             this.setState({
                 draggingElement: element,
                 editingElement: element,
@@ -4540,7 +4556,7 @@ class App extends React.Component {
             });
         }
         else {
-            this.scene.insertElement(element);
+            this.scene.addNewElement(element);
             this.setState({
                 multiElement: null,
                 draggingElement: element,
@@ -4562,7 +4578,10 @@ class App extends React.Component {
         const frame = type === TOOL_TYPE.magicframe
             ? newMagicFrameElement(constructorOpts)
             : newFrameElement(constructorOpts);
-        this.scene.insertElement(frame);
+        this.scene.replaceAllElements([
+            ...this.scene.getElementsIncludingDeleted(),
+            frame,
+        ]);
         this.setState({
             multiElement: null,
             draggingElement: frame,
@@ -4820,7 +4839,6 @@ class App extends React.Component {
                             }
                         }
                         const nextSceneElements = [...nextElements, ...elementsToAppend];
-                        syncMovedIndices(nextSceneElements, arrayToMap(elementsToAppend));
                         bindTextToShapeAfterDuplication(nextElements, elementsToAppend, oldIdToDuplicatedId);
                         fixBindingsAfterDuplication(nextSceneElements, elementsToAppend, oldIdToDuplicatedId, "duplicatesServeAsOld");
                         bindElementsToFramesAfterDuplication(nextSceneElements, elementsToAppend, oldIdToDuplicatedId);
@@ -5593,7 +5611,7 @@ class App extends React.Component {
             this.setState({ errorMessage: t("errors.imageToolNotSupported") });
             return;
         }
-        this.scene.insertElement(imageElement);
+        this.scene.addNewElement(imageElement);
         try {
             return await this.initializeImage({
                 imageFile,
@@ -6365,7 +6383,7 @@ export const createTestHook = () => {
                     return this.app?.scene.getElementsIncludingDeleted();
                 },
                 set(elements) {
-                    return this.app?.scene.replaceAllElements(syncInvalidIndices(elements));
+                    return this.app?.scene.replaceAllElements(elements);
                 },
             },
         });

package/dist/excalidraw/components/Avatar.d.ts

@@ -5,7 +5,8 @@ type AvatarProps = {
     color: string;
     name: string;
     src?: string;
-    className?: string;
+    isBeingFollowed?: boolean;
+    isCurrentUser: boolean;
 };
-export declare const Avatar: ({ color, onClick, name, src, className, }: AvatarProps) => JSX.Element;
+export declare const Avatar: ({ color, onClick, name, src, isBeingFollowed, isCurrentUser, }: AvatarProps) => JSX.Element;
 export {};

package/dist/excalidraw/components/Avatar.js

@@ -3,10 +3,13 @@ import "./Avatar.scss";
 import { useState } from "react";
 import { getNameInitial } from "../clients";
 import clsx from "clsx";
-export const Avatar = ({ color, onClick, name, src, className, }) => {
+export const Avatar = ({ color, onClick, name, src, isBeingFollowed, isCurrentUser, }) => {
     const shortName = getNameInitial(name);
     const [error, setError] = useState(false);
     const loadImg = !error && src;
     const style = loadImg ? undefined : { background: color };
-    return (_jsx("div", { className: clsx("Avatar", className), style: style, onClick: onClick, children: loadImg ? (_jsx("img", { className: "Avatar-img", src: src, alt: shortName, referrerPolicy: "no-referrer", onError: () => setError(true) })) : (shortName) }));
+    return (_jsx("div", { className: clsx("Avatar", {
+            "Avatar--is-followed": isBeingFollowed,
+            "Avatar--is-current-user": isCurrentUser,
+        }), style: style, onClick: onClick, children: loadImg ? (_jsx("img", { className: "Avatar-img", src: src, alt: shortName, referrerPolicy: "no-referrer", onError: () => setError(true) })) : (shortName) }));
 };

package/dist/excalidraw/components/UserList.d.ts

@@ -2,17 +2,21 @@ import "./UserList.scss";
 import React from "react";
 import { Collaborator, SocketId } from "../types";
 export type GoToCollaboratorComponentProps = {
-    socketId: SocketId;
+    clientId: ClientId;
     collaborator: Collaborator;
     withName: boolean;
     isBeingFollowed: boolean;
 };
-type UserListUserObject = Pick<Collaborator, "avatarUrl" | "id" | "socketId" | "username" | "isInCall" | "isSpeaking" | "isMuted">;
+/** collaborator user id or socket id (fallback) */
+type ClientId = string & {
+    _brand: "UserId";
+};
+type UserListUserObject = Pick<Collaborator, "avatarUrl" | "id" | "socketId" | "username">;
 type UserListProps = {
     className?: string;
     mobile?: boolean;
     collaborators: Map<SocketId, UserListUserObject>;
     userToFollow: SocketId | null;
 };
-export declare const UserList: React.MemoExoticComponent<({ className, mobile, collaborators, userToFollow }: UserListProps) => JSX.Element>;
+export declare const UserList: React.MemoExoticComponent<({ className, mobile, collaborators, userToFollow }: UserListProps) => JSX.Element | null>;
 export {};

package/dist/excalidraw/components/UserList.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./UserList.scss";
-import React, { useLayoutEffect } from "react";
+import React from "react";
 import clsx from "clsx";
 import { Tooltip } from "./Tooltip";
 import { useExcalidrawActionManager } from "./App";
@@ -9,28 +9,24 @@ import { Island } from "./Island";
 import { searchIcon } from "./icons";
 import { t } from "../i18n";
 import { isShallowEqual } from "../utils";
-import { supportsResizeObserver } from "../constants";
-const DEFAULT_MAX_AVATARS = 4;
+const FIRST_N_AVATARS = 3;
 const SHOW_COLLABORATORS_FILTER_AT = 8;
-const ConditionalTooltipWrapper = ({ shouldWrap, children, username, }) => shouldWrap ? (_jsx(Tooltip, { label: username || "Unknown user", children: children })) : (_jsx(React.Fragment, { children: children }));
-const renderCollaborator = ({ actionManager, collaborator, socketId, withName = false, shouldWrapWithTooltip = false, isBeingFollowed, }) => {
+const ConditionalTooltipWrapper = ({ shouldWrap, children, clientId, username, }) => shouldWrap ? (_jsx(Tooltip, { label: username || "Unknown user", children: children }, clientId)) : (_jsx(React.Fragment, { children: children }, clientId));
+const renderCollaborator = ({ actionManager, collaborator, clientId, withName = false, shouldWrapWithTooltip = false, isBeingFollowed, }) => {
     const data = {
-        socketId,
+        clientId,
         collaborator,
         withName,
         isBeingFollowed,
     };
     const avatarJSX = actionManager.renderAction("goToCollaborator", data);
-    return (_jsx(ConditionalTooltipWrapper, { username: collaborator.username, shouldWrap: shouldWrapWithTooltip, children: avatarJSX }, socketId));
+    return (_jsx(ConditionalTooltipWrapper, { clientId: clientId, username: collaborator.username, shouldWrap: shouldWrapWithTooltip, children: avatarJSX }, clientId));
 };
 const collaboratorComparatorKeys = [
     "avatarUrl",
     "id",
     "socketId",
     "username",
-    "isInCall",
-    "isSpeaking",
-    "isMuted",
 ];
 export const UserList = React.memo(({ className, mobile, collaborators, userToFollow }) => {
     const actionManager = useExcalidrawActionManager();
@@ -41,68 +37,47 @@ export const UserList = React.memo(({ className, mobile, collaborators, userToFo
         // filter on user id, else fall back on unique socketId
         userId, { ...collaborator, socketId });
     });
-    const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap.values()).filter((collaborator) => collaborator.username?.trim());
+    const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap).filter(([_, collaborator]) => collaborator.username?.trim());
     const [searchTerm, setSearchTerm] = React.useState("");
-    const userListWrapper = React.useRef(null);
-    useLayoutEffect(() => {
-        if (userListWrapper.current) {
-            const updateMaxAvatars = (width) => {
-                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);
+    if (uniqueCollaboratorsArray.length === 0) {
+        return null;
+    }
     const searchTermNormalized = searchTerm.trim().toLowerCase();
     const filteredCollaborators = searchTermNormalized
-        ? uniqueCollaboratorsArray.filter((collaborator) => collaborator.username?.toLowerCase().includes(searchTerm))
+        ? uniqueCollaboratorsArray.filter(([, collaborator]) => collaborator.username?.toLowerCase().includes(searchTerm))
         : uniqueCollaboratorsArray;
-    const firstNCollaborators = uniqueCollaboratorsArray.slice(0, maxAvatars - 1);
-    const firstNAvatarsJSX = firstNCollaborators.map((collaborator) => renderCollaborator({
+    const firstNCollaborators = uniqueCollaboratorsArray.slice(0, FIRST_N_AVATARS);
+    const firstNAvatarsJSX = firstNCollaborators.map(([clientId, collaborator]) => renderCollaborator({
         actionManager,
         collaborator,
-        socketId: collaborator.socketId,
+        clientId,
         shouldWrapWithTooltip: true,
         isBeingFollowed: collaborator.socketId === userToFollow,
     }));
-    return mobile ? (_jsx("div", { className: clsx("UserList UserList_mobile", className), children: uniqueCollaboratorsArray.map((collaborator) => renderCollaborator({
+    return mobile ? (_jsx("div", { className: clsx("UserList UserList_mobile", className), children: uniqueCollaboratorsArray.map(([clientId, collaborator]) => renderCollaborator({
             actionManager,
             collaborator,
-            socketId: collaborator.socketId,
+            clientId,
             shouldWrapWithTooltip: true,
             isBeingFollowed: collaborator.socketId === userToFollow,
-        })) })) : (_jsx("div", { className: "UserList-wrapper", ref: userListWrapper, children: _jsxs("div", { className: clsx("UserList", className), style: { [`--max-avatars`]: maxAvatars }, children: [firstNAvatarsJSX, uniqueCollaboratorsArray.length > maxAvatars - 1 && (_jsxs(Popover.Root, { onOpenChange: (isOpen) => {
-                        if (!isOpen) {
-                            setSearchTerm("");
-                        }
-                    }, children: [_jsxs(Popover.Trigger, { className: "UserList__more", children: ["+", uniqueCollaboratorsArray.length - maxAvatars + 1] }), _jsx(Popover.Content, { style: {
-                                zIndex: 2,
-                                width: "15rem",
-                                textAlign: "left",
-                            }, align: "end", sideOffset: 10, children: _jsxs(Island, { style: { overflow: "hidden" }, children: [uniqueCollaboratorsArray.length >=
-                                        SHOW_COLLABORATORS_FILTER_AT && (_jsxs("div", { className: "UserList__search-wrapper", children: [searchIcon, _jsx("input", { className: "UserList__search", type: "text", placeholder: t("userList.search.placeholder"), value: searchTerm, onChange: (e) => {
-                                                    setSearchTerm(e.target.value);
-                                                } })] })), _jsxs("div", { className: "dropdown-menu UserList__collaborators", children: [filteredCollaborators.length === 0 && (_jsx("div", { className: "UserList__collaborators__empty", children: t("userList.search.empty") })), _jsx("div", { className: "UserList__hint", children: t("userList.hint.text") }), filteredCollaborators.map((collaborator) => renderCollaborator({
-                                                actionManager,
-                                                collaborator,
-                                                socketId: collaborator.socketId,
-                                                withName: true,
-                                                isBeingFollowed: collaborator.socketId === userToFollow,
-                                            }))] })] }) })] }))] }) }));
+        })) })) : (_jsxs("div", { className: clsx("UserList", className), children: [firstNAvatarsJSX, uniqueCollaboratorsArray.length > FIRST_N_AVATARS && (_jsxs(Popover.Root, { onOpenChange: (isOpen) => {
+                    if (!isOpen) {
+                        setSearchTerm("");
+                    }
+                }, children: [_jsxs(Popover.Trigger, { className: "UserList__more", children: ["+", uniqueCollaboratorsArray.length - FIRST_N_AVATARS] }), _jsx(Popover.Content, { style: {
+                            zIndex: 2,
+                            width: "13rem",
+                            textAlign: "left",
+                        }, align: "end", sideOffset: 10, children: _jsxs(Island, { style: { overflow: "hidden" }, children: [uniqueCollaboratorsArray.length >=
+                                    SHOW_COLLABORATORS_FILTER_AT && (_jsxs("div", { className: "UserList__search-wrapper", children: [searchIcon, _jsx("input", { className: "UserList__search", type: "text", placeholder: t("userList.search.placeholder"), value: searchTerm, onChange: (e) => {
+                                                setSearchTerm(e.target.value);
+                                            } })] })), _jsxs("div", { className: "dropdown-menu UserList__collaborators", children: [filteredCollaborators.length === 0 && (_jsx("div", { className: "UserList__collaborators__empty", children: t("userList.search.empty") })), _jsx("div", { className: "UserList__hint", children: t("userList.hint.text") }), filteredCollaborators.map(([clientId, collaborator]) => renderCollaborator({
+                                            actionManager,
+                                            collaborator,
+                                            clientId,
+                                            withName: true,
+                                            isBeingFollowed: collaborator.socketId === userToFollow,
+                                        }))] })] }) })] }))] }));
 }, (prev, next) => {
     if (prev.collaborators.size !== next.collaborators.size ||
         prev.mobile !== next.mobile ||
@@ -110,13 +85,9 @@ export const UserList = React.memo(({ className, mobile, collaborators, userToFo
         prev.userToFollow !== next.userToFollow) {
         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, collaboratorComparatorKeys)) {
             return false;
         }

package/dist/excalidraw/components/canvases/InteractiveCanvas.js

@@ -12,34 +12,37 @@ const InteractiveCanvas = (props) => {
             isComponentMounted.current = true;
             return;
         }
-        const remotePointerButton = new Map();
-        const remotePointerViewportCoords = new Map();
-        const remoteSelectedElementIds = new Map();
-        const remotePointerUsernames = new Map();
-        const remotePointerUserStates = new Map();
+        const cursorButton = {};
+        const pointerViewportCoords = {};
+        const remoteSelectedElementIds = {};
+        const pointerUsernames = {};
+        const pointerUserStates = {};
         props.appState.collaborators.forEach((user, socketId) => {
             if (user.selectedElementIds) {
                 for (const id of Object.keys(user.selectedElementIds)) {
-                    if (!remoteSelectedElementIds.has(id)) {
-                        remoteSelectedElementIds.set(id, []);
+                    if (!(id in remoteSelectedElementIds)) {
+                        remoteSelectedElementIds[id] = [];
                     }
-                    remoteSelectedElementIds.get(id).push(socketId);
+                    remoteSelectedElementIds[id].push(socketId);
                 }
             }
             if (!user.pointer || user.pointer.renderCursor === false) {
                 return;
             }
             if (user.username) {
-                remotePointerUsernames.set(socketId, user.username);
+                pointerUsernames[socketId] = user.username;
             }
             if (user.userState) {
-                remotePointerUserStates.set(socketId, user.userState);
+                pointerUserStates[socketId] = user.userState;
             }
-            remotePointerViewportCoords.set(socketId, sceneCoordsToViewportCoords({
-                sceneX: user.pointer.x,
-                sceneY: user.pointer.y,
-            }, props.appState));
-            remotePointerButton.set(socketId, user.button);
+            pointerViewportCoords[socketId] = {
+                ...sceneCoordsToViewportCoords({
+                    sceneX: user.pointer.x,
+                    sceneY: user.pointer.y,
+                }, props.appState),
+                id: user.id || socketId,
+            };
+            cursorButton[socketId] = user.button;
         });
         const selectionColor = (props.containerRef?.current &&
             getComputedStyle(props.containerRef.current).getPropertyValue("--color-selection")) ||
@@ -52,11 +55,11 @@ const InteractiveCanvas = (props) => {
             scale: window.devicePixelRatio,
             appState: props.appState,
             renderConfig: {
-                remotePointerViewportCoords,
-                remotePointerButton,
+                remotePointerViewportCoords: pointerViewportCoords,
+                remotePointerButton: cursorButton,
                 remoteSelectedElementIds,
-                remotePointerUsernames,
-                remotePointerUserStates,
+                remotePointerUsernames: pointerUsernames,
+                remotePointerUserStates: pointerUserStates,
                 selectionColor,
                 renderScrollbars: false,
             },

package/dist/excalidraw/components/icons.d.ts

@@ -173,6 +173,4 @@ export declare const eyeIcon: JSX.Element;
 export declare const eyeClosedIcon: JSX.Element;
 export declare const brainIcon: JSX.Element;
 export declare const searchIcon: JSX.Element;
-export declare const microphoneIcon: JSX.Element;
-export declare const microphoneMutedIcon: JSX.Element;
 export {};

package/dist/excalidraw/components/icons.js

@@ -215,9 +215,7 @@ export const laserPointerToolIcon = createIcon(_jsxs("g", { fill: "none", stroke
 export const MagicIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M6 21l15 -15l-3 -3l-15 15l3 3" }), _jsx("path", { d: "M15 6l3 3" }), _jsx("path", { d: "M9 3a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2" }), _jsx("path", { d: "M19 13a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2" })] }), tablerIconProps);
 export const OpenAIIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M11.217 19.384a3.501 3.501 0 0 0 6.783 -1.217v-5.167l-6 -3.35" }), _jsx("path", { d: "M5.214 15.014a3.501 3.501 0 0 0 4.446 5.266l4.34 -2.534v-6.946" }), _jsx("path", { d: "M6 7.63c-1.391 -.236 -2.787 .395 -3.534 1.689a3.474 3.474 0 0 0 1.271 4.745l4.263 2.514l6 -3.348" }), _jsx("path", { d: "M12.783 4.616a3.501 3.501 0 0 0 -6.783 1.217v5.067l6 3.45" }), _jsx("path", { d: "M18.786 8.986a3.501 3.501 0 0 0 -4.446 -5.266l-4.34 2.534v6.946" }), _jsx("path", { d: "M18 16.302c1.391 .236 2.787 -.395 3.534 -1.689a3.474 3.474 0 0 0 -1.271 -4.745l-4.308 -2.514l-5.955 3.42" })] }), tablerIconProps);
 export const fullscreenIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 8v-2a2 2 0 0 1 2 -2h2" }), _jsx("path", { d: "M4 16v2a2 2 0 0 0 2 2h2" }), _jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v2" }), _jsx("path", { d: "M16 20h2a2 2 0 0 0 2 -2v-2" })] }), tablerIconProps);
-export const eyeIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" }), _jsx("path", { d: "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" })] }), tablerIconProps);
+export const eyeIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" }), _jsx("path", { d: "M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" })] }), tablerIconProps);
 export const eyeClosedIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10.585 10.587a2 2 0 0 0 2.829 2.828" }), _jsx("path", { d: "M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" }), _jsx("path", { d: "M3 3l18 18" })] }), tablerIconProps);
 export const brainIcon = createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8" }), _jsx("path", { d: "M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8" }), _jsx("path", { d: "M17.5 16a3.5 3.5 0 0 0 0 -7h-.5" }), _jsx("path", { d: "M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0" }), _jsx("path", { d: "M6.5 16a3.5 3.5 0 0 1 0 -7h.5" }), _jsx("path", { d: "M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10" })] }), tablerIconProps);
 export const searchIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" }), _jsx("path", { d: "M21 21l-6 -6" })] }), tablerIconProps);
-export const microphoneIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M9 2m0 3a3 3 0 0 1 3 -3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3z" }), _jsx("path", { d: "M5 10a7 7 0 0 0 14 0" }), _jsx("path", { d: "M8 21l8 0" }), _jsx("path", { d: "M12 17l0 4" })] }), tablerIconProps);
-export const microphoneMutedIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 3l18 18" }), _jsx("path", { d: "M9 5a3 3 0 0 1 6 0v5a3 3 0 0 1 -.13 .874m-2 2a3 3 0 0 1 -3.87 -2.872v-1" }), _jsx("path", { d: "M5 10a7 7 0 0 0 10.846 5.85m2 -2a6.967 6.967 0 0 0 1.152 -3.85" }), _jsx("path", { d: "M8 21l8 0" }), _jsx("path", { d: "M12 17l0 4" })] }), tablerIconProps);

package/dist/excalidraw/constants.d.ts

@@ -8,7 +8,6 @@ export declare const isChrome: boolean;
 export declare const isSafari: boolean;
 export declare const isIOS: boolean;
 export declare const isBrave: () => boolean;
-export declare const supportsResizeObserver: boolean;
 export declare const APP_NAME = "Excalidraw";
 export declare const DRAGGING_THRESHOLD = 10;
 export declare const LINE_CONFIRM_THRESHOLD = 8;
@@ -124,7 +123,6 @@ export declare const DEFAULT_ZOOM_VALUE: NormalizedZoomValue;
 export declare const COLOR_WHITE = "#ffffff";
 export declare const COLOR_CHARCOAL_BLACK = "#1e1e1e";
 export declare const COLOR_TRANSPARENT = "transparent";
-export declare const COLOR_VOICE_CALL = "#a2f1a6";
 export declare const CANVAS_ONLY_ACTIONS: string[];
 export declare const GRID_SIZE = 20;
 export declare const IMAGE_MIME_TYPES: {
@@ -224,6 +222,9 @@ export declare const ROUNDNESS: {
     readonly PROPORTIONAL_RADIUS: 2;
     readonly ADAPTIVE_RADIUS: 3;
 };
+/** key containt id of precedeing elemnt id we use in reconciliation during
+ * collaboration */
+export declare const PRECEDING_ELEMENT_KEY = "__precedingElement__";
 export declare const ROUGHNESS: {
     readonly architect: 0;
     readonly artist: 1;

package/dist/excalidraw/constants.js

@@ -11,7 +11,6 @@ export const isIOS = /iPad|iPhone/.test(navigator.platform) ||
     (navigator.userAgent.includes("Mac") && "ontouchend" in document);
 // keeping function so it can be mocked in test
 export const isBrave = () => navigator.brave?.isBrave?.name === "isBrave";
-export const supportsResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
 export const APP_NAME = "Excalidraw";
 export const DRAGGING_THRESHOLD = 10; // px
 export const LINE_CONFIRM_THRESHOLD = 8; // px
@@ -132,8 +131,6 @@ export const COLOR_WHITE = "#ffffff";
 export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
 export const COLOR_TRANSPARENT = "transparent";
 // -----------------------------------------------
-// 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?
 export const IMAGE_MIME_TYPES = {
@@ -266,6 +263,9 @@ export const ROUNDNESS = {
     // (see DEFAULT_ADAPTIVE_RADIUS constant)
     ADAPTIVE_RADIUS: 3,
 };
+/** key containt id of precedeing elemnt id we use in reconciliation during
+ * collaboration */
+export const PRECEDING_ELEMENT_KEY = "__precedingElement__";
 export const ROUGHNESS = {
     architect: 0,
     artist: 1,

package/dist/excalidraw/data/restore.d.ts

@@ -1,17 +1,17 @@
-import { ExcalidrawElement, OrderedExcalidrawElement } from "../element/types";
+import { ExcalidrawElement } from "../element/types";
 import { AppState, BinaryFiles, LibraryItem } from "../types";
 import { ImportedDataState } from "./types";
 type RestoredAppState = Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
 export declare const AllowedExcalidrawActiveTools: Record<AppState["activeTool"]["type"], boolean>;
 export type RestoredDataState = {
-    elements: OrderedExcalidrawElement[];
+    elements: ExcalidrawElement[];
     appState: RestoredAppState;
     files: BinaryFiles;
 };
 export declare const restoreElements: (elements: ImportedDataState["elements"], localElements: readonly ExcalidrawElement[] | null | undefined, opts?: {
     refreshDimensions?: boolean;
     repairBindings?: boolean;
-} | undefined) => OrderedExcalidrawElement[];
+} | undefined) => ExcalidrawElement[];
 export declare const restoreAppState: (appState: ImportedDataState["appState"], localAppState: Partial<AppState> | null | undefined) => RestoredAppState;
 export declare const restore: (data: Pick<ImportedDataState, "appState" | "elements" | "files"> | null, localAppState: Partial<AppState> | null | undefined, localElements: readonly ExcalidrawElement[] | null | undefined, elementsConfig?: {
     refreshDimensions?: boolean;

package/dist/excalidraw/data/restore.js

@@ -1,7 +1,7 @@
 import { getNonDeletedElements, getNormalizedDimensions, isInvisiblySmallElement, refreshTextDimensions, } from "../element";
 import { isTextElement, isUsingAdaptiveRadius } from "../element/typeChecks";
 import { randomId } from "../random";
-import { DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, FONT_FAMILY, ROUNDNESS, DEFAULT_SIDEBAR, DEFAULT_ELEMENT_PROPS, } from "../constants";
+import { DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, PRECEDING_ELEMENT_KEY, FONT_FAMILY, ROUNDNESS, DEFAULT_SIDEBAR, DEFAULT_ELEMENT_PROPS, } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
@@ -9,7 +9,6 @@ import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 import { detectLineHeight, getContainerElement, getDefaultLineHeight, } from "../element/textElement";
 import { normalizeLink } from "./url";
-import { syncInvalidIndices } from "../fractionalIndex";
 export const AllowedExcalidrawActiveTools = {
     selection: true,
     text: true,
@@ -47,7 +46,6 @@ const restoreElementWithProperties = (element, extra) => {
         // newly added elements
         version: element.version || 1,
         versionNonce: element.versionNonce ?? 0,
-        index: element.index ?? null,
         isDeleted: element.isDeleted ?? false,
         id: element.id || randomId(),
         fillStyle: element.fillStyle || DEFAULT_ELEMENT_PROPS.fillStyle,
@@ -87,6 +85,9 @@ const restoreElementWithProperties = (element, extra) => {
         base.customData =
             "customData" in extra ? extra.customData : element.customData;
     }
+    if (PRECEDING_ELEMENT_KEY in element) {
+        base[PRECEDING_ELEMENT_KEY] = element[PRECEDING_ELEMENT_KEY];
+    }
     return {
         ...base,
         ...getNormalizedDimensions(base),
@@ -274,7 +275,7 @@ localElements, opts) => {
     // used to detect duplicate top-level element ids
     const existingIds = new Set();
     const localElementsMap = localElements ? arrayToMap(localElements) : null;
-    const restoredElements = syncInvalidIndices((elements || []).reduce((elements, element) => {
+    const restoredElements = (elements || []).reduce((elements, element) => {
         // filtering out selection, which is legacy, no longer kept in elements,
         // and causing issues if retained
         if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
@@ -292,7 +293,7 @@ localElements, opts) => {
             }
         }
         return elements;
-    }, []));
+    }, []);
     if (!opts?.repairBindings) {
         return restoredElements;
     }

package/dist/excalidraw/data/transform.d.ts

@@ -78,4 +78,4 @@ export type ExcalidrawElementSkeleton = Extract<Exclude<ExcalidrawElement, Excal
 } & Partial<ExcalidrawMagicFrameElement>);
 export declare const convertToExcalidrawElements: (elementsSkeleton: ExcalidrawElementSkeleton[] | null, opts?: {
     regenerateIds: boolean;
-}) => import("../element/types").OrderedExcalidrawElement[];
+}) => ExcalidrawElement[];