@zsviczian/excalidraw 0.15.2-obsidian-4 → 0.15.2-obsidian-5

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 (71) hide show
  1. package/README.md +4 -0
  2. package/dist/excalidraw.development.js +249 -141
  3. package/dist/excalidraw.production.min.js +1 -1
  4. package/dist/excalidraw.production.min.js.LICENSE.txt +2 -0
  5. package/package.json +1 -1
  6. package/types/actions/actionAddToLibrary.d.ts +30 -3
  7. package/types/actions/actionAlign.d.ts +12 -6
  8. package/types/actions/actionBoundText.d.ts +21 -3
  9. package/types/actions/actionCanvas.d.ts +94 -10
  10. package/types/actions/actionClipboard.d.ts +47 -5
  11. package/types/actions/actionDeleteSelected.d.ts +27 -3
  12. package/types/actions/actionDistribute.d.ts +2 -2
  13. package/types/actions/actionElementLock.d.ts +21 -2
  14. package/types/actions/actionExport.d.ts +90 -9
  15. package/types/actions/actionFinalize.d.ts +20 -2
  16. package/types/actions/actionFlip.d.ts +2 -2
  17. package/types/actions/actionFrame.d.ts +475 -0
  18. package/types/actions/actionGroup.d.ts +2 -2
  19. package/types/actions/actionLinearEditor.d.ts +10 -1
  20. package/types/actions/actionMenu.d.ts +30 -3
  21. package/types/actions/actionNavigate.d.ts +1 -1
  22. package/types/actions/actionProperties.d.ts +130 -13
  23. package/types/actions/actionStyles.d.ts +10 -1
  24. package/types/actions/actionToggleGridMode.d.ts +10 -1
  25. package/types/actions/actionToggleStats.d.ts +10 -1
  26. package/types/actions/actionToggleViewMode.d.ts +10 -1
  27. package/types/actions/actionToggleZenMode.d.ts +10 -1
  28. package/types/actions/actionZindex.d.ts +4 -4
  29. package/types/actions/types.d.ts +1 -1
  30. package/types/appState.d.ts +1 -1
  31. package/types/clients.d.ts +1 -5
  32. package/types/components/App.d.ts +17 -2
  33. package/types/components/Avatar.d.ts +0 -1
  34. package/types/components/Dialog.d.ts +2 -1
  35. package/types/components/FilledButton.d.ts +2 -1
  36. package/types/components/OverwriteConfirm/OverwriteConfirm.d.ts +17 -0
  37. package/types/components/OverwriteConfirm/OverwriteConfirmActions.d.ts +17 -0
  38. package/types/components/OverwriteConfirm/OverwriteConfirmState.d.ts +22 -0
  39. package/types/components/ToolButton.d.ts +2 -1
  40. package/types/components/dropdownMenu/DropdownMenu.d.ts +3 -2
  41. package/types/components/dropdownMenu/DropdownMenuTrigger.d.ts +4 -2
  42. package/types/components/icons.d.ts +4 -0
  43. package/types/components/main-menu/MainMenu.d.ts +3 -2
  44. package/types/constants.d.ts +23 -1
  45. package/types/context/tunnels.d.ts +1 -0
  46. package/types/element/Hyperlink.d.ts +21 -6
  47. package/types/element/binding.d.ts +1 -1
  48. package/types/element/bounds.d.ts +31 -6
  49. package/types/element/collision.d.ts +7 -7
  50. package/types/element/dragElements.d.ts +2 -1
  51. package/types/element/iframe.d.ts +173 -0
  52. package/types/element/index.d.ts +3 -2
  53. package/types/element/linearElementEditor.d.ts +11 -2
  54. package/types/element/newElement.d.ts +8 -2
  55. package/types/element/transformHandles.d.ts +8 -1
  56. package/types/element/typeChecks.d.ts +5 -3
  57. package/types/element/types.d.ts +13 -4
  58. package/types/frame.d.ts +40 -0
  59. package/types/groups.d.ts +4 -0
  60. package/types/keys.d.ts +2 -0
  61. package/types/math.d.ts +1 -0
  62. package/types/packages/excalidraw/example/initialData.d.ts +6 -0
  63. package/types/renderer/renderElement.d.ts +3 -2
  64. package/types/renderer/renderScene.d.ts +12 -3
  65. package/types/renderer/roundRect.d.ts +1 -1
  66. package/types/scene/Scene.d.ts +8 -1
  67. package/types/scene/export.d.ts +1 -0
  68. package/types/scene/selection.d.ts +13 -3
  69. package/types/types.d.ts +34 -3
  70. package/types/utils.d.ts +5 -2
  71. package/types/zindex.d.ts +4 -4
@@ -17,6 +17,10 @@ export declare const actionToggleZenMode: {
17
17
  showWelcomeScreen: boolean;
18
18
  isLoading: boolean;
19
19
  errorMessage: import("react").ReactNode;
20
+ activeIFrame: {
21
+ element: import("../element/types").NonDeletedExcalidrawElement;
22
+ state: "active" | "hover";
23
+ } | null;
20
24
  draggingElement: import("../element/types").NonDeletedExcalidrawElement | null;
21
25
  resizingElement: import("../element/types").NonDeletedExcalidrawElement | null;
22
26
  multiElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawLinearElement> | null;
@@ -24,13 +28,17 @@ export declare const actionToggleZenMode: {
24
28
  isBindingEnabled: boolean;
25
29
  startBoundElement: import("../element/types").NonDeleted<import("../element/types").ExcalidrawBindableElement> | null;
26
30
  suggestedBindings: import("../element/binding").SuggestedBinding[];
31
+ frameToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawFrameElement> | null;
32
+ shouldRenderFrames: boolean;
33
+ editingFrame: string | null;
34
+ elementsToHighlight: import("../element/types").NonDeleted<import("../element/types").ExcalidrawElement>[] | null;
27
35
  editingElement: import("../element/types").NonDeletedExcalidrawElement | null;
28
36
  editingLinearElement: import("../element/linearElementEditor").LinearElementEditor | null;
29
37
  activeTool: {
30
38
  lastActiveTool: import("../types").LastActiveTool;
31
39
  locked: boolean;
32
40
  } & ({
33
- type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
41
+ type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "iframe" | "image" | "frame" | "freedraw" | "eraser" | "hand";
34
42
  customType: null;
35
43
  } | {
36
44
  type: "custom";
@@ -81,6 +89,7 @@ export declare const actionToggleZenMode: {
81
89
  previousSelectedElementIds: {
82
90
  [id: string]: boolean;
83
91
  };
92
+ selectedElementsAreBeingDragged: boolean;
84
93
  shouldCacheIgnoreZoom: boolean;
85
94
  toast: {
86
95
  message: string;
@@ -5,7 +5,7 @@ export declare const actionSendBackward: {
5
5
  category: "element";
6
6
  };
7
7
  perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
8
- elements: (import("../element/types").ExcalidrawLinearElement | import("../element/types").ExcalidrawSelectionElement | import("../element/types").ExcalidrawRectangleElement | import("../element/types").ExcalidrawDiamondElement | import("../element/types").ExcalidrawEllipseElement | import("../element/types").ExcalidrawImageElement | import("../element/types").ExcalidrawTextElement | import("../element/types").ExcalidrawFreeDrawElement)[];
8
+ elements: import("../element/types").ExcalidrawElement[];
9
9
  appState: Readonly<import("../types").AppState>;
10
10
  commitToHistory: true;
11
11
  };
@@ -22,7 +22,7 @@ export declare const actionBringForward: {
22
22
  category: "element";
23
23
  };
24
24
  perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
25
- elements: (import("../element/types").ExcalidrawLinearElement | import("../element/types").ExcalidrawSelectionElement | import("../element/types").ExcalidrawRectangleElement | import("../element/types").ExcalidrawDiamondElement | import("../element/types").ExcalidrawEllipseElement | import("../element/types").ExcalidrawImageElement | import("../element/types").ExcalidrawTextElement | import("../element/types").ExcalidrawFreeDrawElement)[];
25
+ elements: import("../element/types").ExcalidrawElement[];
26
26
  appState: Readonly<import("../types").AppState>;
27
27
  commitToHistory: true;
28
28
  };
@@ -39,7 +39,7 @@ export declare const actionSendToBack: {
39
39
  category: "element";
40
40
  };
41
41
  perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
42
- elements: readonly import("../element/types").ExcalidrawElement[];
42
+ elements: import("../element/types").ExcalidrawElement[];
43
43
  appState: Readonly<import("../types").AppState>;
44
44
  commitToHistory: true;
45
45
  };
@@ -55,7 +55,7 @@ export declare const actionBringToFront: {
55
55
  category: "element";
56
56
  };
57
57
  perform: (elements: readonly import("../element/types").ExcalidrawElement[], appState: Readonly<import("../types").AppState>) => {
58
- elements: readonly import("../element/types").ExcalidrawElement[];
58
+ elements: import("../element/types").ExcalidrawElement[];
59
59
  appState: Readonly<import("../types").AppState>;
60
60
  commitToHistory: true;
61
61
  };
@@ -15,7 +15,7 @@ export type ActionResult = {
15
15
  type ActionFn = (elements: readonly ExcalidrawElement[], appState: Readonly<AppState>, formData: any, app: AppClassProperties) => ActionResult | Promise<ActionResult>;
16
16
  export type UpdaterFn = (res: ActionResult) => void;
17
17
  export type ActionFilterFn = (action: Action) => void;
18
- export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToSelection" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "wrapTextInContainer";
18
+ export type ActionName = "copy" | "cut" | "paste" | "copyAsPng" | "copyAsSvg" | "copyText" | "sendBackward" | "bringForward" | "sendToBack" | "bringToFront" | "copyStyles" | "selectAll" | "pasteStyles" | "gridMode" | "zenMode" | "stats" | "changeStrokeColor" | "changeBackgroundColor" | "changeFillStyle" | "changeStrokeWidth" | "changeStrokeShape" | "changeSloppiness" | "changeStrokeStyle" | "changeArrowhead" | "changeOpacity" | "changeFontSize" | "toggleCanvasMenu" | "toggleEditMenu" | "undo" | "redo" | "finalize" | "changeProjectName" | "changeExportBackground" | "changeExportEmbedScene" | "changeExportScale" | "saveToActiveFile" | "saveFileToDisk" | "loadScene" | "duplicateSelection" | "deleteSelectedElements" | "changeViewBackgroundColor" | "clearCanvas" | "zoomIn" | "zoomOut" | "resetZoom" | "zoomToFit" | "zoomToSelection" | "changeFontFamily" | "changeTextAlign" | "changeVerticalAlign" | "toggleFullScreen" | "toggleShortcuts" | "group" | "ungroup" | "goToCollaborator" | "addToLibrary" | "changeRoundness" | "alignTop" | "alignBottom" | "alignLeft" | "alignRight" | "alignVerticallyCentered" | "alignHorizontallyCentered" | "distributeHorizontally" | "distributeVertically" | "flipHorizontal" | "flipVertical" | "viewMode" | "exportWithDarkMode" | "toggleTheme" | "increaseFontSize" | "decreaseFontSize" | "unbindText" | "hyperlink" | "bindText" | "unlockAllElements" | "toggleElementLock" | "toggleLinearEditor" | "toggleEraserTool" | "toggleHandTool" | "selectAllElementsInFrame" | "removeAllElementsFromFrame" | "toggleFrameRendering" | "setFrameAsActiveTool" | "setIFrameAsActiveTool" | "createContainerFromText" | "wrapTextInContainer";
19
19
  export type PanelComponentProps = {
20
20
  elements: readonly ExcalidrawElement[];
21
21
  appState: AppState;
@@ -7,7 +7,7 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
7
7
  lastActiveTool: import("./types").LastActiveTool;
8
8
  locked: boolean;
9
9
  } & ({
10
- type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
10
+ type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "iframe" | "image" | "frame" | "freedraw" | "eraser" | "hand";
11
11
  customType: null;
12
12
  } | {
13
13
  type: "custom";
@@ -1,8 +1,4 @@
1
- import { AppState } from "./types";
2
- export declare const getClientColors: (clientId: string, appState: AppState) => {
3
- background: string;
4
- stroke: string;
5
- };
1
+ export declare const getClientColor: (id: string) => string;
6
2
  /**
7
3
  * returns first char, capitalized
8
4
  */
@@ -7,7 +7,7 @@ import { LinearElementEditor } from "../element/linearElementEditor";
7
7
  import { ExcalidrawElement, ExcalidrawLinearElement, NonDeletedExcalidrawElement } from "../element/types";
8
8
  import History from "../history";
9
9
  import Scene from "../scene/Scene";
10
- import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, SidebarName, SidebarTabName } from "../types";
10
+ import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName } from "../types";
11
11
  import { FileSystemHandle } from "../data/filesystem";
12
12
  import { ImportedDataState } from "../data/types";
13
13
  export declare let showFourthFont: boolean;
@@ -53,15 +53,25 @@ declare class App extends React.Component<AppProps, AppState> {
53
53
  files: BinaryFiles;
54
54
  imageCache: AppClassProperties["imageCache"];
55
55
  hitLinkElement?: NonDeletedExcalidrawElement;
56
- lastPointerDown: React.PointerEvent<HTMLCanvasElement> | null;
56
+ lastPointerDown: React.PointerEvent<HTMLElement> | null;
57
57
  lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null;
58
58
  lastViewportPosition: {
59
59
  x: number;
60
60
  y: number;
61
61
  };
62
+ private iFrameRefs;
62
63
  allowMobileMode: boolean;
63
64
  constructor(props: AppProps);
64
65
  private renderCanvas;
66
+ private onWindowMessage;
67
+ private updateIFrameRef;
68
+ private getIFrameElementById;
69
+ private handleIFrameCenterClick;
70
+ private isIFrameCenter;
71
+ private renderIFrames;
72
+ private getFrameNameDOMId;
73
+ frameNameBoundsCache: FrameNameBoundsCache;
74
+ private renderFrameNames;
65
75
  render(): JSX.Element;
66
76
  focusContainer: AppClassProperties["focusContainer"];
67
77
  getSceneElementsIncludingDeleted: () => readonly ExcalidrawElement[];
@@ -102,6 +112,7 @@ declare class App extends React.Component<AppProps, AppState> {
102
112
  setAppState: React.Component<any, AppState>["setState"];
103
113
  removePointer: (event: React.PointerEvent<HTMLElement> | PointerEvent) => void;
104
114
  toggleLock: (source?: "keyboard" | "ui") => void;
115
+ toggleFrameRendering: () => void;
105
116
  togglePenMode: () => void;
106
117
  onHandToolToggle: () => void;
107
118
  /**
@@ -176,6 +187,7 @@ declare class App extends React.Component<AppProps, AppState> {
176
187
  private handleCanvasDoubleClick;
177
188
  private getElementLinkAtPosition;
178
189
  private redirectToLink;
190
+ private getTopLayerFrameAtSceneCoords;
179
191
  private handleCanvasPointerMove;
180
192
  private handleEraser;
181
193
  private handleTouchMove;
@@ -198,9 +210,12 @@ declare class App extends React.Component<AppProps, AppState> {
198
210
  private isHittingCommonBoundingBoxOfSelectedElements;
199
211
  private handleTextOnPointerDown;
200
212
  private handleFreeDrawElementOnPointerDown;
213
+ private insertIFrameElement;
201
214
  private createImageElement;
202
215
  private handleLinearElementOnPointerDown;
216
+ private getCurrentItemRoundness;
203
217
  private createGenericElementOnPointerDown;
218
+ private createFrameElementOnPointerDown;
204
219
  private onKeyDownFromPointerDownHandler;
205
220
  private onKeyUpFromPointerDownHandler;
206
221
  private onPointerMoveFromPointerDownHandler;
@@ -3,7 +3,6 @@ import React from "react";
3
3
  type AvatarProps = {
4
4
  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
5
5
  color: string;
6
- border: string;
7
6
  name: string;
8
7
  src?: string;
9
8
  };
@@ -1,9 +1,10 @@
1
1
  import React from "react";
2
2
  import "./Dialog.scss";
3
+ export type DialogSize = number | "small" | "regular" | "wide" | undefined;
3
4
  export interface DialogProps {
4
5
  children: React.ReactNode;
5
6
  className?: string;
6
- size?: "small" | "regular" | "wide";
7
+ size?: DialogSize;
7
8
  onCloseRequest(): void;
8
9
  title: React.ReactNode | false;
9
10
  autofocus?: boolean;
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import "./FilledButton.scss";
3
3
  export type ButtonVariant = "filled" | "outlined" | "icon";
4
- export type ButtonColor = "primary" | "danger";
4
+ export type ButtonColor = "primary" | "danger" | "warning" | "muted";
5
5
  export type ButtonSize = "medium" | "large";
6
6
  export type FilledButtonProps = {
7
7
  label: string;
@@ -11,6 +11,7 @@ export type FilledButtonProps = {
11
11
  color?: ButtonColor;
12
12
  size?: ButtonSize;
13
13
  className?: string;
14
+ fullWidth?: boolean;
14
15
  startIcon?: React.ReactNode;
15
16
  };
16
17
  export declare const FilledButton: React.ForwardRefExoticComponent<FilledButtonProps & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1,17 @@
1
+ import React from "react";
2
+ import "./OverwriteConfirm.scss";
3
+ export type OverwriteConfirmDialogProps = {
4
+ children: React.ReactNode;
5
+ };
6
+ declare const OverwriteConfirmDialog: React.FC<OverwriteConfirmDialogProps & {
7
+ __fallback?: boolean | undefined;
8
+ }> & {
9
+ Actions: (({ children }: {
10
+ children: React.ReactNode;
11
+ }) => JSX.Element) & {
12
+ ExportToImage: () => JSX.Element;
13
+ SaveToDisk: () => JSX.Element;
14
+ };
15
+ Action: ({ title, children, actionLabel, onClick, }: import("./OverwriteConfirmActions").ActionProps) => JSX.Element;
16
+ };
17
+ export { OverwriteConfirmDialog };
@@ -0,0 +1,17 @@
1
+ import React from "react";
2
+ export type ActionProps = {
3
+ title: string;
4
+ children: React.ReactNode;
5
+ actionLabel: string;
6
+ onClick: () => void;
7
+ };
8
+ export declare const Action: ({ title, children, actionLabel, onClick, }: ActionProps) => JSX.Element;
9
+ export declare const ExportToImage: () => JSX.Element;
10
+ export declare const SaveToDisk: () => JSX.Element;
11
+ declare const Actions: (({ children }: {
12
+ children: React.ReactNode;
13
+ }) => JSX.Element) & {
14
+ ExportToImage: () => JSX.Element;
15
+ SaveToDisk: () => JSX.Element;
16
+ };
17
+ export { Actions };
@@ -0,0 +1,22 @@
1
+ import React from "react";
2
+ export type OverwriteConfirmState = {
3
+ active: true;
4
+ title: string;
5
+ description: React.ReactNode;
6
+ actionLabel: string;
7
+ color: "danger" | "warning";
8
+ onClose: () => void;
9
+ onConfirm: () => void;
10
+ onReject: () => void;
11
+ } | {
12
+ active: false;
13
+ };
14
+ export declare const overwriteConfirmStateAtom: import("jotai").PrimitiveAtom<OverwriteConfirmState> & {
15
+ init: OverwriteConfirmState;
16
+ };
17
+ export declare function openConfirmModal({ title, description, actionLabel, color, }: {
18
+ title: string;
19
+ description: React.ReactNode;
20
+ actionLabel: string;
21
+ color: "danger" | "warning";
22
+ }): Promise<boolean>;
@@ -1,5 +1,5 @@
1
1
  import "./ToolIcon.scss";
2
- import React from "react";
2
+ import React, { CSSProperties } from "react";
3
3
  import { PointerType } from "../element/types";
4
4
  export type ToolButtonSize = "small" | "medium";
5
5
  type ToolButtonBaseProps = {
@@ -18,6 +18,7 @@ type ToolButtonBaseProps = {
18
18
  visible?: boolean;
19
19
  selected?: boolean;
20
20
  className?: string;
21
+ style?: CSSProperties;
21
22
  isLoading?: boolean;
22
23
  };
23
24
  type ToolButtonProps = (ToolButtonBaseProps & {
@@ -6,11 +6,12 @@ declare const DropdownMenu: {
6
6
  open: boolean;
7
7
  }): JSX.Element;
8
8
  Trigger: {
9
- ({ className, children, onToggle, }: {
9
+ ({ className, children, onToggle, title, ...rest }: {
10
10
  className?: string | undefined;
11
11
  children: React.ReactNode;
12
12
  onToggle: () => void;
13
- }): JSX.Element;
13
+ title?: string | undefined;
14
+ } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
14
15
  displayName: string;
15
16
  };
16
17
  Content: {
@@ -1,9 +1,11 @@
1
+ /// <reference types="react" />
1
2
  declare const MenuTrigger: {
2
- ({ className, children, onToggle, }: {
3
+ ({ className, children, onToggle, title, ...rest }: {
3
4
  className?: string | undefined;
4
5
  children: React.ReactNode;
5
6
  onToggle: () => void;
6
- }): JSX.Element;
7
+ title?: string | undefined;
8
+ } & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
7
9
  displayName: string;
8
10
  };
9
11
  export default MenuTrigger;
@@ -31,6 +31,7 @@ export declare const EraserIcon: JSX.Element;
31
31
  export declare const ZoomInIcon: JSX.Element;
32
32
  export declare const ZoomOutIcon: JSX.Element;
33
33
  export declare const TrashIcon: JSX.Element;
34
+ export declare const EmbedIcon: JSX.Element;
34
35
  export declare const DuplicateIcon: JSX.Element;
35
36
  export declare const MoonIcon: JSX.Element;
36
37
  export declare const SunIcon: JSX.Element;
@@ -146,5 +147,8 @@ export declare const helpIcon: JSX.Element;
146
147
  export declare const playerPlayIcon: JSX.Element;
147
148
  export declare const playerStopFilledIcon: JSX.Element;
148
149
  export declare const tablerCheckIcon: JSX.Element;
150
+ export declare const alertTriangleIcon: JSX.Element;
149
151
  export declare const eyeDropperIcon: JSX.Element;
152
+ export declare const extraToolsIcon: JSX.Element;
153
+ export declare const frameToolIcon: JSX.Element;
150
154
  export {};
@@ -10,11 +10,12 @@ declare const MainMenu: React.FC<{
10
10
  __fallback?: boolean | undefined;
11
11
  }> & {
12
12
  Trigger: {
13
- ({ className, children, onToggle, }: {
13
+ ({ className, children, onToggle, title, ...rest }: {
14
14
  className?: string | undefined;
15
15
  children: React.ReactNode;
16
16
  onToggle: () => void;
17
- }): JSX.Element;
17
+ title?: string | undefined;
18
+ } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
18
19
  displayName: string;
19
20
  };
20
21
  Item: {
@@ -57,7 +57,16 @@ export declare enum EVENT {
57
57
  VISIBILITY_CHANGE = "visibilitychange",
58
58
  SCROLL = "scroll",
59
59
  EXCALIDRAW_LINK = "excalidraw-link",
60
- MENU_ITEM_SELECT = "menu.itemSelect"
60
+ MENU_ITEM_SELECT = "menu.itemSelect",
61
+ MESSAGE = "message"
62
+ }
63
+ export declare enum YTPLAYER {
64
+ UNSTARTED = -1,
65
+ ENDED = 0,
66
+ PLAYING = 1,
67
+ PAUSED = 2,
68
+ BUFFERING = 3,
69
+ CUED = 5
61
70
  }
62
71
  export declare const ENV: {
63
72
  TEST: string;
@@ -78,6 +87,19 @@ export declare const THEME: {
78
87
  LIGHT: string;
79
88
  DARK: string;
80
89
  };
90
+ export declare const FRAME_STYLE: {
91
+ strokeColor: string;
92
+ strokeWidth: number;
93
+ strokeStyle: import("./element/types").StrokeStyle;
94
+ fillStyle: import("./element/types").FillStyle;
95
+ roughness: number;
96
+ roundness: {
97
+ type: import("./element/types").RoundnessType;
98
+ value?: number | undefined;
99
+ } | null;
100
+ backgroundColor: string;
101
+ radius: number;
102
+ };
81
103
  export declare const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
82
104
  export declare const DEFAULT_FONT_SIZE = 20;
83
105
  export declare const DEFAULT_FONT_FAMILY: FontFamilyValues;
@@ -10,6 +10,7 @@ type TunnelsContextValue = {
10
10
  FooterCenterTunnel: Tunnel;
11
11
  DefaultSidebarTriggerTunnel: Tunnel;
12
12
  DefaultSidebarTabTriggersTunnel: Tunnel;
13
+ OverwriteConfirmDialogTunnel: Tunnel;
13
14
  jotaiScope: symbol;
14
15
  };
15
16
  export declare const TunnelsContext: React.Context<TunnelsContextValue>;
@@ -4,13 +4,18 @@ import { NonDeletedExcalidrawElement } from "./types";
4
4
  import { Bounds } from "./bounds";
5
5
  import "./Hyperlink.scss";
6
6
  export declare const EXTERNAL_LINK_IMG: HTMLImageElement;
7
- export declare const Hyperlink: ({ element, setAppState, onLinkOpen, }: {
7
+ export declare const Hyperlink: ({ element, setAppState, onLinkOpen, setToast, }: {
8
8
  element: NonDeletedExcalidrawElement;
9
9
  setAppState: React.Component<any, AppState>["setState"];
10
10
  onLinkOpen: ExcalidrawProps["onLinkOpen"];
11
+ setToast: (toast: {
12
+ message: string;
13
+ closable?: boolean;
14
+ duration?: number;
15
+ } | null) => void;
11
16
  }) => JSX.Element | null;
12
17
  export declare const normalizeLink: (link: string) => string;
13
- export declare const isLocalLink: (link: string | null) => boolean;
18
+ export declare const isLocalLink: (link: string | null | undefined) => boolean;
14
19
  export declare const actionLink: {
15
20
  name: "hyperlink";
16
21
  perform: (elements: readonly import("./types").ExcalidrawElement[], appState: Readonly<AppState>) => false | {
@@ -26,6 +31,10 @@ export declare const actionLink: {
26
31
  showWelcomeScreen: boolean;
27
32
  isLoading: boolean;
28
33
  errorMessage: import("react").ReactNode;
34
+ activeIFrame: {
35
+ element: NonDeletedExcalidrawElement;
36
+ state: "active" | "hover";
37
+ } | null;
29
38
  draggingElement: NonDeletedExcalidrawElement | null;
30
39
  resizingElement: NonDeletedExcalidrawElement | null;
31
40
  multiElement: import("./types").NonDeleted<import("./types").ExcalidrawLinearElement> | null;
@@ -33,13 +42,17 @@ export declare const actionLink: {
33
42
  isBindingEnabled: boolean;
34
43
  startBoundElement: import("./types").NonDeleted<import("./types").ExcalidrawBindableElement> | null;
35
44
  suggestedBindings: import("./binding").SuggestedBinding[];
45
+ frameToHighlight: import("./types").NonDeleted<import("./types").ExcalidrawFrameElement> | null;
46
+ shouldRenderFrames: boolean;
47
+ editingFrame: string | null;
48
+ elementsToHighlight: import("./types").NonDeleted<import("./types").ExcalidrawElement>[] | null;
36
49
  editingElement: NonDeletedExcalidrawElement | null;
37
50
  editingLinearElement: import("./linearElementEditor").LinearElementEditor | null;
38
51
  activeTool: {
39
52
  lastActiveTool: import("../types").LastActiveTool;
40
53
  locked: boolean;
41
54
  } & ({
42
- type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "freedraw" | "eraser" | "hand";
55
+ type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "iframe" | "image" | "frame" | "freedraw" | "eraser" | "hand";
43
56
  customType: null;
44
57
  } | {
45
58
  type: "custom";
@@ -89,6 +102,7 @@ export declare const actionLink: {
89
102
  previousSelectedElementIds: {
90
103
  [id: string]: boolean;
91
104
  };
105
+ selectedElementsAreBeingDragged: boolean;
92
106
  shouldCacheIgnoreZoom: boolean;
93
107
  toast: {
94
108
  message: string;
@@ -150,15 +164,16 @@ export declare const actionLink: {
150
164
  action: string;
151
165
  };
152
166
  keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
153
- contextItemLabel: (elements: readonly import("./types").ExcalidrawElement[], appState: Readonly<AppState>) => "labels.link.edit" | "labels.link.create";
167
+ contextItemLabel: (elements: readonly import("./types").ExcalidrawElement[], appState: Readonly<AppState>) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.createEmbed" | "labels.link.create";
154
168
  predicate: (elements: readonly import("./types").ExcalidrawElement[], appState: AppState) => boolean;
155
169
  PanelComponent: ({ elements, appState, updateData }: import("../actions/types").PanelComponentProps) => JSX.Element;
156
170
  } & {
157
171
  keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
158
172
  };
159
- export declare const getContextMenuLabel: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => "labels.link.edit" | "labels.link.create";
173
+ export declare const getContextMenuLabel: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.createEmbed" | "labels.link.create";
160
174
  export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: UIAppState) => [x: number, y: number, width: number, height: number];
161
- export declare const isPointHittingLinkIcon: (element: NonDeletedExcalidrawElement, appState: AppState, [x, y]: readonly [number, number], isMobile: boolean) => boolean;
175
+ export declare const isPointHittingLinkIcon: (element: NonDeletedExcalidrawElement, appState: AppState, [x, y]: readonly [number, number]) => boolean;
176
+ export declare const isPointHittingLink: (element: NonDeletedExcalidrawElement, appState: AppState, [x, y]: readonly [number, number], isMobile: boolean) => boolean;
162
177
  export declare const showHyperlinkTooltip: (element: NonDeletedExcalidrawElement, appState: AppState) => void;
163
178
  export declare const hideHyperlinkToolip: () => void;
164
179
  export declare const shouldHideLinkPopup: (element: NonDeletedExcalidrawElement, appState: AppState, [clientX, clientY]: readonly [number, number]) => Boolean;
@@ -7,7 +7,7 @@ export type SuggestedPointBinding = [
7
7
  "start" | "end" | "both",
8
8
  NonDeleted<ExcalidrawBindableElement>
9
9
  ];
10
- export declare const shouldEnableBindingForPointerEvent: (event: React.PointerEvent<HTMLCanvasElement>) => boolean;
10
+ export declare const shouldEnableBindingForPointerEvent: (event: React.PointerEvent<HTMLElement>) => boolean;
11
11
  export declare const isBindingEnabled: (appState: AppState) => boolean;
12
12
  export declare const bindOrUnbindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, startBindingElement: ExcalidrawBindableElement | null | "keep", endBindingElement: ExcalidrawBindableElement | null | "keep") => void;
13
13
  export declare const bindOrUnbindSelectedElements: (elements: NonDeleted<ExcalidrawElement>[]) => void;
@@ -1,21 +1,46 @@
1
1
  import { ExcalidrawElement, ExcalidrawLinearElement, Arrowhead, NonDeleted } from "./types";
2
2
  import { Drawable, Op } from "roughjs/bin/core";
3
- export type Bounds = readonly [number, number, number, number];
3
+ import { Point } from "../types";
4
+ export type RectangleBox = {
5
+ x: number;
6
+ y: number;
7
+ width: number;
8
+ height: number;
9
+ angle: number;
10
+ };
11
+ export type Bounds = readonly [x1: number, y1: number, x2: number, y2: number];
12
+ export declare class ElementBounds {
13
+ private static boundsCache;
14
+ static getBounds(element: ExcalidrawElement): Bounds;
15
+ private static calculateBounds;
16
+ }
4
17
  export declare const getElementAbsoluteCoords: (element: ExcalidrawElement, includeBoundText?: boolean) => [number, number, number, number, number, number];
18
+ /**
19
+ * for a given element, `getElementLineSegments` returns line segments
20
+ * that can be used for visual collision detection (useful for frames)
21
+ * as opposed to bounding box collision detection
22
+ */
23
+ export declare const getElementLineSegments: (element: ExcalidrawElement) => [Point, Point][];
24
+ /**
25
+ * Scene -> Scene coords, but in x1,x2,y1,y2 format.
26
+ *
27
+ * Rectangle here means any rectangular frame, not an excalidraw element.
28
+ */
29
+ export declare const getRectangleBoxAbsoluteCoords: (boxSceneCoords: RectangleBox) => number[];
5
30
  export declare const pointRelativeTo: (element: ExcalidrawElement, absoluteCoords: readonly [number, number]) => readonly [number, number];
6
31
  export declare const getDiamondPoints: (element: ExcalidrawElement) => number[];
7
32
  export declare const getCurvePathOps: (shape: Drawable) => Op[];
8
33
  export declare const getMinMaxXYFromCurvePathOps: (ops: Op[], transformXY?: ((x: number, y: number) => [number, number]) | undefined) => [number, number, number, number];
9
34
  export declare const getArrowheadPoints: (element: ExcalidrawLinearElement, shape: Drawable[], position: "start" | "end", arrowhead: Arrowhead) => number[] | null;
10
- export declare const getElementBounds: (element: ExcalidrawElement) => [number, number, number, number];
11
- export declare const getCommonBounds: (elements: readonly ExcalidrawElement[]) => [number, number, number, number];
35
+ export declare const getElementBounds: (element: ExcalidrawElement) => Bounds;
36
+ export declare const getCommonBounds: (elements: readonly ExcalidrawElement[]) => Bounds;
12
37
  export declare const getResizedElementAbsoluteCoords: (element: ExcalidrawElement, nextWidth: number, nextHeight: number, normalizePoints: boolean) => [number, number, number, number];
13
38
  export declare const getElementPointsCoords: (element: ExcalidrawLinearElement, points: readonly (readonly [number, number])[]) => [number, number, number, number];
14
39
  export declare const getClosestElementBounds: (elements: readonly ExcalidrawElement[], from: {
15
40
  x: number;
16
41
  y: number;
17
- }) => [number, number, number, number];
18
- export interface Box {
42
+ }) => Bounds;
43
+ export interface BoundingBox {
19
44
  minX: number;
20
45
  minY: number;
21
46
  maxX: number;
@@ -25,4 +50,4 @@ export interface Box {
25
50
  width: number;
26
51
  height: number;
27
52
  }
28
- export declare const getCommonBoundingBox: (elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[]) => Box;
53
+ export declare const getCommonBoundingBox: (elements: ExcalidrawElement[] | readonly NonDeleted<ExcalidrawElement>[]) => BoundingBox;
@@ -1,11 +1,11 @@
1
1
  import * as GA from "../ga";
2
- import { NonDeletedExcalidrawElement, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawDiamondElement, ExcalidrawTextElement, ExcalidrawEllipseElement, NonDeleted, ExcalidrawImageElement } from "./types";
3
- import { Point } from "../types";
2
+ import { NonDeletedExcalidrawElement, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawIFrameElement, ExcalidrawDiamondElement, ExcalidrawTextElement, ExcalidrawEllipseElement, NonDeleted, ExcalidrawImageElement, ExcalidrawFrameElement } from "./types";
3
+ import { FrameNameBoundsCache, Point } from "../types";
4
4
  import { AppState } from "../types";
5
- export declare const hitTest: (element: NonDeletedExcalidrawElement, appState: AppState, x: number, y: number) => boolean;
6
- export declare const isHittingElementBoundingBoxWithoutHittingElement: (element: NonDeletedExcalidrawElement, appState: AppState, x: number, y: number) => boolean;
7
- export declare const isHittingElementNotConsideringBoundingBox: (element: NonDeletedExcalidrawElement, appState: AppState, point: readonly [number, number]) => boolean;
8
- export declare const isPointHittingElementBoundingBox: (element: NonDeleted<ExcalidrawElement>, [x, y]: readonly [number, number], threshold: number) => boolean;
5
+ export declare const hitTest: (element: NonDeletedExcalidrawElement, appState: AppState, frameNameBoundsCache: FrameNameBoundsCache, x: number, y: number) => boolean;
6
+ export declare const isHittingElementBoundingBoxWithoutHittingElement: (element: NonDeletedExcalidrawElement, appState: AppState, frameNameBoundsCache: FrameNameBoundsCache, x: number, y: number) => boolean;
7
+ export declare const isHittingElementNotConsideringBoundingBox: (element: NonDeletedExcalidrawElement, appState: AppState, frameNameBoundsCache: FrameNameBoundsCache | null, point: readonly [number, number]) => boolean;
8
+ export declare const isPointHittingElementBoundingBox: (element: NonDeleted<ExcalidrawElement>, [x, y]: readonly [number, number], threshold: number, frameNameBoundsCache: FrameNameBoundsCache | null) => boolean;
9
9
  export declare const bindingBorderTest: (element: NonDeleted<ExcalidrawBindableElement>, { x, y }: {
10
10
  x: number;
11
11
  y: number;
@@ -18,4 +18,4 @@ export declare const determineFocusPoint: (element: ExcalidrawBindableElement, f
18
18
  export declare const intersectElementWithLine: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], gap?: number) => Point[];
19
19
  export declare const getCircleIntersections: (center: readonly [number, number, number, number, number, number, number, number], radius: number, line: readonly [number, number, number, number, number, number, number, number]) => GA.Point[];
20
20
  export declare const findFocusPointForEllipse: (ellipse: ExcalidrawEllipseElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
21
- export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
21
+ export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement | ExcalidrawIFrameElement | ExcalidrawFrameElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
@@ -1,5 +1,6 @@
1
1
  import { NonDeletedExcalidrawElement } from "./types";
2
2
  import { AppState, PointerDownState } from "../types";
3
- export declare const dragSelectedElements: (pointerDownState: PointerDownState, selectedElements: NonDeletedExcalidrawElement[], pointerX: number, pointerY: number, lockDirection: boolean | undefined, distanceX: number | undefined, distanceY: number | undefined, appState: AppState) => void;
3
+ import Scene from "../scene/Scene";
4
+ export declare const dragSelectedElements: (pointerDownState: PointerDownState, selectedElements: NonDeletedExcalidrawElement[], pointerX: number, pointerY: number, lockDirection: boolean | undefined, distanceX: number | undefined, distanceY: number | undefined, appState: AppState, scene: Scene) => void;
4
5
  export declare const getDragOffsetXY: (selectedElements: NonDeletedExcalidrawElement[], x: number, y: number) => [number, number];
5
6
  export declare const dragNewElement: (draggingElement: NonDeletedExcalidrawElement, elementType: AppState["activeTool"]["type"], originX: number, originY: number, x: number, y: number, width: number, height: number, shouldMaintainAspectRatio: boolean, shouldResizeFromCenter: boolean, widthAspectRatio?: number | null) => void;