@dwelle/excalidraw 0.5.0-3bc80da → 0.5.0-3f1f8dd

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

@@ -158,7 +158,7 @@ export declare const actionCopyStyles: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {
@@ -173,7 +173,10 @@ export declare const actionPasteStyles: {
     };
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, formData: any, app: import("../types").AppClassProperties) => {
         elements: readonly import("../element/types").OrderedExcalidrawElement[];
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
+    } | {
+        elements: import("../element/types").OrderedExcalidrawElement[];
+        storeAction: "capture";
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
 } & {

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

@@ -0,0 +1,17 @@
+import type { AppClassProperties } from "../types";
+export declare const actionTextAutoResize: {
+    name: "autoResize";
+    label: string;
+    icon: null;
+    trackEvent: {
+        category: "element";
+    };
+    predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, _: unknown, app: AppClassProperties) => boolean;
+    perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, app: AppClassProperties) => {
+        appState: Readonly<import("../types").AppState>;
+        elements: import("../element/types").OrderedExcalidrawElement[];
+        storeAction: "capture";
+    };
+} & {
+    keyTest?: undefined;
+};

package/dist/excalidraw/actions/actionTextAutoResize.js

@@ -0,0 +1,38 @@
+import { isTextElement } from "../element";
+import { newElementWith } from "../element/mutateElement";
+import { measureText } from "../element/textElement";
+import { getSelectedElements } from "../scene";
+import { StoreAction } from "../store";
+import { getFontString } from "../utils";
+import { register } from "./register";
+export const actionTextAutoResize = register({
+    name: "autoResize",
+    label: "labels.autoResize",
+    icon: null,
+    trackEvent: { category: "element" },
+    predicate: (elements, appState, _, app) => {
+        const selectedElements = getSelectedElements(elements, appState);
+        return (selectedElements.length === 1 &&
+            isTextElement(selectedElements[0]) &&
+            !selectedElements[0].autoResize);
+    },
+    perform: (elements, appState, _, app) => {
+        const selectedElements = getSelectedElements(elements, appState);
+        return {
+            appState,
+            elements: elements.map((element) => {
+                if (element.id === selectedElements[0].id && isTextElement(element)) {
+                    const metrics = measureText(element.originalText, getFontString(element), element.lineHeight);
+                    return newElementWith(element, {
+                        autoResize: true,
+                        width: metrics.width,
+                        height: metrics.height,
+                        text: element.originalText,
+                    });
+                }
+                return element;
+            }),
+            storeAction: StoreAction.CAPTURE,
+        };
+    },
+});

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AppState } from "../types";
+import type { AppState } from "../types";
 export declare const actionToggleGridMode: {
     name: "gridMode";
     icon: JSX.Element;
@@ -163,7 +163,7 @@ export declare const actionToggleGridMode: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     checked: (appState: AppState) => boolean;
     predicate: (element: readonly import("../element/types").ExcalidrawElement[], appState: AppState, props: import("../types").ExcalidrawProps) => boolean;

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

@@ -161,7 +161,7 @@ export declare const actionToggleObjectsSnapMode: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     checked: (appState: Readonly<import("../types").AppState>) => boolean;
     predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, appProps: import("../types").ExcalidrawProps) => boolean;

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

@@ -161,7 +161,7 @@ export declare const actionToggleStats: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     checked: (appState: Readonly<import("../types").AppState>) => boolean;
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;

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

@@ -162,7 +162,7 @@ export declare const actionToggleViewMode: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     checked: (appState: Readonly<import("../types").AppState>) => boolean;
     predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, appProps: import("../types").ExcalidrawProps) => boolean;

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

@@ -162,7 +162,7 @@ export declare const actionToggleZenMode: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        storeAction: import("../store").StoreActionType;
+        storeAction: "none";
     };
     checked: (appState: Readonly<import("../types").AppState>) => boolean;
     predicate: (elements: readonly import("../element/types").ExcalidrawElement[], appState: import("../types").AppState, appProps: import("../types").ExcalidrawProps) => boolean;

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

@@ -2,6 +2,7 @@
 export declare const actionSendBackward: {
     name: "sendBackward";
     label: string;
+    keywords: string[];
     icon: JSX.Element;
     trackEvent: {
         category: "element";
@@ -9,7 +10,7 @@ export declare const actionSendBackward: {
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
         elements: readonly import("../element/types").ExcalidrawElement[];
         appState: Readonly<import("../types").AppState>;
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     keyPriority: number;
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
@@ -20,6 +21,7 @@ export declare const actionSendBackward: {
 export declare const actionBringForward: {
     name: "bringForward";
     label: string;
+    keywords: string[];
     icon: JSX.Element;
     trackEvent: {
         category: "element";
@@ -27,7 +29,7 @@ export declare const actionBringForward: {
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
         elements: readonly import("../element/types").ExcalidrawElement[];
         appState: Readonly<import("../types").AppState>;
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     keyPriority: number;
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
@@ -38,6 +40,7 @@ export declare const actionBringForward: {
 export declare const actionSendToBack: {
     name: "sendToBack";
     label: string;
+    keywords: string[];
     icon: JSX.Element;
     trackEvent: {
         category: "element";
@@ -45,7 +48,7 @@ export declare const actionSendToBack: {
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
         elements: readonly import("../element/types").ExcalidrawElement[] | import("../element/types").ExcalidrawElement[];
         appState: Readonly<import("../types").AppState>;
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;
@@ -55,6 +58,7 @@ export declare const actionSendToBack: {
 export declare const actionBringToFront: {
     name: "bringToFront";
     label: string;
+    keywords: string[];
     icon: JSX.Element;
     trackEvent: {
         category: "element";
@@ -62,7 +66,7 @@ export declare const actionBringToFront: {
     perform: (elements: readonly import("../element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
         elements: readonly import("../element/types").ExcalidrawElement[] | import("../element/types").ExcalidrawElement[];
         appState: Readonly<import("../types").AppState>;
-        storeAction: import("../store").StoreActionType;
+        storeAction: "capture";
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
     PanelComponent: ({ updateData, appState }: import("./types").PanelComponentProps) => JSX.Element;

package/dist/excalidraw/actions/actionZindex.js

@@ -10,6 +10,7 @@ import { StoreAction } from "../store";
 export const actionSendBackward = register({
     name: "sendBackward",
     label: "labels.sendBackward",
+    keywords: ["move down", "zindex", "layer"],
     icon: SendBackwardIcon,
     trackEvent: { category: "element" },
     perform: (elements, appState) => {
@@ -28,6 +29,7 @@ export const actionSendBackward = register({
 export const actionBringForward = register({
     name: "bringForward",
     label: "labels.bringForward",
+    keywords: ["move up", "zindex", "layer"],
     icon: BringForwardIcon,
     trackEvent: { category: "element" },
     perform: (elements, appState) => {
@@ -46,6 +48,7 @@ export const actionBringForward = register({
 export const actionSendToBack = register({
     name: "sendToBack",
     label: "labels.sendToBack",
+    keywords: ["move down", "zindex", "layer"],
     icon: SendToBackIcon,
     trackEvent: { category: "element" },
     perform: (elements, appState) => {
@@ -69,6 +72,7 @@ export const actionSendToBack = register({
 export const actionBringToFront = register({
     name: "bringToFront",
     label: "labels.bringToFront",
+    keywords: ["move up", "zindex", "layer"],
     icon: BringToFrontIcon,
     trackEvent: { category: "element" },
     perform: (elements, appState) => {

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

@@ -1,7 +1,7 @@
 import React from "react";
-import { Action, UpdaterFn, ActionName, ActionResult, PanelComponentProps, ActionSource } from "./types";
-import { OrderedExcalidrawElement } from "../element/types";
-import { AppClassProperties, AppState } from "../types";
+import type { Action, UpdaterFn, ActionName, ActionResult, PanelComponentProps, ActionSource } from "./types";
+import type { OrderedExcalidrawElement } from "../element/types";
+import type { AppClassProperties, AppState } from "../types";
 export declare class ActionManager {
     actions: Record<ActionName, Action>;
     updater: (actionResult: ActionResult | Promise<ActionResult>) => void;

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

@@ -1,4 +1,4 @@
-import { Action } from "./types";
+import type { Action } from "./types";
 export declare let actions: readonly Action[];
 export declare const register: <T extends Action>(action: T) => T & {
     keyTest?: (unknown extends T["keyTest"] ? never : T["keyTest"]) | undefined;

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

@@ -1,4 +1,4 @@
-import { SubtypeOf } from "../utility-types";
-import { ActionName } from "./types";
+import type { SubtypeOf } from "../utility-types";
+import type { ActionName } from "./types";
 export type ShortcutName = SubtypeOf<ActionName, "toggleTheme" | "loadScene" | "clearCanvas" | "cut" | "copy" | "paste" | "copyStyles" | "pasteStyles" | "selectAll" | "deleteSelectedElements" | "duplicateSelection" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyAsPng" | "copyAsSvg" | "group" | "ungroup" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "addToLibrary" | "viewMode" | "flipHorizontal" | "flipVertical" | "hyperlink" | "toggleElementLock" | "resetZoom" | "zoomOut" | "zoomIn" | "zoomToFit" | "zoomToFitSelectionInViewport" | "zoomToFitSelection" | "toggleEraserTool" | "toggleHandTool" | "setFrameAsActiveTool" | "saveFileToDisk" | "saveToActiveFile" | "toggleShortcuts"> | "saveScene" | "imageExport" | "commandPalette";
 export declare const getShortcutFromShortcutName: (name: ShortcutName, idx?: number) => string;

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

@@ -1,8 +1,8 @@
-import React from "react";
-import { ExcalidrawElement, OrderedExcalidrawElement } from "../element/types";
-import { AppClassProperties, AppState, ExcalidrawProps, BinaryFiles, UIAppState } from "../types";
-import { MarkOptional } from "../utility-types";
-import { StoreActionType } from "../store";
+import type React from "react";
+import type { ExcalidrawElement, OrderedExcalidrawElement } from "../element/types";
+import type { AppClassProperties, AppState, ExcalidrawProps, BinaryFiles, UIAppState } from "../types";
+import type { MarkOptional } from "../utility-types";
+import type { StoreActionType } from "../store";
 export type ActionSource = "ui" | "keyboard" | "contextMenu" | "api" | "commandPalette";
 /** if false, the action should be prevented */
 export type ActionResult = {
@@ -15,7 +15,7 @@ export type ActionResult = {
 type ActionFn = (elements: readonly OrderedExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
 export type UpdaterFn = (res: ActionResult) => void;
 export type ActionFilterFn = (action: Action) => void;
-export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette";
+export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "objectsSnapMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToFitSelection" | "zoomToFitSelectionInViewport" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "updateFrameRendering" | "setFrameAsActiveTool" | "setEmbeddableAsActiveTool" | "createContainerFromText" | "wrapTextInContainer" | "commandPalette" | "autoResize";
 export type PanelComponentProps = {
     elements: readonly ExcalidrawElement[];
     appState: AppState;

package/dist/excalidraw/align.d.ts

@@ -1,4 +1,4 @@
-import { ElementsMap, ExcalidrawElement } from "./element/types";
+import type { ElementsMap, ExcalidrawElement } from "./element/types";
 export interface Alignment {
     position: "start" | "center" | "end";
     axis: "x" | "y";

package/dist/excalidraw/animated-trail.d.ts

@@ -1,5 +1,5 @@
-import { LaserPointerOptions } from "@excalidraw/laser-pointer";
-import { AnimationFrameHandler } from "./animation-frame-handler";
+import type { LaserPointerOptions } from "@excalidraw/laser-pointer";
+import type { AnimationFrameHandler } from "./animation-frame-handler";
 import type App from "./components/App";
 export interface Trail {
     start(container: SVGSVGElement): void;

package/dist/excalidraw/appState.d.ts

@@ -1,4 +1,4 @@
-import { AppState } from "./types";
+import type { AppState } from "./types";
 export declare const getDefaultAppState: () => Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
 export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>) => {
     zenModeEnabled?: boolean | undefined;

package/dist/excalidraw/change.d.ts

@@ -1,7 +1,7 @@
-import { ElementUpdate } from "./element/mutateElement";
-import { OrderedExcalidrawElement, SceneElementsMap } from "./element/types";
-import { AppState, ObservedAppState } from "./types";
-import { ValueOf } from "./utility-types";
+import type { ElementUpdate } from "./element/mutateElement";
+import type { OrderedExcalidrawElement, SceneElementsMap } from "./element/types";
+import type { AppState, ObservedAppState } from "./types";
+import type { ValueOf } from "./utility-types";
 /**
  * Represents the difference between two objects of the same type.
  *

package/dist/excalidraw/change.js

@@ -1,7 +1,7 @@
 import { ENV } from "./constants";
 import { BoundElement, BindableElement, bindingProperties, updateBoundElements, } from "./element/binding";
 import { LinearElementEditor } from "./element/linearElementEditor";
-import { mutateElement, newElementWith, } from "./element/mutateElement";
+import { mutateElement, newElementWith } from "./element/mutateElement";
 import { getBoundTextElementId, redrawTextBoundingBox, } from "./element/textElement";
 import { hasBoundTextElement, isBindableElement, isBoundToContainer, isTextElement, } from "./element/typeChecks";
 import { orderByFractionalIndex, syncMovedIndices } from "./fractionalIndex";
@@ -858,15 +858,22 @@ export class ElementsChange {
         if (!flags.containsZindexDifference) {
             return elements;
         }
-        const previous = Array.from(elements.values());
-        const reordered = orderByFractionalIndex([...previous]);
-        if (!flags.containsVisibleDifference &&
-            Delta.isRightDifferent(previous, reordered, true)) {
+        const unordered = Array.from(elements.values());
+        const ordered = orderByFractionalIndex([...unordered]);
+        const moved = Delta.getRightDifferences(unordered, ordered, true).reduce((acc, arrayIndex) => {
+            const candidate = unordered[Number(arrayIndex)];
+            if (candidate && changed.has(candidate.id)) {
+                acc.set(candidate.id, candidate);
+            }
+            return acc;
+        }, new Map());
+        if (!flags.containsVisibleDifference && moved.size) {
             // we found a difference in order!
             flags.containsVisibleDifference = true;
         }
-        // let's synchronize all invalid indices of moved elements
-        return arrayToMap(syncMovedIndices(reordered, changed));
+        // synchronize all elements that were actually moved
+        // could fallback to synchronizing all invalid indices
+        return arrayToMap(syncMovedIndices(ordered, moved));
     }
     /**
      * It is necessary to post process the partials in case of reference values,

package/dist/excalidraw/charts.d.ts

@@ -1,4 +1,4 @@
-import { NonDeletedExcalidrawElement } from "./element/types";
+import type { NonDeletedExcalidrawElement } from "./element/types";
 export type ChartElements = readonly NonDeletedExcalidrawElement[];
 export interface Spreadsheet {
     title: string | null;

package/dist/excalidraw/clients.d.ts

@@ -1,5 +1,5 @@
-import { InteractiveCanvasRenderConfig } from "./scene/types";
-import { Collaborator, InteractiveCanvasAppState, SocketId } from "./types";
+import type { InteractiveCanvasRenderConfig } from "./scene/types";
+import type { Collaborator, InteractiveCanvasAppState, SocketId } from "./types";
 export declare const getClientColor: (socketId: SocketId, collaborator: Collaborator | undefined) => string;
 /**
  * returns first char, capitalized

package/dist/excalidraw/clients.js

@@ -1,6 +1,6 @@
 import { COLOR_CHARCOAL_BLACK, COLOR_VOICE_CALL, COLOR_WHITE, THEME, } from "./constants";
 import { roundRect } from "./renderer/roundRect";
-import { UserIdleState, } from "./types";
+import { UserIdleState } from "./types";
 function hashToInteger(id) {
     let hash = 0;
     if (id.length === 0) {

package/dist/excalidraw/clipboard.d.ts

@@ -1,6 +1,6 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement } from "./element/types";
-import { BinaryFiles } from "./types";
-import { Spreadsheet } from "./charts";
+import type { ExcalidrawElement, NonDeletedExcalidrawElement } from "./element/types";
+import type { BinaryFiles } from "./types";
+import type { Spreadsheet } from "./charts";
 import { ALLOWED_PASTE_MIME_TYPES } from "./constants";
 export type PastedMixedContent = {
     type: "text" | "imageUrl";

package/dist/excalidraw/colors.d.ts

@@ -1,6 +1,6 @@
 import oc from "open-color";
 import { COLOR_WHITE, COLOR_CHARCOAL_BLACK, COLOR_TRANSPARENT } from "./constants";
-import { Merge } from "./utility-types";
+import type { Merge } from "./utility-types";
 export type ColorPickerColor = Exclude<keyof oc, "indigo" | "lime" | "black"> | "transparent" | "charcoal" | "bronze";
 export type ColorTuple = readonly [string, string, string, string, string];
 export type ColorPalette = Merge<Record<ColorPickerColor, ColorTuple>, {

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ActionManager } from "../actions/manager";
-import { ExcalidrawElement, NonDeletedElementsMap, NonDeletedSceneElementsMap } from "../element/types";
-import { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
+import type { ActionManager } from "../actions/manager";
+import type { ExcalidrawElement, NonDeletedElementsMap, NonDeletedSceneElementsMap } from "../element/types";
+import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
 import "./Actions.scss";
 export declare const canChangeStrokeColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;
 export declare const canChangeBackgroundColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;

package/dist/excalidraw/components/Actions.js

@@ -9,7 +9,7 @@ import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
-import { hasBoundTextElement, isTextElement } from "../element/typeChecks";
+import { hasBoundTextElement, isLinearElement, isTextElement, } from "../element/typeChecks";
 import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
 import { Tooltip } from "./Tooltip";
@@ -53,6 +53,9 @@ export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) =
         !isTransparent(appState.currentItemBackgroundColor)) ||
         targetElements.some((element) => hasBackground(element.type) && !isTransparent(element.backgroundColor));
     const showLinkIcon = targetElements.length === 1 || isSingleElementBoundContainer;
+    const showLineEditorAction = !appState.editingLinearElement &&
+        targetElements.length === 1 &&
+        isLinearElement(targetElements[0]);
     return (_jsxs("div", { className: "panelColumn", children: [_jsx("div", { children: canChangeStrokeColor(appState, targetElements) &&
                     renderAction("changeStrokeColor") }), canChangeBackgroundColor(appState, targetElements) && (_jsx("div", { children: renderAction("changeBackgroundColor") })), showFillIcons && renderAction("changeFillStyle"), (hasStrokeWidth(appState.activeTool.type) ||
                 targetElements.some((element) => hasStrokeWidth(element.type))) &&
@@ -65,14 +68,14 @@ export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) =
                         suppportsHorizontalAlign(targetElements, elementsMap)) &&
                         renderAction("changeTextAlign")] })), shouldAllowVerticalAlign(targetElements, elementsMap) &&
                 renderAction("changeVerticalAlign"), (canHaveArrowheads(appState.activeTool.type) ||
-                targetElements.some((element) => canHaveArrowheads(element.type))) && (_jsx(_Fragment, { children: renderAction("changeArrowhead") })), renderAction("changeOpacity"), _jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.layers") }), _jsxs("div", { className: "buttonList", children: [renderAction("sendToBack"), renderAction("sendBackward"), renderAction("bringToFront"), renderAction("bringForward")] })] }), targetElements.length > 1 && !isSingleElementBoundContainer && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.align") }), _jsxs("div", { className: "buttonList", children: [isRTL ? (_jsxs(_Fragment, { children: [renderAction("alignRight"), renderAction("alignHorizontallyCentered"), renderAction("alignLeft")] })) : (_jsxs(_Fragment, { children: [renderAction("alignLeft"), renderAction("alignHorizontallyCentered"), renderAction("alignRight")] })), targetElements.length > 2 &&
+                targetElements.some((element) => canHaveArrowheads(element.type))) && (_jsx(_Fragment, { children: renderAction("changeArrowhead") })), renderAction("changeOpacity"), _jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.layers") }), _jsxs("div", { className: "buttonList", children: [renderAction("sendToBack"), renderAction("sendBackward"), renderAction("bringForward"), renderAction("bringToFront")] })] }), targetElements.length > 1 && !isSingleElementBoundContainer && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.align") }), _jsxs("div", { className: "buttonList", children: [isRTL ? (_jsxs(_Fragment, { children: [renderAction("alignRight"), renderAction("alignHorizontallyCentered"), renderAction("alignLeft")] })) : (_jsxs(_Fragment, { children: [renderAction("alignLeft"), renderAction("alignHorizontallyCentered"), renderAction("alignRight")] })), targetElements.length > 2 &&
                                 renderAction("distributeHorizontally"), _jsx("div", { style: { flexBasis: "100%", height: 0 } }), _jsxs("div", { style: {
                                     display: "flex",
                                     flexWrap: "wrap",
                                     gap: ".5rem",
                                     marginTop: "-0.5rem",
                                 }, children: [renderAction("alignTop"), renderAction("alignVerticallyCentered"), renderAction("alignBottom"), targetElements.length > 2 &&
-                                        renderAction("distributeVertically")] })] })] })), !isEditing && targetElements.length > 0 && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.actions") }), _jsxs("div", { className: "buttonList", children: [!device.editor.isMobile && renderAction("duplicateSelection"), !device.editor.isMobile && renderAction("deleteSelectedElements"), renderAction("group"), renderAction("ungroup"), showLinkIcon && renderAction("hyperlink")] })] }))] }));
+                                        renderAction("distributeVertically")] })] })] })), !isEditing && targetElements.length > 0 && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.actions") }), _jsxs("div", { className: "buttonList", children: [!device.editor.isMobile && renderAction("duplicateSelection"), !device.editor.isMobile && renderAction("deleteSelectedElements"), renderAction("group"), renderAction("ungroup"), showLinkIcon && renderAction("hyperlink"), showLineEditorAction && renderAction("toggleLinearEditor")] })] }))] }));
 };
 export const ShapesSwitcher = ({ activeTool, appState, app, UIOptions, }) => {
     const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
@@ -122,8 +125,8 @@ export const ShapesSwitcher = ({ activeTool, appState, app, UIOptions, }) => {
                                     fontSize: 8,
                                     fontFamily: "Cascadia, monospace",
                                     position: "absolute",
-                                    background: "pink",
-                                    color: "black",
+                                    background: "var(--color-promo)",
+                                    color: "var(--color-surface-lowest)",
                                     bottom: 3,
                                     right: 4,
                                 }, children: "AI" }))] }), _jsxs(DropdownMenu.Content, { onClickOutside: () => setIsExtraToolsMenuOpen(false), onSelect: () => setIsExtraToolsMenuOpen(false), className: "App-toolbar__extra-tools-dropdown", children: [_jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "frame" }), icon: frameToolIcon, shortcut: KEYS.F.toLocaleUpperCase(), "data-testid": "toolbar-frame", selected: frameToolSelected, children: t("toolBar.frame") }), _jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "embeddable" }), icon: EmbedIcon, "data-testid": "toolbar-embeddable", selected: embeddableToolSelected, children: t("toolBar.embeddable") }), _jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "laser" }), icon: laserPointerToolIcon, "data-testid": "toolbar-laser", selected: laserToolSelected, shortcut: KEYS.K.toLocaleUpperCase(), children: t("toolBar.laser") }), _jsx("div", { style: { margin: "6px 0", fontSize: 14, fontWeight: 600 }, children: "Generate" }), app.props.aiEnabled !== false && _jsx(TTDDialogTriggerTunnel.Out, {}), _jsx(DropdownMenu.Item, { onSelect: () => app.setOpenDialog({ name: "ttd", tab: "mermaid" }), icon: mermaidLogoIcon, "data-testid": "toolbar-embeddable", children: t("toolBar.mermaidToExcalidraw") }), app.props.aiEnabled !== false && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu.Item, { onSelect: () => app.onMagicframeToolSelect(), icon: MagicIcon, "data-testid": "toolbar-magicframe", children: [t("toolBar.magicframe"), _jsx(DropdownMenu.Item.Badge, { children: "AI" })] }), _jsx(DropdownMenu.Item, { onSelect: () => {
@@ -137,7 +140,7 @@ export const ShapesSwitcher = ({ activeTool, appState, app, UIOptions, }) => {
 };
 export const ZoomActions = ({ renderAction, zoom, }) => (_jsx(Stack.Col, { gap: 1, className: "zoom-actions", children: _jsxs(Stack.Row, { align: "center", children: [renderAction("zoomOut"), renderAction("resetZoom"), renderAction("zoomIn")] }) }));
 export const UndoRedoActions = ({ renderAction, className, }) => (_jsxs("div", { className: `undo-redo-buttons ${className}`, children: [_jsx("div", { className: "undo-button-container", children: _jsx(Tooltip, { label: t("buttons.undo"), children: renderAction("undo") }) }), _jsx("div", { className: "redo-button-container", children: _jsxs(Tooltip, { label: t("buttons.redo"), children: [" ", renderAction("redo")] }) })] }));
-export const ExitZenModeAction = ({ actionManager, showExitZenModeBtn, }) => (_jsx("button", { className: clsx("disable-zen-mode", {
+export const ExitZenModeAction = ({ actionManager, showExitZenModeBtn, }) => (_jsx("button", { type: "button", className: clsx("disable-zen-mode", {
         "disable-zen-mode--visible": showExitZenModeBtn,
     }), onClick: () => actionManager.executeAction(actionToggleZenMode), children: t("buttons.exitZenMode") }));
 export const FinalizeAction = ({ renderAction, className, }) => (_jsx("div", { className: `finalize-button ${className}`, children: renderAction("finalize", { size: "small" }) }));

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

@@ -1,15 +1,15 @@
 import React from "react";
-import { RoughCanvas } from "roughjs/bin/canvas";
+import type { RoughCanvas } from "roughjs/bin/canvas";
 import { ActionManager } from "../actions/manager";
-import { EXPORT_IMAGE_TYPES } from "../constants";
-import { ExportedElements } from "../data";
+import type { EXPORT_IMAGE_TYPES } from "../constants";
+import type { ExportedElements } from "../data";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "../element/types";
+import type { 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 type { GeometricShape } from "../../utils/geometry/shape";
+import type { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload } from "../types";
+import type { FileSystemHandle } from "../data/filesystem";
 import { Renderer } from "../scene/Renderer";
 import { Emitter } from "../emitter";
 import { Store } from "../store";
@@ -342,10 +342,10 @@ declare class App extends React.Component<AppProps, AppState> {
         elements?: SceneData["elements"];
         appState?: Pick<AppState, K> | null | undefined;
         collaborators?: SceneData["collaborators"];
-        /** @default StoreAction.CAPTURE */
+        /** @default StoreAction.NONE */
         storeAction?: SceneData["storeAction"];
     }) => void;
-    private onSceneUpdated;
+    private triggerRender;
     /**
      * @returns whether the menu was toggled on or off
      */
@@ -395,7 +395,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private getBoundTextShape;
     private getElementAtPosition;
     private getElementsAtPosition;
-    private getHitThreshold;
+    private getElementHitThreshold;
     private hitElement;
     private getTextBindableContainerAtPosition;
     private startTextEditing;
@@ -474,7 +474,6 @@ declare class App extends React.Component<AppProps, AppState> {
     private updateBindingEnabledOnPointerMove;
     private maybeSuggestBindingAtCursor;
     private maybeSuggestBindingsForLinearElementAtCoords;
-    private maybeSuggestBindingForAll;
     private clearSelection;
     private handleInteractiveCanvasRef;
     private handleAppOnDrop;