@dwelle/excalidraw 0.5.0-da1c822 → 0.5.0-e56eec7

package/dist/excalidraw/components/CommandPalette/CommandPalette.js

@@ -205,6 +205,7 @@ function CommandPaletteInner({ customCommandPaletteItems, }) {
                 actionManager.actions.zoomToFit,
                 actionManager.actions.zenMode,
                 actionManager.actions.viewMode,
+                actionManager.actions.gridMode,
                 actionManager.actions.objectsSnapMode,
                 actionManager.actions.toggleShortcuts,
                 actionManager.actions.selectAll,

package/dist/excalidraw/components/HelpDialog.js

@@ -57,7 +57,7 @@ export const HelpDialog = ({ onClose }) => {
                                         t("helpDialog.click"),
                                         t("helpDialog.click"),
                                         t("helpDialog.click"),
-                                    ], isOr: false }), _jsx(Shortcut, { label: t("toolBar.lock"), shortcuts: [KEYS.Q] }), _jsx(Shortcut, { label: t("helpDialog.preventBinding"), shortcuts: [getShortcutKey("CtrlOrCmd")] }), _jsx(Shortcut, { label: t("toolBar.link"), shortcuts: [getShortcutKey("CtrlOrCmd+K")] })] }), _jsxs(ShortcutIsland, { className: "HelpDialog__island--view", caption: t("helpDialog.view"), children: [_jsx(Shortcut, { label: t("buttons.zoomIn"), shortcuts: [getShortcutKey("CtrlOrCmd++")] }), _jsx(Shortcut, { label: t("buttons.zoomOut"), shortcuts: [getShortcutKey("CtrlOrCmd+-")] }), _jsx(Shortcut, { label: t("buttons.resetZoom"), shortcuts: [getShortcutKey("CtrlOrCmd+0")] }), _jsx(Shortcut, { label: t("helpDialog.zoomToFit"), shortcuts: ["Shift+1"] }), _jsx(Shortcut, { label: t("helpDialog.zoomToSelection"), shortcuts: ["Shift+2"] }), _jsx(Shortcut, { label: t("helpDialog.movePageUpDown"), shortcuts: ["PgUp/PgDn"] }), _jsx(Shortcut, { label: t("helpDialog.movePageLeftRight"), shortcuts: ["Shift+PgUp/PgDn"] }), _jsx(Shortcut, { label: t("buttons.zenMode"), shortcuts: [getShortcutKey("Alt+Z")] }), _jsx(Shortcut, { label: t("buttons.objectsSnapMode"), shortcuts: [getShortcutKey("Alt+S")] }), _jsx(Shortcut, { label: t("labels.showGrid"), shortcuts: [getShortcutKey("CtrlOrCmd+'")] }), _jsx(Shortcut, { label: t("labels.viewMode"), shortcuts: [getShortcutKey("Alt+R")] }), _jsx(Shortcut, { label: t("labels.toggleTheme"), shortcuts: [getShortcutKey("Alt+Shift+D")] }), _jsx(Shortcut, { label: t("stats.title"), shortcuts: [getShortcutKey("Alt+/")] }), _jsx(Shortcut, { label: t("commandPalette.title"), shortcuts: isFirefox
+                                    ], isOr: false }), _jsx(Shortcut, { label: t("toolBar.lock"), shortcuts: [KEYS.Q] }), _jsx(Shortcut, { label: t("helpDialog.preventBinding"), shortcuts: [getShortcutKey("CtrlOrCmd")] }), _jsx(Shortcut, { label: t("toolBar.link"), shortcuts: [getShortcutKey("CtrlOrCmd+K")] })] }), _jsxs(ShortcutIsland, { className: "HelpDialog__island--view", caption: t("helpDialog.view"), children: [_jsx(Shortcut, { label: t("buttons.zoomIn"), shortcuts: [getShortcutKey("CtrlOrCmd++")] }), _jsx(Shortcut, { label: t("buttons.zoomOut"), shortcuts: [getShortcutKey("CtrlOrCmd+-")] }), _jsx(Shortcut, { label: t("buttons.resetZoom"), shortcuts: [getShortcutKey("CtrlOrCmd+0")] }), _jsx(Shortcut, { label: t("helpDialog.zoomToFit"), shortcuts: ["Shift+1"] }), _jsx(Shortcut, { label: t("helpDialog.zoomToSelection"), shortcuts: ["Shift+2"] }), _jsx(Shortcut, { label: t("helpDialog.movePageUpDown"), shortcuts: ["PgUp/PgDn"] }), _jsx(Shortcut, { label: t("helpDialog.movePageLeftRight"), shortcuts: ["Shift+PgUp/PgDn"] }), _jsx(Shortcut, { label: t("buttons.zenMode"), shortcuts: [getShortcutKey("Alt+Z")] }), _jsx(Shortcut, { label: t("buttons.objectsSnapMode"), shortcuts: [getShortcutKey("Alt+S")] }), _jsx(Shortcut, { label: t("labels.toggleGrid"), shortcuts: [getShortcutKey("CtrlOrCmd+'")] }), _jsx(Shortcut, { label: t("labels.viewMode"), shortcuts: [getShortcutKey("Alt+R")] }), _jsx(Shortcut, { label: t("labels.toggleTheme"), shortcuts: [getShortcutKey("Alt+Shift+D")] }), _jsx(Shortcut, { label: t("stats.title"), shortcuts: [getShortcutKey("Alt+/")] }), _jsx(Shortcut, { label: t("commandPalette.title"), shortcuts: isFirefox
                                         ? [getShortcutFromShortcutName("commandPalette")]
                                         : [
                                             getShortcutFromShortcutName("commandPalette"),

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

@@ -11,7 +11,7 @@ import "./Sidebar.scss";
 export declare const isSidebarDockedAtom: import("jotai").PrimitiveAtom<boolean> & {
     init: boolean;
 };
-export declare const SidebarInner: React.ForwardRefExoticComponent<Pick<{
+export declare const SidebarInner: React.ForwardRefExoticComponent<Omit<{
     name: string;
     children: React.ReactNode;
     onStateChange?: ((state: {
@@ -22,7 +22,7 @@ export declare const SidebarInner: React.ForwardRefExoticComponent<Pick<{
     docked?: boolean | undefined;
     className?: string | undefined;
     __fallback?: boolean | undefined;
-} & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">, "name" | "children" | "key" | "className" | "onDock" | "docked" | "onStateChange" | "__fallback"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const Sidebar: React.ForwardRefExoticComponent<{
     name: string;
     children: React.ReactNode;

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

@@ -10,7 +10,7 @@ type StackProps = {
     ref: React.RefObject<HTMLDivElement>;
 };
 declare const _default: {
-    Row: React.ForwardRefExoticComponent<Pick<StackProps, "children" | "style" | "gap" | "align" | "className" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
-    Col: React.ForwardRefExoticComponent<Pick<StackProps, "children" | "style" | "gap" | "align" | "className" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+    Row: React.ForwardRefExoticComponent<Omit<StackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Col: React.ForwardRefExoticComponent<Omit<StackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;

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

@@ -17,6 +17,7 @@ type ToolButtonBaseProps = {
     hidden?: boolean;
     visible?: boolean;
     selected?: boolean;
+    disabled?: boolean;
     className?: string;
     style?: CSSProperties;
     isLoading?: boolean;

package/dist/excalidraw/components/ToolButton.js

@@ -52,7 +52,7 @@ export const ToolButton = React.forwardRef((props, ref) => {
                 ToolIcon: !props.hidden,
                 "ToolIcon--selected": props.selected,
                 "ToolIcon--plain": props.type === "icon",
-            }), style: props.style, "data-testid": props["data-testid"], hidden: props.hidden, title: props.title, "aria-label": props["aria-label"], type: type, onClick: onClick, ref: innerRef, disabled: isLoading || props.isLoading, children: [(props.icon || props.label) && (_jsxs("div", { className: "ToolIcon__icon", "aria-hidden": "true", children: [props.icon || props.label, props.keyBindingLabel && (_jsx("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel })), props.isLoading && _jsx(Spinner, {})] })), props.showAriaLabel && (_jsxs("div", { className: "ToolIcon__label", children: [props["aria-label"], " ", isLoading && _jsx(Spinner, {})] })), props.children] }));
+            }), style: props.style, "data-testid": props["data-testid"], hidden: props.hidden, title: props.title, "aria-label": props["aria-label"], type: type, onClick: onClick, ref: innerRef, disabled: isLoading || props.isLoading || !!props.disabled, children: [(props.icon || props.label) && (_jsxs("div", { className: "ToolIcon__icon", "aria-hidden": "true", "aria-disabled": !!props.disabled, children: [props.icon || props.label, props.keyBindingLabel && (_jsx("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel })), props.isLoading && _jsx(Spinner, {})] })), props.showAriaLabel && (_jsxs("div", { className: "ToolIcon__label", children: [props["aria-label"], " ", isLoading && _jsx(Spinner, {})] })), props.children] }));
     }
     return (_jsxs("label", { className: clsx("ToolIcon", props.className), title: props.title, onPointerDown: (event) => {
             lastPointerTypeRef.current = event.pointerType || null;

package/dist/excalidraw/components/canvases/InteractiveCanvas.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { DOMAttributes } from "react";
-import type { InteractiveCanvasAppState } from "../../types";
+import type { Device, InteractiveCanvasAppState } from "../../types";
 import type { RenderableElementsMap, RenderInteractiveSceneCallback } from "../../scene/types";
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 type InteractiveCanvasProps = {
@@ -13,6 +13,7 @@ type InteractiveCanvasProps = {
     selectionNonce: number | undefined;
     scale: number;
     appState: InteractiveCanvasAppState;
+    device: Device;
     renderInteractiveSceneCallback: (data: RenderInteractiveSceneCallback) => void;
     handleCanvasRef: (canvas: HTMLCanvasElement | null) => void;
     onContextMenu: Exclude<DOMAttributes<HTMLCanvasElement | HTMLDivElement>["onContextMenu"], undefined>;

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

@@ -60,6 +60,7 @@ const InteractiveCanvas = (props) => {
                 selectionColor,
                 renderScrollbars: false,
             },
+            device: props.device,
             callback: props.renderInteractiveSceneCallback,
         }, isRenderThrottlingEnabled());
     });

package/dist/excalidraw/components/hyperlink/Hyperlink.js

@@ -10,9 +10,9 @@ import clsx from "clsx";
 import { KEYS } from "../../keys";
 import { EVENT, HYPERLINK_TOOLTIP_DELAY } from "../../constants";
 import { getElementAbsoluteCoords } from "../../element/bounds";
-import { getTooltipDiv, updateTooltipPosition } from "../Tooltip";
+import { getTooltipDiv, updateTooltipPosition } from "../../components/Tooltip";
 import { getSelectedElements } from "../../scene";
-import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { hitElementBoundingBox } from "../../element/collision";
 import { isLocalLink, normalizeLink } from "../../data/url";
 import "./Hyperlink.scss";
 import { trackEvent } from "../../analytics";
@@ -252,7 +252,7 @@ const shouldHideLinkPopup = (element, elementsMap, appState, [clientX, clientY])
     const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords({ clientX, clientY }, appState);
     const threshold = 15 / appState.zoom.value;
     // hitbox to prevent hiding when hovered in element bounding box
-    if (isPointHittingElementBoundingBox(element, elementsMap, [sceneX, sceneY], threshold, null)) {
+    if (hitElementBoundingBox(sceneX, sceneY, element, elementsMap)) {
         return false;
     }
     const [x1, y1, x2] = getElementAbsoluteCoords(element, elementsMap);

package/dist/excalidraw/components/hyperlink/helpers.js

@@ -1,6 +1,6 @@
 import { MIME_TYPES } from "../../constants";
 import { getElementAbsoluteCoords } from "../../element/bounds";
-import { isPointHittingElementBoundingBox } from "../../element/collision";
+import { hitElementBoundingBox } from "../../element/collision";
 import { rotate } from "../../math";
 import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
 export const EXTERNAL_LINK_IMG = document.createElement("img");
@@ -39,10 +39,9 @@ export const isPointHittingLink = (element, elementsMap, appState, [x, y], isMob
     if (!element.link || appState.selectedElementIds[element.id]) {
         return false;
     }
-    const threshold = 4 / appState.zoom.value;
     if (!isMobile &&
         appState.viewModeEnabled &&
-        isPointHittingElementBoundingBox(element, elementsMap, [x, y], threshold, null)) {
+        hitElementBoundingBox(x, y, element, elementsMap)) {
         return true;
     }
     return isPointHittingLinkIcon(element, elementsMap, appState, [x, y]);

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

@@ -197,4 +197,5 @@ export declare const coffeeIcon: JSX.Element;
 export declare const DeviceDesktopIcon: JSX.Element;
 export declare const arrowBarToLeftIcon: JSX.Element;
 export declare const youtubeIcon: JSX.Element;
+export declare const gridIcon: JSX.Element;
 export {};

package/dist/excalidraw/components/icons.js

@@ -244,3 +244,4 @@ export const DeviceDesktopIcon = createIcon(_jsxs("g", { stroke: "currentColor",
 // arrow-bar-to-left
 export const arrowBarToLeftIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M10 12l10 0" }), _jsx("path", { d: "M10 12l4 4" }), _jsx("path", { d: "M10 12l4 -4" }), _jsx("path", { d: "M4 4l0 16" })] }), tablerIconProps);
 export const youtubeIcon = createIcon(_jsxs("g", { children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z" }), _jsx("path", { d: "M10 9l5 3l-5 3z" })] }), tablerIconProps);
+export const gridIcon = createIcon(_jsxs("g", { strokeWidth: 1.5, children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M3 6h18" }), _jsx("path", { d: "M3 12h18" }), _jsx("path", { d: "M3 18h18" }), _jsx("path", { d: "M6 3v18" }), _jsx("path", { d: "M12 3v18" }), _jsx("path", { d: "M18 3v18" })] }), tablerIconProps);

package/dist/excalidraw/components/main-menu/DefaultItems.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { Theme } from "../../element/types";
 import "./DefaultItems.scss";
+import { Theme } from "../../element/types";
 export declare const LoadScene: {
     (): JSX.Element | null;
     displayName: string;

package/dist/excalidraw/constants.d.ts

@@ -124,6 +124,8 @@ 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 SIDE_RESIZING_THRESHOLD: number;
+export declare const DEFAULT_COLLISION_THRESHOLD: number;
 export declare const COLOR_VOICE_CALL = "#a2f1a6";
 export declare const CANVAS_ONLY_ACTIONS: string[];
 export declare const GRID_SIZE = 20;
@@ -176,6 +178,7 @@ export declare const VERSION_TIMEOUT = 30000;
 export declare const SCROLL_TIMEOUT = 100;
 export declare const ZOOM_STEP = 0.1;
 export declare const MIN_ZOOM = 0.1;
+export declare const MAX_ZOOM = 30;
 export declare const HYPERLINK_TOOLTIP_DELAY = 300;
 export declare const IDLE_THRESHOLD = 60000;
 export declare const ACTIVE_THRESHOLD = 3000;
@@ -224,9 +227,6 @@ 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

@@ -132,6 +132,11 @@ export const COLOR_WHITE = "#ffffff";
 export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
 export const COLOR_TRANSPARENT = "transparent";
 // -----------------------------------------------
+export const SIDE_RESIZING_THRESHOLD = 2 * DEFAULT_TRANSFORM_HANDLE_SPACING;
+// a small epsilon to make side resizing always take precedence
+// (avoids an increase in renders and changes to tests)
+const EPSILON = 0.00001;
+export const DEFAULT_COLLISION_THRESHOLD = 2 * SIDE_RESIZING_THRESHOLD - EPSILON;
 // keep this in sync with CSS
 export const COLOR_VOICE_CALL = "#a2f1a6";
 export const CANVAS_ONLY_ACTIONS = ["selectAll"];
@@ -182,6 +187,7 @@ export const VERSION_TIMEOUT = 30000;
 export const SCROLL_TIMEOUT = 100;
 export const ZOOM_STEP = 0.1;
 export const MIN_ZOOM = 0.1;
+export const MAX_ZOOM = 30.0;
 export const HYPERLINK_TOOLTIP_DELAY = 300;
 // Report a user inactive after IDLE_THRESHOLD milliseconds
 export const IDLE_THRESHOLD = 60_000;
@@ -266,9 +272,6 @@ 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/reconcile.d.ts

@@ -0,0 +1,6 @@
+import { OrderedExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+import { MakeBrand } from "../utility-types";
+export type ReconciledExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"ReconciledElement">;
+export type RemoteExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"RemoteExcalidrawElement">;
+export declare const reconcileElements: (localElements: readonly OrderedExcalidrawElement[], remoteElements: readonly RemoteExcalidrawElement[], localAppState: AppState) => ReconciledExcalidrawElement[];

package/dist/excalidraw/data/reconcile.js

@@ -0,0 +1,49 @@
+import { orderByFractionalIndex, syncInvalidIndices } from "../fractionalIndex";
+import { arrayToMap } from "../utils";
+const shouldDiscardRemoteElement = (localAppState, local, remote) => {
+    if (local &&
+        // local element is being edited
+        (local.id === localAppState.editingElement?.id ||
+            local.id === localAppState.resizingElement?.id ||
+            local.id === localAppState.draggingElement?.id || // TODO: Is this still valid? As draggingElement is selection element, which is never part of the elements array
+            // local element is newer
+            local.version > remote.version ||
+            // resolve conflicting edits deterministically by taking the one with
+            // the lowest versionNonce
+            (local.version === remote.version &&
+                local.versionNonce < remote.versionNonce))) {
+        return true;
+    }
+    return false;
+};
+export const reconcileElements = (localElements, remoteElements, localAppState) => {
+    const localElementsMap = arrayToMap(localElements);
+    const reconciledElements = [];
+    const added = new Set();
+    // process remote elements
+    for (const remoteElement of remoteElements) {
+        if (!added.has(remoteElement.id)) {
+            const localElement = localElementsMap.get(remoteElement.id);
+            const discardRemoteElement = shouldDiscardRemoteElement(localAppState, localElement, remoteElement);
+            if (localElement && discardRemoteElement) {
+                reconciledElements.push(localElement);
+                added.add(localElement.id);
+            }
+            else {
+                reconciledElements.push(remoteElement);
+                added.add(remoteElement.id);
+            }
+        }
+    }
+    // process remaining local elements
+    for (const localElement of localElements) {
+        if (!added.has(localElement.id)) {
+            reconciledElements.push(localElement);
+            added.add(localElement.id);
+        }
+    }
+    const orderedElements = orderByFractionalIndex(reconciledElements);
+    // de-duplicate indices
+    syncInvalidIndices(orderedElements);
+    return orderedElements;
+};

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

@@ -1,17 +1,17 @@
-import { ExcalidrawElement } from "../element/types";
+import { ExcalidrawElement, OrderedExcalidrawElement } 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: ExcalidrawElement[];
+    elements: OrderedExcalidrawElement[];
     appState: RestoredAppState;
     files: BinaryFiles;
 };
 export declare const restoreElements: (elements: ImportedDataState["elements"], localElements: readonly ExcalidrawElement[] | null | undefined, opts?: {
     refreshDimensions?: boolean;
     repairBindings?: boolean;
-} | undefined) => ExcalidrawElement[];
+} | undefined) => OrderedExcalidrawElement[];
 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, PRECEDING_ELEMENT_KEY, FONT_FAMILY, ROUNDNESS, DEFAULT_SIDEBAR, DEFAULT_ELEMENT_PROPS, } from "../constants";
+import { DEFAULT_FONT_FAMILY, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, 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,6 +9,7 @@ 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,
@@ -46,6 +47,7 @@ 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,
@@ -85,9 +87,6 @@ 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),
@@ -199,7 +198,7 @@ const restoreElement = (element) => {
     return null;
 };
 /**
- * Repairs contaienr element's boundElements array by removing duplicates and
+ * Repairs container element's boundElements array by removing duplicates and
  * fixing containerId of bound elements if not present. Also removes any
  * bound elements that do not exist in the elements array.
  *
@@ -275,7 +274,7 @@ localElements, opts) => {
     // used to detect duplicate top-level element ids
     const existingIds = new Set();
     const localElementsMap = localElements ? arrayToMap(localElements) : null;
-    const restoredElements = (elements || []).reduce((elements, element) => {
+    const restoredElements = syncInvalidIndices((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)) {
@@ -293,7 +292,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;
-}) => ExcalidrawElement[];
+}) => import("../element/types").OrderedExcalidrawElement[];

package/dist/excalidraw/data/transform.js

@@ -3,9 +3,10 @@ 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 { assertNever, cloneJSON, getFontString, toBrandedType } from "../utils";
+import { arrayToMap, 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,
@@ -214,10 +215,10 @@ class ElementStore {
         this.excalidrawElements.set(ele.id, ele);
     };
     getElements = () => {
-        return Array.from(this.excalidrawElements.values());
+        return syncInvalidIndices(Array.from(this.excalidrawElements.values()));
     };
     getElementsMap = () => {
-        return toBrandedType(this.excalidrawElements);
+        return toBrandedType(arrayToMap(this.getElements()));
     };
     getElement = (id) => {
         return this.excalidrawElements.get(id);

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

@@ -1,3 +1,4 @@
+export declare const sanitizeHTMLAttribute: (html: string) => string;
 export declare const normalizeLink: (link: string) => string;
 export declare const isLocalLink: (link: string | null) => boolean;
 /**

package/dist/excalidraw/data/url.js

@@ -1,10 +1,13 @@
 import { sanitizeUrl } from "@braintree/sanitize-url";
+export const sanitizeHTMLAttribute = (html) => {
+    return html.replace(/"/g, """);
+};
 export const normalizeLink = (link) => {
     link = link.trim();
     if (!link) {
         return link;
     }
-    return sanitizeUrl(link);
+    return sanitizeUrl(sanitizeHTMLAttribute(link));
 };
 export const isLocalLink = (link) => {
     return !!(link?.includes(location.origin) || link?.startsWith("/"));

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

@@ -1,6 +1,7 @@
-import { ExcalidrawLinearElement, ExcalidrawBindableElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawElement, ElementsMap, NonDeletedSceneElementsMap } from "./types";
-import { AppState } from "../types";
-import Scene from "../scene/Scene";
+import * as GA from "../ga";
+import { ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawDiamondElement, ExcalidrawEllipseElement, ExcalidrawImageElement, ExcalidrawFrameLikeElement, ExcalidrawIframeLikeElement, NonDeleted, ExcalidrawLinearElement, NonDeletedExcalidrawElement, ElementsMap, NonDeletedSceneElementsMap, ExcalidrawTextElement } from "./types";
+import { AppClassProperties, AppState, Point } from "../types";
+import { ElementUpdate } from "./mutateElement";
 export type SuggestedBinding = NonDeleted<ExcalidrawBindableElement> | SuggestedPointBinding;
 export type SuggestedPointBinding = [
     NonDeleted<ExcalidrawLinearElement>,
@@ -10,18 +11,18 @@ export type SuggestedPointBinding = [
 export declare const shouldEnableBindingForPointerEvent: (event: React.PointerEvent<HTMLElement>) => boolean;
 export declare const isBindingEnabled: (appState: AppState) => boolean;
 export declare const bindOrUnbindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, startBindingElement: ExcalidrawBindableElement | null | "keep", endBindingElement: ExcalidrawBindableElement | null | "keep", elementsMap: NonDeletedSceneElementsMap) => void;
-export declare const bindOrUnbindSelectedElements: (selectedElements: NonDeleted<ExcalidrawElement>[], elements: readonly ExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap) => void;
-export declare const maybeBindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, appState: AppState, scene: Scene, pointerCoords: {
+export declare const bindOrUnbindSelectedElements: (selectedElements: NonDeleted<ExcalidrawElement>[], app: AppClassProperties) => void;
+export declare const maybeBindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, appState: AppState, pointerCoords: {
     x: number;
     y: number;
-}, elementsMap: NonDeletedSceneElementsMap) => void;
+}, app: AppClassProperties) => void;
 export declare const bindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end", elementsMap: NonDeletedSceneElementsMap) => void;
 export declare const isLinearElementSimpleAndAlreadyBound: (linearElement: NonDeleted<ExcalidrawLinearElement>, alreadyBoundToId: ExcalidrawBindableElement["id"] | undefined, bindableElement: ExcalidrawBindableElement) => boolean;
-export declare const unbindLinearElements: (elements: NonDeleted<ExcalidrawElement>[], elementsMap: NonDeletedSceneElementsMap) => void;
+export declare const unbindLinearElements: (elements: readonly NonDeleted<ExcalidrawElement>[], elementsMap: NonDeletedSceneElementsMap) => void;
 export declare const getHoveredElementForBinding: (pointerCoords: {
     x: number;
     y: number;
-}, elements: readonly NonDeletedExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap) => NonDeleted<ExcalidrawBindableElement> | null;
+}, app: AppClassProperties) => NonDeleted<ExcalidrawBindableElement> | null;
 export declare const updateBoundElements: (changedElement: NonDeletedExcalidrawElement, elementsMap: ElementsMap, options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
     newSize?: {
@@ -29,6 +30,60 @@ export declare const updateBoundElements: (changedElement: NonDeletedExcalidrawE
         height: number;
     };
 }) => void;
-export declare const getEligibleElementsForBinding: (selectedElements: NonDeleted<ExcalidrawElement>[], elements: readonly ExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap) => SuggestedBinding[];
+export declare const getEligibleElementsForBinding: (selectedElements: NonDeleted<ExcalidrawElement>[], app: AppClassProperties) => SuggestedBinding[];
 export declare const fixBindingsAfterDuplication: (sceneElements: readonly ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>, duplicatesServeAsOld?: "duplicatesServeAsOld" | undefined) => void;
 export declare const fixBindingsAfterDeletion: (sceneElements: readonly ExcalidrawElement[], deletedElements: readonly ExcalidrawElement[]) => void;
+export declare const bindingBorderTest: (element: NonDeleted<ExcalidrawBindableElement>, { x, y }: {
+    x: number;
+    y: number;
+}, app: AppClassProperties) => boolean;
+export declare const maxBindingGap: (element: ExcalidrawElement, elementWidth: number, elementHeight: number) => number;
+export declare const distanceToBindableElement: (element: ExcalidrawBindableElement, point: readonly [number, number], elementsMap: ElementsMap) => number;
+export declare const distanceToEllipse: (element: ExcalidrawEllipseElement, point: readonly [number, number], elementsMap: ElementsMap) => number;
+export declare const determineFocusDistance: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], elementsMap: ElementsMap) => number;
+export declare const determineFocusPoint: (element: ExcalidrawBindableElement, focus: number, adjecentPoint: readonly [number, number], elementsMap: ElementsMap) => readonly [number, number];
+export declare const intersectElementWithLine: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], gap: number | undefined, elementsMap: ElementsMap) => Point[];
+export declare const getCircleIntersections: (center: readonly [number, number, number, number, number, number, number, number], radius: number, line: readonly [number, number, number, number, number, number, number, number]) => GA.Point[];
+export declare const findFocusPointForEllipse: (ellipse: ExcalidrawEllipseElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
+export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement | ExcalidrawIframeLikeElement | ExcalidrawFrameLikeElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
+export declare const bindingProperties: Set<BindableProp | BindingProp>;
+export type BindableProp = "boundElements";
+export type BindingProp = "frameId" | "containerId" | "startBinding" | "endBinding";
+/**
+ * Bound element containing bindings to `frameId`, `containerId`, `startBinding` or `endBinding`.
+ */
+export declare class BoundElement {
+    /**
+     * Unbind the affected non deleted bindable elements (removing element from `boundElements`).
+     * - iterates non deleted bindable elements (`containerId` | `startBinding.elementId` | `endBinding.elementId`) of the current element
+     * - prepares updates to unbind each bindable element's `boundElements` from the current element
+     */
+    static unbindAffected(elements: ElementsMap, boundElement: ExcalidrawElement | undefined, updateElementWith: (affected: ExcalidrawElement, updates: ElementUpdate<ExcalidrawElement>) => void): void;
+    /**
+     * Rebind the next affected non deleted bindable elements (adding element to `boundElements`).
+     * - iterates non deleted bindable elements (`containerId` | `startBinding.elementId` | `endBinding.elementId`) of the current element
+     * - prepares updates to rebind each bindable element's `boundElements` to the current element
+     *
+     * NOTE: rebind expects that affected elements were previously unbound with `BoundElement.unbindAffected`
+     */
+    static rebindAffected: (elements: ElementsMap, boundElement: ExcalidrawElement | undefined, updateElementWith: (affected: ExcalidrawElement, updates: ElementUpdate<ExcalidrawElement>) => void) => void;
+}
+/**
+ * Bindable element containing bindings to `boundElements`.
+ */
+export declare class BindableElement {
+    /**
+     * Unbind the affected non deleted bound elements (resetting `containerId`, `startBinding`, `endBinding` to `null`).
+     * - iterates through non deleted `boundElements` of the current element
+     * - prepares updates to unbind each bound element from the current element
+     */
+    static unbindAffected(elements: ElementsMap, bindableElement: ExcalidrawElement | undefined, updateElementWith: (affected: ExcalidrawElement, updates: ElementUpdate<ExcalidrawElement>) => void): void;
+    /**
+     * Rebind the affected non deleted bound elements (for now setting only `containerId`, as we cannot rebind arrows atm).
+     * - iterates through non deleted `boundElements` of the current element
+     * - prepares updates to rebind each bound element to the current element or unbind it from `boundElements` in case of conflicts
+     *
+     * NOTE: rebind expects that affected elements were previously unbound with `BindaleElement.unbindAffected`
+     */
+    static rebindAffected: (elements: ElementsMap, bindableElement: ExcalidrawElement | undefined, updateElementWith: (affected: ExcalidrawElement, updates: ElementUpdate<ExcalidrawElement>) => void) => void;
+}