@excalidraw/element 0.18.0-3bdaafe → 0.18.0-4e0441e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/dist/dev/index.js +317 -216
  2. package/dist/dev/index.js.map +3 -3
  3. package/dist/prod/index.js +11 -11
  4. package/dist/types/common/src/constants.d.ts +21 -4
  5. package/dist/types/common/src/utils.d.ts +3 -1
  6. package/dist/types/element/src/renderElement.d.ts +4 -1
  7. package/dist/types/element/src/transformHandles.d.ts +1 -1
  8. package/dist/types/excalidraw/actions/actionAddToLibrary.d.ts +21 -6
  9. package/dist/types/excalidraw/actions/actionBoundText.d.ts +14 -4
  10. package/dist/types/excalidraw/actions/actionCanvas.d.ts +92 -40
  11. package/dist/types/excalidraw/actions/actionClipboard.d.ts +42 -12
  12. package/dist/types/excalidraw/actions/actionCropEditor.d.ts +7 -2
  13. package/dist/types/excalidraw/actions/actionDeleteSelected.d.ts +21 -6
  14. package/dist/types/excalidraw/actions/actionElementLink.d.ts +7 -2
  15. package/dist/types/excalidraw/actions/actionElementLock.d.ts +14 -4
  16. package/dist/types/excalidraw/actions/actionEmbeddable.d.ts +7 -2
  17. package/dist/types/excalidraw/actions/actionExport.d.ts +63 -18
  18. package/dist/types/excalidraw/actions/actionFinalize.d.ts +14 -4
  19. package/dist/types/excalidraw/actions/actionFrame.d.ts +28 -8
  20. package/dist/types/excalidraw/actions/actionGroup.d.ts +14 -4
  21. package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +8 -3
  22. package/dist/types/excalidraw/actions/actionLink.d.ts +6 -1
  23. package/dist/types/excalidraw/actions/actionMenu.d.ts +7 -368
  24. package/dist/types/excalidraw/actions/actionNavigate.d.ts +14 -4
  25. package/dist/types/excalidraw/actions/actionProperties.d.ts +122 -38
  26. package/dist/types/excalidraw/actions/actionSelectAll.d.ts +7 -2
  27. package/dist/types/excalidraw/actions/actionStyles.d.ts +7 -2
  28. package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +7 -2
  29. package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +7 -2
  30. package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +7 -2
  31. package/dist/types/excalidraw/actions/actionToggleStats.d.ts +7 -2
  32. package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +7 -2
  33. package/dist/types/excalidraw/actions/actionToggleZenMode.d.ts +7 -2
  34. package/dist/types/excalidraw/actions/index.d.ts +2 -2
  35. package/dist/types/excalidraw/actions/types.d.ts +1 -1
  36. package/dist/types/excalidraw/appState.d.ts +5 -1
  37. package/dist/types/excalidraw/clipboard.d.ts +63 -1
  38. package/dist/types/excalidraw/components/Actions.d.ts +17 -3
  39. package/dist/types/excalidraw/components/App.d.ts +1 -2
  40. package/dist/types/excalidraw/components/ColorPicker/ColorPicker.d.ts +1 -0
  41. package/dist/types/excalidraw/components/ColorPicker/Picker.d.ts +2 -0
  42. package/dist/types/excalidraw/components/ColorPicker/PickerColorList.d.ts +2 -1
  43. package/dist/types/excalidraw/components/ColorPicker/ShadeList.d.ts +2 -1
  44. package/dist/types/excalidraw/components/CommandPalette/CommandPalette.d.ts +1 -0
  45. package/dist/types/excalidraw/components/ExcalidrawLogo.d.ts +1 -1
  46. package/dist/types/excalidraw/components/FontPicker/FontPicker.d.ts +2 -1
  47. package/dist/types/excalidraw/components/FontPicker/FontPickerTrigger.d.ts +3 -1
  48. package/dist/types/excalidraw/components/InlineIcon.d.ts +3 -1
  49. package/dist/types/excalidraw/components/LayerUI.d.ts +2 -1
  50. package/dist/types/excalidraw/components/LibraryMenuSection.d.ts +1 -1
  51. package/dist/types/excalidraw/components/MobileMenu.d.ts +3 -5
  52. package/dist/types/excalidraw/components/MobileToolBar.d.ts +11 -0
  53. package/dist/types/excalidraw/components/Popover.d.ts +2 -1
  54. package/dist/types/excalidraw/components/PropertiesPopover.d.ts +1 -0
  55. package/dist/types/excalidraw/components/TTDDialog/TTDDialogTrigger.d.ts +1 -2
  56. package/dist/types/excalidraw/components/TextField.d.ts +1 -0
  57. package/dist/types/excalidraw/components/ToolPopover.d.ts +25 -0
  58. package/dist/types/excalidraw/components/dropdownMenu/DropdownMenu.d.ts +4 -2
  59. package/dist/types/excalidraw/components/dropdownMenu/DropdownMenuContent.d.ts +2 -1
  60. package/dist/types/excalidraw/components/icons.d.ts +5 -0
  61. package/dist/types/excalidraw/data/blob.d.ts +2 -9
  62. package/dist/types/excalidraw/data/types.d.ts +4 -1
  63. package/dist/types/excalidraw/hooks/useLibraryItemSvg.d.ts +1 -1
  64. package/dist/types/excalidraw/hooks/useTextEditorFocus.d.ts +14 -0
  65. package/dist/types/excalidraw/shortcut.d.ts +1 -0
  66. package/dist/types/excalidraw/types.d.ts +10 -3
  67. package/dist/types/math/src/segment.d.ts +1 -0
  68. package/package.json +3 -3
@@ -48,6 +48,10 @@ export declare const actionToggleStats: {
48
48
  locked: boolean;
49
49
  fromSelection: boolean;
50
50
  } & import("../types").ActiveTool;
51
+ preferredSelectionTool: {
52
+ type: "selection" | "lasso";
53
+ initialized: boolean;
54
+ };
51
55
  penMode: boolean;
52
56
  penDetected: boolean;
53
57
  exportBackground: boolean;
@@ -80,8 +84,8 @@ export declare const actionToggleStats: {
80
84
  zoom: Readonly<{
81
85
  value: import("../types").NormalizedZoomValue;
82
86
  }>;
83
- openMenu: "canvas" | "shape" | null;
84
- openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
87
+ openMenu: "canvas" | null;
88
+ openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
85
89
  openSidebar: {
86
90
  name: string;
87
91
  tab?: string | undefined;
@@ -178,6 +182,7 @@ export declare const actionToggleStats: {
178
182
  lockedMultiSelections: {
179
183
  [groupId: string]: true;
180
184
  };
185
+ stylesPanelMode: "compact" | "full" | "mobile";
181
186
  };
182
187
  captureUpdate: "EVENTUALLY";
183
188
  };
@@ -45,6 +45,10 @@ export declare const actionToggleViewMode: {
45
45
  locked: boolean;
46
46
  fromSelection: boolean;
47
47
  } & import("../types").ActiveTool;
48
+ preferredSelectionTool: {
49
+ type: "selection" | "lasso";
50
+ initialized: boolean;
51
+ };
48
52
  penMode: boolean;
49
53
  penDetected: boolean;
50
54
  exportBackground: boolean;
@@ -77,8 +81,8 @@ export declare const actionToggleViewMode: {
77
81
  zoom: Readonly<{
78
82
  value: import("../types").NormalizedZoomValue;
79
83
  }>;
80
- openMenu: "canvas" | "shape" | null;
81
- openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
84
+ openMenu: "canvas" | null;
85
+ openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
82
86
  openSidebar: {
83
87
  name: string;
84
88
  tab?: string | undefined;
@@ -178,6 +182,7 @@ export declare const actionToggleViewMode: {
178
182
  lockedMultiSelections: {
179
183
  [groupId: string]: true;
180
184
  };
185
+ stylesPanelMode: "compact" | "full" | "mobile";
181
186
  };
182
187
  captureUpdate: "EVENTUALLY";
183
188
  };
@@ -45,6 +45,10 @@ export declare const actionToggleZenMode: {
45
45
  locked: boolean;
46
46
  fromSelection: boolean;
47
47
  } & import("../types").ActiveTool;
48
+ preferredSelectionTool: {
49
+ type: "selection" | "lasso";
50
+ initialized: boolean;
51
+ };
48
52
  penMode: boolean;
49
53
  penDetected: boolean;
50
54
  exportBackground: boolean;
@@ -77,8 +81,8 @@ export declare const actionToggleZenMode: {
77
81
  zoom: Readonly<{
78
82
  value: import("../types").NormalizedZoomValue;
79
83
  }>;
80
- openMenu: "canvas" | "shape" | null;
81
- openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
84
+ openMenu: "canvas" | null;
85
+ openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
82
86
  openSidebar: {
83
87
  name: string;
84
88
  tab?: string | undefined;
@@ -178,6 +182,7 @@ export declare const actionToggleZenMode: {
178
182
  lockedMultiSelections: {
179
183
  [groupId: string]: true;
180
184
  };
185
+ stylesPanelMode: "compact" | "full" | "mobile";
181
186
  };
182
187
  captureUpdate: "EVENTUALLY";
183
188
  };
@@ -2,13 +2,13 @@ export { actionDeleteSelected } from "./actionDeleteSelected";
2
2
  export { actionBringForward, actionBringToFront, actionSendBackward, actionSendToBack, } from "./actionZindex";
3
3
  export { actionSelectAll } from "./actionSelectAll";
4
4
  export { actionDuplicateSelection } from "./actionDuplicateSelection";
5
- export { actionChangeStrokeColor, actionChangeBackgroundColor, actionChangeStrokeWidth, actionChangeFillStyle, actionChangeSloppiness, actionChangeOpacity, actionChangeFontSize, actionChangeFontFamily, actionChangeTextAlign, actionChangeVerticalAlign, } from "./actionProperties";
5
+ export { actionChangeStrokeColor, actionChangeBackgroundColor, actionChangeStrokeWidth, actionChangeFillStyle, actionChangeSloppiness, actionChangeOpacity, actionChangeFontSize, actionChangeFontFamily, actionChangeTextAlign, actionChangeVerticalAlign, actionChangeArrowProperties, } from "./actionProperties";
6
6
  export { actionChangeViewBackgroundColor, actionClearCanvas, actionZoomIn, actionZoomOut, actionResetZoom, actionZoomToFit, actionToggleTheme, } from "./actionCanvas";
7
7
  export { actionSetEmbeddableAsActiveTool } from "./actionEmbeddable";
8
8
  export { actionFinalize } from "./actionFinalize";
9
9
  export { actionChangeProjectName, actionChangeExportBackground, actionSaveToActiveFile, actionSaveFileToDisk, actionLoadScene, } from "./actionExport";
10
10
  export { actionCopyStyles, actionPasteStyles } from "./actionStyles";
11
- export { actionToggleCanvasMenu, actionToggleEditMenu, actionShortcuts, } from "./actionMenu";
11
+ export { actionShortcuts } from "./actionMenu";
12
12
  export { actionGroup, actionUngroup } from "./actionGroup";
13
13
  export { actionGoToCollaborator } from "./actionNavigate";
14
14
  export { actionAddToLibrary } from "./actionAddToLibrary";
@@ -14,7 +14,7 @@ export type ActionResult = {
14
14
  type ActionFn = (elements: readonly OrderedExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
15
15
  export type UpdaterFn = (res: ActionResult) => void;
16
16
  export type ActionFilterFn = (action: Action) => void;
17
- 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" | "changeArrowType" | "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" | "elementStats" | "searchMenu" | "copyElementLink" | "linkToElement" | "cropEditor" | "wrapSelectionInFrame" | "toggleLassoTool" | "toggleShapeSwitch" | "togglePolygon";
17
+ 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" | "changeArrowType" | "changeArrowProperties" | "changeOpacity" | "changeFontSize" | "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" | "elementStats" | "searchMenu" | "copyElementLink" | "linkToElement" | "cropEditor" | "wrapSelectionInFrame" | "toggleLassoTool" | "toggleShapeSwitch" | "togglePolygon";
18
18
  export type PanelComponentProps = {
19
19
  elements: readonly ExcalidrawElement[];
20
20
  appState: AppState;
@@ -24,6 +24,10 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
24
24
  locked: boolean;
25
25
  fromSelection: boolean;
26
26
  } & import("./types").ActiveTool) | undefined;
27
+ preferredSelectionTool?: {
28
+ type: "selection" | "lasso";
29
+ initialized: boolean;
30
+ } | undefined;
27
31
  penMode?: boolean | undefined;
28
32
  penDetected?: boolean | undefined;
29
33
  exportBackground?: boolean | undefined;
@@ -46,7 +50,7 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
46
50
  currentItemArrowType?: "round" | "sharp" | "elbow" | undefined;
47
51
  cursorButton?: "up" | "down" | undefined;
48
52
  scrolledOutside?: boolean | undefined;
49
- openMenu?: "canvas" | "shape" | null | undefined;
53
+ openMenu?: "canvas" | null | undefined;
50
54
  openSidebar?: {
51
55
  name: string;
52
56
  tab?: string | undefined;
@@ -1,5 +1,8 @@
1
1
  import { ALLOWED_PASTE_MIME_TYPES } from "@excalidraw/common";
2
+ import type { ValueOf } from "@excalidraw/common/utility-types";
3
+ import type { IMAGE_MIME_TYPES, STRING_MIME_TYPES } from "@excalidraw/common";
2
4
  import type { ExcalidrawElement, NonDeletedExcalidrawElement } from "@excalidraw/element/types";
5
+ import type { FileSystemHandle } from "./data/filesystem";
3
6
  import type { Spreadsheet } from "./charts";
4
7
  import type { BinaryFiles } from "./types";
5
8
  export type PastedMixedContent = {
@@ -57,10 +60,69 @@ export declare const readSystemClipboard: () => Promise<{
57
60
  "image/avif"?: string | File | undefined;
58
61
  "image/jfif"?: string | File | undefined;
59
62
  }>;
63
+ type AllowedParsedDataTransferItem = {
64
+ type: ValueOf<typeof IMAGE_MIME_TYPES>;
65
+ kind: "file";
66
+ file: File;
67
+ fileHandle: FileSystemHandle | null;
68
+ } | {
69
+ type: ValueOf<typeof STRING_MIME_TYPES>;
70
+ kind: "string";
71
+ value: string;
72
+ };
73
+ type ParsedDataTransferItem = {
74
+ type: string;
75
+ kind: "file";
76
+ file: File;
77
+ fileHandle: FileSystemHandle | null;
78
+ } | {
79
+ type: string;
80
+ kind: "string";
81
+ value: string;
82
+ };
83
+ type ParsedDataTransferItemType<T extends AllowedParsedDataTransferItem["type"]> = AllowedParsedDataTransferItem & {
84
+ type: T;
85
+ };
86
+ export type ParsedDataTransferFile = Extract<AllowedParsedDataTransferItem, {
87
+ kind: "file";
88
+ }>;
89
+ type ParsedDataTranferList = ParsedDataTransferItem[] & {
90
+ /**
91
+ * Only allows filtering by known `string` data types, since `file`
92
+ * types can have multiple items of the same type (e.g. multiple image files)
93
+ * unlike `string` data transfer items.
94
+ */
95
+ findByType: typeof findDataTransferItemType;
96
+ /**
97
+ * Only allows filtering by known `string` data types, since `file`
98
+ * types can have multiple items of the same type (e.g. multiple image files)
99
+ * unlike `string` data transfer items.
100
+ */
101
+ getData: typeof getDataTransferItemData;
102
+ getFiles: typeof getDataTransferFiles;
103
+ };
104
+ declare const findDataTransferItemType: <T extends ValueOf<{
105
+ readonly text: "text/plain";
106
+ readonly html: "text/html";
107
+ readonly json: "application/json";
108
+ readonly excalidraw: "application/vnd.excalidraw+json";
109
+ readonly excalidrawlib: "application/vnd.excalidrawlib+json";
110
+ readonly excalidrawlibIds: "application/vnd.excalidrawlib.ids+json";
111
+ }>>(this: ParsedDataTranferList, type: T) => ParsedDataTransferItemType<T> | null;
112
+ declare const getDataTransferItemData: <T extends ValueOf<{
113
+ readonly text: "text/plain";
114
+ readonly html: "text/html";
115
+ readonly json: "application/json";
116
+ readonly excalidraw: "application/vnd.excalidraw+json";
117
+ readonly excalidrawlib: "application/vnd.excalidrawlib+json";
118
+ readonly excalidrawlibIds: "application/vnd.excalidrawlib.ids+json";
119
+ }>>(this: ParsedDataTranferList, type: T) => ParsedDataTransferItemType<ValueOf<typeof STRING_MIME_TYPES>>["value"] | null;
120
+ declare const getDataTransferFiles: (this: ParsedDataTranferList) => ParsedDataTransferFile[];
121
+ export declare const parseDataTransferEvent: (event: ClipboardEvent | DragEvent | React.DragEvent<HTMLDivElement>) => Promise<ParsedDataTranferList>;
60
122
  /**
61
123
  * Attempts to parse clipboard event.
62
124
  */
63
- export declare const parseClipboard: (event: ClipboardEvent, isPlainPaste?: boolean) => Promise<ClipboardData>;
125
+ export declare const parseClipboard: (dataList: ParsedDataTranferList, isPlainPaste?: boolean) => Promise<ClipboardData>;
64
126
  export declare const copyBlobToClipboardAsPng: (blob: Blob | Promise<Blob>) => Promise<void>;
65
127
  export declare const copyTextToSystemClipboard: (text: string | null, clipboardEvent?: ClipboardEvent | null) => Promise<void>;
66
128
  export declare const isClipboardEvent: (event: React.SyntheticEvent | Event) => event is ClipboardEvent;
@@ -1,6 +1,6 @@
1
1
  import type { ExcalidrawElement, NonDeletedElementsMap, NonDeletedSceneElementsMap } from "@excalidraw/element/types";
2
2
  import "./Actions.scss";
3
- import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
3
+ import type { AppClassProperties, AppProps, UIAppState, Zoom, AppState } from "../types";
4
4
  import type { ActionManager } from "../actions/manager";
5
5
  export declare const canChangeStrokeColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;
6
6
  export declare const canChangeBackgroundColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;
@@ -10,9 +10,23 @@ export declare const SelectedShapeActions: ({ appState, elementsMap, renderActio
10
10
  renderAction: ActionManager["renderAction"];
11
11
  app: AppClassProperties;
12
12
  }) => import("react/jsx-runtime").JSX.Element;
13
- export declare const ShapesSwitcher: ({ activeTool, appState, app, UIOptions, }: {
14
- activeTool: UIAppState["activeTool"];
13
+ export declare const CompactShapeActions: ({ appState, elementsMap, renderAction, app, setAppState, }: {
14
+ appState: UIAppState;
15
+ elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
16
+ renderAction: ActionManager["renderAction"];
17
+ app: AppClassProperties;
18
+ setAppState: React.Component<any, AppState>["setState"];
19
+ }) => import("react/jsx-runtime").JSX.Element;
20
+ export declare const MobileShapeActions: ({ appState, elementsMap, renderAction, app, setAppState, }: {
15
21
  appState: UIAppState;
22
+ elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
23
+ renderAction: ActionManager["renderAction"];
24
+ app: AppClassProperties;
25
+ setAppState: React.Component<any, AppState>["setState"];
26
+ }) => import("react/jsx-runtime").JSX.Element;
27
+ export declare const ShapesSwitcher: ({ activeTool, setAppState, app, UIOptions, }: {
28
+ activeTool: UIAppState["activeTool"];
29
+ setAppState: React.Component<any, AppState>["setState"];
16
30
  app: AppClassProperties;
17
31
  UIOptions: AppProps["UIOptions"];
18
32
  }) => import("react/jsx-runtime").JSX.Element;
@@ -245,7 +245,6 @@ declare class App extends React.Component<AppProps, AppState> {
245
245
  }>]>;
246
246
  missingPointerEventCleanupEmitter: Emitter<[event: PointerEvent | null]>;
247
247
  onRemoveEventListenersEmitter: Emitter<[]>;
248
- defaultSelectionTool: "selection" | "lasso";
249
248
  constructor(props: AppProps);
250
249
  updateEditorAtom: <Value, Args extends unknown[], Result>(atom: WritableAtom<Value, Args, Result>, ...args: Args) => Result;
251
250
  private onWindowMessage;
@@ -300,8 +299,8 @@ declare class App extends React.Component<AppProps, AppState> {
300
299
  */
301
300
  private resetScene;
302
301
  private initializeScene;
303
- private isMobileOrTablet;
304
302
  private isMobileBreakpoint;
303
+ private isTabletBreakpoint;
305
304
  private refreshViewportBreakpoints;
306
305
  private refreshEditorBreakpoints;
307
306
  private clearImageShapeCache;
@@ -18,6 +18,7 @@ interface ColorPickerProps {
18
18
  palette?: ColorPaletteCustom | null;
19
19
  topPicks?: ColorTuple;
20
20
  updateData: (formData?: any) => void;
21
+ compactMode?: boolean;
21
22
  }
22
23
  export declare const ColorPicker: ({ type, color, onChange, label, elements, palette, topPicks, updateData, appState, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
23
24
  export {};
@@ -10,8 +10,10 @@ interface PickerProps {
10
10
  palette: ColorPaletteCustom;
11
11
  updateData: (formData?: any) => void;
12
12
  children?: React.ReactNode;
13
+ showTitle?: boolean;
13
14
  onEyeDropperToggle: (force?: boolean) => void;
14
15
  onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
16
+ showHotKey?: boolean;
15
17
  }
16
18
  export declare const Picker: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<unknown>>;
17
19
  export {};
@@ -4,6 +4,7 @@ interface PickerColorListProps {
4
4
  color: string | null;
5
5
  onChange: (color: string) => void;
6
6
  activeShade: number;
7
+ showHotKey?: boolean;
7
8
  }
8
- declare const PickerColorList: ({ palette, color, onChange, activeShade, }: PickerColorListProps) => import("react/jsx-runtime").JSX.Element;
9
+ declare const PickerColorList: ({ palette, color, onChange, activeShade, showHotKey, }: PickerColorListProps) => import("react/jsx-runtime").JSX.Element;
9
10
  export default PickerColorList;
@@ -3,6 +3,7 @@ interface ShadeListProps {
3
3
  color: string | null;
4
4
  onChange: (color: string) => void;
5
5
  palette: ColorPaletteCustom;
6
+ showHotKey?: boolean;
6
7
  }
7
- export declare const ShadeList: ({ color, onChange, palette }: ShadeListProps) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const ShadeList: ({ color, onChange, palette, showHotKey, }: ShadeListProps) => import("react/jsx-runtime").JSX.Element;
8
9
  export {};
@@ -8,6 +8,7 @@ export declare const DEFAULT_CATEGORIES: {
8
8
  editor: string;
9
9
  elements: string;
10
10
  links: string;
11
+ library: string;
11
12
  };
12
13
  type CommandPaletteProps = {
13
14
  customCommandPaletteItems?: CommandPaletteItem[];
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  import "./ExcalidrawLogo.scss";
3
- type LogoSize = "xs" | "small" | "normal" | "large" | "custom";
3
+ type LogoSize = "xs" | "small" | "normal" | "large" | "custom" | "mobile";
4
4
  interface LogoProps {
5
5
  size?: LogoSize;
6
6
  withText?: boolean;
@@ -16,6 +16,7 @@ interface FontPickerProps {
16
16
  onHover: (fontFamily: FontFamilyValues) => void;
17
17
  onLeave: () => void;
18
18
  onPopupChange: (open: boolean) => void;
19
+ compactMode?: boolean;
19
20
  }
20
- export declare const FontPicker: React.MemoExoticComponent<({ isOpened, selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onPopupChange, }: FontPickerProps) => import("react/jsx-runtime").JSX.Element>;
21
+ export declare const FontPicker: React.MemoExoticComponent<({ isOpened, selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onPopupChange, compactMode, }: FontPickerProps) => import("react/jsx-runtime").JSX.Element>;
21
22
  export {};
@@ -1,6 +1,8 @@
1
1
  import type { FontFamilyValues } from "@excalidraw/element/types";
2
2
  interface FontPickerTriggerProps {
3
3
  selectedFontFamily: FontFamilyValues | null;
4
+ isOpened?: boolean;
5
+ compactMode?: boolean;
4
6
  }
5
- export declare const FontPickerTrigger: ({ selectedFontFamily, }: FontPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
7
+ export declare const FontPickerTrigger: ({ selectedFontFamily, isOpened, compactMode, }: FontPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
6
8
  export {};
@@ -1,3 +1,5 @@
1
- export declare const InlineIcon: ({ icon }: {
1
+ export declare const InlineIcon: ({ className, icon, size, }: {
2
+ className?: string | undefined;
2
3
  icon: React.ReactNode;
4
+ size?: string | undefined;
3
5
  }) => import("react/jsx-runtime").JSX.Element;
@@ -17,6 +17,7 @@ interface LayerUIProps {
17
17
  onPenModeToggle: AppClassProperties["togglePenMode"];
18
18
  showExitZenModeBtn: boolean;
19
19
  langCode: Language["code"];
20
+ renderTopLeftUI?: ExcalidrawProps["renderTopLeftUI"];
20
21
  renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
21
22
  renderCustomStats?: ExcalidrawProps["renderCustomStats"];
22
23
  UIOptions: AppProps["UIOptions"];
@@ -27,5 +28,5 @@ interface LayerUIProps {
27
28
  isCollaborating: boolean;
28
29
  generateLinkForSelection?: AppProps["generateLinkForSelection"];
29
30
  }
30
- declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopRightUI, renderCustomStats, UIOptions, onExportImage, renderWelcomeScreen, children, app, isCollaborating, generateLinkForSelection, }: LayerUIProps) => import("react/jsx-runtime").JSX.Element>;
31
+ declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopLeftUI, renderTopRightUI, renderCustomStats, UIOptions, onExportImage, renderWelcomeScreen, children, app, isCollaborating, generateLinkForSelection, }: LayerUIProps) => import("react/jsx-runtime").JSX.Element>;
31
32
  export default _default;
@@ -3,7 +3,7 @@ import type { ExcalidrawElement, NonDeleted } from "@excalidraw/element/types";
3
3
  import type { SvgCache } from "../hooks/useLibraryItemSvg";
4
4
  import type { LibraryItem } from "../types";
5
5
  import type { ReactNode } from "react";
6
- type LibraryOrPendingItem = (LibraryItem | /* pending library item */ {
6
+ type LibraryOrPendingItem = readonly (LibraryItem | /* pending library item */ {
7
7
  id: null;
8
8
  elements: readonly NonDeleted<ExcalidrawElement>[];
9
9
  })[];
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
3
3
  import type { ActionManager } from "../actions/manager";
4
- import type { AppClassProperties, AppProps, AppState, Device, ExcalidrawProps, UIAppState } from "../types";
4
+ import type { AppClassProperties, AppProps, AppState, UIAppState } from "../types";
5
5
  import type { JSX } from "react";
6
6
  type MobileMenuProps = {
7
7
  appState: UIAppState;
@@ -10,16 +10,14 @@ type MobileMenuProps = {
10
10
  renderImageExportDialog: () => React.ReactNode;
11
11
  setAppState: React.Component<any, AppState>["setState"];
12
12
  elements: readonly NonDeletedExcalidrawElement[];
13
- onLockToggle: () => void;
14
13
  onHandToolToggle: () => void;
15
14
  onPenModeToggle: AppClassProperties["togglePenMode"];
16
15
  renderTopRightUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
17
- renderCustomStats?: ExcalidrawProps["renderCustomStats"];
16
+ renderTopLeftUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
18
17
  renderSidebars: () => JSX.Element | null;
19
- device: Device;
20
18
  renderWelcomeScreen: boolean;
21
19
  UIOptions: AppProps["UIOptions"];
22
20
  app: AppClassProperties;
23
21
  };
24
- export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, onLockToggle, onHandToolToggle, onPenModeToggle, renderTopRightUI, renderCustomStats, renderSidebars, device, renderWelcomeScreen, UIOptions, app, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
22
+ export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, onHandToolToggle, renderTopLeftUI, renderTopRightUI, renderSidebars, renderWelcomeScreen, UIOptions, app, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
25
23
  export {};
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import "./ToolIcon.scss";
3
+ import "./MobileToolBar.scss";
4
+ import type { AppClassProperties, UIAppState } from "../types";
5
+ type MobileToolBarProps = {
6
+ app: AppClassProperties;
7
+ onHandToolToggle: () => void;
8
+ setAppState: React.Component<any, UIAppState>["setState"];
9
+ };
10
+ export declare const MobileToolBar: ({ app, onHandToolToggle, setAppState, }: MobileToolBarProps) => import("react/jsx-runtime").JSX.Element;
11
+ export {};
@@ -10,6 +10,7 @@ type Props = {
10
10
  offsetTop?: number;
11
11
  viewportWidth?: number;
12
12
  viewportHeight?: number;
13
+ className?: string;
13
14
  };
14
- export declare const Popover: ({ children, left, top, onCloseRequest, fitInViewport, offsetLeft, offsetTop, viewportWidth, viewportHeight, }: Props) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const Popover: ({ children, left, top, onCloseRequest, fitInViewport, offsetLeft, offsetTop, viewportWidth, viewportHeight, className, }: Props) => import("react/jsx-runtime").JSX.Element;
15
16
  export {};
@@ -10,6 +10,7 @@ interface PropertiesPopoverProps {
10
10
  onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
11
11
  onFocusOutside?: Popover.PopoverContentProps["onFocusOutside"];
12
12
  onPointerDownOutside?: Popover.PopoverContentProps["onPointerDownOutside"];
13
+ preventAutoFocusOnTouch?: boolean;
13
14
  }
14
15
  export declare const PropertiesPopover: React.ForwardRefExoticComponent<PropertiesPopoverProps & React.RefAttributes<HTMLDivElement>>;
15
16
  export {};
@@ -1,5 +1,4 @@
1
- import type { ReactNode } from "react";
2
- import type { JSX } from "react";
1
+ import type { JSX, ReactNode } from "react";
3
2
  export declare const TTDDialogTrigger: {
4
3
  ({ children, icon, }: {
5
4
  children?: ReactNode;
@@ -12,6 +12,7 @@ type TextFieldProps = {
12
12
  className?: string;
13
13
  placeholder?: string;
14
14
  isRedacted?: boolean;
15
+ type?: "text" | "search";
15
16
  } & ({
16
17
  value: string;
17
18
  } | {
@@ -0,0 +1,25 @@
1
+ import React from "react";
2
+ import "./ToolPopover.scss";
3
+ import type { AppClassProperties } from "../types";
4
+ type ToolOption = {
5
+ type: string;
6
+ icon: React.ReactNode;
7
+ title?: string;
8
+ };
9
+ type ToolPopoverProps = {
10
+ app: AppClassProperties;
11
+ options: readonly ToolOption[];
12
+ activeTool: {
13
+ type: string;
14
+ };
15
+ defaultOption: string;
16
+ className?: string;
17
+ namePrefix: string;
18
+ title: string;
19
+ "data-testid": string;
20
+ onToolChange: (type: string) => void;
21
+ displayedOption: ToolOption;
22
+ fillable?: boolean;
23
+ };
24
+ export declare const ToolPopover: ({ app, options, activeTool, defaultOption, className, namePrefix, title, "data-testid": dataTestId, onToolChange, displayedOption, fillable, }: ToolPopoverProps) => import("react/jsx-runtime").JSX.Element;
25
+ export {};
@@ -1,9 +1,10 @@
1
1
  import React from "react";
2
2
  import "./DropdownMenu.scss";
3
3
  declare const DropdownMenu: {
4
- ({ children, open, }: {
4
+ ({ children, open, placement, }: {
5
5
  children?: React.ReactNode;
6
6
  open: boolean;
7
+ placement?: "top" | "bottom" | undefined;
7
8
  }): import("react/jsx-runtime").JSX.Element;
8
9
  Trigger: {
9
10
  ({ className, children, onToggle, title, ...rest }: {
@@ -15,12 +16,13 @@ declare const DropdownMenu: {
15
16
  displayName: string;
16
17
  };
17
18
  Content: {
18
- ({ children, onClickOutside, className, onSelect, style, }: {
19
+ ({ children, onClickOutside, className, onSelect, style, placement, }: {
19
20
  children?: React.ReactNode;
20
21
  onClickOutside?: (() => void) | undefined;
21
22
  className?: string | undefined;
22
23
  onSelect?: ((event: Event) => void) | undefined;
23
24
  style?: React.CSSProperties | undefined;
25
+ placement?: "top" | "bottom" | undefined;
24
26
  }): import("react/jsx-runtime").JSX.Element;
25
27
  displayName: string;
26
28
  };
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  declare const MenuContent: {
3
- ({ children, onClickOutside, className, onSelect, style, }: {
3
+ ({ children, onClickOutside, className, onSelect, style, placement, }: {
4
4
  children?: React.ReactNode;
5
5
  onClickOutside?: (() => void) | undefined;
6
6
  className?: string | undefined;
@@ -9,6 +9,7 @@ declare const MenuContent: {
9
9
  */
10
10
  onSelect?: ((event: Event) => void) | undefined;
11
11
  style?: React.CSSProperties | undefined;
12
+ placement?: "top" | "bottom" | undefined;
12
13
  }): import("react/jsx-runtime").JSX.Element;
13
14
  displayName: string;
14
15
  };
@@ -11,6 +11,7 @@ export declare const PlusPromoIcon: import("react/jsx-runtime").JSX.Element;
11
11
  export declare const LibraryIcon: import("react/jsx-runtime").JSX.Element;
12
12
  export declare const PlusIcon: import("react/jsx-runtime").JSX.Element;
13
13
  export declare const DotsIcon: import("react/jsx-runtime").JSX.Element;
14
+ export declare const DotsHorizontalIcon: import("react/jsx-runtime").JSX.Element;
14
15
  export declare const PinIcon: import("react/jsx-runtime").JSX.Element;
15
16
  export declare const polygonIcon: import("react/jsx-runtime").JSX.Element;
16
17
  export declare const UnlockedIcon: import("react/jsx-runtime").JSX.Element;
@@ -30,6 +31,7 @@ export declare const LineIcon: import("react/jsx-runtime").JSX.Element;
30
31
  export declare const PenModeIcon: import("react/jsx-runtime").JSX.Element;
31
32
  export declare const FreedrawIcon: import("react/jsx-runtime").JSX.Element;
32
33
  export declare const TextIcon: import("react/jsx-runtime").JSX.Element;
34
+ export declare const TextSizeIcon: import("react/jsx-runtime").JSX.Element;
33
35
  export declare const ImageIcon: import("react/jsx-runtime").JSX.Element;
34
36
  export declare const EraserIcon: import("react/jsx-runtime").JSX.Element;
35
37
  export declare const ZoomInIcon: import("react/jsx-runtime").JSX.Element;
@@ -222,4 +224,7 @@ export declare const collapseUpIcon: import("react/jsx-runtime").JSX.Element;
222
224
  export declare const upIcon: import("react/jsx-runtime").JSX.Element;
223
225
  export declare const cropIcon: import("react/jsx-runtime").JSX.Element;
224
226
  export declare const elementLinkIcon: import("react/jsx-runtime").JSX.Element;
227
+ export declare const resizeIcon: import("react/jsx-runtime").JSX.Element;
228
+ export declare const adjustmentsIcon: import("react/jsx-runtime").JSX.Element;
229
+ export declare const strokeIcon: import("react/jsx-runtime").JSX.Element;
225
230
  export {};
@@ -2,7 +2,7 @@ import { IMAGE_MIME_TYPES, MIME_TYPES } from "@excalidraw/common";
2
2
  import type { ValueOf } from "@excalidraw/common/utility-types";
3
3
  import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
4
4
  import type { AppState, DataURL, LibraryItem } from "../types";
5
- import type { FileSystemHandle } from "./filesystem";
5
+ import type { FileSystemHandle } from "browser-fs-access";
6
6
  import type { ImportedLibraryData } from "./types";
7
7
  export declare const getMimeType: (blob: Blob | string) => string;
8
8
  export declare const getFileHandleType: (handle: FileSystemHandle | null) => string | null;
@@ -40,15 +40,8 @@ export declare const SVGStringToFile: (SVGString: string, filename?: string) =>
40
40
  type: typeof MIME_TYPES.svg;
41
41
  };
42
42
  export declare const ImageURLToFile: (imageUrl: string, filename?: string) => Promise<File | undefined>;
43
- export declare const getFilesFromEvent: (event: React.DragEvent<HTMLDivElement> | ClipboardEvent) => Promise<({
44
- file: File;
45
- fileHandle: FileSystemHandle | null;
46
- } | {
47
- file: null;
48
- fileHandle: null;
49
- })[]>;
50
43
  export declare const getFileHandle: (event: DragEvent | React.DragEvent | DataTransferItem) => Promise<FileSystemHandle | null>;
51
- export declare const createFile: (blob: File | Blob | ArrayBuffer, mimeType: ValueOf<typeof MIME_TYPES>, name: string | undefined) => File;
44
+ export declare const createFile: (blob: File | Blob | ArrayBuffer, mimeType: string, name: string | undefined) => File;
52
45
  /** attempts to detect correct mimeType if none is set, or if an image
53
46
  * has an incorrect extension.
54
47
  * Note: doesn't handle missing .excalidraw/.excalidrawlib extension */
@@ -1,7 +1,7 @@
1
1
  import type { VERSIONS } from "@excalidraw/common";
2
2
  import type { ExcalidrawElement } from "@excalidraw/element/types";
3
3
  import type { cleanAppStateForExport } from "../appState";
4
- import type { AppState, BinaryFiles, LibraryItems, LibraryItems_anyVersion } from "../types";
4
+ import type { AppState, BinaryFiles, LibraryItem, LibraryItems, LibraryItems_anyVersion } from "../types";
5
5
  export interface ExportedDataState {
6
6
  type: string;
7
7
  version: number;
@@ -43,3 +43,6 @@ export interface ImportedLibraryData extends Partial<ExportedLibraryData> {
43
43
  /** @deprecated v1 */
44
44
  library?: LibraryItems;
45
45
  }
46
+ export type ExcalidrawLibraryIds = {
47
+ itemIds: LibraryItem["id"][];
48
+ };
@@ -3,7 +3,7 @@ export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
3
3
  export declare const libraryItemSvgsCache: import("jotai/vanilla/atom").PrimitiveAtom<SvgCache> & {
4
4
  init: SvgCache;
5
5
  };
6
- export declare const useLibraryItemSvg: (id: LibraryItem["id"] | null, elements: LibraryItem["elements"] | undefined, svgCache: SvgCache) => SVGSVGElement | undefined;
6
+ export declare const useLibraryItemSvg: (id: LibraryItem["id"] | null, elements: LibraryItem["elements"] | undefined, svgCache: SvgCache, ref: React.RefObject<HTMLDivElement | null>) => SVGSVGElement | undefined;
7
7
  export declare const useLibraryCache: () => {
8
8
  clearLibraryCache: () => void;
9
9
  deleteItemsFromLibraryCache: (items: LibraryItem["id"][]) => void;