@excalidraw/excalidraw 0.17.1-550a388 → 0.17.1-62228e0

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,5 +1,5 @@
 import oc from "open-color";
-import { Merge } from "./utility-types";
+import type { Merge } from "./utility-types";
 export type ColorPickerColor = Exclude<keyof oc, "indigo" | "lime"> | "transparent" | "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))) &&
@@ -61,18 +64,18 @@ export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) =
                 renderAction("changeStrokeShape"), (hasStrokeStyle(appState.activeTool.type) ||
                 targetElements.some((element) => hasStrokeStyle(element.type))) && (_jsxs(_Fragment, { children: [renderAction("changeStrokeStyle"), renderAction("changeSloppiness")] })), (canChangeRoundness(appState.activeTool.type) ||
                 targetElements.some((element) => canChangeRoundness(element.type))) && (_jsx(_Fragment, { children: renderAction("changeRoundness") })), (appState.activeTool.type === "text" ||
-                targetElements.some(isTextElement)) && (_jsxs(_Fragment, { children: [renderAction("changeFontSize"), renderAction("changeFontFamily"), (appState.activeTool.type === "text" ||
+                targetElements.some(isTextElement)) && (_jsxs(_Fragment, { children: [renderAction("changeFontFamily"), renderAction("changeFontSize"), (appState.activeTool.type === "text" ||
                         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,16 +1,19 @@
 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 { ActionResult } from "../actions/types";
+import type { EXPORT_IMAGE_TYPES } from "../constants";
+import type { ExportedElements } from "../data";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement } from "../element/types";
-import History from "../history";
+import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "../element/types";
+import { History } from "../history";
 import Scene from "../scene/Scene";
-import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload } from "../types";
-import { FileSystemHandle } from "../data/filesystem";
+import type { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload } from "../types";
+import type { FileSystemHandle } from "../data/filesystem";
+import { Fonts } from "../fonts";
 import { Renderer } from "../scene/Renderer";
 import { Emitter } from "../emitter";
+import { Store } from "../store";
 import { AnimationFrameHandler } from "../animation-frame-handler";
 import { AnimatedTrail } from "../animated-trail";
 import { LaserTrails } from "../laser-trails";
@@ -48,13 +51,14 @@ declare class App extends React.Component<AppProps, AppState> {
     device: Device;
     private excalidrawContainerRef;
     scene: Scene;
+    fonts: Fonts;
     renderer: Renderer;
-    private fonts;
     private resizeObserver;
     private nearestScrollableContainer;
     library: AppClassProperties["library"];
     libraryItemsFromStorage: LibraryItems | undefined;
     id: string;
+    private store;
     private history;
     private excalidrawContainerValue;
     files: BinaryFiles;
@@ -112,7 +116,7 @@ declare class App extends React.Component<AppProps, AppState> {
                 x: number;
                 y: number;
             };
-            arrowDirection: "end" | "origin";
+            arrowDirection: "origin" | "end";
             center: {
                 x: number;
                 y: number;
@@ -176,7 +180,7 @@ declare class App extends React.Component<AppProps, AppState> {
                 x: number;
                 y: number;
             };
-            arrowDirection: "end" | "origin";
+            arrowDirection: "origin" | "end";
             center: {
                 x: number;
                 y: number;
@@ -232,8 +236,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;
@@ -249,11 +253,12 @@ declare class App extends React.Component<AppProps, AppState> {
     private onMagicSettingsConfirm;
     onMagicframeToolSelect: () => void;
     private openEyeDropper;
-    private syncActionResult;
+    syncActionResult: (actionResult: ActionResult) => void;
     private onBlur;
     private onUnload;
     private disableEvent;
     private resetHistory;
+    private resetStore;
     /**
      * Resets scene & history.
      * ! Do not use to clear scene user action !
@@ -338,9 +343,10 @@ declare class App extends React.Component<AppProps, AppState> {
         elements?: SceneData["elements"];
         appState?: Pick<AppState, K> | null | undefined;
         collaborators?: SceneData["collaborators"];
-        commitToHistory?: SceneData["commitToHistory"];
+        /** @default StoreAction.NONE */
+        storeAction?: SceneData["storeAction"];
     }) => void;
-    private onSceneUpdated;
+    private triggerRender;
     /**
      * @returns whether the menu was toggled on or off
      */
@@ -382,8 +388,12 @@ declare class App extends React.Component<AppProps, AppState> {
     private handleTextWysiwyg;
     private deselectElements;
     private getTextElementAtPosition;
+    private getBoundTextShape;
     private getElementAtPosition;
     private getElementsAtPosition;
+    private getElementHitThreshold;
+    private hitElement;
+    private getTextBindableContainerAtPosition;
     private startTextEditing;
     private handleCanvasDoubleClick;
     private getElementLinkAtPosition;
@@ -460,7 +470,6 @@ declare class App extends React.Component<AppProps, AppState> {
     private updateBindingEnabledOnPointerMove;
     private maybeSuggestBindingAtCursor;
     private maybeSuggestBindingsForLinearElementAtCoords;
-    private maybeSuggestBindingForAll;
     private clearSelection;
     private handleInteractiveCanvasRef;
     private handleAppOnDrop;
@@ -486,6 +495,7 @@ declare global {
             setState: React.Component<any, AppState>["setState"];
             app: InstanceType<typeof App>;
             history: History;
+            store: Store;
         };
     }
 }