@excalidraw/common 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 +9 -5
  2. package/dist/dev/index.js.map +2 -2
  3. package/dist/prod/index.js +3 -3
  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 +15 -7
  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 +5 -5
  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 +20 -12
  79. package/dist/types/excalidraw/data/json.d.ts +10 -6
  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 +1 -1
  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>;
@@ -21,6 +21,11 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
21
21
  elements: import("@excalidraw/element/types").OrderedExcalidrawElement[];
22
22
  appState: {
23
23
  viewModeEnabled: boolean;
24
+ activeTool: {
25
+ lastActiveTool: import("../types").ActiveTool | null;
26
+ locked: boolean;
27
+ fromSelection: boolean;
28
+ } & import("../types").ActiveTool;
24
29
  zenModeEnabled: boolean;
25
30
  gridModeEnabled: boolean;
26
31
  objectsSnapModeEnabled: boolean;
@@ -28,11 +33,6 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
28
33
  name: string | null;
29
34
  currentItemArrowType: "sharp" | "round" | "elbow";
30
35
  gridSize: number;
31
- activeTool: {
32
- lastActiveTool: import("../types").ActiveTool | null;
33
- locked: boolean;
34
- fromSelection: boolean;
35
- } & import("../types").ActiveTool;
36
36
  contextMenu: {
37
37
  items: import("../components/ContextMenu").ContextMenuItems;
38
38
  top: number;
@@ -57,6 +57,10 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
57
57
  element: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement>;
58
58
  midPoint?: import("@excalidraw/math").GlobalPoint;
59
59
  } | null;
60
+ hoveredArrowTextAnchor: {
61
+ elementId: import("@excalidraw/element/types").ExcalidrawArrowElement["id"];
62
+ anchor: "start" | "end" | "label";
63
+ } | null;
60
64
  frameToHighlight: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
61
65
  frameRendering: {
62
66
  enabled: boolean;
@@ -64,7 +68,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
64
68
  outline: boolean;
65
69
  clip: boolean;
66
70
  };
67
- editingFrame: string | null;
71
+ editingFrame: import("@excalidraw/element/types").ExcalidrawFrameLikeElement["id"] | null;
68
72
  elementsToHighlight: readonly import("@excalidraw/element/types").NonDeletedExcalidrawElement[] | null;
69
73
  editingTextElement: import("@excalidraw/element/types").ExcalidrawTextElement | null;
70
74
  preferredSelectionTool: {
@@ -188,6 +192,11 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
188
192
  elements: import("@excalidraw/element/types").OrderedExcalidrawElement[];
189
193
  appState: {
190
194
  viewModeEnabled: boolean;
195
+ activeTool: {
196
+ lastActiveTool: import("../types").ActiveTool | null;
197
+ locked: boolean;
198
+ fromSelection: boolean;
199
+ } & import("../types").ActiveTool;
191
200
  zenModeEnabled: boolean;
192
201
  gridModeEnabled: boolean;
193
202
  objectsSnapModeEnabled: boolean;
@@ -195,11 +204,6 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
195
204
  name: string | null;
196
205
  currentItemArrowType: "sharp" | "round" | "elbow";
197
206
  gridSize: number;
198
- activeTool: {
199
- lastActiveTool: import("../types").ActiveTool | null;
200
- locked: boolean;
201
- fromSelection: boolean;
202
- } & import("../types").ActiveTool;
203
207
  contextMenu: {
204
208
  items: import("../components/ContextMenu").ContextMenuItems;
205
209
  top: number;
@@ -224,6 +228,10 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
224
228
  element: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement>;
225
229
  midPoint?: import("@excalidraw/math").GlobalPoint;
226
230
  } | null;
231
+ hoveredArrowTextAnchor: {
232
+ elementId: import("@excalidraw/element/types").ExcalidrawArrowElement["id"];
233
+ anchor: "start" | "end" | "label";
234
+ } | null;
227
235
  frameToHighlight: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
228
236
  frameRendering: {
229
237
  enabled: boolean;
@@ -231,7 +239,7 @@ fileHandle?: FileSystemFileHandle | null) => Promise<{
231
239
  outline: boolean;
232
240
  clip: boolean;
233
241
  };
234
- editingFrame: string | null;
242
+ editingFrame: import("@excalidraw/element/types").ExcalidrawFrameLikeElement["id"] | null;
235
243
  elementsToHighlight: readonly import("@excalidraw/element/types").NonDeletedExcalidrawElement[] | null;
236
244
  editingTextElement: import("@excalidraw/element/types").ExcalidrawTextElement | null;
237
245
  preferredSelectionTool: {
@@ -19,6 +19,11 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
19
19
  elements: import("@excalidraw/element/types").OrderedExcalidrawElement[];
20
20
  appState: {
21
21
  viewModeEnabled: boolean;
22
+ activeTool: {
23
+ lastActiveTool: import("../types").ActiveTool | null;
24
+ locked: boolean;
25
+ fromSelection: boolean;
26
+ } & import("../types").ActiveTool;
22
27
  zenModeEnabled: boolean;
23
28
  gridModeEnabled: boolean;
24
29
  objectsSnapModeEnabled: boolean;
@@ -26,11 +31,6 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
26
31
  name: string | null;
27
32
  currentItemArrowType: "sharp" | "round" | "elbow";
28
33
  gridSize: number;
29
- activeTool: {
30
- lastActiveTool: import("../types").ActiveTool | null;
31
- locked: boolean;
32
- fromSelection: boolean;
33
- } & import("../types").ActiveTool;
34
34
  contextMenu: {
35
35
  items: import("../components/ContextMenu").ContextMenuItems;
36
36
  top: number;
@@ -55,6 +55,10 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
55
55
  element: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawBindableElement>;
56
56
  midPoint?: import("@excalidraw/math").GlobalPoint;
57
57
  } | null;
58
+ hoveredArrowTextAnchor: {
59
+ elementId: import("@excalidraw/element/types").ExcalidrawArrowElement["id"];
60
+ anchor: "start" | "end" | "label";
61
+ } | null;
58
62
  frameToHighlight: import("@excalidraw/element/types").NonDeleted<import("@excalidraw/element/types").ExcalidrawFrameLikeElement> | null;
59
63
  frameRendering: {
60
64
  enabled: boolean;
@@ -62,7 +66,7 @@ export declare const loadFromJSON: (localAppState: AppState, localElements: read
62
66
  outline: boolean;
63
67
  clip: boolean;
64
68
  };
65
- editingFrame: string | null;
69
+ editingFrame: import("@excalidraw/element/types").ExcalidrawFrameLikeElement["id"] | null;
66
70
  elementsToHighlight: readonly import("@excalidraw/element/types").NonDeletedExcalidrawElement[] | null;
67
71
  editingTextElement: import("@excalidraw/element/types").ExcalidrawTextElement | null;
68
72
  preferredSelectionTool: {