@dwelle/excalidraw 0.5.0-8cb033d → 0.5.0-90f2d4e

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 (141) hide show
  1. package/dist/dev/{chunk-C6WW3IWU.js → chunk-BIYCCCC4.js} +14 -4
  2. package/dist/dev/chunk-BIYCCCC4.js.map +7 -0
  3. package/dist/dev/chunk-QW2KPMGE.js +7 -0
  4. package/dist/dev/chunk-QW2KPMGE.js.map +7 -0
  5. package/dist/dev/{chunk-2LNRWI74.js → chunk-VPDGV5DO.js} +9679 -8756
  6. package/dist/dev/chunk-VPDGV5DO.js.map +7 -0
  7. package/dist/dev/data/{image-7QZI7GM4.js → image-RC4Z3PZK.js} +3 -3
  8. package/dist/dev/index.css +695 -506
  9. package/dist/dev/index.css.map +3 -3
  10. package/dist/dev/index.js +4223 -2821
  11. package/dist/dev/index.js.map +4 -4
  12. package/dist/dev/locales/{en-VFJV7E2V.js → en-XLJO5VTH.js} +2 -2
  13. package/dist/dev/subset-shared.chunk.js +1 -1
  14. package/dist/dev/subset-worker.chunk.js +1 -1
  15. package/dist/prod/chunk-DUG5AXRR.js +33 -0
  16. package/dist/prod/chunk-M2OFWNPH.js +7 -0
  17. package/dist/prod/{chunk-O65DDAOS.js → chunk-SPUFWQ3U.js} +4 -4
  18. package/dist/prod/data/image-W7J67QSB.js +1 -0
  19. package/dist/prod/index.css +1 -1
  20. package/dist/prod/index.js +20 -20
  21. package/dist/prod/locales/{en-UUHXMMMY.js → en-DMU2KFKH.js} +1 -1
  22. package/dist/prod/subset-shared.chunk.js +1 -1
  23. package/dist/prod/subset-worker.chunk.js +1 -1
  24. package/dist/types/common/src/constants.d.ts +38 -6
  25. package/dist/types/common/src/utils.d.ts +6 -5
  26. package/dist/types/element/src/Scene.d.ts +7 -3
  27. package/dist/types/element/src/align.d.ts +2 -1
  28. package/dist/types/element/src/binding.d.ts +10 -7
  29. package/dist/types/element/src/bounds.d.ts +12 -4
  30. package/dist/types/element/src/collision.d.ts +18 -12
  31. package/dist/types/element/src/cropElement.d.ts +1 -1
  32. package/dist/types/element/src/delta.d.ts +41 -9
  33. package/dist/types/element/src/distance.d.ts +2 -2
  34. package/dist/types/element/src/distribute.d.ts +2 -1
  35. package/dist/types/element/src/fractionalIndex.d.ts +8 -2
  36. package/dist/types/element/src/frame.d.ts +2 -2
  37. package/dist/types/element/src/groups.d.ts +1 -0
  38. package/dist/types/element/src/index.d.ts +2 -3
  39. package/dist/types/element/src/linearElementEditor.d.ts +13 -15
  40. package/dist/types/element/src/mutateElement.d.ts +1 -1
  41. package/dist/types/element/src/newElement.d.ts +2 -1
  42. package/dist/types/element/src/positionElementsOnGrid.d.ts +2 -0
  43. package/dist/types/element/src/renderElement.d.ts +4 -1
  44. package/dist/types/element/src/resizeElements.d.ts +1 -0
  45. package/dist/types/element/src/selection.d.ts +1 -1
  46. package/dist/types/element/src/shape.d.ts +42 -0
  47. package/dist/types/element/src/sizeHelpers.d.ts +2 -1
  48. package/dist/types/element/src/store.d.ts +19 -9
  49. package/dist/types/element/src/textElement.d.ts +1 -1
  50. package/dist/types/element/src/transformHandles.d.ts +4 -4
  51. package/dist/types/element/src/typeChecks.d.ts +15 -1
  52. package/dist/types/element/src/types.d.ts +8 -3
  53. package/dist/types/element/src/utils.d.ts +16 -6
  54. package/dist/types/excalidraw/actions/actionAddToLibrary.d.ts +15 -18
  55. package/dist/types/excalidraw/actions/actionAlign.d.ts +8 -8
  56. package/dist/types/excalidraw/actions/actionBoundText.d.ts +10 -12
  57. package/dist/types/excalidraw/actions/actionCanvas.d.ts +158 -170
  58. package/dist/types/excalidraw/actions/actionClipboard.d.ts +38 -42
  59. package/dist/types/excalidraw/actions/actionCropEditor.d.ts +5 -6
  60. package/dist/types/excalidraw/actions/actionDeleteSelected.d.ts +21 -23
  61. package/dist/types/excalidraw/actions/actionDistribute.d.ts +4 -4
  62. package/dist/types/excalidraw/actions/actionDuplicateSelection.d.ts +2 -2
  63. package/dist/types/excalidraw/actions/actionElementLink.d.ts +4 -5
  64. package/dist/types/excalidraw/actions/actionElementLock.d.ts +12 -14
  65. package/dist/types/excalidraw/actions/actionEmbeddable.d.ts +5 -6
  66. package/dist/types/excalidraw/actions/actionExport.d.ts +130 -139
  67. package/dist/types/excalidraw/actions/actionFinalize.d.ts +61 -22
  68. package/dist/types/excalidraw/actions/actionFlip.d.ts +4 -4
  69. package/dist/types/excalidraw/actions/actionFrame.d.ts +70 -74
  70. package/dist/types/excalidraw/actions/actionGroup.d.ts +16 -18
  71. package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +532 -9
  72. package/dist/types/excalidraw/actions/actionLink.d.ts +6 -7
  73. package/dist/types/excalidraw/actions/actionMenu.d.ts +16 -19
  74. package/dist/types/excalidraw/actions/actionNavigate.d.ts +10 -12
  75. package/dist/types/excalidraw/actions/actionProperties.d.ts +107 -105
  76. package/dist/types/excalidraw/actions/actionSelectAll.d.ts +8 -9
  77. package/dist/types/excalidraw/actions/actionStyles.d.ts +9 -10
  78. package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +7 -8
  79. package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +7 -8
  80. package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +6 -7
  81. package/dist/types/excalidraw/actions/actionToggleStats.d.ts +7 -8
  82. package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +7 -8
  83. package/dist/types/excalidraw/actions/actionToggleZenMode.d.ts +7 -8
  84. package/dist/types/excalidraw/actions/actionZindex.d.ts +8 -8
  85. package/dist/types/excalidraw/actions/index.d.ts +1 -1
  86. package/dist/types/excalidraw/actions/types.d.ts +2 -1
  87. package/dist/types/excalidraw/appState.d.ts +21 -20
  88. package/dist/types/excalidraw/clipboard.d.ts +64 -1
  89. package/dist/types/excalidraw/components/Actions.d.ts +8 -5
  90. package/dist/types/excalidraw/components/App.d.ts +21 -27
  91. package/dist/types/excalidraw/components/ButtonIcon.d.ts +1 -0
  92. package/dist/types/excalidraw/components/ColorPicker/ColorPicker.d.ts +2 -1
  93. package/dist/types/excalidraw/components/CommandPalette/CommandPalette.d.ts +1 -0
  94. package/dist/types/excalidraw/components/Ellipsify.d.ts +4 -0
  95. package/dist/types/excalidraw/components/FontPicker/FontPicker.d.ts +2 -1
  96. package/dist/types/excalidraw/components/FontPicker/FontPickerTrigger.d.ts +2 -1
  97. package/dist/types/excalidraw/components/InlineIcon.d.ts +3 -1
  98. package/dist/types/excalidraw/components/LibraryMenuSection.d.ts +1 -1
  99. package/dist/types/excalidraw/components/PropertiesPopover.d.ts +1 -0
  100. package/dist/types/excalidraw/components/Stats/DragInput.d.ts +11 -1
  101. package/dist/types/excalidraw/components/TextField.d.ts +1 -0
  102. package/dist/types/excalidraw/components/icons.d.ts +7 -0
  103. package/dist/types/excalidraw/components/shapes.d.ts +129 -1
  104. package/dist/types/excalidraw/data/blob.d.ts +4 -8
  105. package/dist/types/excalidraw/data/reconcile.d.ts +1 -0
  106. package/dist/types/excalidraw/data/restore.d.ts +6 -1
  107. package/dist/types/excalidraw/data/types.d.ts +4 -1
  108. package/dist/types/excalidraw/eraser/index.d.ts +0 -2
  109. package/dist/types/excalidraw/history.d.ts +21 -5
  110. package/dist/types/excalidraw/hooks/useLibraryItemSvg.d.ts +1 -1
  111. package/dist/types/excalidraw/hooks/useTextEditorFocus.d.ts +14 -0
  112. package/dist/types/excalidraw/index.d.ts +2 -1
  113. package/dist/types/excalidraw/lasso/utils.d.ts +2 -1
  114. package/dist/types/excalidraw/renderer/helpers.d.ts +4 -4
  115. package/dist/types/excalidraw/renderer/staticScene.d.ts +4 -1
  116. package/dist/types/excalidraw/scene/Renderer.d.ts +0 -1
  117. package/dist/types/excalidraw/types.d.ts +12 -9
  118. package/dist/types/math/src/angle.d.ts +2 -0
  119. package/dist/types/math/src/constants.d.ts +3 -0
  120. package/dist/types/math/src/curve.d.ts +32 -0
  121. package/dist/types/math/src/index.d.ts +1 -0
  122. package/dist/types/math/src/point.d.ts +1 -1
  123. package/dist/types/math/src/rectangle.d.ts +2 -0
  124. package/dist/types/math/src/segment.d.ts +1 -0
  125. package/dist/types/math/src/vector.d.ts +4 -2
  126. package/history.ts +107 -44
  127. package/package.json +9 -9
  128. package/dist/dev/chunk-2LNRWI74.js.map +0 -7
  129. package/dist/dev/chunk-C6WW3IWU.js.map +0 -7
  130. package/dist/dev/chunk-NR24AOHB.js +0 -7
  131. package/dist/dev/chunk-NR24AOHB.js.map +0 -7
  132. package/dist/prod/chunk-JUZ2P6ZK.js +0 -33
  133. package/dist/prod/chunk-ZSOIT5RG.js +0 -7
  134. package/dist/prod/data/image-RPTD4VCP.js +0 -1
  135. package/dist/types/element/src/Shape.d.ts +0 -17
  136. package/dist/types/element/src/ShapeCache.d.ts +0 -25
  137. package/dist/types/element/src/shapes.d.ts +0 -23
  138. package/dist/types/excalidraw/visualdebug.d.ts +0 -41
  139. package/dist/types/utils/src/collision.d.ts +0 -8
  140. /package/dist/dev/data/{image-7QZI7GM4.js.map → image-RC4Z3PZK.js.map} +0 -0
  141. /package/dist/dev/locales/{en-VFJV7E2V.js.map → en-XLJO5VTH.js.map} +0 -0
@@ -1,14 +1,23 @@
1
1
  import type { AppState } from "./types";
2
2
  export declare const getDefaultAppState: () => Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
3
3
  export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>) => {
4
- stats?: {
5
- open: boolean;
6
- panels: number;
7
- } | undefined;
8
- exportWithDarkMode?: boolean | undefined;
9
- cursorButton?: "up" | "down" | undefined;
4
+ viewBackgroundColor?: string | undefined;
5
+ name?: string | null | undefined;
6
+ zoom?: Readonly<{
7
+ value: import("./types").NormalizedZoomValue;
8
+ }> | undefined;
10
9
  scrollX?: number | undefined;
11
10
  scrollY?: number | undefined;
11
+ editingGroupId?: string | null | undefined;
12
+ selectedElementIds?: Readonly<{
13
+ [id: string]: true;
14
+ }> | undefined;
15
+ theme?: import("@excalidraw/element/types").Theme | undefined;
16
+ selectedGroupIds?: {
17
+ [groupId: string]: boolean;
18
+ } | undefined;
19
+ selectedLinearElement?: import("@excalidraw/element").LinearElementEditor | null | undefined;
20
+ zenModeEnabled?: boolean | undefined;
12
21
  showWelcomeScreen?: boolean | undefined;
13
22
  activeTool?: ({
14
23
  lastActiveTool: import("./types").ActiveTool | null;
@@ -19,6 +28,7 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
19
28
  penDetected?: boolean | undefined;
20
29
  exportBackground?: boolean | undefined;
21
30
  exportEmbedScene?: boolean | undefined;
31
+ exportWithDarkMode?: boolean | undefined;
22
32
  exportScale?: number | undefined;
23
33
  currentItemStrokeColor?: string | undefined;
24
34
  currentItemBackgroundColor?: string | undefined;
@@ -34,12 +44,8 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
34
44
  currentItemEndArrowhead?: import("@excalidraw/element/types").Arrowhead | null | undefined;
35
45
  currentItemRoundness?: import("@excalidraw/element/types").StrokeRoundness | undefined;
36
46
  currentItemArrowType?: "round" | "sharp" | "elbow" | undefined;
37
- viewBackgroundColor?: string | undefined;
47
+ cursorButton?: "up" | "down" | undefined;
38
48
  scrolledOutside?: boolean | undefined;
39
- name?: string | null | undefined;
40
- zoom?: Readonly<{
41
- value: import("./types").NormalizedZoomValue;
42
- }> | undefined;
43
49
  openMenu?: "canvas" | "shape" | null | undefined;
44
50
  openSidebar?: {
45
51
  name: string;
@@ -47,28 +53,23 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
47
53
  } | null | undefined;
48
54
  defaultSidebarDockedPreference?: boolean | undefined;
49
55
  lastPointerDownWith?: import("@excalidraw/element/types").PointerType | undefined;
50
- selectedElementIds?: Readonly<{
51
- [id: string]: true;
52
- }> | undefined;
53
56
  previousSelectedElementIds?: {
54
57
  [id: string]: true;
55
58
  } | undefined;
56
59
  shouldCacheIgnoreZoom?: boolean | undefined;
57
- zenModeEnabled?: boolean | undefined;
58
- theme?: import("@excalidraw/element/types").Theme | undefined;
59
60
  gridSize?: number | undefined;
60
61
  gridStep?: number | undefined;
61
62
  gridModeEnabled?: boolean | undefined;
62
- selectedGroupIds?: {
63
- [groupId: string]: boolean;
63
+ stats?: {
64
+ open: boolean;
65
+ panels: number;
64
66
  } | undefined;
65
- editingGroupId?: string | null | undefined;
66
67
  currentChartType?: import("@excalidraw/element/types").ChartType | undefined;
67
- selectedLinearElement?: import("@excalidraw/element").LinearElementEditor | null | undefined;
68
68
  objectsSnapModeEnabled?: boolean | undefined;
69
69
  lockedMultiSelections?: {
70
70
  [groupId: string]: true;
71
71
  } | undefined;
72
+ stylesPanelMode?: "compact" | "full" | undefined;
72
73
  };
73
74
  export declare const cleanAppStateForExport: (appState: Partial<AppState>) => {
74
75
  viewBackgroundColor?: 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,70 @@ 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>;
128
+ export declare const isClipboardEvent: (event: React.SyntheticEvent | Event) => event is ClipboardEvent;
66
129
  export {};
@@ -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,6 +10,13 @@ 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 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;
13
20
  export declare const ShapesSwitcher: ({ activeTool, appState, app, UIOptions, }: {
14
21
  activeTool: UIAppState["activeTool"];
15
22
  appState: UIAppState;
@@ -28,7 +35,3 @@ export declare const ExitZenModeAction: ({ actionManager, showExitZenModeBtn, }:
28
35
  actionManager: ActionManager;
29
36
  showExitZenModeBtn: boolean;
30
37
  }) => import("react/jsx-runtime").JSX.Element;
31
- export declare const FinalizeAction: ({ renderAction, className, }: {
32
- renderAction: ActionManager["renderAction"];
33
- className?: string | undefined;
34
- }) => import("react/jsx-runtime").JSX.Element;
@@ -1,11 +1,8 @@
1
1
  import React from "react";
2
2
  import { type EXPORT_IMAGE_TYPES, Emitter } from "@excalidraw/common";
3
- import { LinearElementEditor } from "@excalidraw/element";
4
- import { FlowChartCreator } from "@excalidraw/element";
5
- import { Scene } from "@excalidraw/element";
6
- import { Store } from "@excalidraw/element";
7
- import type { ElementUpdate } from "@excalidraw/element";
8
- import type { ExcalidrawElement, NonDeleted, InitializedExcalidrawImageElement, ExcalidrawImageElement, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "@excalidraw/element/types";
3
+ import { LinearElementEditor, FlowChartCreator } from "@excalidraw/element";
4
+ import { Scene, Store, type ElementUpdate, StoreDelta, type ApplyToOptions } from "@excalidraw/element";
5
+ import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered, SceneElementsMap } from "@excalidraw/element/types";
9
6
  import type { Mutable } from "@excalidraw/common/utility-types";
10
7
  import { ActionManager } from "../actions/manager";
11
8
  import { AnimationFrameHandler } from "../animation-frame-handler";
@@ -82,6 +79,7 @@ declare class App extends React.Component<AppProps, AppState> {
82
79
  /** embeds that have been inserted to DOM (as a perf optim, we don't want to
83
80
  * insert to DOM before user initially scrolls to them) */
84
81
  private initializedEmbeds;
82
+ private handleToastClose;
85
83
  private elementsPendingErasure;
86
84
  flowChartCreator: FlowChartCreator;
87
85
  private flowChartNavigator;
@@ -149,10 +147,6 @@ declare class App extends React.Component<AppProps, AppState> {
149
147
  drag: {
150
148
  hasOccurred: boolean;
151
149
  offset: {
152
- /**
153
- * Returns gridSize taking into account `gridModeEnabled`.
154
- * If disabled, returns null.
155
- */
156
150
  x: number;
157
151
  y: number;
158
152
  } | null;
@@ -160,6 +154,7 @@ declare class App extends React.Component<AppProps, AppState> {
160
154
  x: number;
161
155
  y: number;
162
156
  };
157
+ blockDragging: boolean;
163
158
  };
164
159
  eventListeners: {
165
160
  onMove: {
@@ -222,10 +217,6 @@ declare class App extends React.Component<AppProps, AppState> {
222
217
  drag: {
223
218
  hasOccurred: boolean;
224
219
  offset: {
225
- /**
226
- * Returns gridSize taking into account `gridModeEnabled`.
227
- * If disabled, returns null.
228
- */
229
220
  x: number;
230
221
  y: number;
231
222
  } | null;
@@ -233,6 +224,7 @@ declare class App extends React.Component<AppProps, AppState> {
233
224
  x: number;
234
225
  y: number;
235
226
  };
227
+ blockDragging: boolean;
236
228
  };
237
229
  eventListeners: {
238
230
  onMove: {
@@ -254,6 +246,7 @@ declare class App extends React.Component<AppProps, AppState> {
254
246
  }>]>;
255
247
  missingPointerEventCleanupEmitter: Emitter<[event: PointerEvent | null]>;
256
248
  onRemoveEventListenersEmitter: Emitter<[]>;
249
+ defaultSelectionTool: "selection" | "lasso";
257
250
  constructor(props: AppProps);
258
251
  updateEditorAtom: <Value, Args extends unknown[], Result>(atom: WritableAtom<Value, Args, Result>, ...args: Args) => Result;
259
252
  private onWindowMessage;
@@ -309,6 +302,7 @@ declare class App extends React.Component<AppProps, AppState> {
309
302
  private resetScene;
310
303
  private initializeScene;
311
304
  private isMobileBreakpoint;
305
+ private isTabletBreakpoint;
312
306
  private refreshViewportBreakpoints;
313
307
  private refreshEditorBreakpoints;
314
308
  private clearImageShapeCache;
@@ -327,6 +321,7 @@ declare class App extends React.Component<AppProps, AppState> {
327
321
  private static resetTapTwice;
328
322
  private onTouchStart;
329
323
  private onTouchEnd;
324
+ private insertClipboardContent;
330
325
  pasteFromClipboard: (event: ClipboardEvent) => Promise<void>;
331
326
  addElementsFromPasteOrLibrary: (opts: {
332
327
  elements: readonly ExcalidrawElement[];
@@ -408,6 +403,7 @@ declare class App extends React.Component<AppProps, AppState> {
408
403
  */
409
404
  captureUpdate?: SceneData["captureUpdate"];
410
405
  }) => void;
406
+ applyDeltas: (deltas: StoreDelta[], options?: ApplyToOptions) => [SceneElementsMap, AppState, boolean];
411
407
  mutateElement: <TElement extends Mutable<ExcalidrawElement>>(element: TElement, updates: ElementUpdate<TElement>, informMutation?: boolean) => TElement;
412
408
  private triggerRender;
413
409
  /**
@@ -423,12 +419,9 @@ declare class App extends React.Component<AppProps, AppState> {
423
419
  private onKeyDown;
424
420
  private onKeyUp;
425
421
  private isToolSupported;
426
- setActiveTool: (tool: (({
427
- type: Exclude<ToolType, "image">;
422
+ setActiveTool: (tool: ({
423
+ type: ToolType;
428
424
  } | {
429
- type: Extract<ToolType, "image">;
430
- insertOnCanvasDirectly?: boolean;
431
- }) | {
432
425
  type: "custom";
433
426
  customType: string;
434
427
  }) & {
@@ -454,7 +447,7 @@ declare class App extends React.Component<AppProps, AppState> {
454
447
  private getTextElementAtPosition;
455
448
  private getElementAtPosition;
456
449
  private getElementsAtPosition;
457
- getElementHitThreshold(): number;
450
+ getElementHitThreshold(element: ExcalidrawElement): number;
458
451
  private hitElement;
459
452
  private getTextBindableContainerAtPosition;
460
453
  private startTextEditing;
@@ -502,7 +495,7 @@ declare class App extends React.Component<AppProps, AppState> {
502
495
  sceneY: number;
503
496
  link: string;
504
497
  }) => NonDeleted<ExcalidrawEmbeddableElement> | undefined;
505
- private createImageElement;
498
+ private newImagePlaceholder;
506
499
  private handleLinearElementOnPointerDown;
507
500
  private getCurrentItemRoundness;
508
501
  private createGenericElementOnPointerDown;
@@ -518,12 +511,13 @@ declare class App extends React.Component<AppProps, AppState> {
518
511
  private eraseElements;
519
512
  private initializeImage;
520
513
  /**
521
- * inserts image into elements array and rerenders
514
+ * use during async image initialization,
515
+ * when the placeholder image could have been modified in the meantime,
516
+ * and when you don't want to loose those modifications
522
517
  */
523
- insertImageElement: (imageElement: ExcalidrawImageElement, imageFile: File, showCursorImagePreview?: boolean) => Promise<NonDeleted<InitializedExcalidrawImageElement> | null | undefined>;
524
- private setImagePreviewCursor;
525
- private onImageAction;
526
- initializeImageDimensions: (imageElement: ExcalidrawImageElement, forceNaturalSize?: boolean) => void;
518
+ private getLatestInitializedImageElement;
519
+ private onImageToolbarButtonClick;
520
+ private getImageNaturalDimensions;
527
521
  /** updates image cache, refreshing updated elements and/or setting status
528
522
  to error for images that fail during <img> element creation */
529
523
  private updateImageCache;
@@ -534,9 +528,9 @@ declare class App extends React.Component<AppProps, AppState> {
534
528
  private scheduleImageRefresh;
535
529
  private updateBindingEnabledOnPointerMove;
536
530
  private maybeSuggestBindingAtCursor;
537
- private maybeSuggestBindingsForLinearElementAtCoords;
538
531
  private clearSelection;
539
532
  private handleInteractiveCanvasRef;
533
+ private insertImages;
540
534
  private handleAppOnDrop;
541
535
  loadFileToCanvas: (file: File, fileHandle: FileSystemHandle | null) => Promise<void>;
542
536
  private handleCanvasContextMenu;
@@ -10,6 +10,7 @@ interface ButtonIconProps {
10
10
  /** include standalone style (could interfere with parent styles) */
11
11
  standalone?: boolean;
12
12
  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
13
+ style?: React.CSSProperties;
13
14
  }
14
15
  export declare const ButtonIcon: import("react").ForwardRefExoticComponent<ButtonIconProps & import("react").RefAttributes<HTMLButtonElement>>;
15
16
  export {};
@@ -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
- export declare const ColorPicker: ({ type, color, onChange, label, elements, palette, topPicks, updateData, appState, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
23
+ export declare const ColorPicker: ({ type, color, onChange, label, elements, palette, topPicks, updateData, appState, compactMode, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
23
24
  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[];
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ export declare const Ellipsify: ({ children, ...rest }: {
3
+ children: React.ReactNode;
4
+ } & import("react").HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
@@ -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,7 @@
1
1
  import type { FontFamilyValues } from "@excalidraw/element/types";
2
2
  interface FontPickerTriggerProps {
3
3
  selectedFontFamily: FontFamilyValues | null;
4
+ isOpened?: boolean;
4
5
  }
5
- export declare const FontPickerTrigger: ({ selectedFontFamily, }: FontPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
6
+ export declare const FontPickerTrigger: ({ selectedFontFamily, isOpened, }: FontPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
6
7
  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;
@@ -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
  })[];
@@ -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,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
3
3
  import type { Scene } from "@excalidraw/element";
4
+ import { useApp, useExcalidrawSetAppState } from "../App";
4
5
  import "./DragInput.scss";
5
6
  import type { StatsInputProperty } from "./utils";
6
7
  import type { AppState } from "../../types";
@@ -16,6 +17,14 @@ export type DragInputCallbackType<P extends StatsInputProperty, E = ExcalidrawEl
16
17
  property: P;
17
18
  originalAppState: AppState;
18
19
  setInputValue: (value: number) => void;
20
+ app: ReturnType<typeof useApp>;
21
+ setAppState: ReturnType<typeof useExcalidrawSetAppState>;
22
+ }) => void;
23
+ export type DragFinishedCallbackType<E = ExcalidrawElement> = (props: {
24
+ app: ReturnType<typeof useApp>;
25
+ setAppState: ReturnType<typeof useExcalidrawSetAppState>;
26
+ originalElements: readonly E[] | null;
27
+ originalAppState: AppState;
19
28
  }) => void;
20
29
  interface StatsDragInputProps<T extends StatsInputProperty, E = ExcalidrawElement> {
21
30
  label: string | React.ReactNode;
@@ -30,6 +39,7 @@ interface StatsDragInputProps<T extends StatsInputProperty, E = ExcalidrawElemen
30
39
  appState: AppState;
31
40
  /** how many px you need to drag to get 1 unit change */
32
41
  sensitivity?: number;
42
+ dragFinishedCallback?: DragFinishedCallbackType;
33
43
  }
34
- declare const StatsDragInput: <T extends StatsInputProperty, E extends ExcalidrawElement = ExcalidrawElement>({ label, icon, dragInputCallback, value, elements, editable, shouldKeepAspectRatio, property, scene, appState, sensitivity, }: StatsDragInputProps<T, E>) => import("react/jsx-runtime").JSX.Element | null;
44
+ declare const StatsDragInput: <T extends StatsInputProperty, E extends ExcalidrawElement = ExcalidrawElement>({ label, icon, dragInputCallback, value, elements, editable, shouldKeepAspectRatio, property, scene, appState, sensitivity, dragFinishedCallback, }: StatsDragInputProps<T, E>) => import("react/jsx-runtime").JSX.Element | null;
35
45
  export default StatsDragInput;
@@ -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
  } | {
@@ -11,7 +11,9 @@ export declare const HomeIcon: 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;
16
+ export declare const polygonIcon: import("react/jsx-runtime").JSX.Element;
15
17
  export declare const UnlockedIcon: import("react/jsx-runtime").JSX.Element;
16
18
  export declare const LockedIcon: import("react/jsx-runtime").JSX.Element;
17
19
  export declare const LockedIconFilled: import("react/jsx-runtime").JSX.Element;
@@ -29,6 +31,7 @@ export declare const LineIcon: import("react/jsx-runtime").JSX.Element;
29
31
  export declare const PenModeIcon: import("react/jsx-runtime").JSX.Element;
30
32
  export declare const FreedrawIcon: import("react/jsx-runtime").JSX.Element;
31
33
  export declare const TextIcon: import("react/jsx-runtime").JSX.Element;
34
+ export declare const TextSizeIcon: import("react/jsx-runtime").JSX.Element;
32
35
  export declare const ImageIcon: import("react/jsx-runtime").JSX.Element;
33
36
  export declare const EraserIcon: import("react/jsx-runtime").JSX.Element;
34
37
  export declare const ZoomInIcon: import("react/jsx-runtime").JSX.Element;
@@ -221,4 +224,8 @@ export declare const collapseUpIcon: import("react/jsx-runtime").JSX.Element;
221
224
  export declare const upIcon: import("react/jsx-runtime").JSX.Element;
222
225
  export declare const cropIcon: import("react/jsx-runtime").JSX.Element;
223
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 backgroundIcon: import("react/jsx-runtime").JSX.Element;
230
+ export declare const strokeIcon: import("react/jsx-runtime").JSX.Element;
224
231
  export {};
@@ -1,3 +1,4 @@
1
+ import type { AppClassProperties } from "../types";
1
2
  export declare const SHAPES: readonly [{
2
3
  readonly icon: import("react/jsx-runtime").JSX.Element;
3
4
  readonly value: "selection";
@@ -59,4 +60,131 @@ export declare const SHAPES: readonly [{
59
60
  readonly numericKey: "0";
60
61
  readonly fillable: false;
61
62
  }];
62
- export declare const findShapeByKey: (key: string) => "text" | "line" | "arrow" | "selection" | "rectangle" | "diamond" | "ellipse" | "freedraw" | "image" | "eraser" | null;
63
+ export declare const getToolbarTools: (app: AppClassProperties) => readonly [{
64
+ readonly icon: import("react/jsx-runtime").JSX.Element;
65
+ readonly value: "selection";
66
+ readonly key: "v";
67
+ readonly numericKey: "1";
68
+ readonly fillable: true;
69
+ }, {
70
+ readonly icon: import("react/jsx-runtime").JSX.Element;
71
+ readonly value: "rectangle";
72
+ readonly key: "r";
73
+ readonly numericKey: "2";
74
+ readonly fillable: true;
75
+ }, {
76
+ readonly icon: import("react/jsx-runtime").JSX.Element;
77
+ readonly value: "diamond";
78
+ readonly key: "d";
79
+ readonly numericKey: "3";
80
+ readonly fillable: true;
81
+ }, {
82
+ readonly icon: import("react/jsx-runtime").JSX.Element;
83
+ readonly value: "ellipse";
84
+ readonly key: "o";
85
+ readonly numericKey: "4";
86
+ readonly fillable: true;
87
+ }, {
88
+ readonly icon: import("react/jsx-runtime").JSX.Element;
89
+ readonly value: "arrow";
90
+ readonly key: "a";
91
+ readonly numericKey: "5";
92
+ readonly fillable: true;
93
+ }, {
94
+ readonly icon: import("react/jsx-runtime").JSX.Element;
95
+ readonly value: "line";
96
+ readonly key: "l";
97
+ readonly numericKey: "6";
98
+ readonly fillable: true;
99
+ }, {
100
+ readonly icon: import("react/jsx-runtime").JSX.Element;
101
+ readonly value: "freedraw";
102
+ readonly key: readonly ["p", "x"];
103
+ readonly numericKey: "7";
104
+ readonly fillable: false;
105
+ }, {
106
+ readonly icon: import("react/jsx-runtime").JSX.Element;
107
+ readonly value: "text";
108
+ readonly key: "t";
109
+ readonly numericKey: "8";
110
+ readonly fillable: false;
111
+ }, {
112
+ readonly icon: import("react/jsx-runtime").JSX.Element;
113
+ readonly value: "image";
114
+ readonly key: null;
115
+ readonly numericKey: "9";
116
+ readonly fillable: false;
117
+ }, {
118
+ readonly icon: import("react/jsx-runtime").JSX.Element;
119
+ readonly value: "eraser";
120
+ readonly key: "e";
121
+ readonly numericKey: "0";
122
+ readonly fillable: false;
123
+ }] | readonly [{
124
+ readonly value: "lasso";
125
+ readonly icon: import("react/jsx-runtime").JSX.Element;
126
+ readonly key: "v";
127
+ readonly numericKey: "1";
128
+ readonly fillable: true;
129
+ }, ...({
130
+ readonly icon: import("react/jsx-runtime").JSX.Element;
131
+ readonly value: "selection";
132
+ readonly key: "v";
133
+ readonly numericKey: "1";
134
+ readonly fillable: true;
135
+ } | {
136
+ readonly icon: import("react/jsx-runtime").JSX.Element;
137
+ readonly value: "rectangle";
138
+ readonly key: "r";
139
+ readonly numericKey: "2";
140
+ readonly fillable: true;
141
+ } | {
142
+ readonly icon: import("react/jsx-runtime").JSX.Element;
143
+ readonly value: "diamond";
144
+ readonly key: "d";
145
+ readonly numericKey: "3";
146
+ readonly fillable: true;
147
+ } | {
148
+ readonly icon: import("react/jsx-runtime").JSX.Element;
149
+ readonly value: "ellipse";
150
+ readonly key: "o";
151
+ readonly numericKey: "4";
152
+ readonly fillable: true;
153
+ } | {
154
+ readonly icon: import("react/jsx-runtime").JSX.Element;
155
+ readonly value: "arrow";
156
+ readonly key: "a";
157
+ readonly numericKey: "5";
158
+ readonly fillable: true;
159
+ } | {
160
+ readonly icon: import("react/jsx-runtime").JSX.Element;
161
+ readonly value: "line";
162
+ readonly key: "l";
163
+ readonly numericKey: "6";
164
+ readonly fillable: true;
165
+ } | {
166
+ readonly icon: import("react/jsx-runtime").JSX.Element;
167
+ readonly value: "freedraw";
168
+ readonly key: readonly ["p", "x"];
169
+ readonly numericKey: "7";
170
+ readonly fillable: false;
171
+ } | {
172
+ readonly icon: import("react/jsx-runtime").JSX.Element;
173
+ readonly value: "text";
174
+ readonly key: "t";
175
+ readonly numericKey: "8";
176
+ readonly fillable: false;
177
+ } | {
178
+ readonly icon: import("react/jsx-runtime").JSX.Element;
179
+ readonly value: "image";
180
+ readonly key: null;
181
+ readonly numericKey: "9";
182
+ readonly fillable: false;
183
+ } | {
184
+ readonly icon: import("react/jsx-runtime").JSX.Element;
185
+ readonly value: "eraser";
186
+ readonly key: "e";
187
+ readonly numericKey: "0";
188
+ readonly fillable: false;
189
+ })[]];
190
+ export declare const findShapeByKey: (key: string, app: AppClassProperties) => "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "lasso" | "eraser" | null;