@dwelle/excalidraw 0.5.0-bb58eff → 0.5.0-bcfbd91

package/dist/excalidraw/data/transform.js

@@ -3,10 +3,9 @@ import { getCommonBounds, newElement, newLinearElement, redrawTextBoundingBox, }
 import { bindLinearElement } from "../element/binding";
 import { newFrameElement, newImageElement, newMagicFrameElement, newTextElement, } from "../element/newElement";
 import { getDefaultLineHeight, measureText, normalizeText, } from "../element/textElement";
-import { arrayToMap, assertNever, cloneJSON, getFontString, toBrandedType, } from "../utils";
+import { assertNever, cloneJSON, getFontString, toBrandedType } from "../utils";
 import { getSizeFromPoints } from "../points";
 import { randomId } from "../random";
-import { syncInvalidIndices } from "../fractionalIndex";
 const DEFAULT_LINEAR_ELEMENT_PROPS = {
     width: 100,
     height: 0,
@@ -207,10 +206,10 @@ class ElementStore {
         this.excalidrawElements.set(ele.id, ele);
     };
     getElements = () => {
-        return syncInvalidIndices(Array.from(this.excalidrawElements.values()));
+        return Array.from(this.excalidrawElements.values());
     };
     getElementsMap = () => {
-        return toBrandedType(arrayToMap(this.getElements()));
+        return toBrandedType(this.excalidrawElements);
     };
     getElement = (id) => {
         return this.excalidrawElements.get(id);

package/dist/excalidraw/element/embeddable.d.ts

@@ -136,9 +136,6 @@ export declare const actionSetEmbeddableAsActiveTool: {
                 id?: string | undefined;
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("./types").ChartType;

package/dist/excalidraw/element/linearElementEditor.d.ts

@@ -242,15 +242,11 @@ export declare class LinearElementEditor {
                 color?: {
                     background: string;
                     stroke: string;
-                } | undefined; /** index */
+                } | undefined;
                 avatarUrl?: string | undefined;
                 id?: string | undefined;
-                /** whether you're dragging a point */
                 socketId?: import("../types").SocketId | undefined;
                 isCurrentUser?: boolean | undefined;
-                isInCall?: boolean | undefined;
-                isSpeaking?: boolean | undefined;
-                isMuted?: boolean | undefined;
             }>>;
             showStats: boolean;
             currentChartType: import("./types").ChartType;

package/dist/excalidraw/element/newElement.d.ts

@@ -1,7 +1,7 @@
 import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawIframeElement, ElementsMap } from "./types";
 import { AppState } from "../types";
 import { MarkOptional, Mutable } from "../utility-types";
-export type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "frameId" | "index" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity" | "customData">;
+export type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "frameId" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity" | "customData">;
 export declare const newElement: (opts: {
     type: ExcalidrawGenericElement["type"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawGenericElement>;

package/dist/excalidraw/element/newElement.js

@@ -7,7 +7,7 @@ import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 import { measureText, normalizeText, wrapText, getBoundTextMaxWidth, getDefaultLineHeight, } from "./textElement";
 import { DEFAULT_ELEMENT_PROPS, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, VERTICAL_ALIGN, } from "../constants";
-const _newElementBase = (type, { x, y, strokeColor = DEFAULT_ELEMENT_PROPS.strokeColor, backgroundColor = DEFAULT_ELEMENT_PROPS.backgroundColor, fillStyle = DEFAULT_ELEMENT_PROPS.fillStyle, strokeWidth = DEFAULT_ELEMENT_PROPS.strokeWidth, strokeStyle = DEFAULT_ELEMENT_PROPS.strokeStyle, roughness = DEFAULT_ELEMENT_PROPS.roughness, opacity = DEFAULT_ELEMENT_PROPS.opacity, width = 0, height = 0, angle = 0, groupIds = [], frameId = null, index = null, roundness = null, boundElements = null, link = null, locked = DEFAULT_ELEMENT_PROPS.locked, ...rest }) => {
+const _newElementBase = (type, { x, y, strokeColor = DEFAULT_ELEMENT_PROPS.strokeColor, backgroundColor = DEFAULT_ELEMENT_PROPS.backgroundColor, fillStyle = DEFAULT_ELEMENT_PROPS.fillStyle, strokeWidth = DEFAULT_ELEMENT_PROPS.strokeWidth, strokeStyle = DEFAULT_ELEMENT_PROPS.strokeStyle, roughness = DEFAULT_ELEMENT_PROPS.roughness, opacity = DEFAULT_ELEMENT_PROPS.opacity, width = 0, height = 0, angle = 0, groupIds = [], frameId = null, roundness = null, boundElements = null, link = null, locked = DEFAULT_ELEMENT_PROPS.locked, ...rest }) => {
     // assign type to guard against excess properties
     const element = {
         id: rest.id || randomId(),
@@ -26,7 +26,6 @@ const _newElementBase = (type, { x, y, strokeColor = DEFAULT_ELEMENT_PROPS.strok
         opacity,
         groupIds,
         frameId,
-        index,
         roundness,
         seed: rest.seed ?? randomInteger(),
         version: rest.version || 1,

package/dist/excalidraw/element/types.d.ts

@@ -18,9 +18,6 @@ export type StrokeStyle = "solid" | "dashed" | "dotted";
 export type TextAlign = typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
 type VerticalAlignKeys = keyof typeof VERTICAL_ALIGN;
 export type VerticalAlign = typeof VERTICAL_ALIGN[VerticalAlignKeys];
-export type FractionalIndex = string & {
-    _brand: "franctionalIndex";
-};
 type _ExcalidrawElementBase = Readonly<{
     id: string;
     x: number;
@@ -49,11 +46,6 @@ type _ExcalidrawElementBase = Readonly<{
         Used for deterministic reconciliation of updates during collaboration,
         in case the versions (see above) are identical. */
     versionNonce: number;
-    /** String in a fractional form defined by https://github.com/rocicorp/fractional-indexing.
-        Used for ordering in multiplayer scenarios, such as during reconciliation or undo / redo.
-        Always kept in sync with the array order by `syncMovedIndices` and `syncInvalidIndices`.
-        Could be null, i.e. for new elements which were not yet assigned to the scene. */
-    index: FractionalIndex | null;
     isDeleted: boolean;
     /** List of groups the element belongs to.
         Ordered from deepest to shallowest. */
@@ -133,10 +125,6 @@ export type ExcalidrawGenericElement = ExcalidrawSelectionElement | ExcalidrawRe
  * between peers and contain no state local to the peer.
  */
 export type ExcalidrawElement = ExcalidrawGenericElement | ExcalidrawTextElement | ExcalidrawLinearElement | ExcalidrawFreeDrawElement | ExcalidrawImageElement | ExcalidrawFrameElement | ExcalidrawMagicFrameElement | ExcalidrawIframeElement | ExcalidrawEmbeddableElement;
-export type Ordered<TElement extends ExcalidrawElement> = TElement & {
-    index: FractionalIndex;
-};
-export type OrderedExcalidrawElement = Ordered<ExcalidrawElement>;
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
     isDeleted: boolean;
 };
@@ -207,11 +195,11 @@ export type NonDeletedElementsMap = Map<ExcalidrawElement["id"], NonDeletedExcal
  * Map of all excalidraw Scene elements, including deleted.
  * Not a subset. Use this type when you need access to current Scene elements.
  */
-export type SceneElementsMap = Map<ExcalidrawElement["id"], Ordered<ExcalidrawElement>> & MakeBrand<"SceneElementsMap">;
+export type SceneElementsMap = Map<ExcalidrawElement["id"], ExcalidrawElement> & MakeBrand<"SceneElementsMap">;
 /**
  * Map of all non-deleted Scene elements.
  * Not a subset. Use this type when you need access to current Scene elements.
  */
-export type NonDeletedSceneElementsMap = Map<ExcalidrawElement["id"], Ordered<NonDeletedExcalidrawElement>> & MakeBrand<"NonDeletedSceneElementsMap">;
+export type NonDeletedSceneElementsMap = Map<ExcalidrawElement["id"], NonDeletedExcalidrawElement> & MakeBrand<"NonDeletedSceneElementsMap">;
 export type ElementsMapOrArray = readonly ExcalidrawElement[] | Readonly<ElementsMap>;
 export {};

package/dist/excalidraw/errors.d.ts

@@ -10,7 +10,4 @@ export declare class ImageSceneDataError extends Error {
     code: ImageSceneDataErrorCode;
     constructor(message?: string, code?: ImageSceneDataErrorCode);
 }
-export declare class InvalidFractionalIndexError extends Error {
-    code: "ELEMENT_HAS_INVALID_INDEX";
-}
 export {};

package/dist/excalidraw/errors.js

@@ -18,6 +18,3 @@ export class ImageSceneDataError extends Error {
         this.code = code;
     }
 }
-export class InvalidFractionalIndexError extends Error {
-    code = "ELEMENT_HAS_INVALID_INDEX";
-}

package/dist/excalidraw/frame.d.ts

@@ -2,7 +2,7 @@ import { ElementsMap, ElementsMapOrArray, ExcalidrawElement, ExcalidrawFrameLike
 import { AppClassProperties, AppState, StaticCanvasAppState } from "./types";
 import type { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
 import { ReadonlySetLike } from "./utility-types";
-export declare const bindElementsToFramesAfterDuplication: (nextElements: readonly ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
+export declare const bindElementsToFramesAfterDuplication: (nextElements: ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
 export declare function isElementIntersectingFrame(element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap): boolean;
 export declare const getElementsCompletelyInFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => ExcalidrawElement[];
 export declare const isElementContainingFrame: (elements: readonly ExcalidrawElement[], element: ExcalidrawElement, frame: ExcalidrawFrameLikeElement, elementsMap: ElementsMap) => boolean;

package/dist/excalidraw/laser-trails.js

@@ -63,7 +63,7 @@ export class LaserTrails {
                 trail = new AnimatedTrail(this.animationFrameHandler, this.app, {
                     ...this.getTrailOptions(),
                     fill: () => collaborator.pointer?.laserColor ||
-                        getClientColor(key, collaborator),
+                        getClientColor(collaborator.id || key),
                 });
                 trail.start(this.container);
                 this.collabTrails.set(key, trail);

package/dist/excalidraw/locales/en.json

@@ -536,10 +536,7 @@
         },
         "hint": {
             "text": "Click on user to follow",
-            "followStatus": "You're currently following this user",
-            "inCall": "User is in a voice call",
-            "micMuted": "User's microphone is muted",
-            "isSpeaking": "User is speaking"
+            "followStatus": "You're currently following this user"
         }
     }
 }

package/dist/excalidraw/renderer/interactiveScene.js

@@ -2,10 +2,11 @@ import { getElementAbsoluteCoords, OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransfor
 import { roundRect } from "../renderer/roundRect";
 import { getScrollBars, SCROLLBAR_COLOR, SCROLLBAR_WIDTH, } from "../scene/scrollbars";
 import { renderSelectionElement } from "../renderer/renderElement";
-import { getClientColor, renderRemoteCursors } from "../clients";
+import { getClientColor } from "../clients";
 import { isSelectedViaGroup, getSelectedGroupIds, getElementsInGroup, selectGroupsFromGivenElements, } from "../groups";
 import { OMIT_SIDES_FOR_FRAME, shouldShowBoundingBox, } from "../element/transformHandles";
 import { arrayToMap, throttleRAF } from "../utils";
+import { UserIdleState } from "../types";
 import { DEFAULT_TRANSFORM_HANDLE_SPACING, FRAME_STYLE } from "../constants";
 import { renderSnaps } from "../renderer/renderSnaps";
 import { maxBindingGap } from "../element/collision";
@@ -349,10 +350,10 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
                     selectionColors.push(selectionColor);
                 }
                 // remote users
-                const remoteClients = renderConfig.remoteSelectedElementIds.get(element.id);
-                if (remoteClients) {
-                    selectionColors.push(...remoteClients.map((socketId) => {
-                        const background = getClientColor(socketId, appState.collaborators.get(socketId));
+                if (renderConfig.remoteSelectedElementIds[element.id]) {
+                    selectionColors.push(...renderConfig.remoteSelectedElementIds[element.id].map((socketId) => {
+                        const { id } = renderConfig.remotePointerViewportCoords[socketId];
+                        const background = getClientColor(id);
                         return background;
                     }));
                 }
@@ -365,7 +366,7 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
                         elementX2,
                         elementY2,
                         selectionColors,
-                        dashed: !!remoteClients,
+                        dashed: !!renderConfig.remoteSelectedElementIds[element.id],
                         cx,
                         cy,
                         activeEmbeddable: appState.activeEmbeddable?.element === element &&
@@ -432,13 +433,118 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
     renderSnaps(context, appState);
     // Reset zoom
     context.restore();
-    renderRemoteCursors({
-        context,
-        renderConfig,
-        appState,
-        normalizedWidth,
-        normalizedHeight,
-    });
+    // Paint remote pointers
+    for (const clientId in renderConfig.remotePointerViewportCoords) {
+        let { x, y, id } = 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(id);
+        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();
+    }
     // Paint scrollbars
     let scrollBars;
     if (renderConfig.renderScrollbars) {

package/dist/excalidraw/renderer/staticScene.js

@@ -9,11 +9,10 @@ import { bootstrapCanvas, getNormalizedCanvasDimensions } from "./helpers";
 import { throttleRAF } from "../utils";
 const strokeGrid = (context, gridSize, scrollX, scrollY, zoom, width, height) => {
     const BOLD_LINE_FREQUENCY = 5;
-    let GridLineColor;
-    (function (GridLineColor) {
-        GridLineColor["Bold"] = "#cccccc";
-        GridLineColor["Regular"] = "#e5e5e5";
-    })(GridLineColor || (GridLineColor = {}));
+    const GridLineColor = {
+        Bold: "#cccccc",
+        Regular: "#e5e5e5",
+    };
     const offsetX = -Math.round(zoom.value / gridSize) * gridSize + (scrollX % gridSize);
     const offsetY = -Math.round(zoom.value / gridSize) * gridSize + (scrollY % gridSize);
     const lineWidth = Math.min(1 / zoom.value, 1);

package/dist/excalidraw/scene/Scene.d.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement, ElementsMapOrArray, OrderedExcalidrawElement, Ordered } from "../element/types";
+import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted, ExcalidrawFrameLikeElement, ElementsMapOrArray } from "../element/types";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { AppState } from "../types";
 type ElementIdKey = InstanceType<typeof LinearElementEditor>["elementId"];
@@ -20,10 +20,10 @@ declare class Scene {
     private elementsMap;
     private selectedElementsCache;
     private versionNonce;
-    getElementsMapIncludingDeleted(): Map<string, Ordered<ExcalidrawElement>> & import("../utility-types").MakeBrand<"SceneElementsMap">;
-    getNonDeletedElementsMap(): Map<string, Ordered<NonDeletedExcalidrawElement>> & import("../utility-types").MakeBrand<"NonDeletedSceneElementsMap">;
-    getElementsIncludingDeleted(): readonly OrderedExcalidrawElement[];
-    getNonDeletedElements(): readonly Ordered<NonDeletedExcalidrawElement>[];
+    getElementsMapIncludingDeleted(): Map<string, ExcalidrawElement> & import("../utility-types").MakeBrand<"SceneElementsMap">;
+    getNonDeletedElementsMap(): Map<string, NonDeletedExcalidrawElement> & import("../utility-types").MakeBrand<"NonDeletedSceneElementsMap">;
+    getElementsIncludingDeleted(): readonly ExcalidrawElement[];
+    getNonDeletedElements(): readonly NonDeletedExcalidrawElement[];
     getFramesIncludingDeleted(): readonly ExcalidrawFrameLikeElement[];
     getSelectedElements(opts: {
         selectedElementIds: AppState["selectedElementIds"];
@@ -59,8 +59,7 @@ declare class Scene {
     destroy(): void;
     insertElementAtIndex(element: ExcalidrawElement, index: number): void;
     insertElementsAtIndex(elements: ExcalidrawElement[], index: number): void;
-    insertElement: (element: ExcalidrawElement) => void;
-    insertElements: (elements: ExcalidrawElement[]) => void;
+    addNewElement: (element: ExcalidrawElement) => void;
     getElementIndex(elementId: string): number;
     getContainerElement: (element: (ExcalidrawElement & {
         containerId: ExcalidrawElement["id"] | null;

package/dist/excalidraw/scene/Scene.js

@@ -2,10 +2,7 @@ import { isNonDeletedElement } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
 import { getSelectedElements } from "./selection";
 import { randomInteger } from "../random";
-import { syncInvalidIndices, syncMovedIndices, validateFractionalIndices, } from "../fractionalIndex";
-import { arrayToMap } from "../utils";
 import { toBrandedType } from "../utils";
-import { ENV } from "../constants";
 const getNonDeletedElements = (allElements) => {
     const elementsMap = new Map();
     const elements = [];
@@ -62,7 +59,6 @@ class Scene {
     callbacks = new Set();
     nonDeletedElements = [];
     nonDeletedElementsMap = toBrandedType(new Map());
-    // ideally all elements within the scene should be wrapped around with `Ordered` type, but right now there is no real benefit doing so
     elements = [];
     nonDeletedFramesLikes = [];
     frames = [];
@@ -155,17 +151,12 @@ class Scene {
         return didChange;
     }
     replaceAllElements(nextElements) {
-        const _nextElements = 
-        // ts doesn't like `Array.isArray` of `instanceof Map`
-        nextElements instanceof Array
-            ? nextElements
-            : Array.from(nextElements.values());
+        this.elements =
+            // ts doesn't like `Array.isArray` of `instanceof Map`
+            nextElements instanceof Array
+                ? nextElements
+                : Array.from(nextElements.values());
         const nextFrameLikes = [];
-        if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
-            // throw on invalid indices in test / dev to potentially detect cases were we forgot to sync moved elements
-            validateFractionalIndices(_nextElements.map((x) => x.index));
-        }
-        this.elements = syncInvalidIndices(_nextElements);
         this.elementsMap.clear();
         this.elements.forEach((element) => {
             if (isFrameLikeElement(element)) {
@@ -200,8 +191,8 @@ class Scene {
         };
     }
     destroy() {
-        this.elements = [];
         this.nonDeletedElements = [];
+        this.elements = [];
         this.nonDeletedFramesLikes = [];
         this.frames = [];
         this.elementsMap.clear();
@@ -226,7 +217,6 @@ class Scene {
             element,
             ...this.elements.slice(index),
         ];
-        syncMovedIndices(nextElements, arrayToMap([element]));
         this.replaceAllElements(nextElements);
     }
     insertElementsAtIndex(elements, index) {
@@ -238,20 +228,15 @@ class Scene {
             ...elements,
             ...this.elements.slice(index),
         ];
-        syncMovedIndices(nextElements, arrayToMap(elements));
         this.replaceAllElements(nextElements);
     }
-    insertElement = (element) => {
-        const index = element.frameId
-            ? this.getElementIndex(element.frameId)
-            : this.elements.length;
-        this.insertElementAtIndex(element, index);
-    };
-    insertElements = (elements) => {
-        const index = elements[0].frameId
-            ? this.getElementIndex(elements[0].frameId)
-            : this.elements.length;
-        this.insertElementsAtIndex(elements, index);
+    addNewElement = (element) => {
+        if (element.frameId) {
+            this.insertElementAtIndex(element, this.getElementIndex(element.frameId));
+        }
+        else {
+            this.replaceAllElements([...this.elements, element]);
+        }
     };
     getElementIndex(elementId) {
         return this.elements.findIndex((element) => element.id === elementId);

package/dist/excalidraw/scene/export.js

@@ -11,7 +11,6 @@ import { getElementsOverlappingFrame, getFrameLikeElements, getFrameLikeTitle, g
 import { newTextElement } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { isFrameElement, isFrameLikeElement } from "../element/typeChecks";
-import { syncInvalidIndices } from "../fractionalIndex";
 import { renderStaticScene } from "../renderer/staticScene";
 const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
 const truncateText = (element, maxWidth) => {
@@ -301,7 +300,7 @@ export const exportToCanvas = async ({ data, config, }) => {
         canvas,
         rc: rough.canvas(canvas),
         elementsMap: toBrandedType(arrayToMap(elementsForRender)),
-        allElementsMap: toBrandedType(arrayToMap(syncInvalidIndices(elements))),
+        allElementsMap: toBrandedType(arrayToMap(elements)),
         visibleElements: elementsForRender,
         appState: {
             ...appState,

package/dist/excalidraw/scene/types.d.ts

@@ -1,7 +1,7 @@
 import type { RoughCanvas } from "roughjs/bin/canvas";
 import { Drawable } from "roughjs/bin/core";
-import { ExcalidrawElement, ExcalidrawTextElement, NonDeletedElementsMap, NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../element/types";
-import { AppClassProperties, AppState, EmbedsValidationStatus, ElementsPendingErasure, InteractiveCanvasAppState, StaticCanvasAppState, SocketId, UserIdleState } from "../types";
+import { ExcalidrawTextElement, NonDeletedElementsMap, NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../element/types";
+import { AppClassProperties, AppState, EmbedsValidationStatus, ElementsPendingErasure, InteractiveCanvasAppState, StaticCanvasAppState } from "../types";
 import { MakeBrand } from "../utility-types";
 export type RenderableElementsMap = NonDeletedElementsMap & MakeBrand<"RenderableElementsMap">;
 export type StaticCanvasRenderConfig = {
@@ -26,14 +26,25 @@ export type SVGRenderConfig = {
     embedsValidationStatus: EmbedsValidationStatus;
 };
 export type InteractiveCanvasRenderConfig = {
-    remoteSelectedElementIds: Map<ExcalidrawElement["id"], SocketId[]>;
-    remotePointerViewportCoords: Map<SocketId, {
-        x: number;
-        y: number;
-    }>;
-    remotePointerUserStates: Map<SocketId, UserIdleState>;
-    remotePointerUsernames: Map<SocketId, string>;
-    remotePointerButton: Map<SocketId, string | undefined>;
+    remoteSelectedElementIds: {
+        [elementId: string]: string[];
+    };
+    remotePointerViewportCoords: {
+        [id: string]: {
+            x: number;
+            y: number;
+            id: string;
+        };
+    };
+    remotePointerUserStates: {
+        [id: string]: string;
+    };
+    remotePointerUsernames: {
+        [id: string]: string;
+    };
+    remotePointerButton?: {
+        [id: string]: string | undefined;
+    };
     selectionColor?: string;
     renderScrollbars?: boolean;
 };

package/dist/excalidraw/types.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement } from "./element/types";
+import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement } from "./element/types";
 import { Action } from "./actions/types";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
@@ -36,9 +36,6 @@ export type Collaborator = Readonly<{
     id?: string;
     socketId?: SocketId;
     isCurrentUser?: boolean;
-    isInCall?: boolean;
-    isSpeaking?: boolean;
-    isMuted?: boolean;
 }>;
 export type CollaboratorPointer = {
     x: number;
@@ -273,9 +270,9 @@ export interface AppState {
         y: number;
     } | null;
     objectsSnapModeEnabled: boolean;
-    /** the user's socket id & username who is being followed on the canvas */
+    /** the user's clientId & username who is being followed on the canvas */
     userToFollow: UserToFollow | null;
-    /** the socket ids of the users following the current user */
+    /** the clientIds of the users following the current user */
     followedBy: Set<SocketId>;
 }
 export type UIAppState = Omit<AppState, "suggestedBindings" | "startBoundElement" | "cursorButton" | "scrollX" | "scrollY">;
@@ -330,7 +327,7 @@ export type OnUserFollowedPayload = {
 };
 export interface ExcalidrawProps {
     id?: string | null;
-    onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles, id?: string | null) => void;
+    onChange?: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles, id?: string | null) => void;
     initialData?: MaybePromise<ExcalidrawInitialDataState | null>;
     excalidrawAPI?: (api: ExcalidrawImperativeAPI) => void;
     onHomeButtonClick?: () => void;

package/dist/excalidraw/utils.js

@@ -517,9 +517,6 @@ export const isShallowEqual = (objA, objB, comparators, debug = false) => {
     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;
     }
     if (comparators && Array.isArray(comparators)) {

package/dist/excalidraw/zindex.d.ts

@@ -1,6 +1,6 @@
 import { ExcalidrawElement } from "./element/types";
 import { AppState } from "./types";
-export declare const moveOneLeft: (allElements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[];
-export declare const moveOneRight: (allElements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[];
+export declare const moveOneLeft: (allElements: readonly ExcalidrawElement[], appState: AppState) => ExcalidrawElement[];
+export declare const moveOneRight: (allElements: readonly ExcalidrawElement[], appState: AppState) => ExcalidrawElement[];
 export declare const moveAllLeft: (allElements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[] | ExcalidrawElement[];
 export declare const moveAllRight: (allElements: readonly ExcalidrawElement[], appState: AppState) => readonly ExcalidrawElement[] | ExcalidrawElement[];