@excalidraw/excalidraw 0.18.0-39ce38a0d-200a6bd94 → 0.18.0-3bdaafe

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-Y7B3JU7D.js → chunk-CP5DND7P.js} +2 -2
  2. package/dist/dev/{chunk-Y7B3JU7D.js.map → chunk-CP5DND7P.js.map} +1 -1
  3. package/dist/dev/{chunk-GZYPVQVV.js → chunk-WQARCR2O.js} +805 -70
  4. package/dist/dev/chunk-WQARCR2O.js.map +7 -0
  5. package/dist/dev/data/{image-V3RGFWEQ.js → image-6EX7CJAB.js} +3 -3
  6. package/dist/dev/index.js +960 -1496
  7. package/dist/dev/index.js.map +4 -4
  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-ATYYHCCY.js → chunk-A66AFZZU.js} +1 -1
  11. package/dist/prod/chunk-K6SESUPD.js +7 -0
  12. package/dist/prod/data/image-I65E4LM3.js +1 -0
  13. package/dist/prod/index.js +20 -23
  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 +2 -0
  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 +6 -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 -1
  25. package/dist/types/excalidraw/clipboard.d.ts +1 -0
  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 +7 -4
  29. package/dist/types/excalidraw/data/restore.d.ts +6 -1
  30. package/dist/types/excalidraw/index.d.ts +1 -1
  31. package/dist/types/excalidraw/types.d.ts +5 -2
  32. package/history.ts +1 -1
  33. package/package.json +5 -5
  34. package/dist/dev/chunk-GZYPVQVV.js.map +0 -7
  35. package/dist/prod/chunk-QH2XZQ34.js +0 -4
  36. package/dist/prod/data/image-4FTETSFG.js +0 -1
  37. /package/dist/dev/data/{image-V3RGFWEQ.js.map → image-6EX7CJAB.js.map} +0 -0
@@ -1 +1 @@
1
- import{a,b,c,d}from"./chunk-LS7FJGPW.js";import"./chunk-ATYYHCCY.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-ATYYHCCY.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;
@@ -342,3 +343,4 @@ export declare enum UserIdleState {
342
343
  * the start and end points)
343
344
  */
344
345
  export declare const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
346
+ 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
  */
@@ -32,13 +32,13 @@ export declare class Delta<T> {
32
32
  /**
33
33
  * Merges two deltas into a new one.
34
34
  */
35
- static merge<T>(delta1: Delta<T>, delta2: Delta<T>): Delta<T>;
35
+ static merge<T>(delta1: Delta<T>, delta2: Delta<T>, delta3?: Delta<T>): Delta<T>;
36
36
  /**
37
37
  * Merges deleted and inserted object partials.
38
38
  */
39
39
  static mergeObjects<T extends {
40
40
  [key: string]: unknown;
41
- }>(prev: T, added: T, removed: T): T;
41
+ }>(prev: T, added: T, removed?: T): T;
42
42
  /**
43
43
  * Merges deleted and inserted array partials.
44
44
  */
@@ -118,6 +118,7 @@ export interface DeltaContainer<T> {
118
118
  export declare class AppStateDelta implements DeltaContainer<AppState> {
119
119
  delta: Delta<ObservedAppState>;
120
120
  private constructor();
121
+ static create(delta: Delta<ObservedAppState>): AppStateDelta;
121
122
  static calculate<T extends ObservedAppState>(prevAppState: T, nextAppState: T): AppStateDelta;
122
123
  static restore(appStateDeltaDTO: DTO<AppStateDelta>): AppStateDelta;
123
124
  static empty(): AppStateDelta;
@@ -131,7 +132,6 @@ export declare class AppStateDelta implements DeltaContainer<AppState> {
131
132
  * @returns `true` if a visible change is found, `false` otherwise.
132
133
  */
133
134
  private filterInvisibleChanges;
134
- private static convertToAppStateKey;
135
135
  private static filterSelectedElements;
136
136
  private static filterSelectedGroups;
137
137
  private static stripElementsProps;
@@ -145,7 +145,7 @@ export declare class AppStateDelta implements DeltaContainer<AppState> {
145
145
  }
146
146
  type ElementPartial<TElement extends ExcalidrawElement = ExcalidrawElement> = Omit<Partial<Ordered<TElement>>, "id" | "updated" | "seed">;
147
147
  export type ApplyToOptions = {
148
- excludedProperties: Set<keyof ElementPartial>;
148
+ excludedProperties?: Set<keyof ElementPartial>;
149
149
  };
150
150
  /**
151
151
  * Elements change is a low level primitive to capture a change between two sets of elements.
@@ -164,6 +164,7 @@ export declare class ElementsDelta implements DeltaContainer<SceneElementsMap> {
164
164
  private static satisfiesRemoval;
165
165
  private static satisfiesUpdate;
166
166
  private static satisfiesCommmonInvariants;
167
+ private static satisfiesUniqueInvariants;
167
168
  private static validate;
168
169
  /**
169
170
  * Calculates the `Delta`s between the previous and next set of elements.
@@ -213,6 +214,7 @@ export declare class ElementsDelta implements DeltaContainer<SceneElementsMap> {
213
214
  * should be rebound (if possible) with the current element ~ bindings should be bidirectional.
214
215
  */
215
216
  private static rebindAffected;
217
+ static redrawElements(nextElements: SceneElementsMap, changedElements: Map<string, OrderedExcalidrawElement>): SceneElementsMap;
216
218
  private static redrawTextBoundingBoxes;
217
219
  private static redrawBoundArrows;
218
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";
@@ -161,6 +161,7 @@ export declare const actionClearCanvas: {
161
161
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
162
162
  openSidebar: {
163
163
  name: string;
164
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
164
165
  tab?: string | undefined;
165
166
  } | null;
166
167
  defaultSidebarDockedPreference: boolean;
@@ -278,6 +279,7 @@ export declare const actionZoomIn: {
278
279
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
279
280
  openSidebar: {
280
281
  name: string;
282
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
281
283
  tab?: string | undefined;
282
284
  } | null;
283
285
  openDialog: {
@@ -464,6 +466,7 @@ export declare const actionZoomOut: {
464
466
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
465
467
  openSidebar: {
466
468
  name: string;
469
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
467
470
  tab?: string | undefined;
468
471
  } | null;
469
472
  openDialog: {
@@ -650,6 +653,7 @@ export declare const actionResetZoom: {
650
653
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
651
654
  openSidebar: {
652
655
  name: string;
656
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
653
657
  tab?: string | undefined;
654
658
  } | null;
655
659
  openDialog: {
@@ -842,6 +846,7 @@ export declare const zoomToFitBounds: ({ bounds, appState, canvasOffsets, fitToV
842
846
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
843
847
  openSidebar: {
844
848
  name: string;
849
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
845
850
  tab?: string | undefined;
846
851
  } | null;
847
852
  openDialog: {
@@ -1030,6 +1035,7 @@ export declare const zoomToFit: ({ canvasOffsets, targetElements, appState, fitT
1030
1035
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
1031
1036
  openSidebar: {
1032
1037
  name: string;
1038
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
1033
1039
  tab?: string | undefined;
1034
1040
  } | null;
1035
1041
  openDialog: {
@@ -1210,6 +1216,7 @@ export declare const actionZoomToFitSelectionInViewport: {
1210
1216
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
1211
1217
  openSidebar: {
1212
1218
  name: string;
1219
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
1213
1220
  tab?: string | undefined;
1214
1221
  } | null;
1215
1222
  openDialog: {
@@ -1394,6 +1401,7 @@ export declare const actionZoomToFitSelection: {
1394
1401
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
1395
1402
  openSidebar: {
1396
1403
  name: string;
1404
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
1397
1405
  tab?: string | undefined;
1398
1406
  } | null;
1399
1407
  openDialog: {
@@ -1579,6 +1587,7 @@ export declare const actionZoomToFit: {
1579
1587
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
1580
1588
  openSidebar: {
1581
1589
  name: string;
1590
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
1582
1591
  tab?: string | undefined;
1583
1592
  } | null;
1584
1593
  openDialog: {
@@ -1766,6 +1775,7 @@ export declare const actionToggleTheme: {
1766
1775
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
1767
1776
  openSidebar: {
1768
1777
  name: string;
1778
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
1769
1779
  tab?: string | undefined;
1770
1780
  } | null;
1771
1781
  openDialog: {
@@ -1877,7 +1887,7 @@ export declare const actionToggleEraserTool: {
1877
1887
  trackEvent: {
1878
1888
  category: "toolbar";
1879
1889
  };
1880
- 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) => {
1881
1891
  appState: {
1882
1892
  selectedElementIds: {};
1883
1893
  selectedGroupIds: {};
@@ -1948,6 +1958,7 @@ export declare const actionToggleEraserTool: {
1948
1958
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
1949
1959
  openSidebar: {
1950
1960
  name: string;
1961
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
1951
1962
  tab?: string | undefined;
1952
1963
  } | null;
1953
1964
  openDialog: {
@@ -2054,6 +2065,7 @@ export declare const actionToggleLassoTool: {
2054
2065
  trackEvent: {
2055
2066
  category: "toolbar";
2056
2067
  };
2068
+ predicate: (elements: readonly ExcalidrawElement[], appState: AppState, props: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
2057
2069
  perform: (elements: readonly import("@excalidraw/element/types").OrderedExcalidrawElement[], appState: Readonly<AppState>, _: any, app: import("../types").AppClassProperties) => {
2058
2070
  appState: {
2059
2071
  selectedElementIds: {};
@@ -2125,6 +2137,7 @@ export declare const actionToggleLassoTool: {
2125
2137
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
2126
2138
  openSidebar: {
2127
2139
  name: string;
2140
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
2128
2141
  tab?: string | undefined;
2129
2142
  } | null;
2130
2143
  openDialog: {
@@ -2302,6 +2315,7 @@ export declare const actionToggleHandTool: {
2302
2315
  openPopup: "fontFamily" | "canvasBackground" | "elementBackground" | "elementStroke" | null;
2303
2316
  openSidebar: {
2304
2317
  name: string;
2318
+ /** zoom content to cover X of the viewport, when fitToViewport=true */
2305
2319
  tab?: string | undefined;
2306
2320
  } | null;
2307
2321
  openDialog: {
@@ -63,4 +63,5 @@ export declare const readSystemClipboard: () => Promise<{
63
63
  export declare const parseClipboard: (event: ClipboardEvent, isPlainPaste?: boolean) => Promise<ClipboardData>;
64
64
  export declare const copyBlobToClipboardAsPng: (blob: Blob | Promise<Blob>) => Promise<void>;
65
65
  export declare const copyTextToSystemClipboard: (text: string | null, clipboardEvent?: ClipboardEvent | null) => Promise<void>;
66
+ export declare const isClipboardEvent: (event: React.SyntheticEvent | Event) => event is ClipboardEvent;
66
67
  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;
@@ -40,11 +40,14 @@ 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 getFileFromEvent: (event: React.DragEvent<HTMLDivElement>) => Promise<{
44
- file: File | null;
43
+ export declare const getFilesFromEvent: (event: React.DragEvent<HTMLDivElement> | ClipboardEvent) => Promise<({
44
+ file: File;
45
45
  fileHandle: FileSystemHandle | null;
46
- }>;
47
- export declare const getFileHandle: (event: React.DragEvent<HTMLDivElement>) => Promise<FileSystemHandle | null>;
46
+ } | {
47
+ file: null;
48
+ fileHandle: null;
49
+ })[]>;
50
+ export declare const getFileHandle: (event: DragEvent | React.DragEvent | DataTransferItem) => Promise<FileSystemHandle | null>;
48
51
  export declare const createFile: (blob: File | Blob | ArrayBuffer, mimeType: ValueOf<typeof MIME_TYPES>, name: string | undefined) => File;
49
52
  /** attempts to detect correct mimeType if none is set, or if an image
50
53
  * has an incorrect extension.
@@ -1,4 +1,4 @@
1
- import type { ExcalidrawElement, OrderedExcalidrawElement } from "@excalidraw/element/types";
1
+ import type { ExcalidrawArrowElement, ExcalidrawElement, ExcalidrawLinearElement, ExcalidrawSelectionElement, ExcalidrawTextElement, OrderedExcalidrawElement } from "@excalidraw/element/types";
2
2
  import type { AppState, BinaryFiles, LibraryItem } from "../types";
3
3
  import type { ImportedDataState } from "./types";
4
4
  type RestoredAppState = Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
@@ -8,14 +8,19 @@ export type RestoredDataState = {
8
8
  appState: RestoredAppState;
9
9
  files: BinaryFiles;
10
10
  };
11
+ export declare const restoreElement: (element: Exclude<ExcalidrawElement, ExcalidrawSelectionElement>, opts?: {
12
+ deleteInvisibleElements?: boolean;
13
+ }) => ExcalidrawLinearElement | import("@excalidraw/element/types").ExcalidrawRectangleElement | import("@excalidraw/element/types").ExcalidrawDiamondElement | import("@excalidraw/element/types").ExcalidrawEllipseElement | import("@excalidraw/element/types").ExcalidrawEmbeddableElement | import("@excalidraw/element/types").ExcalidrawIframeElement | import("@excalidraw/element/types").ExcalidrawImageElement | import("@excalidraw/element/types").ExcalidrawFrameElement | import("@excalidraw/element/types").ExcalidrawMagicFrameElement | ExcalidrawTextElement | import("@excalidraw/element/types").ExcalidrawFreeDrawElement | ExcalidrawArrowElement | null;
11
14
  export declare const restoreElements: (elements: ImportedDataState["elements"], localElements: readonly ExcalidrawElement[] | null | undefined, opts?: {
12
15
  refreshDimensions?: boolean;
13
16
  repairBindings?: boolean;
17
+ deleteInvisibleElements?: boolean;
14
18
  } | undefined) => OrderedExcalidrawElement[];
15
19
  export declare const restoreAppState: (appState: ImportedDataState["appState"], localAppState: Partial<AppState> | null | undefined) => RestoredAppState;
16
20
  export declare const restore: (data: Pick<ImportedDataState, "appState" | "elements" | "files"> | null, localAppState: Partial<AppState> | null | undefined, localElements: readonly ExcalidrawElement[] | null | undefined, elementsConfig?: {
17
21
  refreshDimensions?: boolean;
18
22
  repairBindings?: boolean;
23
+ deleteInvisibleElements?: boolean;
19
24
  }) => RestoredDataState;
20
25
  export declare const restoreLibraryItems: (libraryItems: ImportedDataState["libraryItems"], defaultStatus: LibraryItem["status"]) => LibraryItem[];
21
26
  export {};
@@ -12,7 +12,7 @@ export { getSceneVersion, hashElementsVersion, hashString, getNonDeletedElements
12
12
  export { getTextFromElements } from "@excalidraw/element";
13
13
  export { isInvisiblySmallElement } from "@excalidraw/element";
14
14
  export { defaultLang, useI18n, languages } from "./i18n";
15
- export { restore, restoreAppState, restoreElements, restoreLibraryItems, } from "./data/restore";
15
+ export { restore, restoreAppState, restoreElement, restoreElements, restoreLibraryItems, } from "./data/restore";
16
16
  export { reconcileElements } from "./data/reconcile";
17
17
  export { exportToCanvas, exportToBlob, exportToSvg, exportToClipboard, } from "@excalidraw/utils/export";
18
18
  export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
@@ -155,8 +155,8 @@ export type ObservedElementsAppState = {
155
155
  editingGroupId: AppState["editingGroupId"];
156
156
  selectedElementIds: AppState["selectedElementIds"];
157
157
  selectedGroupIds: AppState["selectedGroupIds"];
158
- activeLinearElement: {
159
- id: LinearElementEditor["elementId"];
158
+ selectedLinearElement: {
159
+ elementId: LinearElementEditor["elementId"];
160
160
  isEditing: boolean;
161
161
  } | null;
162
162
  croppingElementId: AppState["croppingElementId"];
@@ -557,6 +557,7 @@ export type AppClassProperties = {
557
557
  excalidrawContainerValue: App["excalidrawContainerValue"];
558
558
  onPointerUpEmitter: App["onPointerUpEmitter"];
559
559
  updateEditorAtom: App["updateEditorAtom"];
560
+ defaultSelectionTool: "selection" | "lasso";
560
561
  };
561
562
  export type PointerDownState = Readonly<{
562
563
  origin: Readonly<{
@@ -604,6 +605,7 @@ export type PointerDownState = Readonly<{
604
605
  x: number;
605
606
  y: number;
606
607
  };
608
+ blockDragging: boolean;
607
609
  };
608
610
  eventListeners: {
609
611
  onMove: null | ReturnType<typeof throttleRAF>;
@@ -618,6 +620,7 @@ export type PointerDownState = Readonly<{
618
620
  export type UnsubscribeCallback = () => void;
619
621
  export interface ExcalidrawImperativeAPI {
620
622
  updateScene: InstanceType<typeof App>["updateScene"];
623
+ applyDeltas: InstanceType<typeof App>["applyDeltas"];
621
624
  mutateElement: InstanceType<typeof App>["mutateElement"];
622
625
  updateLibrary: InstanceType<typeof Library>["updateLibrary"];
623
626
  resetScene: InstanceType<typeof App>["resetScene"];
package/history.ts CHANGED
@@ -175,7 +175,7 @@ export class History {
175
175
  let nextAppState = appState;
176
176
  let containsVisibleChange = false;
177
177
 
178
- // iterate through the history entries in case ;they result in no visible changes
178
+ // iterate through the history entries in case they result in no visible changes
179
179
  while (historyDelta) {
180
180
  try {
181
181
  [nextElements, nextAppState, containsVisibleChange] =
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@excalidraw/excalidraw",
3
- "version": "0.18.0-39ce38a0d-200a6bd94",
3
+ "version": "0.18.0-3bdaafe",
4
4
  "type": "module",
5
5
  "types": "./dist/types/excalidraw/index.d.ts",
6
6
  "main": "./dist/prod/index.js",
@@ -79,11 +79,11 @@
79
79
  },
80
80
  "dependencies": {
81
81
  "@braintree/sanitize-url": "6.0.2",
82
- "@excalidraw/common": "0.18.0-39ce38a0d-200a6bd94",
83
- "@excalidraw/element": "0.18.0-39ce38a0d-200a6bd94",
84
- "@excalidraw/math": "0.18.0-39ce38a0d-200a6bd94",
82
+ "@excalidraw/common": "0.18.0-3bdaafe",
83
+ "@excalidraw/element": "0.18.0-3bdaafe",
84
+ "@excalidraw/math": "0.18.0-3bdaafe",
85
85
  "@excalidraw/laser-pointer": "1.3.1",
86
- "@excalidraw/mermaid-to-excalidraw": "1.1.2",
86
+ "@excalidraw/mermaid-to-excalidraw": "1.1.3",
87
87
  "@excalidraw/random-username": "1.1.0",
88
88
  "@radix-ui/react-popover": "1.1.6",
89
89
  "@radix-ui/react-tabs": "1.1.3",