@excalidraw/element 0.18.0-063e025 → 0.18.0-1acf66e

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 (94) hide show
  1. package/dist/dev/index.js +3951 -3199
  2. package/dist/dev/index.js.map +4 -4
  3. package/dist/prod/index.js +12 -12
  4. package/dist/types/common/src/constants.d.ts +2 -0
  5. package/dist/types/common/src/points.d.ts +1 -1
  6. package/dist/types/common/src/utils.d.ts +1 -1
  7. package/dist/types/element/src/arrowEndpointText.d.ts +49 -0
  8. package/dist/types/element/src/arrows/focus.d.ts +5 -2
  9. package/dist/types/element/src/binding.d.ts +12 -3
  10. package/dist/types/element/src/comparisons.d.ts +4 -4
  11. package/dist/types/element/src/convertToShape.d.ts +23 -0
  12. package/dist/types/element/src/dragElements.d.ts +27 -0
  13. package/dist/types/element/src/flowchart.d.ts +6 -6
  14. package/dist/types/element/src/groups.d.ts +1 -1
  15. package/dist/types/element/src/index.d.ts +2 -0
  16. package/dist/types/element/src/linearElementEditor.d.ts +7 -0
  17. package/dist/types/element/src/newElement.d.ts +13 -0
  18. package/dist/types/element/src/selection.d.ts +1 -1
  19. package/dist/types/element/src/textElement.d.ts +6 -3
  20. package/dist/types/excalidraw/actions/actionAddToLibrary.d.ts +15 -3
  21. package/dist/types/excalidraw/actions/actionBoundText.d.ts +10 -2
  22. package/dist/types/excalidraw/actions/actionCanvas.d.ts +99 -565
  23. package/dist/types/excalidraw/actions/actionClipboard.d.ts +10 -2
  24. package/dist/types/excalidraw/actions/actionCropEditor.d.ts +5 -1
  25. package/dist/types/excalidraw/actions/actionDeleteSelected.d.ts +16 -3
  26. package/dist/types/excalidraw/actions/actionDeselect.d.ts +2 -1
  27. package/dist/types/excalidraw/actions/actionElementLink.d.ts +5 -1
  28. package/dist/types/excalidraw/actions/actionElementLock.d.ts +10 -2
  29. package/dist/types/excalidraw/actions/actionExport.d.ts +12 -4
  30. package/dist/types/excalidraw/actions/actionFrame.d.ts +15 -178
  31. package/dist/types/excalidraw/actions/actionGroup.d.ts +10 -2
  32. package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +6 -1
  33. package/dist/types/excalidraw/actions/actionLink.d.ts +5 -1
  34. package/dist/types/excalidraw/actions/actionMenu.d.ts +5 -1
  35. package/dist/types/excalidraw/actions/actionProperties.d.ts +10 -2
  36. package/dist/types/excalidraw/actions/actionSelectAll.d.ts +5 -1
  37. package/dist/types/excalidraw/actions/actionStyles.d.ts +5 -1
  38. package/dist/types/excalidraw/actions/actionTextAutoResize.d.ts +1 -1
  39. package/dist/types/excalidraw/actions/actionToggleArrowBinding.d.ts +5 -1
  40. package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +5 -1
  41. package/dist/types/excalidraw/actions/actionToggleMidpointSnapping.d.ts +5 -1
  42. package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +5 -1
  43. package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +5 -1
  44. package/dist/types/excalidraw/actions/actionToggleStats.d.ts +5 -1
  45. package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +6 -2
  46. package/dist/types/excalidraw/actions/actionToggleZenMode.d.ts +5 -1
  47. package/dist/types/excalidraw/actions/index.d.ts +0 -1
  48. package/dist/types/excalidraw/actions/manager.d.ts +1 -0
  49. package/dist/types/excalidraw/actions/shortcuts.d.ts +1 -1
  50. package/dist/types/excalidraw/actions/types.d.ts +5 -1
  51. package/dist/types/excalidraw/appState.d.ts +4 -4
  52. package/dist/types/excalidraw/components/Actions.d.ts +16 -10
  53. package/dist/types/excalidraw/components/App.arrowText.d.ts +72 -0
  54. package/dist/types/excalidraw/components/App.cursor.d.ts +31 -0
  55. package/dist/types/excalidraw/components/App.d.ts +322 -76
  56. package/dist/types/excalidraw/components/App.drawshape.d.ts +55 -0
  57. package/dist/types/excalidraw/components/App.flowchart.d.ts +21 -0
  58. package/dist/types/excalidraw/components/App.viewport.d.ts +73 -0
  59. package/dist/types/excalidraw/components/{ToolButton.d.ts → IconButton.d.ts} +16 -19
  60. package/dist/types/excalidraw/components/LaserPointerButton.d.ts +2 -4
  61. package/dist/types/excalidraw/components/LayerUI.d.ts +4 -2
  62. package/dist/types/excalidraw/components/LockButton.d.ts +3 -4
  63. package/dist/types/excalidraw/components/MagicButton.d.ts +0 -2
  64. package/dist/types/excalidraw/components/MobileMenu.d.ts +4 -4
  65. package/dist/types/excalidraw/components/MobileToolbar.d.ts +9 -0
  66. package/dist/types/excalidraw/components/PenModeButton.d.ts +2 -5
  67. package/dist/types/excalidraw/components/Popover.d.ts +1 -3
  68. package/dist/types/excalidraw/components/{ButtonIcon.d.ts → RadioButton.d.ts} +2 -5
  69. package/dist/types/excalidraw/components/ToolPopover.d.ts +3 -6
  70. package/dist/types/excalidraw/components/Toolbar.d.ts +11 -0
  71. package/dist/types/excalidraw/components/Tools.d.ts +145 -0
  72. package/dist/types/excalidraw/components/canvases/InteractiveCanvas.d.ts +2 -0
  73. package/dist/types/excalidraw/components/footer/Footer.d.ts +3 -1
  74. package/dist/types/excalidraw/components/icons.d.ts +1 -1
  75. package/dist/types/excalidraw/components/main-menu/DefaultItems.d.ts +1 -1
  76. package/dist/types/excalidraw/components/positionElementBesideCursor.d.ts +26 -0
  77. package/dist/types/excalidraw/components/shapeActionPredicates.d.ts +39 -0
  78. package/dist/types/excalidraw/data/blob.d.ts +14 -6
  79. package/dist/types/excalidraw/data/json.d.ts +7 -3
  80. package/dist/types/excalidraw/drawShapeTrail.d.ts +16 -0
  81. package/dist/types/excalidraw/scene/types.d.ts +3 -0
  82. package/dist/types/excalidraw/types.d.ts +199 -13
  83. package/dist/types/excalidraw/viewport.d.ts +20 -64
  84. package/dist/types/laser-pointer/src/state.d.ts +1 -0
  85. package/dist/types/math/src/index.d.ts +1 -0
  86. package/dist/types/math/src/pca.d.ts +79 -0
  87. package/dist/types/math/src/polygon.d.ts +25 -1
  88. package/package.json +4 -4
  89. package/dist/types/excalidraw/actions/actionEmbeddable.d.ts +0 -173
  90. package/dist/types/excalidraw/components/HandButton.d.ts +0 -10
  91. package/dist/types/excalidraw/components/MobileToolBar.d.ts +0 -10
  92. package/dist/types/excalidraw/components/shapes.d.ts +0 -270
  93. package/dist/types/excalidraw/cursor.d.ts +0 -5
  94. package/dist/types/excalidraw/scene/zoom.d.ts +0 -12
@@ -2,48 +2,45 @@ import React from "react";
2
2
  import type { PointerType } from "@excalidraw/element/types";
3
3
  import "./ToolIcon.scss";
4
4
  import type { CSSProperties } from "react";
5
- export type ToolButtonSize = "small" | "medium";
6
- type ToolButtonBaseProps = {
5
+ export type IconButtonSize = "small" | "medium";
6
+ type IconButtonBaseProps = {
7
7
  icon?: React.ReactNode;
8
8
  "aria-label": string;
9
9
  "aria-keyshortcuts"?: string;
10
10
  "data-testid"?: string;
11
11
  label?: string;
12
12
  title?: string;
13
- name?: string;
14
- id?: string;
15
- size?: ToolButtonSize;
13
+ size?: IconButtonSize;
16
14
  keyBindingLabel?: string | null;
17
15
  showAriaLabel?: boolean;
18
16
  hidden?: boolean;
19
17
  visible?: boolean;
20
- selected?: boolean;
21
18
  disabled?: boolean;
22
19
  className?: string;
23
20
  style?: CSSProperties;
24
21
  isLoading?: boolean;
25
22
  };
26
- type ToolButtonProps = (ToolButtonBaseProps & {
23
+ type IconButtonProps = (IconButtonBaseProps & {
27
24
  type: "button";
28
25
  children?: React.ReactNode;
29
26
  onClick?(event: React.MouseEvent): void;
30
- }) | (ToolButtonBaseProps & {
31
- type: "submit";
32
- children?: React.ReactNode;
33
- onClick?(event: React.MouseEvent): void;
34
- }) | (ToolButtonBaseProps & {
27
+ }) | (IconButtonBaseProps & {
35
28
  type: "icon";
36
29
  children?: React.ReactNode;
37
30
  onClick?(): void;
38
- }) | (ToolButtonBaseProps & {
39
- type: "radio";
31
+ }) | (IconButtonBaseProps & {
32
+ type: "toggle";
40
33
  checked: boolean;
41
- onChange?(data: {
34
+ /**
35
+ * Fired on activation — a completed pointer gesture (via `click`, so a
36
+ * press canceled by sliding off the button doesn't select) or
37
+ * keyboard/AT activation, in which case pointerType is null.
38
+ * pointerType is captured on pointer-down, where it's reliable
39
+ * (unlike the click event's own pointerType on iOS).
40
+ */
41
+ onSelect?(data: {
42
42
  pointerType: PointerType | null;
43
43
  }): void;
44
- onPointerDown?(data: {
45
- pointerType: PointerType;
46
- }): void;
47
44
  });
48
- export declare const ToolButton: React.ForwardRefExoticComponent<ToolButtonProps & React.RefAttributes<unknown>>;
45
+ export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<unknown>>;
49
46
  export {};
@@ -1,10 +1,8 @@
1
- import "./ToolIcon.scss";
2
- type LaserPointerIconProps = {
1
+ type LaserPointerButtonProps = {
3
2
  title?: string;
4
- name?: string;
5
3
  checked: boolean;
6
4
  onChange?(): void;
7
5
  isMobile?: boolean;
8
6
  };
9
- export declare const LaserPointerButton: (props: LaserPointerIconProps) => import("react/jsx-runtime").JSX.Element;
7
+ export declare const LaserPointerButton: (props: LaserPointerButtonProps) => import("react/jsx-runtime").JSX.Element;
10
8
  export {};
@@ -13,7 +13,6 @@ interface LayerUIProps {
13
13
  setAppState: React.Component<any, AppState>["setState"];
14
14
  elements: readonly NonDeletedExcalidrawElement[];
15
15
  onLockToggle: () => void;
16
- onHandToolToggle: () => void;
17
16
  onPenModeToggle: AppClassProperties["togglePenMode"];
18
17
  showExitZenModeBtn: boolean;
19
18
  langCode: Language["code"];
@@ -25,8 +24,11 @@ interface LayerUIProps {
25
24
  renderWelcomeScreen: boolean;
26
25
  children?: React.ReactNode;
27
26
  app: AppClassProperties;
27
+ defaultUIEnabled: boolean;
28
+ zoomUIEnabled: boolean;
29
+ scrollBackToContentUIEnabled: boolean;
28
30
  isCollaborating: boolean;
29
31
  generateLinkForSelection?: AppProps["generateLinkForSelection"];
30
32
  }
31
- declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopLeftUI, renderTopRightUI, renderCustomStats, UIOptions, onExportImage, renderWelcomeScreen, children, app, isCollaborating, generateLinkForSelection, }: LayerUIProps) => import("react/jsx-runtime").JSX.Element>;
33
+ declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, onLockToggle, onPenModeToggle, showExitZenModeBtn, renderTopLeftUI, renderTopRightUI, renderCustomStats, UIOptions, onExportImage, renderWelcomeScreen, children, app, defaultUIEnabled, zoomUIEnabled, scrollBackToContentUIEnabled, isCollaborating, generateLinkForSelection, }: LayerUIProps) => import("react/jsx-runtime").JSX.Element>;
32
34
  export default _default;
@@ -1,10 +1,9 @@
1
- import "./ToolIcon.scss";
2
- type LockIconProps = {
1
+ type LockButtonProps = {
3
2
  title?: string;
4
- name?: string;
5
3
  checked: boolean;
6
4
  onChange?(): void;
7
5
  isMobile?: boolean;
6
+ disabled?: boolean;
8
7
  };
9
- export declare const LockButton: (props: LockIconProps) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const LockButton: (props: LockButtonProps) => import("react/jsx-runtime").JSX.Element;
10
9
  export {};
@@ -1,9 +1,7 @@
1
- import "./ToolIcon.scss";
2
1
  import type { JSX } from "react";
3
2
  export declare const ElementCanvasButton: (props: {
4
3
  title?: string;
5
4
  icon: JSX.Element;
6
- name?: string;
7
5
  checked: boolean;
8
6
  onChange?(): void;
9
7
  isMobile?: boolean;
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
3
3
  import type { ActionManager } from "../actions/manager";
4
- import type { AppClassProperties, AppProps, AppState, UIAppState } from "../types";
4
+ import type { AppClassProperties, AppState, UIAppState } from "../types";
5
5
  import type { JSX } from "react";
6
6
  type MobileMenuProps = {
7
7
  appState: UIAppState;
@@ -10,14 +10,14 @@ type MobileMenuProps = {
10
10
  renderImageExportDialog: () => React.ReactNode;
11
11
  setAppState: React.Component<any, AppState>["setState"];
12
12
  elements: readonly NonDeletedExcalidrawElement[];
13
- onHandToolToggle: () => void;
14
13
  onPenModeToggle: AppClassProperties["togglePenMode"];
15
14
  renderTopRightUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
16
15
  renderTopLeftUI?: (isMobile: boolean, appState: UIAppState) => JSX.Element | null;
17
16
  renderSidebars: () => JSX.Element | null;
18
17
  renderWelcomeScreen: boolean;
19
- UIOptions: AppProps["UIOptions"];
18
+ defaultUIEnabled: boolean;
19
+ scrollBackToContentUIEnabled: boolean;
20
20
  app: AppClassProperties;
21
21
  };
22
- export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, onHandToolToggle, renderTopLeftUI, renderTopRightUI, renderSidebars, renderWelcomeScreen, UIOptions, app, onPenModeToggle, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
22
+ export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, renderTopLeftUI, renderTopRightUI, renderSidebars, renderWelcomeScreen, defaultUIEnabled, scrollBackToContentUIEnabled, app, onPenModeToggle, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
23
23
  export {};
@@ -0,0 +1,9 @@
1
+ import "./ToolIcon.scss";
2
+ import "./MobileToolbar.scss";
3
+ import type { AppClassProperties, UIAppState } from "../types";
4
+ type MobileToolbarProps = {
5
+ app: AppClassProperties;
6
+ setAppState: React.Component<any, UIAppState>["setState"];
7
+ };
8
+ export declare const MobileToolbar: ({ app, setAppState }: MobileToolbarProps) => import("react/jsx-runtime").JSX.Element;
9
+ export {};
@@ -1,12 +1,9 @@
1
- import "./ToolIcon.scss";
2
- type PenModeIconProps = {
1
+ type PenModeButtonProps = {
3
2
  title?: string;
4
- name?: string;
5
3
  checked: boolean;
6
4
  onChange?(): void;
7
- zenModeEnabled?: boolean;
8
5
  isMobile?: boolean;
9
6
  penDetected: boolean;
10
7
  };
11
- export declare const PenModeButton: (props: PenModeIconProps) => import("react/jsx-runtime").JSX.Element | null;
8
+ export declare const PenModeButton: (props: PenModeButtonProps) => import("react/jsx-runtime").JSX.Element | null;
12
9
  export {};
@@ -6,11 +6,9 @@ type Props = {
6
6
  children?: React.ReactNode;
7
7
  onCloseRequest?(event: PointerEvent): void;
8
8
  fitInViewport?: boolean;
9
- offsetLeft?: number;
10
- offsetTop?: number;
11
9
  viewportWidth?: number;
12
10
  viewportHeight?: number;
13
11
  className?: string;
14
12
  };
15
- export declare const Popover: ({ children, left, top, onCloseRequest, fitInViewport, offsetLeft, offsetTop, viewportWidth, viewportHeight, className, }: Props) => import("react/jsx-runtime").JSX.Element;
13
+ export declare const Popover: ({ children, left, top, onCloseRequest, fitInViewport, viewportWidth, viewportHeight, className, }: Props) => import("react/jsx-runtime").JSX.Element;
16
14
  export {};
@@ -1,16 +1,13 @@
1
- import "./ButtonIcon.scss";
2
1
  import type { JSX } from "react";
3
- interface ButtonIconProps {
2
+ interface RadioButtonProps {
4
3
  icon: JSX.Element;
5
4
  title: string;
6
5
  className?: string;
7
6
  testId?: string;
8
7
  /** if not supplied, defaults to value identity check */
9
8
  active?: boolean;
10
- /** include standalone style (could interfere with parent styles) */
11
- standalone?: boolean;
12
9
  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
13
10
  style?: React.CSSProperties;
14
11
  }
15
- export declare const ButtonIcon: import("react").ForwardRefExoticComponent<ButtonIconProps & import("react").RefAttributes<HTMLButtonElement>>;
12
+ export declare const RadioButton: import("react").ForwardRefExoticComponent<RadioButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
16
13
  export {};
@@ -4,7 +4,8 @@ import type { AppClassProperties } from "../types";
4
4
  type ToolOption = {
5
5
  type: string;
6
6
  icon: React.ReactNode;
7
- title?: string;
7
+ title: string;
8
+ fillable?: boolean;
8
9
  };
9
10
  type ToolPopoverProps = {
10
11
  app: AppClassProperties;
@@ -13,13 +14,9 @@ type ToolPopoverProps = {
13
14
  type: string;
14
15
  };
15
16
  defaultOption: string;
16
- className?: string;
17
- namePrefix: string;
18
- title: string;
19
17
  "data-testid": string;
20
18
  onToolChange: (type: string) => void;
21
19
  displayedOption: ToolOption;
22
- fillable?: boolean;
23
20
  };
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;
21
+ export declare const ToolPopover: ({ app, options, activeTool, defaultOption, "data-testid": dataTestId, onToolChange, displayedOption, }: ToolPopoverProps) => import("react/jsx-runtime").JSX.Element;
25
22
  export {};
@@ -0,0 +1,11 @@
1
+ import type { AppClassProperties, AppProps, AppState, UIAppState } from "../types";
2
+ /** the main (desktop/tablet) toolbar island */
3
+ export declare const Toolbar: ({ app, appState, setAppState, UIOptions, onPenModeToggle, onLockToggle, heading, }: {
4
+ app: AppClassProperties;
5
+ appState: UIAppState;
6
+ setAppState: React.Component<any, AppState>["setState"];
7
+ UIOptions: AppProps["UIOptions"];
8
+ onPenModeToggle: AppClassProperties["togglePenMode"];
9
+ onLockToggle: () => void;
10
+ heading: React.ReactNode;
11
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,145 @@
1
+ import type { AppClassProperties, AppState, ToolType, UIAppState } from "../types";
2
+ export type ToolConfig = {
3
+ icon: React.ReactNode;
4
+ /** letter shortcut(s) — the first one is shown in tooltips */
5
+ letterKey?: string | readonly string[];
6
+ /** whether `letterKey` requires Shift to be held (e.g. Shift+X) */
7
+ shiftKey?: boolean;
8
+ numericKey?: string;
9
+ /** whether the tool's shapes can be filled — fills the icon when active */
10
+ fillable?: boolean;
11
+ /**
12
+ * re-activating the tool switches back to the previously active tool
13
+ * (via the keyboard shortcut or ESC — see `setActiveTool`'s `toggle`
14
+ * option)
15
+ */
16
+ toggle?: boolean;
17
+ };
18
+ /**
19
+ * Tool data — the single source of truth for tool buttons, keyboard
20
+ * shortcuts (`findShapeByKey`), and the command palette. Toolbar placement
21
+ * is not defined here: toolbars compose the `*ToolButton` components below
22
+ * manually, so entries without a toolbar slot (e.g. laser) are data-only.
23
+ */
24
+ export declare const TOOLS: {
25
+ hand: ToolConfig;
26
+ selection: ToolConfig;
27
+ rectangle: ToolConfig;
28
+ diamond: ToolConfig;
29
+ ellipse: ToolConfig;
30
+ arrow: ToolConfig;
31
+ line: ToolConfig;
32
+ freedraw: ToolConfig;
33
+ text: ToolConfig;
34
+ image: ToolConfig;
35
+ eraser: ToolConfig;
36
+ frame: ToolConfig;
37
+ autoshape: ToolConfig;
38
+ embeddable: ToolConfig;
39
+ laser: ToolConfig;
40
+ lasso: ToolConfig;
41
+ };
42
+ export type ToolbarToolType = keyof typeof TOOLS;
43
+ /**
44
+ * tools that, when activated while already active, switch back to the
45
+ * previously active tool (see `setActiveTool`'s `toggle` option)
46
+ */
47
+ export declare const TOGGLE_TOOLS: readonly (ToolType | "custom")[];
48
+ export declare const getToolLetter: (type: ToolbarToolType) => string | undefined;
49
+ /** human-readable shortcut hint, e.g. "R or 2", used in tooltips & aria */
50
+ export declare const getToolShortcut: (type: ToolbarToolType) => string;
51
+ export declare const findShapeByKey: (key: string, app: AppClassProperties, shiftKey?: boolean) => "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "lasso" | "eraser" | "hand" | "laser" | "autoshape" | null;
52
+ /**
53
+ * Whether a toolbar entry activating the given tool renders disabled — true
54
+ * when the active tool is host-controlled (`props.activeTool`) and the entry
55
+ * doesn't activate the forced tool (`setActiveTool` refuses it).
56
+ */
57
+ export declare const isToolButtonDisabled: (app: AppClassProperties, type: string) => boolean;
58
+ export type ToolButtonComponentProps = {
59
+ app: AppClassProperties;
60
+ activeTool: UIAppState["activeTool"];
61
+ /** hide the keybinding badge rendered in the button's corner */
62
+ hideKeyBinding?: boolean;
63
+ /**
64
+ * hide all shortcut affordances (tooltip hint, aria-keyshortcuts, and the
65
+ * keybinding badge) — used on mobile where there's no keyboard
66
+ */
67
+ hideShortcut?: boolean;
68
+ };
69
+ export declare const HandToolButton: {
70
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
71
+ displayName: string;
72
+ };
73
+ export declare const RectangleToolButton: {
74
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
75
+ displayName: string;
76
+ };
77
+ export declare const DiamondToolButton: {
78
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
79
+ displayName: string;
80
+ };
81
+ export declare const EllipseToolButton: {
82
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
83
+ displayName: string;
84
+ };
85
+ export declare const ArrowToolButton: {
86
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
87
+ displayName: string;
88
+ };
89
+ export declare const LineToolButton: {
90
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
91
+ displayName: string;
92
+ };
93
+ export declare const FreedrawToolButton: {
94
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
95
+ displayName: string;
96
+ };
97
+ export declare const TextToolButton: {
98
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
99
+ displayName: string;
100
+ };
101
+ export declare const ImageToolButton: {
102
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
103
+ displayName: string;
104
+ };
105
+ export declare const EraserToolButton: {
106
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
107
+ displayName: string;
108
+ };
109
+ export declare const FrameToolButton: {
110
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
111
+ displayName: string;
112
+ };
113
+ /**
114
+ * The selection tool button — pointer-clicking it while the selection tool
115
+ * is active switches to lasso.
116
+ */
117
+ export declare const SelectionToolButton: {
118
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
119
+ displayName: string;
120
+ };
121
+ /**
122
+ * Rendered in place of the selection button when lasso is the preferred
123
+ * selection tool; the selection shortcut activates it then.
124
+ */
125
+ export declare const LassoToolButton: {
126
+ ({ app, activeTool, hideKeyBinding, hideShortcut, }: ToolButtonComponentProps): import("react/jsx-runtime").JSX.Element;
127
+ displayName: string;
128
+ };
129
+ /**
130
+ * The selection ⇄ lasso popover used in compact (tablet) and mobile
131
+ * toolbars; picking an option also makes it the preferred selection tool.
132
+ */
133
+ export declare const SelectionToolPopover: ({ app, activeTool, setAppState, }: {
134
+ app: AppClassProperties;
135
+ activeTool: UIAppState["activeTool"];
136
+ setAppState: React.Component<any, AppState>["setState"];
137
+ }) => import("react/jsx-runtime").JSX.Element;
138
+ /**
139
+ * The freedraw ⇄ draw-shape popover used in compact (tablet) and mobile
140
+ * toolbars. The trigger remembers and displays the most recently used option.
141
+ */
142
+ export declare const FreedrawToolPopover: ({ app, activeTool, }: {
143
+ app: AppClassProperties;
144
+ activeTool: UIAppState["activeTool"];
145
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -18,6 +18,8 @@ type InteractiveCanvasProps = {
18
18
  renderScrollbars: boolean;
19
19
  editorInterface: EditorInterface;
20
20
  app: AppClassProperties;
21
+ interactionEnabled: boolean;
22
+ navigationEnabled: boolean;
21
23
  renderInteractiveSceneCallback: (data: RenderInteractiveSceneCallback) => void;
22
24
  handleCanvasRef: (canvas: HTMLCanvasElement | null) => void;
23
25
  onContextMenu: Exclude<DOMAttributes<HTMLCanvasElement | HTMLDivElement>["onContextMenu"], undefined>;
@@ -1,11 +1,13 @@
1
1
  import type { ActionManager } from "../../actions/manager";
2
2
  import type { UIAppState } from "../../types";
3
3
  declare const Footer: {
4
- ({ appState, actionManager, showExitZenModeBtn, renderWelcomeScreen, }: {
4
+ ({ appState, actionManager, showExitZenModeBtn, renderWelcomeScreen, defaultUIEnabled, zoomUIEnabled, }: {
5
5
  appState: UIAppState;
6
6
  actionManager: ActionManager;
7
7
  showExitZenModeBtn: boolean;
8
8
  renderWelcomeScreen: boolean;
9
+ defaultUIEnabled: boolean;
10
+ zoomUIEnabled: boolean;
9
11
  }): import("react/jsx-runtime").JSX.Element;
10
12
  displayName: string;
11
13
  };
@@ -197,12 +197,12 @@ export declare const playerStopFilledIcon: import("react/jsx-runtime").JSX.Eleme
197
197
  export declare const tablerCheckIcon: import("react/jsx-runtime").JSX.Element;
198
198
  export declare const alertTriangleIcon: import("react/jsx-runtime").JSX.Element;
199
199
  export declare const eyeDropperIcon: import("react/jsx-runtime").JSX.Element;
200
- export declare const extraToolsIcon: import("react/jsx-runtime").JSX.Element;
201
200
  export declare const frameToolIcon: import("react/jsx-runtime").JSX.Element;
202
201
  export declare const mermaidLogoIcon: import("react/jsx-runtime").JSX.Element;
203
202
  export declare const RetryIcon: import("react/jsx-runtime").JSX.Element;
204
203
  export declare const stackPushIcon: import("react/jsx-runtime").JSX.Element;
205
204
  export declare const ArrowRightIcon: import("react/jsx-runtime").JSX.Element;
205
+ export declare const drawShapeToolIcon: import("react/jsx-runtime").JSX.Element;
206
206
  export declare const laserPointerToolIcon: import("react/jsx-runtime").JSX.Element;
207
207
  export declare const MagicIcon: import("react/jsx-runtime").JSX.Element;
208
208
  export declare const MagicIconThin: import("react/jsx-runtime").JSX.Element;
@@ -79,7 +79,7 @@ export declare const Preferences: {
79
79
  ToggleMidpointSnapping: () => import("react/jsx-runtime").JSX.Element;
80
80
  ToggleGridMode: () => import("react/jsx-runtime").JSX.Element;
81
81
  ToggleZenMode: () => import("react/jsx-runtime").JSX.Element;
82
- ToggleViewMode: () => import("react/jsx-runtime").JSX.Element;
82
+ ToggleViewMode: () => import("react/jsx-runtime").JSX.Element | null;
83
83
  ToggleElementProperties: () => import("react/jsx-runtime").JSX.Element;
84
84
  displayName: string;
85
85
  };
@@ -0,0 +1,26 @@
1
+ /**
2
+ * Positions an element beside a cursor within a container, flipping the
3
+ * element to the other side of the cursor when it would overflow the
4
+ * container, resolved independently on each axis.
5
+ *
6
+ * Takes the cursor in client (viewport) coordinates and returns
7
+ * container-local coordinates.
8
+ */
9
+ export declare const positionElementBesideCursor: ({ cursor, element, container, gap, }: {
10
+ /** client (viewport) coordinates */
11
+ cursor: {
12
+ x: number;
13
+ y: number;
14
+ };
15
+ element: {
16
+ width: number;
17
+ height: number;
18
+ };
19
+ /** the container's bounding client rect */
20
+ container: Pick<DOMRect, "left" | "top" | "width" | "height">;
21
+ /** distance between the cursor and the positioned element */
22
+ gap: number;
23
+ }) => {
24
+ left: number;
25
+ top: number;
26
+ };
@@ -0,0 +1,39 @@
1
+ import type { ExcalidrawElement, NonDeletedElementsMap, NonDeletedSceneElementsMap } from "@excalidraw/element/types";
2
+ import type { AppClassProperties, UIAppState } from "../types";
3
+ export declare const canChangeStrokeColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;
4
+ export declare const canChangeBackgroundColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;
5
+ /**
6
+ * Single source of truth for "which shape-action controls are relevant right
7
+ * now". Each flag answers whether a given control should be shown, given the
8
+ * active tool and the current selection. All three styles-panel layouts
9
+ * (full / compact / mobile) and the compact popovers consume these flags so
10
+ * that visibility logic lives in one place and layout stays pure.
11
+ */
12
+ export declare const getShapeActionPredicates: (appState: UIAppState, targetElements: ExcalidrawElement[], elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap, app: AppClassProperties) => {
13
+ /** some element(s) selected */
14
+ hasSelection: boolean;
15
+ /** actions on selected elements (delete/duplicate/...) */
16
+ showExtraActions: boolean;
17
+ strokeColor: boolean;
18
+ backgroundColor: boolean;
19
+ fill: boolean;
20
+ strokeWidth: boolean;
21
+ freedrawMode: boolean;
22
+ strokeStyle: boolean;
23
+ sloppiness: boolean;
24
+ roundness: boolean;
25
+ arrowType: boolean;
26
+ arrowheads: boolean;
27
+ text: boolean;
28
+ textAlign: boolean;
29
+ verticalAlign: boolean;
30
+ opacity: boolean;
31
+ layers: boolean;
32
+ align: boolean;
33
+ distribute: boolean;
34
+ link: boolean;
35
+ linkSingleOnly: boolean;
36
+ cropEditor: boolean;
37
+ lineEditor: boolean;
38
+ };
39
+ export type ShapeActionPredicates = ReturnType<typeof getShapeActionPredicates>;
@@ -73,10 +73,15 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
73
73
  newElement: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawNonSelectionElement> | null;
74
74
  isBindingEnabled: boolean;
75
75
  isMidpointSnappingEnabled: boolean;
76
+ gridModeEnabled: boolean;
76
77
  suggestedBinding: {
77
78
  element: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement>;
78
79
  midPoint?: import("@excalidraw/math").GlobalPoint;
79
80
  } | null;
81
+ hoveredArrowTextAnchor: {
82
+ elementId: import("@excalidraw/element/types").ExcalidrawArrowElement["id"];
83
+ anchor: "start" | "end" | "label";
84
+ } | null;
80
85
  isRotating: boolean;
81
86
  elementsToHighlight: readonly import("@excalidraw/element/types").NonDeletedExcalidrawElement[] | null;
82
87
  collaborators: Map<import("../types").SocketId, import("../types").Collaborator>;
@@ -96,8 +101,8 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
96
101
  shouldCacheIgnoreZoom: boolean;
97
102
  exportScale: number;
98
103
  currentItemArrowType: "sharp" | "round" | "elbow";
99
- bindMode: import("@excalidraw/element/types").BindMode;
100
104
  gridSize: number;
105
+ bindMode: import("@excalidraw/element/types").BindMode;
101
106
  contextMenu: {
102
107
  items: import("../components/ContextMenu").ContextMenuItems;
103
108
  top: number;
@@ -109,7 +114,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
109
114
  resizingElement: import("@excalidraw/element/types").NonDeletedExcalidrawElement | null;
110
115
  boxSelectionMode: import("../types").BoxSelectionMode;
111
116
  bindingPreference: "enabled" | "disabled";
112
- editingFrame: string | null;
117
+ editingFrame: import("@excalidraw/element/types").ExcalidrawFrameLikeElement["id"] | null;
113
118
  preferredSelectionTool: {
114
119
  type: "selection" | "lasso";
115
120
  initialized: boolean;
@@ -156,7 +161,6 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
156
161
  duration?: number;
157
162
  } | null;
158
163
  gridStep: number;
159
- gridModeEnabled: boolean;
160
164
  fileHandle: FileSystemFileHandle | null;
161
165
  stats: {
162
166
  open: boolean;
@@ -240,10 +244,15 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
240
244
  newElement: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawNonSelectionElement> | null;
241
245
  isBindingEnabled: boolean;
242
246
  isMidpointSnappingEnabled: boolean;
247
+ gridModeEnabled: boolean;
243
248
  suggestedBinding: {
244
249
  element: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement>;
245
250
  midPoint?: import("@excalidraw/math").GlobalPoint;
246
251
  } | null;
252
+ hoveredArrowTextAnchor: {
253
+ elementId: import("@excalidraw/element/types").ExcalidrawArrowElement["id"];
254
+ anchor: "start" | "end" | "label";
255
+ } | null;
247
256
  isRotating: boolean;
248
257
  elementsToHighlight: readonly import("@excalidraw/element/types").NonDeletedExcalidrawElement[] | null;
249
258
  collaborators: Map<import("../types").SocketId, import("../types").Collaborator>;
@@ -263,8 +272,8 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
263
272
  shouldCacheIgnoreZoom: boolean;
264
273
  exportScale: number;
265
274
  currentItemArrowType: "sharp" | "round" | "elbow";
266
- bindMode: import("@excalidraw/element/types").BindMode;
267
275
  gridSize: number;
276
+ bindMode: import("@excalidraw/element/types").BindMode;
268
277
  contextMenu: {
269
278
  items: import("../components/ContextMenu").ContextMenuItems;
270
279
  top: number;
@@ -276,7 +285,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
276
285
  resizingElement: import("@excalidraw/element/types").NonDeletedExcalidrawElement | null;
277
286
  boxSelectionMode: import("../types").BoxSelectionMode;
278
287
  bindingPreference: "enabled" | "disabled";
279
- editingFrame: string | null;
288
+ editingFrame: import("@excalidraw/element/types").ExcalidrawFrameLikeElement["id"] | null;
280
289
  preferredSelectionTool: {
281
290
  type: "selection" | "lasso";
282
291
  initialized: boolean;
@@ -323,7 +332,6 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
323
332
  duration?: number;
324
333
  } | null;
325
334
  gridStep: number;
326
- gridModeEnabled: boolean;
327
335
  fileHandle: FileSystemFileHandle | null;
328
336
  stats: {
329
337
  open: boolean;
@@ -71,10 +71,15 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
71
71
  newElement: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawNonSelectionElement> | null;
72
72
  isBindingEnabled: boolean;
73
73
  isMidpointSnappingEnabled: boolean;
74
+ gridModeEnabled: boolean;
74
75
  suggestedBinding: {
75
76
  element: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement>;
76
77
  midPoint?: import("@excalidraw/math").GlobalPoint;
77
78
  } | null;
79
+ hoveredArrowTextAnchor: {
80
+ elementId: import("@excalidraw/element/types").ExcalidrawArrowElement["id"];
81
+ anchor: "start" | "end" | "label";
82
+ } | null;
78
83
  isRotating: boolean;
79
84
  elementsToHighlight: readonly import("@excalidraw/element/types").NonDeletedExcalidrawElement[] | null;
80
85
  collaborators: Map<import("../types").SocketId, import("../types").Collaborator>;
@@ -94,8 +99,8 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
94
99
  shouldCacheIgnoreZoom: boolean;
95
100
  exportScale: number;
96
101
  currentItemArrowType: "sharp" | "round" | "elbow";
97
- bindMode: import("@excalidraw/element/types").BindMode;
98
102
  gridSize: number;
103
+ bindMode: import("@excalidraw/element/types").BindMode;
99
104
  contextMenu: {
100
105
  items: import("../components/ContextMenu").ContextMenuItems;
101
106
  top: number;
@@ -107,7 +112,7 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
107
112
  resizingElement: import("@excalidraw/element/types").NonDeletedExcalidrawElement | null;
108
113
  boxSelectionMode: import("../types").BoxSelectionMode;
109
114
  bindingPreference: "enabled" | "disabled";
110
- editingFrame: string | null;
115
+ editingFrame: import("@excalidraw/element/types").ExcalidrawFrameLikeElement["id"] | null;
111
116
  preferredSelectionTool: {
112
117
  type: "selection" | "lasso";
113
118
  initialized: boolean;
@@ -154,7 +159,6 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
154
159
  duration?: number;
155
160
  } | null;
156
161
  gridStep: number;
157
- gridModeEnabled: boolean;
158
162
  fileHandle: FileSystemFileHandle | null;
159
163
  stats: {
160
164
  open: boolean;