@excalidraw/excalidraw 0.17.1-3e334a6 → 0.17.1-4689a6b

package/dist/excalidraw/actions/actionBoundText.js

@@ -4,8 +4,9 @@ import { mutateElement } from "../element/mutateElement";
 import { computeBoundTextPosition, computeContainerDimensionForBoundText, getBoundTextElement, measureText, redrawTextBoundingBox, } from "../element/textElement";
 import { getOriginalContainerHeightFromCache, resetOriginalContainerCache, updateOriginalContainerCache, } from "../element/containerCache";
 import { hasBoundTextElement, isTextBindableContainer, isUsingAdaptiveRadius, } from "../element/typeChecks";
-import { getFontString } from "../utils";
+import { arrayToMap, getFontString } from "../utils";
 import { register } from "./register";
+import { syncMovedIndices } from "../fractionalIndex";
 export const actionUnbindText = register({
     name: "unbindText",
     label: "labels.unbindText",
@@ -113,6 +114,7 @@ const pushTextAboveContainer = (elements, container, textElement) => {
     updatedElements.splice(textElementIndex, 1);
     const containerIndex = updatedElements.findIndex((ele) => ele.id === container.id);
     updatedElements.splice(containerIndex + 1, 0, textElement);
+    syncMovedIndices(updatedElements, arrayToMap([container, textElement]));
     return updatedElements;
 };
 const pushContainerBelowText = (elements, container, textElement) => {
@@ -121,6 +123,7 @@ const pushContainerBelowText = (elements, container, textElement) => {
     updatedElements.splice(containerIndex, 1);
     const textElementIndex = updatedElements.findIndex((ele) => ele.id === textElement.id);
     updatedElements.splice(textElementIndex, 0, container);
+    syncMovedIndices(updatedElements, arrayToMap([container, textElement]));
     return updatedElements;
 };
 export const actionWrapTextInContainer = register({

package/dist/excalidraw/actions/actionCanvas.js

@@ -289,7 +289,9 @@ export const actionZoomToFit = register({
 export const actionToggleTheme = register({
     name: "toggleTheme",
     label: (_, appState) => {
-        return appState.theme === "dark" ? "buttons.lightMode" : "buttons.darkMode";
+        return appState.theme === THEME.DARK
+            ? "buttons.lightMode"
+            : "buttons.darkMode";
     },
     keywords: ["toggle", "dark", "light", "mode", "theme"],
     icon: (appState) => (appState.theme === THEME.LIGHT ? MoonIcon : SunIcon),

package/dist/excalidraw/actions/actionDuplicateSelection.js

@@ -16,6 +16,7 @@ import { normalizeElementOrder } from "../element/sortElements";
 import { DuplicateIcon } from "../components/icons";
 import { bindElementsToFramesAfterDuplication, getFrameChildren, } from "../frame";
 import { excludeElementsInFramesFromSelection, getSelectedElements, } from "../scene/selection";
+import { syncMovedIndices } from "../fractionalIndex";
 export const actionDuplicateSelection = register({
     name: "duplicateSelection",
     label: "labels.duplicateSelection",
@@ -51,11 +52,13 @@ const duplicateElements = (elements, appState) => {
     const newElements = [];
     const oldElements = [];
     const oldIdToDuplicatedId = new Map();
+    const duplicatedElementsMap = new Map();
     const duplicateAndOffsetElement = (element) => {
         const newElement = duplicateElement(appState.editingGroupId, groupIdMap, element, {
             x: element.x + GRID_SIZE / 2,
             y: element.y + GRID_SIZE / 2,
         });
+        duplicatedElementsMap.set(newElement.id, newElement);
         oldIdToDuplicatedId.set(element.id, newElement.id);
         oldElements.push(element);
         newElements.push(newElement);
@@ -160,6 +163,7 @@ const duplicateElements = (elements, appState) => {
     }
     // step (3)
     const finalElements = finalElementsReversed.reverse();
+    syncMovedIndices(finalElements, arrayToMap([...oldElements, ...newElements]));
     // ---------------------------------------------------------------------------
     bindTextToShapeAfterDuplication(elementsWithClones, oldElements, oldIdToDuplicatedId);
     fixBindingsAfterDuplication(elementsWithClones, oldElements, oldIdToDuplicatedId);

package/dist/excalidraw/actions/actionExport.d.ts

@@ -996,7 +996,7 @@ export declare const actionLoadScene: {
     };
     predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, props: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
     perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, app: import("../types").AppClassProperties) => Promise<false | {
-        elements: import("../element/types").ExcalidrawElement[];
+        elements: import("../element/types").OrderedExcalidrawElement[];
         appState: {
             contextMenu: {
                 items: import("../components/ContextMenu").ContextMenuItems;

package/dist/excalidraw/actions/actionFinalize.d.ts

@@ -5,7 +5,7 @@ export declare const actionFinalize: {
     name: "finalize";
     label: string;
     trackEvent: false;
-    perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<AppState>, _: any, { interactiveCanvas, focusContainer, scene }: import("../types").AppClassProperties) => {
+    perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
         elements: import("../element/types").ExcalidrawElement[] | undefined;
         appState: {
             cursorButton: "up";

package/dist/excalidraw/actions/actionFinalize.js

@@ -9,7 +9,6 @@ import { register } from "./register";
 import { mutateElement } from "../element/mutateElement";
 import { isPathALoop } from "../math";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import Scene from "../scene/Scene";
 import { maybeBindLinearElement, bindOrUnbindLinearElement, } from "../element/binding";
 import { isBindingElement, isLinearElement } from "../element/typeChecks";
 import { resetCursor } from "../cursor";
@@ -17,7 +16,8 @@ export const actionFinalize = register({
     name: "finalize",
     label: "",
     trackEvent: false,
-    perform: (elements, appState, _, { interactiveCanvas, focusContainer, scene }) => {
+    perform: (elements, appState, _, app) => {
+        const { interactiveCanvas, focusContainer, scene } = app;
         const elementsMap = scene.getNonDeletedElementsMap();
         if (appState.editingLinearElement) {
             const { elementId, startBindingElement, endBindingElement } = appState.editingLinearElement;
@@ -88,7 +88,7 @@ export const actionFinalize = register({
                 !isLoop &&
                 multiPointElement.points.length > 1) {
                 const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(multiPointElement, -1, arrayToMap(elements));
-                maybeBindLinearElement(multiPointElement, appState, Scene.getScene(multiPointElement), { x, y }, elementsMap);
+                maybeBindLinearElement(multiPointElement, appState, { x, y }, app);
             }
         }
         if ((!appState.activeTool.locked &&

package/dist/excalidraw/actions/actionFlip.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ExcalidrawElement } from "../element/types";
-import { AppState } from "../types";
+import { AppClassProperties, AppState } from "../types";
 export declare const actionFlipHorizontal: {
     name: "flipHorizontal";
     label: string;
@@ -8,7 +8,7 @@ export declare const actionFlipHorizontal: {
     trackEvent: {
         category: "element";
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
         elements: ExcalidrawElement[];
         appState: Readonly<AppState>;
         commitToHistory: true;
@@ -24,7 +24,7 @@ export declare const actionFlipVertical: {
     trackEvent: {
         category: "element";
     };
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
+    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, _: any, app: AppClassProperties) => {
         elements: ExcalidrawElement[];
         appState: Readonly<AppState>;
         commitToHistory: true;

package/dist/excalidraw/actions/actionFlip.js

@@ -15,7 +15,7 @@ export const actionFlipHorizontal = register({
     trackEvent: { category: "element" },
     perform: (elements, appState, _, app) => {
         return {
-            elements: updateFrameMembershipOfSelectedElements(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, "horizontal"), appState, app),
+            elements: updateFrameMembershipOfSelectedElements(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, "horizontal", app), appState, app),
             appState,
             commitToHistory: true,
         };
@@ -29,27 +29,27 @@ export const actionFlipVertical = register({
     trackEvent: { category: "element" },
     perform: (elements, appState, _, app) => {
         return {
-            elements: updateFrameMembershipOfSelectedElements(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, "vertical"), appState, app),
+            elements: updateFrameMembershipOfSelectedElements(flipSelectedElements(elements, app.scene.getNonDeletedElementsMap(), appState, "vertical", app), appState, app),
             appState,
             commitToHistory: true,
         };
     },
     keyTest: (event) => event.shiftKey && event.code === CODES.V && !event[KEYS.CTRL_OR_CMD],
 });
-const flipSelectedElements = (elements, elementsMap, appState, flipDirection) => {
+const flipSelectedElements = (elements, elementsMap, appState, flipDirection, app) => {
     const selectedElements = getSelectedElements(getNonDeletedElements(elements), appState, {
         includeBoundTextElement: true,
         includeElementsInFrames: true,
     });
-    const updatedElements = flipElements(selectedElements, elements, elementsMap, appState, flipDirection);
+    const updatedElements = flipElements(selectedElements, elements, elementsMap, appState, flipDirection, app);
     const updatedElementsMap = arrayToMap(updatedElements);
     return elements.map((element) => updatedElementsMap.get(element.id) || element);
 };
-const flipElements = (selectedElements, elements, elementsMap, appState, flipDirection) => {
+const flipElements = (selectedElements, elements, elementsMap, appState, flipDirection, app) => {
     const { minX, minY, maxX, maxY } = getCommonBoundingBox(selectedElements);
     resizeMultipleElements(elementsMap, selectedElements, elementsMap, "nw", true, flipDirection === "horizontal" ? maxX : minX, flipDirection === "horizontal" ? minY : maxY);
     isBindingEnabled(appState)
-        ? bindOrUnbindSelectedElements(selectedElements, elements, elementsMap)
+        ? bindOrUnbindSelectedElements(selectedElements, app)
         : unbindLinearElements(selectedElements, elementsMap);
     return selectedElements;
 };

package/dist/excalidraw/actions/actionGroup.js

@@ -12,6 +12,7 @@ import { randomId } from "../random";
 import { ToolButton } from "../components/ToolButton";
 import { isBoundToContainer } from "../element/typeChecks";
 import { getElementsInResizingFrame, getFrameLikeElements, groupByFrameLikes, removeElementsFromFrame, replaceAllElementsInFrame, } from "../frame";
+import { syncMovedIndices } from "../fractionalIndex";
 const allElementsInSameGroup = (elements) => {
     if (elements.length >= 2) {
         const groupIds = elements[0].groupIds;
@@ -90,17 +91,18 @@ export const actionGroup = register({
         const elementsBeforeGroup = nextElements
             .slice(0, lastGroupElementIndex)
             .filter((updatedElement) => !isElementInGroup(updatedElement, newGroupId));
-        nextElements = [
+        const reorderedElements = [
             ...elementsBeforeGroup,
             ...elementsInGroup,
             ...elementsAfterGroup,
         ];
+        syncMovedIndices(reorderedElements, arrayToMap(elementsInGroup));
         return {
             appState: {
                 ...appState,
                 ...selectGroup(newGroupId, { ...appState, selectedGroupIds: {} }, getNonDeletedElements(nextElements)),
             },
-            elements: nextElements,
+            elements: reorderedElements,
             commitToHistory: true,
         };
     },

package/dist/excalidraw/actions/actionHistory.js

@@ -7,6 +7,7 @@ import { newElementWith } from "../element/mutateElement";
 import { fixBindingsAfterDeletion } from "../element/binding";
 import { arrayToMap } from "../utils";
 import { isWindows } from "../constants";
+import { syncInvalidIndices } from "../fractionalIndex";
 const writeData = (prevElements, appState, updater) => {
     const commitToHistory = false;
     if (!appState.multiElement &&
@@ -25,6 +26,8 @@ const writeData = (prevElements, appState, updater) => {
             .map((nextElement) => newElementWith(prevElementMap.get(nextElement.id) || nextElement, nextElement))
             .concat(deletedElements.map((prevElement) => newElementWith(prevElement, { isDeleted: true })));
         fixBindingsAfterDeletion(elements, deletedElements);
+        // TODO: will be replaced in #7348
+        syncInvalidIndices(elements);
         return {
             elements,
             appState: { ...appState, ...data.appState },

package/dist/excalidraw/actions/actionZindex.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 export declare const actionSendBackward: {
     name: "sendBackward";
     label: string;
@@ -7,15 +7,15 @@ export declare const actionSendBackward: {
         category: "element";
     };
     perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
-        elements: import("../element/types").ExcalidrawElement[];
+        elements: readonly import("../element/types").ExcalidrawElement[];
         appState: Readonly<import("../types").AppState>;
         commitToHistory: true;
     };
     keyPriority: number;
-    keyTest: (event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };
 export declare const actionBringForward: {
     name: "bringForward";
@@ -25,15 +25,15 @@ export declare const actionBringForward: {
         category: "element";
     };
     perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
-        elements: import("../element/types").ExcalidrawElement[];
+        elements: readonly import("../element/types").ExcalidrawElement[];
         appState: Readonly<import("../types").AppState>;
         commitToHistory: true;
     };
     keyPriority: number;
-    keyTest: (event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };
 export declare const actionSendToBack: {
     name: "sendToBack";
@@ -47,10 +47,10 @@ export declare const actionSendToBack: {
         appState: Readonly<import("../types").AppState>;
         commitToHistory: true;
     };
-    keyTest: (event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };
 export declare const actionBringToFront: {
     name: "bringToFront";
@@ -64,8 +64,8 @@ export declare const actionBringToFront: {
         appState: Readonly<import("../types").AppState>;
         commitToHistory: true;
     };
-    keyTest: (event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean;
+    keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
 } & {
-    keyTest?: ((event: React.KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
+    keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
 };

package/dist/excalidraw/analytics.js

@@ -1,6 +1,6 @@
 // place here categories that you want to track. We want to track just a
 // small subset of categories at a given time.
-const ALLOWED_CATEGORIES_TO_TRACK = ["ai"];
+const ALLOWED_CATEGORIES_TO_TRACK = ["ai", "command_palette"];
 export const trackEvent = (category, action, label, value) => {
     try {
         // prettier-ignore

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

@@ -4,9 +4,10 @@ import { ActionManager } from "../actions/manager";
 import { EXPORT_IMAGE_TYPES } from "../constants";
 import { ExportedElements } from "../data";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement } from "../element/types";
+import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "../element/types";
 import History from "../history";
 import Scene from "../scene/Scene";
+import { GeometricShape } from "../../utils/geometry/shape";
 import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload } from "../types";
 import { FileSystemHandle } from "../data/filesystem";
 import { Renderer } from "../scene/Renderer";
@@ -232,8 +233,8 @@ declare class App extends React.Component<AppProps, AppState> {
     private toggleOverscrollBehavior;
     render(): JSX.Element;
     focusContainer: AppClassProperties["focusContainer"];
-    getSceneElementsIncludingDeleted: () => readonly ExcalidrawElement[];
-    getSceneElements: () => readonly NonDeletedExcalidrawElement[];
+    getSceneElementsIncludingDeleted: () => readonly import("../element/types").OrderedExcalidrawElement[];
+    getSceneElements: () => readonly Ordered<NonDeletedExcalidrawElement>[];
     onInsertElements: (elements: readonly ExcalidrawElement[]) => void;
     onExportImage: (type: keyof typeof EXPORT_IMAGE_TYPES, elements: ExportedElements, opts: {
         exportingFrame: ExcalidrawFrameLikeElement | null;
@@ -382,8 +383,17 @@ declare class App extends React.Component<AppProps, AppState> {
     private handleTextWysiwyg;
     private deselectElements;
     private getTextElementAtPosition;
+    /**
+     * get the pure geometric shape of an excalidraw element
+     * which is then used for hit detection
+     */
+    getElementShape(element: ExcalidrawElement): GeometricShape;
+    private getBoundTextShape;
     private getElementAtPosition;
     private getElementsAtPosition;
+    private getHitThreshold;
+    private hitElement;
+    private getTextBindableContainerAtPosition;
     private startTextEditing;
     private handleCanvasDoubleClick;
     private getElementLinkAtPosition;