@excalidraw/common 0.18.0-c65b684e9 → 0.18.0-d1f3982

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 (88) hide show
  1. package/dist/dev/index.js +178 -44
  2. package/dist/dev/index.js.map +3 -3
  3. package/dist/prod/index.js +3 -3
  4. package/dist/types/common/src/constants.d.ts +18 -15
  5. package/dist/types/common/src/editorInterface.d.ts +34 -0
  6. package/dist/types/common/src/index.d.ts +1 -0
  7. package/dist/types/common/src/utils.d.ts +2 -1
  8. package/dist/types/element/src/Scene.d.ts +6 -2
  9. package/dist/types/element/src/bounds.d.ts +1 -1
  10. package/dist/types/element/src/delta.d.ts +6 -4
  11. package/dist/types/element/src/index.d.ts +1 -0
  12. package/dist/types/element/src/positionElementsOnGrid.d.ts +2 -0
  13. package/dist/types/element/src/renderElement.d.ts +4 -1
  14. package/dist/types/element/src/resizeTest.d.ts +5 -4
  15. package/dist/types/element/src/store.d.ts +6 -1
  16. package/dist/types/element/src/textElement.d.ts +1 -1
  17. package/dist/types/element/src/transformHandles.d.ts +5 -4
  18. package/dist/types/excalidraw/actions/actionAddToLibrary.d.ts +21 -9
  19. package/dist/types/excalidraw/actions/actionBoundText.d.ts +14 -6
  20. package/dist/types/excalidraw/actions/actionCanvas.d.ts +94 -54
  21. package/dist/types/excalidraw/actions/actionClipboard.d.ts +42 -18
  22. package/dist/types/excalidraw/actions/actionCropEditor.d.ts +7 -3
  23. package/dist/types/excalidraw/actions/actionDeleteSelected.d.ts +22 -10
  24. package/dist/types/excalidraw/actions/actionDuplicateSelection.d.ts +1 -1
  25. package/dist/types/excalidraw/actions/actionElementLink.d.ts +7 -3
  26. package/dist/types/excalidraw/actions/actionElementLock.d.ts +14 -6
  27. package/dist/types/excalidraw/actions/actionEmbeddable.d.ts +7 -3
  28. package/dist/types/excalidraw/actions/actionExport.d.ts +63 -27
  29. package/dist/types/excalidraw/actions/actionFinalize.d.ts +14 -6
  30. package/dist/types/excalidraw/actions/actionFrame.d.ts +28 -12
  31. package/dist/types/excalidraw/actions/actionGroup.d.ts +14 -6
  32. package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +8 -4
  33. package/dist/types/excalidraw/actions/actionLink.d.ts +5 -1
  34. package/dist/types/excalidraw/actions/actionMenu.d.ts +7 -369
  35. package/dist/types/excalidraw/actions/actionNavigate.d.ts +14 -6
  36. package/dist/types/excalidraw/actions/actionProperties.d.ts +122 -53
  37. package/dist/types/excalidraw/actions/actionSelectAll.d.ts +7 -3
  38. package/dist/types/excalidraw/actions/actionStyles.d.ts +7 -3
  39. package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +7 -3
  40. package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +7 -3
  41. package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +7 -3
  42. package/dist/types/excalidraw/actions/actionToggleStats.d.ts +7 -3
  43. package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +7 -3
  44. package/dist/types/excalidraw/actions/actionToggleZenMode.d.ts +7 -3
  45. package/dist/types/excalidraw/actions/index.d.ts +2 -2
  46. package/dist/types/excalidraw/actions/types.d.ts +1 -1
  47. package/dist/types/excalidraw/appState.d.ts +5 -1
  48. package/dist/types/excalidraw/clipboard.d.ts +64 -1
  49. package/dist/types/excalidraw/components/Actions.d.ts +17 -3
  50. package/dist/types/excalidraw/components/App.d.ts +28 -23
  51. package/dist/types/excalidraw/components/ColorPicker/Picker.d.ts +2 -0
  52. package/dist/types/excalidraw/components/ColorPicker/PickerColorList.d.ts +2 -1
  53. package/dist/types/excalidraw/components/ColorPicker/ShadeList.d.ts +2 -1
  54. package/dist/types/excalidraw/components/CommandPalette/CommandPalette.d.ts +1 -0
  55. package/dist/types/excalidraw/components/ExcalidrawLogo.d.ts +1 -1
  56. package/dist/types/excalidraw/components/FontPicker/FontPicker.d.ts +2 -1
  57. package/dist/types/excalidraw/components/FontPicker/FontPickerTrigger.d.ts +3 -1
  58. package/dist/types/excalidraw/components/HintViewer.d.ts +4 -3
  59. package/dist/types/excalidraw/components/InlineIcon.d.ts +3 -1
  60. package/dist/types/excalidraw/components/LayerUI.d.ts +2 -1
  61. package/dist/types/excalidraw/components/LibraryMenuSection.d.ts +1 -1
  62. package/dist/types/excalidraw/components/MobileMenu.d.ts +3 -5
  63. package/dist/types/excalidraw/components/MobileToolBar.d.ts +11 -0
  64. package/dist/types/excalidraw/components/Popover.d.ts +2 -1
  65. package/dist/types/excalidraw/components/PropertiesPopover.d.ts +1 -0
  66. package/dist/types/excalidraw/components/TTDDialog/TTDDialogTrigger.d.ts +1 -2
  67. package/dist/types/excalidraw/components/TextField.d.ts +1 -0
  68. package/dist/types/excalidraw/components/ToolPopover.d.ts +25 -0
  69. package/dist/types/excalidraw/components/canvases/InteractiveCanvas.d.ts +3 -2
  70. package/dist/types/excalidraw/components/dropdownMenu/DropdownMenu.d.ts +4 -2
  71. package/dist/types/excalidraw/components/dropdownMenu/DropdownMenuContent.d.ts +2 -1
  72. package/dist/types/excalidraw/components/icons.d.ts +5 -0
  73. package/dist/types/excalidraw/components/live-collaboration/LiveCollaborationTrigger.d.ts +13 -1
  74. package/dist/types/excalidraw/components/main-menu/MainMenu.d.ts +0 -3
  75. package/dist/types/excalidraw/components/shapes.d.ts +129 -1
  76. package/dist/types/excalidraw/data/blob.d.ts +3 -7
  77. package/dist/types/excalidraw/data/reconcile.d.ts +1 -0
  78. package/dist/types/excalidraw/data/restore.d.ts +6 -1
  79. package/dist/types/excalidraw/data/types.d.ts +4 -1
  80. package/dist/types/excalidraw/hooks/useLibraryItemSvg.d.ts +1 -1
  81. package/dist/types/excalidraw/hooks/useTextEditorFocus.d.ts +14 -0
  82. package/dist/types/excalidraw/index.d.ts +3 -4
  83. package/dist/types/excalidraw/renderer/interactiveScene.d.ts +1 -1
  84. package/dist/types/excalidraw/scene/types.d.ts +3 -3
  85. package/dist/types/excalidraw/shortcut.d.ts +1 -0
  86. package/dist/types/excalidraw/types.d.ts +23 -17
  87. package/dist/types/math/src/segment.d.ts +1 -0
  88. package/package.json +1 -1
@@ -10,6 +10,7 @@ type Props = {
10
10
  offsetTop?: number;
11
11
  viewportWidth?: number;
12
12
  viewportHeight?: number;
13
+ className?: string;
13
14
  };
14
- export declare const Popover: ({ children, left, top, onCloseRequest, fitInViewport, offsetLeft, offsetTop, viewportWidth, viewportHeight, }: Props) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const Popover: ({ children, left, top, onCloseRequest, fitInViewport, offsetLeft, offsetTop, viewportWidth, viewportHeight, className, }: Props) => import("react/jsx-runtime").JSX.Element;
15
16
  export {};
@@ -10,6 +10,7 @@ interface PropertiesPopoverProps {
10
10
  onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
11
11
  onFocusOutside?: Popover.PopoverContentProps["onFocusOutside"];
12
12
  onPointerDownOutside?: Popover.PopoverContentProps["onPointerDownOutside"];
13
+ preventAutoFocusOnTouch?: boolean;
13
14
  }
14
15
  export declare const PropertiesPopover: React.ForwardRefExoticComponent<PropertiesPopoverProps & React.RefAttributes<HTMLDivElement>>;
15
16
  export {};
@@ -1,5 +1,4 @@
1
- import type { ReactNode } from "react";
2
- import type { JSX } from "react";
1
+ import type { JSX, ReactNode } from "react";
3
2
  export declare const TTDDialogTrigger: {
4
3
  ({ children, icon, }: {
5
4
  children?: ReactNode;
@@ -12,6 +12,7 @@ type TextFieldProps = {
12
12
  className?: string;
13
13
  placeholder?: string;
14
14
  isRedacted?: boolean;
15
+ type?: "text" | "search";
15
16
  } & ({
16
17
  value: string;
17
18
  } | {
@@ -0,0 +1,25 @@
1
+ import React from "react";
2
+ import "./ToolPopover.scss";
3
+ import type { AppClassProperties } from "../types";
4
+ type ToolOption = {
5
+ type: string;
6
+ icon: React.ReactNode;
7
+ title?: string;
8
+ };
9
+ type ToolPopoverProps = {
10
+ app: AppClassProperties;
11
+ options: readonly ToolOption[];
12
+ activeTool: {
13
+ type: string;
14
+ };
15
+ defaultOption: string;
16
+ className?: string;
17
+ namePrefix: string;
18
+ title: string;
19
+ "data-testid": string;
20
+ onToolChange: (type: string) => void;
21
+ displayedOption: ToolOption;
22
+ fillable?: boolean;
23
+ };
24
+ export declare const ToolPopover: ({ app, options, activeTool, defaultOption, className, namePrefix, title, "data-testid": dataTestId, onToolChange, displayedOption, fillable, }: ToolPopoverProps) => import("react/jsx-runtime").JSX.Element;
25
+ export {};
@@ -1,7 +1,8 @@
1
1
  import React from "react";
2
+ import { type EditorInterface } from "@excalidraw/common";
2
3
  import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "@excalidraw/element/types";
3
4
  import type { RenderableElementsMap, RenderInteractiveSceneCallback } from "../../scene/types";
4
- import type { Device, InteractiveCanvasAppState } from "../../types";
5
+ import type { InteractiveCanvasAppState } from "../../types";
5
6
  import type { DOMAttributes } from "react";
6
7
  type InteractiveCanvasProps = {
7
8
  containerRef: React.RefObject<HTMLDivElement | null>;
@@ -15,7 +16,7 @@ type InteractiveCanvasProps = {
15
16
  scale: number;
16
17
  appState: InteractiveCanvasAppState;
17
18
  renderScrollbars: boolean;
18
- device: Device;
19
+ editorInterface: EditorInterface;
19
20
  renderInteractiveSceneCallback: (data: RenderInteractiveSceneCallback) => void;
20
21
  handleCanvasRef: (canvas: HTMLCanvasElement | null) => void;
21
22
  onContextMenu: Exclude<DOMAttributes<HTMLCanvasElement | HTMLDivElement>["onContextMenu"], undefined>;
@@ -1,9 +1,10 @@
1
1
  import React from "react";
2
2
  import "./DropdownMenu.scss";
3
3
  declare const DropdownMenu: {
4
- ({ children, open, }: {
4
+ ({ children, open, placement, }: {
5
5
  children?: React.ReactNode;
6
6
  open: boolean;
7
+ placement?: "top" | "bottom" | undefined;
7
8
  }): import("react/jsx-runtime").JSX.Element;
8
9
  Trigger: {
9
10
  ({ className, children, onToggle, title, ...rest }: {
@@ -15,12 +16,13 @@ declare const DropdownMenu: {
15
16
  displayName: string;
16
17
  };
17
18
  Content: {
18
- ({ children, onClickOutside, className, onSelect, style, }: {
19
+ ({ children, onClickOutside, className, onSelect, style, placement, }: {
19
20
  children?: React.ReactNode;
20
21
  onClickOutside?: (() => void) | undefined;
21
22
  className?: string | undefined;
22
23
  onSelect?: ((event: Event) => void) | undefined;
23
24
  style?: React.CSSProperties | undefined;
25
+ placement?: "top" | "bottom" | undefined;
24
26
  }): import("react/jsx-runtime").JSX.Element;
25
27
  displayName: string;
26
28
  };
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  declare const MenuContent: {
3
- ({ children, onClickOutside, className, onSelect, style, }: {
3
+ ({ children, onClickOutside, className, onSelect, style, placement, }: {
4
4
  children?: React.ReactNode;
5
5
  onClickOutside?: (() => void) | undefined;
6
6
  className?: string | undefined;
@@ -9,6 +9,7 @@ declare const MenuContent: {
9
9
  */
10
10
  onSelect?: ((event: Event) => void) | undefined;
11
11
  style?: React.CSSProperties | undefined;
12
+ placement?: "top" | "bottom" | undefined;
12
13
  }): import("react/jsx-runtime").JSX.Element;
13
14
  displayName: string;
14
15
  };
@@ -11,6 +11,7 @@ export declare const PlusPromoIcon: import("react/jsx-runtime").JSX.Element;
11
11
  export declare const LibraryIcon: import("react/jsx-runtime").JSX.Element;
12
12
  export declare const PlusIcon: import("react/jsx-runtime").JSX.Element;
13
13
  export declare const DotsIcon: import("react/jsx-runtime").JSX.Element;
14
+ export declare const DotsHorizontalIcon: import("react/jsx-runtime").JSX.Element;
14
15
  export declare const PinIcon: import("react/jsx-runtime").JSX.Element;
15
16
  export declare const polygonIcon: import("react/jsx-runtime").JSX.Element;
16
17
  export declare const UnlockedIcon: import("react/jsx-runtime").JSX.Element;
@@ -30,6 +31,7 @@ export declare const LineIcon: import("react/jsx-runtime").JSX.Element;
30
31
  export declare const PenModeIcon: import("react/jsx-runtime").JSX.Element;
31
32
  export declare const FreedrawIcon: import("react/jsx-runtime").JSX.Element;
32
33
  export declare const TextIcon: import("react/jsx-runtime").JSX.Element;
34
+ export declare const TextSizeIcon: import("react/jsx-runtime").JSX.Element;
33
35
  export declare const ImageIcon: import("react/jsx-runtime").JSX.Element;
34
36
  export declare const EraserIcon: import("react/jsx-runtime").JSX.Element;
35
37
  export declare const ZoomInIcon: import("react/jsx-runtime").JSX.Element;
@@ -222,4 +224,7 @@ export declare const collapseUpIcon: import("react/jsx-runtime").JSX.Element;
222
224
  export declare const upIcon: import("react/jsx-runtime").JSX.Element;
223
225
  export declare const cropIcon: import("react/jsx-runtime").JSX.Element;
224
226
  export declare const elementLinkIcon: import("react/jsx-runtime").JSX.Element;
227
+ export declare const resizeIcon: import("react/jsx-runtime").JSX.Element;
228
+ export declare const adjustmentsIcon: import("react/jsx-runtime").JSX.Element;
229
+ export declare const strokeIcon: import("react/jsx-runtime").JSX.Element;
225
230
  export {};
@@ -1,9 +1,21 @@
1
1
  /// <reference types="react" />
2
+ import { type EditorInterface } from "@excalidraw/common";
2
3
  import "./LiveCollaborationTrigger.scss";
3
4
  declare const LiveCollaborationTrigger: {
4
- ({ isCollaborating, onSelect, ...rest }: {
5
+ ({ isCollaborating, onSelect, editorInterface, ...rest }: {
5
6
  isCollaborating: boolean;
6
7
  onSelect: () => void;
8
+ editorInterface?: Readonly<{
9
+ formFactor: "phone" | "tablet" | "desktop";
10
+ desktopUIMode: "compact" | "full";
11
+ userAgent: Readonly<{
12
+ isMobileDevice: boolean;
13
+ platform: "ios" | "android" | "other" | "unknown";
14
+ }>;
15
+ isTouchScreen: boolean;
16
+ canFitSidebar: boolean;
17
+ isLandscape: boolean;
18
+ }> | undefined;
7
19
  } & import("react").ButtonHTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
8
20
  displayName: string;
9
21
  };
@@ -25,9 +25,6 @@ declare const MainMenu: React.FC<{
25
25
  order?: number | undefined;
26
26
  onSelect?: ((event: Event) => void) | undefined;
27
27
  children: React.ReactNode;
28
- /**
29
- * Called when any menu item is selected (clicked on).
30
- */
31
28
  shortcut?: string | undefined;
32
29
  hovered?: boolean | undefined;
33
30
  selected?: boolean | undefined;
@@ -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" | "ellipse" | "rectangle" | "diamond" | "image" | "selection" | "arrow" | "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) => "text" | "line" | "ellipse" | "rectangle" | "diamond" | "image" | "selection" | "arrow" | "freedraw" | "lasso" | "eraser" | null;
@@ -2,7 +2,7 @@ import { IMAGE_MIME_TYPES, MIME_TYPES } from "@excalidraw/common";
2
2
  import type { ValueOf } from "@excalidraw/common/utility-types";
3
3
  import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
4
4
  import type { AppState, DataURL, LibraryItem } from "../types";
5
- import type { FileSystemHandle } from "./filesystem";
5
+ import type { FileSystemHandle } from "browser-fs-access";
6
6
  import type { ImportedLibraryData } from "./types";
7
7
  export declare const getMimeType: (blob: Blob | string) => string;
8
8
  export declare const getFileHandleType: (handle: FileSystemHandle | null) => string | null;
@@ -40,12 +40,8 @@ export declare const SVGStringToFile: (SVGString: string, filename?: string) =>
40
40
  type: typeof MIME_TYPES.svg;
41
41
  };
42
42
  export declare const ImageURLToFile: (imageUrl: string, filename?: string) => Promise<File | undefined>;
43
- export declare const getFileFromEvent: (event: React.DragEvent<HTMLDivElement>) => Promise<{
44
- file: File | null;
45
- fileHandle: FileSystemHandle | null;
46
- }>;
47
- export declare const getFileHandle: (event: React.DragEvent<HTMLDivElement>) => Promise<FileSystemHandle | null>;
48
- export declare const createFile: (blob: File | Blob | ArrayBuffer, mimeType: ValueOf<typeof MIME_TYPES>, name: string | undefined) => File;
43
+ export declare const getFileHandle: (event: DragEvent | React.DragEvent | DataTransferItem) => Promise<FileSystemHandle | null>;
44
+ export declare const createFile: (blob: File | Blob | ArrayBuffer, mimeType: string, name: string | undefined) => File;
49
45
  /** attempts to detect correct mimeType if none is set, or if an image
50
46
  * has an incorrect extension.
51
47
  * Note: doesn't handle missing .excalidraw/.excalidrawlib extension */
@@ -3,4 +3,5 @@ import type { MakeBrand } from "@excalidraw/common/utility-types";
3
3
  import type { AppState } from "../types";
4
4
  export type ReconciledExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"ReconciledElement">;
5
5
  export type RemoteExcalidrawElement = OrderedExcalidrawElement & MakeBrand<"RemoteExcalidrawElement">;
6
+ export declare const shouldDiscardRemoteElement: (localAppState: AppState, local: OrderedExcalidrawElement | undefined, remote: RemoteExcalidrawElement) => boolean;
6
7
  export declare const reconcileElements: (localElements: readonly OrderedExcalidrawElement[], remoteElements: readonly RemoteExcalidrawElement[], localAppState: AppState) => ReconciledExcalidrawElement[];
@@ -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
+ }) => ExcalidrawTextElement | import("@excalidraw/element/types").ExcalidrawRectangleElement | import("@excalidraw/element/types").ExcalidrawDiamondElement | import("@excalidraw/element/types").ExcalidrawFrameElement | import("@excalidraw/element/types").ExcalidrawMagicFrameElement | import("@excalidraw/element/types").ExcalidrawEmbeddableElement | import("@excalidraw/element/types").ExcalidrawImageElement | import("@excalidraw/element/types").ExcalidrawIframeElement | import("@excalidraw/element/types").ExcalidrawEllipseElement | ExcalidrawLinearElement | ExcalidrawArrowElement | import("@excalidraw/element/types").ExcalidrawFreeDrawElement | 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 {};
@@ -1,7 +1,7 @@
1
1
  import type { VERSIONS } from "@excalidraw/common";
2
2
  import type { ExcalidrawElement } from "@excalidraw/element/types";
3
3
  import type { cleanAppStateForExport } from "../appState";
4
- import type { AppState, BinaryFiles, LibraryItems, LibraryItems_anyVersion } from "../types";
4
+ import type { AppState, BinaryFiles, LibraryItem, LibraryItems, LibraryItems_anyVersion } from "../types";
5
5
  export interface ExportedDataState {
6
6
  type: string;
7
7
  version: number;
@@ -43,3 +43,6 @@ export interface ImportedLibraryData extends Partial<ExportedLibraryData> {
43
43
  /** @deprecated v1 */
44
44
  library?: LibraryItems;
45
45
  }
46
+ export type ExcalidrawLibraryIds = {
47
+ itemIds: LibraryItem["id"][];
48
+ };
@@ -3,7 +3,7 @@ export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
3
3
  export declare const libraryItemSvgsCache: import("jotai/vanilla/atom").PrimitiveAtom<SvgCache> & {
4
4
  init: SvgCache;
5
5
  };
6
- export declare const useLibraryItemSvg: (id: LibraryItem["id"] | null, elements: LibraryItem["elements"] | undefined, svgCache: SvgCache) => SVGSVGElement | undefined;
6
+ export declare const useLibraryItemSvg: (id: LibraryItem["id"] | null, elements: LibraryItem["elements"] | undefined, svgCache: SvgCache, ref: React.RefObject<HTMLDivElement | null>) => SVGSVGElement | undefined;
7
7
  export declare const useLibraryCache: () => {
8
8
  clearLibraryCache: () => void;
9
9
  deleteItemsFromLibraryCache: (items: LibraryItem["id"][]) => void;
@@ -0,0 +1,14 @@
1
+ export type CaretPosition = {
2
+ start: number;
3
+ end: number;
4
+ };
5
+ export declare const saveCaretPosition: () => CaretPosition | null;
6
+ export declare const restoreCaretPosition: (position: CaretPosition | null) => void;
7
+ export declare const withCaretPositionPreservation: (callback: () => void, isCompactMode: boolean, isEditingText: boolean, onPreventClose?: () => void) => void;
8
+ export declare const useTextEditorFocus: () => {
9
+ saveCaretPosition: () => void;
10
+ restoreCaretPosition: () => void;
11
+ clearSavedPosition: () => void;
12
+ hasSavedPosition: boolean;
13
+ };
14
+ export declare const temporarilyDisableTextEditorBlur: (duration?: number) => void;
@@ -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";
@@ -20,17 +20,16 @@ export { loadFromBlob, loadSceneOrLibraryFromBlob, loadLibraryFromBlob, } from "
20
20
  export { getFreeDrawSvgPath } from "@excalidraw/element";
21
21
  export { mergeLibraryItems, getLibraryItemsHash } from "./data/library";
22
22
  export { isLinearElement } from "@excalidraw/element";
23
- export { FONT_FAMILY, THEME, MIME_TYPES, ROUNDNESS, DEFAULT_LASER_COLOR, UserIdleState, normalizeLink, } from "@excalidraw/common";
23
+ export { FONT_FAMILY, THEME, MIME_TYPES, ROUNDNESS, DEFAULT_LASER_COLOR, UserIdleState, normalizeLink, sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, getFormFactor, } from "@excalidraw/common";
24
24
  export { mutateElement, newElementWith, bumpVersion, } from "@excalidraw/element";
25
25
  export { CaptureUpdateAction } from "@excalidraw/element";
26
26
  export { parseLibraryTokensFromUrl, useHandleLibrary } from "./data/library";
27
- export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "@excalidraw/common";
28
27
  export { Sidebar } from "./components/Sidebar/Sidebar";
29
28
  export { Button } from "./components/Button";
30
29
  export { Footer };
31
30
  export { MainMenu };
32
31
  export { Ellipsify } from "./components/Ellipsify";
33
- export { useDevice } from "./components/App";
32
+ export { useEditorInterface, useStylesPanelMode } from "./components/App";
34
33
  export { WelcomeScreen };
35
34
  export { LiveCollaborationTrigger };
36
35
  export { Stats } from "./components/Stats";
@@ -9,7 +9,7 @@ export declare const renderInteractiveSceneThrottled: {
9
9
  * Interactive scene is the ui-canvas where we render bounding boxes, selections
10
10
  * and other ui stuff.
11
11
  */
12
- export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, device, }: InteractiveSceneRenderConfig) => {
12
+ export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, editorInterface, }: InteractiveSceneRenderConfig) => {
13
13
  atLeastOneVisibleElement: boolean;
14
14
  elementsMap: RenderableElementsMap;
15
15
  scrollBars?: undefined;
@@ -1,7 +1,7 @@
1
- import type { UserIdleState } from "@excalidraw/common";
1
+ import type { UserIdleState, EditorInterface } from "@excalidraw/common";
2
2
  import type { ExcalidrawElement, NonDeletedElementsMap, NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "@excalidraw/element/types";
3
3
  import type { MakeBrand } from "@excalidraw/common/utility-types";
4
- import type { AppClassProperties, AppState, EmbedsValidationStatus, ElementsPendingErasure, InteractiveCanvasAppState, StaticCanvasAppState, SocketId, Device, PendingExcalidrawElements } from "../types";
4
+ import type { AppClassProperties, AppState, EmbedsValidationStatus, ElementsPendingErasure, InteractiveCanvasAppState, StaticCanvasAppState, SocketId, PendingExcalidrawElements } from "../types";
5
5
  import type { RoughCanvas } from "roughjs/bin/canvas";
6
6
  import type { Drawable } from "roughjs/bin/core";
7
7
  export type RenderableElementsMap = NonDeletedElementsMap & MakeBrand<"RenderableElementsMap">;
@@ -69,7 +69,7 @@ export type InteractiveSceneRenderConfig = {
69
69
  scale: number;
70
70
  appState: InteractiveCanvasAppState;
71
71
  renderConfig: InteractiveCanvasRenderConfig;
72
- device: Device;
72
+ editorInterface: EditorInterface;
73
73
  callback: (data: RenderInteractiveSceneCallback) => void;
74
74
  };
75
75
  export type NewElementSceneRenderConfig = {
@@ -0,0 +1 @@
1
+ export declare const getShortcutKey: (shortcut: string) => string;
@@ -1,4 +1,4 @@
1
- import type { IMAGE_MIME_TYPES, UserIdleState, throttleRAF, MIME_TYPES } from "@excalidraw/common";
1
+ import type { IMAGE_MIME_TYPES, UserIdleState, throttleRAF, MIME_TYPES, EditorInterface } from "@excalidraw/common";
2
2
  import type { SuggestedBinding } from "@excalidraw/element";
3
3
  import type { LinearElementEditor } from "@excalidraw/element";
4
4
  import type { MaybeTransformHandleType } from "@excalidraw/element";
@@ -155,8 +155,10 @@ export type ObservedElementsAppState = {
155
155
  editingGroupId: AppState["editingGroupId"];
156
156
  selectedElementIds: AppState["selectedElementIds"];
157
157
  selectedGroupIds: AppState["selectedGroupIds"];
158
- selectedLinearElementId: LinearElementEditor["elementId"] | null;
159
- selectedLinearElementIsEditing: boolean | null;
158
+ selectedLinearElement: {
159
+ elementId: LinearElementEditor["elementId"];
160
+ isEditing: boolean;
161
+ } | null;
160
162
  croppingElementId: AppState["croppingElementId"];
161
163
  lockedMultiSelections: AppState["lockedMultiSelections"];
162
164
  activeLockedId: AppState["activeLockedId"];
@@ -219,6 +221,10 @@ export interface AppState {
219
221
  locked: boolean;
220
222
  fromSelection: boolean;
221
223
  } & ActiveTool;
224
+ preferredSelectionTool: {
225
+ type: "selection" | "lasso";
226
+ initialized: boolean;
227
+ };
222
228
  penMode: boolean;
223
229
  penDetected: boolean;
224
230
  exportBackground: boolean;
@@ -249,8 +255,8 @@ export interface AppState {
249
255
  isResizing: boolean;
250
256
  isRotating: boolean;
251
257
  zoom: Zoom;
252
- openMenu: "canvas" | "shape" | null;
253
- openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | null;
258
+ openMenu: "canvas" | null;
259
+ openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
254
260
  openSidebar: {
255
261
  name: SidebarName;
256
262
  tab?: SidebarTabName;
@@ -439,6 +445,7 @@ export interface ExcalidrawProps {
439
445
  onDuplicate?: (nextElements: readonly ExcalidrawElement[],
440
446
  /** excludes the duplicated elements */
441
447
  prevElements: readonly ExcalidrawElement[]) => ExcalidrawElement[] | void;
448
+ renderTopLeftUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
442
449
  renderTopRightUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
443
450
  langCode?: Language["code"];
444
451
  viewModeEnabled?: boolean;
@@ -496,6 +503,12 @@ export type UIOptions = Partial<{
496
503
  tools: {
497
504
  image: boolean;
498
505
  };
506
+ /**
507
+ * Optionally control the editor form factor and desktop UI mode from the host app.
508
+ * If not provided, we will take care of it internally.
509
+ */
510
+ formFactor?: EditorInterface["formFactor"];
511
+ desktopUIMode?: EditorInterface["desktopUIMode"];
499
512
  /** @deprecated does nothing. Will be removed in 0.15 */
500
513
  welcomeScreen?: boolean;
501
514
  }>;
@@ -526,7 +539,7 @@ export type AppClassProperties = {
526
539
  mimeType: ValueOf<typeof IMAGE_MIME_TYPES>;
527
540
  }>;
528
541
  files: BinaryFiles;
529
- device: App["device"];
542
+ editorInterface: App["editorInterface"];
530
543
  scene: App["scene"];
531
544
  syncActionResult: App["syncActionResult"];
532
545
  fonts: App["fonts"];
@@ -555,6 +568,7 @@ export type AppClassProperties = {
555
568
  excalidrawContainerValue: App["excalidrawContainerValue"];
556
569
  onPointerUpEmitter: App["onPointerUpEmitter"];
557
570
  updateEditorAtom: App["updateEditorAtom"];
571
+ onPointerDownEmitter: App["onPointerDownEmitter"];
558
572
  };
559
573
  export type PointerDownState = Readonly<{
560
574
  origin: Readonly<{
@@ -602,6 +616,7 @@ export type PointerDownState = Readonly<{
602
616
  x: number;
603
617
  y: number;
604
618
  };
619
+ blockDragging: boolean;
605
620
  };
606
621
  eventListeners: {
607
622
  onMove: null | ReturnType<typeof throttleRAF>;
@@ -616,6 +631,7 @@ export type PointerDownState = Readonly<{
616
631
  export type UnsubscribeCallback = () => void;
617
632
  export interface ExcalidrawImperativeAPI {
618
633
  updateScene: InstanceType<typeof App>["updateScene"];
634
+ applyDeltas: InstanceType<typeof App>["applyDeltas"];
619
635
  mutateElement: InstanceType<typeof App>["mutateElement"];
620
636
  updateLibrary: InstanceType<typeof Library>["updateLibrary"];
621
637
  resetScene: InstanceType<typeof App>["resetScene"];
@@ -638,6 +654,7 @@ export interface ExcalidrawImperativeAPI {
638
654
  setCursor: InstanceType<typeof App>["setCursor"];
639
655
  resetCursor: InstanceType<typeof App>["resetCursor"];
640
656
  toggleSidebar: InstanceType<typeof App>["toggleSidebar"];
657
+ getEditorInterface: () => EditorInterface;
641
658
  /**
642
659
  * Disables rendering of frames (including element clipping), but currently
643
660
  * the frames are still interactive in edit mode. As such, this API should be
@@ -651,17 +668,6 @@ export interface ExcalidrawImperativeAPI {
651
668
  onScrollChange: (callback: (scrollX: number, scrollY: number, zoom: Zoom) => void) => UnsubscribeCallback;
652
669
  onUserFollow: (callback: (payload: OnUserFollowedPayload) => void) => UnsubscribeCallback;
653
670
  }
654
- export type Device = Readonly<{
655
- viewport: {
656
- isMobile: boolean;
657
- isLandscape: boolean;
658
- };
659
- editor: {
660
- isMobile: boolean;
661
- canFitSidebar: boolean;
662
- };
663
- isTouchScreen: boolean;
664
- }>;
665
671
  export type FrameNameBounds = {
666
672
  x: number;
667
673
  y: number;
@@ -37,3 +37,4 @@ export declare const distanceToLineSegment: <Point extends GlobalPoint | LocalPo
37
37
  * @returns
38
38
  */
39
39
  export declare function lineSegmentIntersectionPoints<Point extends GlobalPoint | LocalPoint>(l: LineSegment<Point>, s: LineSegment<Point>, threshold?: number): Point | null;
40
+ export declare function lineSegmentsDistance<Point extends GlobalPoint | LocalPoint>(s1: LineSegment<Point>, s2: LineSegment<Point>): number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@excalidraw/common",
3
- "version": "0.18.0-c65b684e9",
3
+ "version": "0.18.0-d1f3982",
4
4
  "type": "module",
5
5
  "types": "./dist/types/common/src/index.d.ts",
6
6
  "main": "./dist/prod/index.js",