@excalidraw/excalidraw 0.17.1-1d71f84 → 0.17.1-4689a6b

package/dist/excalidraw/element/embeddable.js

@@ -7,14 +7,14 @@ import { wrapText } from "./textElement";
 import { isIframeElement } from "./typeChecks";
 const embeddedLinkCache = new Map();
 const RE_YOUTUBE = /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
-const RE_VIMEO = /^(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
+const RE_VIMEO = /^(?:http(?:s)?:\/\/)?(?:(?:w){3}\.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
 const RE_FIGMA = /^https:\/\/(?:www\.)?figma\.com/;
 const RE_GH_GIST = /^https:\/\/gist\.github\.com/;
-const RE_GH_GIST_EMBED = /^<script[\s\S]*?\ssrc=["'](https:\/\/gist.github.com\/.*?)\.js["']/i;
+const RE_GH_GIST_EMBED = /https?:\/\/gist\.github\.com\/([\w_-]+)\/([\w_-]+)\.js["']/i;
 // not anchored to start to allow <blockquote> twitter embeds
-const RE_TWITTER = /(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:twitter|x).com/;
-const RE_TWITTER_EMBED = /^<blockquote[\s\S]*?\shref=["'](https:\/\/(?:twitter|x).com\/[^"']*)/i;
-const RE_VALTOWN = /^https:\/\/(?:www\.)?val.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
+const RE_TWITTER = /(?:https?:\/\/)?(?:(?:w){3}\.)?(?:twitter|x)\.com/;
+const RE_TWITTER_EMBED = /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:twitter|x)\.com\/[^"']*)/i;
+const RE_VALTOWN = /^https:\/\/(?:www\.)?val\.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
 const RE_GENERIC_EMBED = /^<(?:iframe|blockquote)[\s\S]*?\s(?:src|href)=["']([^"']*)["'][\s\S]*?>$/i;
 const RE_GIPHY = /giphy.com\/(?:clips|embed|gifs)\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;
 const ALLOWED_DOMAINS = new Set([
@@ -117,43 +117,19 @@ export const getEmbedLink = (link) => {
     if (RE_TWITTER.test(link)) {
         // the embed srcdoc still supports twitter.com domain only
         link = link.replace(/\bx.com\b/, "twitter.com");
-        let ret;
-        // assume embed code
-        if (/<blockquote/.test(link)) {
-            const srcDoc = createSrcDoc(link);
-            ret = {
-                type: "document",
-                srcdoc: () => srcDoc,
-                intrinsicSize: { w: 480, h: 480 },
-            };
-            // assume regular tweet url
-        }
-        else {
-            ret = {
-                type: "document",
-                srcdoc: (theme) => createSrcDoc(`<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`),
-                intrinsicSize: { w: 480, h: 480 },
-            };
-        }
+        const ret = {
+            type: "document",
+            srcdoc: (theme) => createSrcDoc(`<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`),
+            intrinsicSize: { w: 480, h: 480 },
+            sandbox: { allowSameOrigin: true },
+        };
         embeddedLinkCache.set(originalLink, ret);
         return ret;
     }
     if (RE_GH_GIST.test(link)) {
-        let ret;
-        // assume embed code
-        if (/<script>/.test(link)) {
-            const srcDoc = createSrcDoc(link);
-            ret = {
-                type: "document",
-                srcdoc: () => srcDoc,
-                intrinsicSize: { w: 550, h: 720 },
-            };
-            // assume regular url
-        }
-        else {
-            ret = {
-                type: "document",
-                srcdoc: () => createSrcDoc(`
+        const ret = {
+            type: "document",
+            srcdoc: () => createSrcDoc(`
           <script src="${link}.js"></script>
           <style type="text/css">
             * { margin: 0px; }
@@ -161,9 +137,8 @@ export const getEmbedLink = (link) => {
             .gist .gist-file { height: calc(100vh - 2px); padding: 0px; display: grid; grid-template-rows: 1fr auto; }
           </style>
         `),
-                intrinsicSize: { w: 550, h: 720 },
-            };
-        }
+            intrinsicSize: { w: 550, h: 720 },
+        };
         embeddedLinkCache.set(link, ret);
         return ret;
     }
@@ -249,8 +224,8 @@ export const maybeParseEmbedSrc = (str) => {
         return twitterMatch[1];
     }
     const gistMatch = str.match(RE_GH_GIST_EMBED);
-    if (gistMatch && gistMatch.length === 2) {
-        return gistMatch[1];
+    if (gistMatch && gistMatch.length === 3) {
+        return `https://gist.github.com/${gistMatch[1]}/${gistMatch[2]}`;
     }
     if (RE_GIPHY.test(str)) {
         return `https://giphy.com/embed/${RE_GIPHY.exec(str)[1]}`;

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

@@ -2,7 +2,6 @@ import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted } from "./ty
 export { newElement, newTextElement, updateTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
 export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
 export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
-export { hitTest, isHittingElementBoundingBoxWithoutHittingElement, } from "./collision";
 export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleType, getTransformHandleTypeFromCoords, } from "./resizeTest";
 export { transformElements, getResizeOffsetXY, getResizeArrowDirection, } from "./resizeElements";
 export { dragSelectedElements, getDragOffsetXY, dragNewElement, } from "./dragElements";

package/dist/excalidraw/element/index.js

@@ -3,7 +3,6 @@ import { isLinearElementType } from "./typeChecks";
 export { newElement, newTextElement, updateTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
 export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
 export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
-export { hitTest, isHittingElementBoundingBoxWithoutHittingElement, } from "./collision";
 export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleType, getTransformHandleTypeFromCoords, } from "./resizeTest";
 export { transformElements, getResizeOffsetXY, getResizeArrowDirection, } from "./resizeElements";
 export { dragSelectedElements, getDragOffsetXY, dragNewElement, } from "./dragElements";

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer, ElementsMap, NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "./types";
+import { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer, ElementsMap, NonDeletedSceneElementsMap } from "./types";
 import { Bounds } from "./bounds";
-import { Point, AppState, PointerCoords, InteractiveCanvasAppState } from "../types";
+import { Point, AppState, PointerCoords, InteractiveCanvasAppState, AppClassProperties } from "../types";
 import History from "../history";
 declare const editorMidPointsCache: {
     version: number | null;
@@ -52,7 +52,7 @@ export declare class LinearElementEditor {
         x: number;
         y: number;
     }[]) => void, linearElementEditor: LinearElementEditor, elementsMap: NonDeletedSceneElementsMap): boolean;
-    static handlePointerUp(event: PointerEvent, editingLinearElement: LinearElementEditor, appState: AppState, elements: readonly NonDeletedExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap): LinearElementEditor;
+    static handlePointerUp(event: PointerEvent, editingLinearElement: LinearElementEditor, appState: AppState, app: AppClassProperties): LinearElementEditor;
     static getEditorMidPoints: (element: NonDeleted<ExcalidrawLinearElement>, elementsMap: ElementsMap, appState: InteractiveCanvasAppState) => (typeof editorMidPointsCache)["points"];
     static updateEditorMidPointsCache: (element: NonDeleted<ExcalidrawLinearElement>, elementsMap: ElementsMap, appState: InteractiveCanvasAppState) => void;
     static getSegmentMidpointHitCoords: (linearElementEditor: LinearElementEditor, scenePointer: {
@@ -65,7 +65,7 @@ export declare class LinearElementEditor {
     static handlePointerDown(event: React.PointerEvent<HTMLElement>, appState: AppState, history: History, scenePointer: {
         x: number;
         y: number;
-    }, linearElementEditor: LinearElementEditor, elements: readonly NonDeletedExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap): {
+    }, linearElementEditor: LinearElementEditor, app: AppClassProperties): {
         didAddPoint: boolean;
         hitElement: NonDeleted<ExcalidrawElement> | null;
         linearElementEditor: LinearElementEditor | null;
@@ -133,13 +133,13 @@ export declare class LinearElementEditor {
             isLoading: boolean;
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
-                element: NonDeletedExcalidrawElement;
+                element: import("./types").NonDeletedExcalidrawElement;
                 state: "hover" | "active";
             } | null;
-            draggingElement: NonDeletedExcalidrawElement | null;
-            resizingElement: NonDeletedExcalidrawElement | null;
+            draggingElement: import("./types").NonDeletedExcalidrawElement | null;
+            resizingElement: import("./types").NonDeletedExcalidrawElement | null;
             multiElement: NonDeleted<ExcalidrawLinearElement> | null;
-            selectionElement: NonDeletedExcalidrawElement | null;
+            selectionElement: import("./types").NonDeletedExcalidrawElement | null;
             isBindingEnabled: boolean;
             startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
             suggestedBindings: import("./binding").SuggestedBinding[];
@@ -152,7 +152,7 @@ export declare class LinearElementEditor {
             };
             editingFrame: string | null;
             elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
-            editingElement: NonDeletedExcalidrawElement | null;
+            editingElement: import("./types").NonDeletedExcalidrawElement | null;
             activeTool: {
                 lastActiveTool: import("../types").ActiveTool | null;
                 locked: boolean;
@@ -234,7 +234,7 @@ export declare class LinearElementEditor {
             offsetLeft: number;
             fileHandle: import("browser-fs-access").FileSystemHandle | null;
             collaborators: Map<import("../types").SocketId, Readonly<{
-                pointer?: import("../types").CollaboratorPointer | undefined;
+                pointer?: import("../types").CollaboratorPointer | undefined; /** indices */
                 button?: "up" | "down" | undefined;
                 selectedElementIds?: Readonly<{
                     [id: string]: true;

package/dist/excalidraw/element/linearElementEditor.js

@@ -163,7 +163,8 @@ export class LinearElementEditor {
         }
         return false;
     }
-    static handlePointerUp(event, editingLinearElement, appState, elements, elementsMap) {
+    static handlePointerUp(event, editingLinearElement, appState, app) {
+        const elementsMap = app.scene.getNonDeletedElementsMap();
         const { elementId, selectedPointsIndices, isDragging, pointerDownState } = editingLinearElement;
         const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element) {
@@ -185,7 +186,7 @@ export class LinearElementEditor {
                         ]);
                     }
                     const bindingElement = isBindingEnabled(appState)
-                        ? getHoveredElementForBinding(tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(element, selectedPoint, elementsMap)), elements, elementsMap)
+                        ? getHoveredElementForBinding(tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(element, selectedPoint, elementsMap)), app)
                         : null;
                     bindings[selectedPoint === 0 ? "startBindingElement" : "endBindingElement"] = bindingElement;
                 }
@@ -313,7 +314,8 @@ export class LinearElementEditor {
         }
         return -1;
     }
-    static handlePointerDown(event, appState, history, scenePointer, linearElementEditor, elements, elementsMap) {
+    static handlePointerDown(event, appState, history, scenePointer, linearElementEditor, app) {
+        const elementsMap = app.scene.getNonDeletedElementsMap();
         const ret = {
             didAddPoint: false,
             hitElement: null,
@@ -357,7 +359,7 @@ export class LinearElementEditor {
                 },
                 selectedPointsIndices: [element.points.length - 1],
                 lastUncommittedPoint: null,
-                endBindingElement: getHoveredElementForBinding(scenePointer, elements, elementsMap),
+                endBindingElement: getHoveredElementForBinding(scenePointer, app),
             };
             ret.didAddPoint = true;
             return ret;

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" | "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" | "index" | "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, 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, index = 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,6 +26,7 @@ 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/textElement.d.ts

@@ -61,7 +61,6 @@ export declare const getBoundTextElementPosition: (container: ExcalidrawElement,
 } | undefined;
 export declare const shouldAllowVerticalAlign: (selectedElements: NonDeletedExcalidrawElement[], elementsMap: ElementsMap) => boolean;
 export declare const suppportsHorizontalAlign: (selectedElements: NonDeletedExcalidrawElement[], elementsMap: ElementsMap) => boolean;
-export declare const getTextBindableContainerAtPosition: (elements: readonly ExcalidrawElement[], appState: AppState, x: number, y: number, elementsMap: ElementsMap) => ExcalidrawTextContainer | null;
 declare const VALID_CONTAINER_TYPES: Set<string>;
 export declare const isValidTextContainer: (element: {
     type: ExcalidrawElementType;

package/dist/excalidraw/element/textElement.js

@@ -4,10 +4,6 @@ import { ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO, ARROW_LABEL_WIDTH_FRACTION, B
 import { isTextElement } from ".";
 import { isBoundToContainer, isArrowElement } from "./typeChecks";
 import { LinearElementEditor } from "./linearElementEditor";
-import { isTextBindableContainer } from "./typeChecks";
-import { getElementAbsoluteCoords } from ".";
-import { getSelectedElements } from "../scene";
-import { isHittingElementNotConsideringBoundingBox } from "./collision";
 import { resetOriginalContainerCache, updateOriginalContainerCache, } from "./containerCache";
 export const normalizeText = (text) => {
     return (normalizeEOL(text)
@@ -540,32 +536,6 @@ export const suppportsHorizontalAlign = (selectedElements, elementsMap) => {
         return isTextElement(element);
     });
 };
-export const getTextBindableContainerAtPosition = (elements, appState, x, y, elementsMap) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    if (selectedElements.length === 1) {
-        return isTextBindableContainer(selectedElements[0], false)
-            ? selectedElements[0]
-            : null;
-    }
-    let hitElement = null;
-    // We need to to hit testing from front (end of the array) to back (beginning of the array)
-    for (let index = elements.length - 1; index >= 0; --index) {
-        if (elements[index].isDeleted) {
-            continue;
-        }
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(elements[index], elementsMap);
-        if (isArrowElement(elements[index]) &&
-            isHittingElementNotConsideringBoundingBox(elements[index], appState, null, [x, y], elementsMap)) {
-            hitElement = elements[index];
-            break;
-        }
-        else if (x1 < x && x < x2 && y1 < y && y < y2) {
-            hitElement = elements[index];
-            break;
-        }
-    }
-    return isTextBindableContainer(hitElement, false) ? hitElement : null;
-};
 const VALID_CONTAINER_TYPES = new Set([
     "rectangle",
     "ellipse",

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

@@ -18,6 +18,9 @@ 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;
@@ -46,6 +49,11 @@ 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. */
@@ -90,6 +98,9 @@ export type IframeData = ({
         h: number;
     };
     error?: Error;
+    sandbox?: {
+        allowSameOrigin?: boolean;
+    };
 } & ({
     type: "video" | "generic";
     link: string;
@@ -125,6 +136,10 @@ 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;
 };
@@ -195,11 +210,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"], ExcalidrawElement> & MakeBrand<"SceneElementsMap">;
+export type SceneElementsMap = Map<ExcalidrawElement["id"], Ordered<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"], NonDeletedExcalidrawElement> & MakeBrand<"NonDeletedSceneElementsMap">;
+export type NonDeletedSceneElementsMap = Map<ExcalidrawElement["id"], Ordered<NonDeletedExcalidrawElement>> & MakeBrand<"NonDeletedSceneElementsMap">;
 export type ElementsMapOrArray = readonly ExcalidrawElement[] | Readonly<ElementsMap>;
 export {};

package/dist/excalidraw/errors.d.ts

@@ -10,4 +10,7 @@ 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,3 +18,6 @@ export class ImageSceneDataError extends Error {
         this.code = code;
     }
 }
+export class InvalidFractionalIndexError extends Error {
+    code = "ELEMENT_HAS_INVALID_INDEX";
+}

package/dist/excalidraw/fractionalIndex.d.ts

@@ -0,0 +1,40 @@
+import { ExcalidrawElement, OrderedExcalidrawElement } from "./element/types";
+/**
+ * Envisioned relation between array order and fractional indices:
+ *
+ * 1) Array (or array-like ordered data structure) should be used as a cache of elements order, hiding the internal fractional indices implementation.
+ * - it's undesirable to to perform reorder for each related operation, thefeore it's necessary to cache the order defined by fractional indices into an ordered data structure
+ * - it's easy enough to define the order of the elements from the outside (boundaries), without worrying about the underlying structure of fractional indices (especially for the host apps)
+ * - it's necessary to always keep the array support for backwards compatibility (restore) - old scenes, old libraries, supporting multiple excalidraw versions etc.
+ * - it's necessary to always keep the fractional indices in sync with the array order
+ * - elements with invalid indices should be detected and synced, without altering the already valid indices
+ *
+ * 2) Fractional indices should be used to reorder the elements, whenever the cached order is expected to be invalidated.
+ * - as the fractional indices are encoded as part of the elements, it opens up possibilties for incremental-like APIs
+ * - re-order based on fractional indices should be part of (multiplayer) operations such as reconcillitation & undo/redo
+ * - technically all the z-index actions could perform also re-order based on fractional indices,but in current state it would not bring much benefits,
+ *   as it's faster & more efficient to perform re-order based on array manipulation and later synchronisation of moved indices with the array order
+ */
+/**
+ * Ensure that all elements have valid fractional indices.
+ *
+ * @throws `InvalidFractionalIndexError` if invalid index is detected.
+ */
+export declare const validateFractionalIndices: (indices: (ExcalidrawElement["index"] | undefined)[]) => void;
+/**
+ * Order the elements based on the fractional indices.
+ * - when fractional indices are identical, break the tie based on the element id
+ * - when there is no fractional index in one of the elements, respect the order of the array
+ */
+export declare const orderByFractionalIndex: (elements: OrderedExcalidrawElement[]) => OrderedExcalidrawElement[];
+/**
+ * Synchronizes invalid fractional indices of moved elements with the array order by mutating passed elements.
+ * If the synchronization fails or the result is invalid, it fallbacks to `syncInvalidIndices`.
+ */
+export declare const syncMovedIndices: (elements: readonly ExcalidrawElement[], movedElements: Map<string, ExcalidrawElement>) => OrderedExcalidrawElement[];
+/**
+ * Synchronizes all invalid fractional indices with the array order by mutating passed elements.
+ *
+ * WARN: in edge cases it could modify the elements which were not moved, as it's impossible to guess the actually moved elements from the elements array itself.
+ */
+export declare const syncInvalidIndices: (elements: readonly ExcalidrawElement[]) => OrderedExcalidrawElement[];