@excalidraw/excalidraw 0.18.0-b16b6f8fd → 0.18.0-b9d27d3

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 (37) hide show
  1. package/dist/dev/{chunk-OKO5QCIZ.js → chunk-CP5DND7P.js} +2 -2
  2. package/dist/dev/{chunk-OKO5QCIZ.js.map → chunk-CP5DND7P.js.map} +1 -1
  3. package/dist/dev/{chunk-EOSXEDPQ.js → chunk-WWDIUJ2Q.js} +34 -30
  4. package/dist/dev/chunk-WWDIUJ2Q.js.map +7 -0
  5. package/dist/dev/data/{image-LZHZW6U3.js → image-VTYIFRQE.js} +3 -3
  6. package/dist/dev/index.js +956 -736
  7. package/dist/dev/index.js.map +3 -3
  8. package/dist/dev/subset-shared.chunk.js +1 -1
  9. package/dist/dev/subset-worker.chunk.js +1 -1
  10. package/dist/prod/{chunk-FBK55PRF.js → chunk-A66AFZZU.js} +1 -1
  11. package/dist/prod/{chunk-PXWC4GXH.js → chunk-VTWWEYSQ.js} +3 -3
  12. package/dist/prod/data/image-YQ6UXXDA.js +1 -0
  13. package/dist/prod/index.js +22 -22
  14. package/dist/prod/subset-shared.chunk.js +1 -1
  15. package/dist/prod/subset-worker.chunk.js +1 -1
  16. package/dist/types/common/src/constants.d.ts +12 -3
  17. package/dist/types/element/src/Scene.d.ts +6 -2
  18. package/dist/types/element/src/bounds.d.ts +1 -1
  19. package/dist/types/element/src/delta.d.ts +16 -4
  20. package/dist/types/element/src/index.d.ts +1 -0
  21. package/dist/types/element/src/positionElementsOnGrid.d.ts +2 -0
  22. package/dist/types/element/src/store.d.ts +6 -1
  23. package/dist/types/element/src/textElement.d.ts +1 -1
  24. package/dist/types/excalidraw/actions/actionCanvas.d.ts +15 -14
  25. package/dist/types/excalidraw/clipboard.d.ts +62 -1
  26. package/dist/types/excalidraw/components/App.d.ts +11 -8
  27. package/dist/types/excalidraw/components/shapes.d.ts +129 -1
  28. package/dist/types/excalidraw/data/blob.d.ts +1 -5
  29. package/dist/types/excalidraw/data/reconcile.d.ts +1 -0
  30. package/dist/types/excalidraw/data/restore.d.ts +6 -1
  31. package/dist/types/excalidraw/index.d.ts +1 -1
  32. package/dist/types/excalidraw/types.d.ts +7 -2
  33. package/history.ts +1 -1
  34. package/package.json +5 -5
  35. package/dist/dev/chunk-EOSXEDPQ.js.map +0 -7
  36. package/dist/prod/data/image-LFNJBNDB.js +0 -1
  37. /package/dist/dev/data/{image-LZHZW6U3.js.map → image-VTYIFRQE.js.map} +0 -0
@@ -1 +1 @@
1
- import{a,b,c,d}from"./chunk-LS7FJGPW.js";import"./chunk-FBK55PRF.js";import"./chunk-SRAX5OIU.js";export{a as Commands,b as subsetToBase64,c as subsetToBinary,d as toBase64};
1
+ import{a,b,c,d}from"./chunk-LS7FJGPW.js";import"./chunk-A66AFZZU.js";import"./chunk-SRAX5OIU.js";export{a as Commands,b as subsetToBase64,c as subsetToBinary,d as toBase64};
@@ -1 +1 @@
1
- import{a as r,c as t}from"./chunk-LS7FJGPW.js";import"./chunk-FBK55PRF.js";import"./chunk-SRAX5OIU.js";var s=import.meta.url?new URL(import.meta.url):void 0;typeof window>"u"&&typeof self<"u"&&(self.onmessage=async e=>{switch(e.data.command){case r.Subset:let a=await t(e.data.arrayBuffer,e.data.codePoints);self.postMessage(a,{transfer:[a]});break}});export{s as WorkerUrl};
1
+ import{a as r,c as t}from"./chunk-LS7FJGPW.js";import"./chunk-A66AFZZU.js";import"./chunk-SRAX5OIU.js";var s=import.meta.url?new URL(import.meta.url):void 0;typeof window>"u"&&typeof self<"u"&&(self.onmessage=async e=>{switch(e.data.command){case r.Subset:let a=await t(e.data.arrayBuffer,e.data.codePoints);self.postMessage(a,{transfer:[a]});break}});export{s as WorkerUrl};
@@ -8,6 +8,7 @@ export declare const isChrome: boolean;
8
8
  export declare const isSafari: boolean;
9
9
  export declare const isIOS: boolean;
10
10
  export declare const isBrave: () => boolean;
11
+ export declare const isMobile: boolean;
11
12
  export declare const supportsResizeObserver: boolean;
12
13
  export declare const APP_NAME = "Excalidraw";
13
14
  export declare const TEXT_AUTOWRAP_THRESHOLD = 36;
@@ -175,6 +176,13 @@ export declare const IMAGE_MIME_TYPES: {
175
176
  readonly avif: "image/avif";
176
177
  readonly jfif: "image/jfif";
177
178
  };
179
+ export declare const STRING_MIME_TYPES: {
180
+ readonly text: "text/plain";
181
+ readonly html: "text/html";
182
+ readonly json: "application/json";
183
+ readonly excalidraw: "application/vnd.excalidraw+json";
184
+ readonly excalidrawlib: "application/vnd.excalidrawlib+json";
185
+ };
178
186
  export declare const MIME_TYPES: {
179
187
  readonly svg: "image/svg+xml";
180
188
  readonly png: "image/png";
@@ -185,14 +193,14 @@ export declare const MIME_TYPES: {
185
193
  readonly ico: "image/x-icon";
186
194
  readonly avif: "image/avif";
187
195
  readonly jfif: "image/jfif";
196
+ readonly "excalidraw.svg": "image/svg+xml";
197
+ readonly "excalidraw.png": "image/png";
198
+ readonly binary: "application/octet-stream";
188
199
  readonly text: "text/plain";
189
200
  readonly html: "text/html";
190
201
  readonly json: "application/json";
191
202
  readonly excalidraw: "application/vnd.excalidraw+json";
192
203
  readonly excalidrawlib: "application/vnd.excalidrawlib+json";
193
- readonly "excalidraw.svg": "image/svg+xml";
194
- readonly "excalidraw.png": "image/png";
195
- readonly binary: "application/octet-stream";
196
204
  };
197
205
  export declare const ALLOWED_PASTE_MIME_TYPES: readonly ["text/plain", "text/html", ...("image/svg+xml" | "image/png" | "image/jpeg" | "image/gif" | "image/webp" | "image/bmp" | "image/x-icon" | "image/avif" | "image/jfif")[]];
198
206
  export declare const EXPORT_IMAGE_TYPES: {
@@ -342,3 +350,4 @@ export declare enum UserIdleState {
342
350
  * the start and end points)
343
351
  */
344
352
  export declare const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
353
+ export declare const DOUBLE_TAP_POSITION_THRESHOLD = 35;
@@ -27,7 +27,9 @@ export declare class Scene {
27
27
  getElementsMapIncludingDeleted(): Map<string, Ordered<ExcalidrawElement>> & import("@excalidraw/common/utility-types").MakeBrand<"SceneElementsMap">;
28
28
  getNonDeletedElements(): readonly Ordered<NonDeletedExcalidrawElement>[];
29
29
  getFramesIncludingDeleted(): readonly ExcalidrawFrameLikeElement[];
30
- constructor(elements?: ElementsMapOrArray | null);
30
+ constructor(elements?: ElementsMapOrArray | null, options?: {
31
+ skipValidation?: true;
32
+ });
31
33
  getSelectedElements(opts: {
32
34
  selectedElementIds: AppState["selectedElementIds"];
33
35
  /**
@@ -55,7 +57,9 @@ export declare class Scene {
55
57
  * @returns whether a change was made
56
58
  */
57
59
  mapElements(iteratee: (element: ExcalidrawElement) => ExcalidrawElement): boolean;
58
- replaceAllElements(nextElements: ElementsMapOrArray): void;
60
+ replaceAllElements(nextElements: ElementsMapOrArray, options?: {
61
+ skipValidation?: true;
62
+ }): void;
59
63
  triggerUpdate(): void;
60
64
  onUpdate(cb: SceneStateCallback): SceneStateCallbackRemover;
61
65
  destroy(): void;
@@ -74,7 +74,7 @@ export interface BoundingBox {
74
74
  width: number;
75
75
  height: number;
76
76
  }
77
- export declare const getCommonBoundingBox: (elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[]) => BoundingBox;
77
+ export declare const getCommonBoundingBox: (elements: readonly ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[]) => BoundingBox;
78
78
  /**
79
79
  * returns scene coords of user's editor viewport (visible canvas area) bounds
80
80
  */
@@ -29,12 +29,16 @@ export declare class Delta<T> {
29
29
  }>(prevObject: T, nextObject: T, modifier?: (partial: Partial<T>) => Partial<T>, postProcess?: (deleted: Partial<T>, inserted: Partial<T>) => [Partial<T>, Partial<T>]): Delta<T>;
30
30
  static empty(): Delta<unknown>;
31
31
  static isEmpty<T>(delta: Delta<T>): boolean;
32
+ /**
33
+ * Merges two deltas into a new one.
34
+ */
35
+ static merge<T>(delta1: Delta<T>, delta2: Delta<T>, delta3?: Delta<T>): Delta<T>;
32
36
  /**
33
37
  * Merges deleted and inserted object partials.
34
38
  */
35
39
  static mergeObjects<T extends {
36
40
  [key: string]: unknown;
37
- }>(prev: T, added: T, removed: T): T;
41
+ }>(prev: T, added: T, removed?: T): T;
38
42
  /**
39
43
  * Merges deleted and inserted array partials.
40
44
  */
@@ -102,18 +106,24 @@ export interface DeltaContainer<T> {
102
106
  * @returns a tuple of the next object `T` with applied `Delta`s, and `boolean`, indicating whether the applied deltas resulted in a visible change.
103
107
  */
104
108
  applyTo(previous: T, ...options: unknown[]): [T, boolean];
109
+ /**
110
+ * Squashes the current delta with the given one.
111
+ */
112
+ squash(delta: DeltaContainer<T>): this;
105
113
  /**
106
114
  * Checks whether all `Delta`s are empty.
107
115
  */
108
116
  isEmpty(): boolean;
109
117
  }
110
118
  export declare class AppStateDelta implements DeltaContainer<AppState> {
111
- readonly delta: Delta<ObservedAppState>;
119
+ delta: Delta<ObservedAppState>;
112
120
  private constructor();
121
+ static create(delta: Delta<ObservedAppState>): AppStateDelta;
113
122
  static calculate<T extends ObservedAppState>(prevAppState: T, nextAppState: T): AppStateDelta;
114
123
  static restore(appStateDeltaDTO: DTO<AppStateDelta>): AppStateDelta;
115
124
  static empty(): AppStateDelta;
116
125
  inverse(): AppStateDelta;
126
+ squash(delta: AppStateDelta): this;
117
127
  applyTo(appState: AppState, nextElements: SceneElementsMap): [AppState, boolean];
118
128
  isEmpty(): boolean;
119
129
  /**
@@ -122,7 +132,6 @@ export declare class AppStateDelta implements DeltaContainer<AppState> {
122
132
  * @returns `true` if a visible change is found, `false` otherwise.
123
133
  */
124
134
  private filterInvisibleChanges;
125
- private static convertToAppStateKey;
126
135
  private static filterSelectedElements;
127
136
  private static filterSelectedGroups;
128
137
  private static stripElementsProps;
@@ -136,7 +145,7 @@ export declare class AppStateDelta implements DeltaContainer<AppState> {
136
145
  }
137
146
  type ElementPartial<TElement extends ExcalidrawElement = ExcalidrawElement> = Omit<Partial<Ordered<TElement>>, "id" | "updated" | "seed">;
138
147
  export type ApplyToOptions = {
139
- excludedProperties: Set<keyof ElementPartial>;
148
+ excludedProperties?: Set<keyof ElementPartial>;
140
149
  };
141
150
  /**
142
151
  * Elements change is a low level primitive to capture a change between two sets of elements.
@@ -155,6 +164,7 @@ export declare class ElementsDelta implements DeltaContainer<SceneElementsMap> {
155
164
  private static satisfiesRemoval;
156
165
  private static satisfiesUpdate;
157
166
  private static satisfiesCommmonInvariants;
167
+ private static satisfiesUniqueInvariants;
158
168
  private static validate;
159
169
  /**
160
170
  * Calculates the `Delta`s between the previous and next set of elements.
@@ -177,6 +187,7 @@ export declare class ElementsDelta implements DeltaContainer<SceneElementsMap> {
177
187
  */
178
188
  applyLatestChanges(prevElements: SceneElementsMap, nextElements: SceneElementsMap, modifierOptions?: "deleted" | "inserted"): ElementsDelta;
179
189
  applyTo(elements: SceneElementsMap, snapshot?: StoreSnapshot["elements"], options?: ApplyToOptions): [SceneElementsMap, boolean];
190
+ squash(delta: ElementsDelta): this;
180
191
  private static createApplier;
181
192
  private static createGetter;
182
193
  private static applyDelta;
@@ -203,6 +214,7 @@ export declare class ElementsDelta implements DeltaContainer<SceneElementsMap> {
203
214
  * should be rebound (if possible) with the current element ~ bindings should be bidirectional.
204
215
  */
205
216
  private static rebindAffected;
217
+ static redrawElements(nextElements: SceneElementsMap, changedElements: Map<string, OrderedExcalidrawElement>): SceneElementsMap;
206
218
  private static redrawTextBoundingBoxes;
207
219
  private static redrawBoundArrows;
208
220
  private static reorderElements;
@@ -38,6 +38,7 @@ export * from "./image";
38
38
  export * from "./linearElementEditor";
39
39
  export * from "./mutateElement";
40
40
  export * from "./newElement";
41
+ export * from "./positionElementsOnGrid";
41
42
  export * from "./renderElement";
42
43
  export * from "./resizeElements";
43
44
  export * from "./resizeTest";
@@ -0,0 +1,2 @@
1
+ import type { ExcalidrawElement } from "./types";
2
+ export declare const positionElementsOnGrid: <TElement extends ExcalidrawElement>(elements: TElement[] | TElement[][], centerX: number, centerY: number, padding?: number) => TElement[];
@@ -169,7 +169,11 @@ export declare class StoreDelta {
169
169
  /**
170
170
  * Parse and load the delta from the remote payload.
171
171
  */
172
- static load({ id, elements: { added, removed, updated }, }: DTO<StoreDelta>): StoreDelta;
172
+ static load({ id, elements: { added, removed, updated }, appState: { delta: appStateDelta }, }: DTO<StoreDelta>): StoreDelta;
173
+ /**
174
+ * Squash the passed deltas into the aggregated delta instance.
175
+ */
176
+ static squash(...deltas: StoreDelta[]): StoreDelta;
173
177
  /**
174
178
  * Inverse store delta, creates new instance of `StoreDelta`.
175
179
  */
@@ -182,6 +186,7 @@ export declare class StoreDelta {
182
186
  * Apply latest (remote) changes to the delta, creates new instance of `StoreDelta`.
183
187
  */
184
188
  static applyLatestChanges(delta: StoreDelta, prevElements: SceneElementsMap, nextElements: SceneElementsMap, modifierOptions?: "deleted" | "inserted"): StoreDelta;
189
+ static empty(): StoreDelta;
185
190
  isEmpty(): boolean;
186
191
  }
187
192
  /**
@@ -1,6 +1,6 @@
1
+ import { type Radians } from "@excalidraw/math";
1
2
  import type { AppState } from "@excalidraw/excalidraw/types";
2
3
  import type { ExtractSetType } from "@excalidraw/common/utility-types";
3
- import type { Radians } from "@excalidraw/math";
4
4
  import type { Scene } from "./Scene";
5
5
  import type { MaybeTransformHandleType } from "./transformHandles";
6
6
  import type { ElementsMap, ExcalidrawElement, ExcalidrawElementType, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, NonDeletedExcalidrawElement } from "./types";
@@ -160,8 +160,8 @@ export declare const actionClearCanvas: {
160
160
  openMenu: "canvas" | "shape" | null;
161
161
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
162
162
  openSidebar: {
163
- /** zoom content to cover X of the viewport, when fitToViewport=true */
164
163
  name: string;
164
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
165
165
  tab?: string | undefined;
166
166
  } | null;
167
167
  defaultSidebarDockedPreference: boolean;
@@ -278,8 +278,8 @@ export declare const actionZoomIn: {
278
278
  openMenu: "canvas" | "shape" | null;
279
279
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
280
280
  openSidebar: {
281
- /** zoom content to cover X of the viewport, when fitToViewport=true */
282
281
  name: string;
282
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
283
283
  tab?: string | undefined;
284
284
  } | null;
285
285
  openDialog: {
@@ -465,8 +465,8 @@ export declare const actionZoomOut: {
465
465
  openMenu: "canvas" | "shape" | null;
466
466
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
467
467
  openSidebar: {
468
- /** zoom content to cover X of the viewport, when fitToViewport=true */
469
468
  name: string;
469
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
470
470
  tab?: string | undefined;
471
471
  } | null;
472
472
  openDialog: {
@@ -652,8 +652,8 @@ export declare const actionResetZoom: {
652
652
  openMenu: "canvas" | "shape" | null;
653
653
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
654
654
  openSidebar: {
655
- /** zoom content to cover X of the viewport, when fitToViewport=true */
656
655
  name: string;
656
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
657
657
  tab?: string | undefined;
658
658
  } | null;
659
659
  openDialog: {
@@ -845,8 +845,8 @@ export declare const zoomToFitBounds: ({ bounds, appState, canvasOffsets, fitToV
845
845
  openMenu: "canvas" | "shape" | null;
846
846
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
847
847
  openSidebar: {
848
- /** zoom content to cover X of the viewport, when fitToViewport=true */
849
848
  name: string;
849
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
850
850
  tab?: string | undefined;
851
851
  } | null;
852
852
  openDialog: {
@@ -1034,8 +1034,8 @@ export declare const zoomToFit: ({ canvasOffsets, targetElements, appState, fitT
1034
1034
  openMenu: "canvas" | "shape" | null;
1035
1035
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
1036
1036
  openSidebar: {
1037
- /** zoom content to cover X of the viewport, when fitToViewport=true */
1038
1037
  name: string;
1038
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
1039
1039
  tab?: string | undefined;
1040
1040
  } | null;
1041
1041
  openDialog: {
@@ -1215,8 +1215,8 @@ export declare const actionZoomToFitSelectionInViewport: {
1215
1215
  openMenu: "canvas" | "shape" | null;
1216
1216
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
1217
1217
  openSidebar: {
1218
- /** zoom content to cover X of the viewport, when fitToViewport=true */
1219
1218
  name: string;
1219
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
1220
1220
  tab?: string | undefined;
1221
1221
  } | null;
1222
1222
  openDialog: {
@@ -1400,8 +1400,8 @@ export declare const actionZoomToFitSelection: {
1400
1400
  openMenu: "canvas" | "shape" | null;
1401
1401
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
1402
1402
  openSidebar: {
1403
- /** zoom content to cover X of the viewport, when fitToViewport=true */
1404
1403
  name: string;
1404
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
1405
1405
  tab?: string | undefined;
1406
1406
  } | null;
1407
1407
  openDialog: {
@@ -1586,8 +1586,8 @@ export declare const actionZoomToFit: {
1586
1586
  openMenu: "canvas" | "shape" | null;
1587
1587
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
1588
1588
  openSidebar: {
1589
- /** zoom content to cover X of the viewport, when fitToViewport=true */
1590
1589
  name: string;
1590
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
1591
1591
  tab?: string | undefined;
1592
1592
  } | null;
1593
1593
  openDialog: {
@@ -1774,8 +1774,8 @@ export declare const actionToggleTheme: {
1774
1774
  openMenu: "canvas" | "shape" | null;
1775
1775
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
1776
1776
  openSidebar: {
1777
- /** zoom content to cover X of the viewport, when fitToViewport=true */
1778
1777
  name: string;
1778
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
1779
1779
  tab?: string | undefined;
1780
1780
  } | null;
1781
1781
  openDialog: {
@@ -1887,7 +1887,7 @@ export declare const actionToggleEraserTool: {
1887
1887
  trackEvent: {
1888
1888
  category: "toolbar";
1889
1889
  };
1890
- perform: (elements: readonly import("@excalidraw/element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>) => {
1890
+ perform: (elements: readonly import("@excalidraw/element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
1891
1891
  appState: {
1892
1892
  selectedElementIds: {};
1893
1893
  selectedGroupIds: {};
@@ -1957,8 +1957,8 @@ export declare const actionToggleEraserTool: {
1957
1957
  openMenu: "canvas" | "shape" | null;
1958
1958
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
1959
1959
  openSidebar: {
1960
- /** zoom content to cover X of the viewport, when fitToViewport=true */
1961
1960
  name: string;
1961
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
1962
1962
  tab?: string | undefined;
1963
1963
  } | null;
1964
1964
  openDialog: {
@@ -2065,6 +2065,7 @@ export declare const actionToggleLassoTool: {
2065
2065
  trackEvent: {
2066
2066
  category: "toolbar";
2067
2067
  };
2068
+ predicate: (elements: readonly ExcalidrawElement[], appState: AppState, props: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
2068
2069
  perform: (elements: readonly import("@excalidraw/element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
2069
2070
  appState: {
2070
2071
  selectedElementIds: {};
@@ -2135,8 +2136,8 @@ export declare const actionToggleLassoTool: {
2135
2136
  openMenu: "canvas" | "shape" | null;
2136
2137
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
2137
2138
  openSidebar: {
2138
- /** zoom content to cover X of the viewport, when fitToViewport=true */
2139
2139
  name: string;
2140
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
2140
2141
  tab?: string | undefined;
2141
2142
  } | null;
2142
2143
  openDialog: {
@@ -2313,8 +2314,8 @@ export declare const actionToggleHandTool: {
2313
2314
  openMenu: "canvas" | "shape" | null;
2314
2315
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
2315
2316
  openSidebar: {
2316
- /** zoom content to cover X of the viewport, when fitToViewport=true */
2317
2317
  name: string;
2318
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
2318
2319
  tab?: string | undefined;
2319
2320
  } | null;
2320
2321
  openDialog: {
@@ -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,68 @@ 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
+ }>>(this: ParsedDataTranferList, type: T) => ParsedDataTransferItemType<T> | null;
111
+ declare const getDataTransferItemData: <T extends ValueOf<{
112
+ readonly text: "text/plain";
113
+ readonly html: "text/html";
114
+ readonly json: "application/json";
115
+ readonly excalidraw: "application/vnd.excalidraw+json";
116
+ readonly excalidrawlib: "application/vnd.excalidrawlib+json";
117
+ }>>(this: ParsedDataTranferList, type: T) => ParsedDataTransferItemType<ValueOf<typeof STRING_MIME_TYPES>>["value"] | null;
118
+ declare const getDataTransferFiles: (this: ParsedDataTranferList) => ParsedDataTransferFile[];
119
+ export declare const parseDataTransferEvent: (event: ClipboardEvent | DragEvent | React.DragEvent<HTMLDivElement>) => Promise<ParsedDataTranferList>;
60
120
  /**
61
121
  * Attempts to parse clipboard event.
62
122
  */
63
- export declare const parseClipboard: (event: ClipboardEvent, isPlainPaste?: boolean) => Promise<ClipboardData>;
123
+ export declare const parseClipboard: (dataList: ParsedDataTranferList, isPlainPaste?: boolean) => Promise<ClipboardData>;
64
124
  export declare const copyBlobToClipboardAsPng: (blob: Blob | Promise<Blob>) => Promise<void>;
65
125
  export declare const copyTextToSystemClipboard: (text: string | null, clipboardEvent?: ClipboardEvent | null) => Promise<void>;
126
+ export declare const isClipboardEvent: (event: React.SyntheticEvent | Event) => event is ClipboardEvent;
66
127
  export {};
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { type EXPORT_IMAGE_TYPES, Emitter } from "@excalidraw/common";
3
- import { LinearElementEditor, FlowChartCreator, Scene, Store, type ElementUpdate } from "@excalidraw/element";
4
- import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered } from "@excalidraw/element/types";
3
+ import { LinearElementEditor, FlowChartCreator, Scene, Store, type ElementUpdate, StoreDelta, type ApplyToOptions } from "@excalidraw/element";
4
+ import type { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement, Ordered, SceneElementsMap } from "@excalidraw/element/types";
5
5
  import type { Mutable } from "@excalidraw/common/utility-types";
6
6
  import { ActionManager } from "../actions/manager";
7
7
  import { AnimationFrameHandler } from "../animation-frame-handler";
@@ -153,6 +153,7 @@ declare class App extends React.Component<AppProps, AppState> {
153
153
  x: number;
154
154
  y: number;
155
155
  };
156
+ blockDragging: boolean;
156
157
  };
157
158
  eventListeners: {
158
159
  onMove: {
@@ -222,6 +223,7 @@ declare class App extends React.Component<AppProps, AppState> {
222
223
  x: number;
223
224
  y: number;
224
225
  };
226
+ blockDragging: boolean;
225
227
  };
226
228
  eventListeners: {
227
229
  onMove: {
@@ -243,6 +245,7 @@ declare class App extends React.Component<AppProps, AppState> {
243
245
  }>]>;
244
246
  missingPointerEventCleanupEmitter: Emitter<[event: PointerEvent | null]>;
245
247
  onRemoveEventListenersEmitter: Emitter<[]>;
248
+ defaultSelectionTool: "selection" | "lasso";
246
249
  constructor(props: AppProps);
247
250
  updateEditorAtom: <Value, Args extends unknown[], Result>(atom: WritableAtom<Value, Args, Result>, ...args: Args) => Result;
248
251
  private onWindowMessage;
@@ -297,6 +300,7 @@ declare class App extends React.Component<AppProps, AppState> {
297
300
  */
298
301
  private resetScene;
299
302
  private initializeScene;
303
+ private isMobileOrTablet;
300
304
  private isMobileBreakpoint;
301
305
  private refreshViewportBreakpoints;
302
306
  private refreshEditorBreakpoints;
@@ -316,6 +320,7 @@ declare class App extends React.Component<AppProps, AppState> {
316
320
  private static resetTapTwice;
317
321
  private onTouchStart;
318
322
  private onTouchEnd;
323
+ private insertClipboardContent;
319
324
  pasteFromClipboard: (event: ClipboardEvent) => Promise<void>;
320
325
  addElementsFromPasteOrLibrary: (opts: {
321
326
  elements: readonly ExcalidrawElement[];
@@ -397,6 +402,7 @@ declare class App extends React.Component<AppProps, AppState> {
397
402
  */
398
403
  captureUpdate?: SceneData["captureUpdate"];
399
404
  }) => void;
405
+ applyDeltas: (deltas: StoreDelta[], options?: ApplyToOptions) => [SceneElementsMap, AppState, boolean];
400
406
  mutateElement: <TElement extends Mutable<ExcalidrawElement>>(element: TElement, updates: ElementUpdate<TElement>, informMutation?: boolean) => TElement;
401
407
  private triggerRender;
402
408
  /**
@@ -488,7 +494,7 @@ declare class App extends React.Component<AppProps, AppState> {
488
494
  sceneY: number;
489
495
  link: string;
490
496
  }) => NonDeleted<ExcalidrawEmbeddableElement> | undefined;
491
- private createImageElement;
497
+ private newImagePlaceholder;
492
498
  private handleLinearElementOnPointerDown;
493
499
  private getCurrentItemRoundness;
494
500
  private createGenericElementOnPointerDown;
@@ -509,11 +515,7 @@ declare class App extends React.Component<AppProps, AppState> {
509
515
  * and when you don't want to loose those modifications
510
516
  */
511
517
  private getLatestInitializedImageElement;
512
- /**
513
- * inserts image into elements array and rerenders
514
- */
515
- private insertImageElement;
516
- private onImageAction;
518
+ private onImageToolbarButtonClick;
517
519
  private getImageNaturalDimensions;
518
520
  /** updates image cache, refreshing updated elements and/or setting status
519
521
  to error for images that fail during <img> element creation */
@@ -527,6 +529,7 @@ declare class App extends React.Component<AppProps, AppState> {
527
529
  private maybeSuggestBindingAtCursor;
528
530
  private clearSelection;
529
531
  private handleInteractiveCanvasRef;
532
+ private insertImages;
530
533
  private handleAppOnDrop;
531
534
  loadFileToCanvas: (file: File, fileHandle: FileSystemHandle | null) => Promise<void>;
532
535
  private handleCanvasContextMenu;
@@ -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) => "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "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;