@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.
- package/dist/dev/index.js +3951 -3199
- package/dist/dev/index.js.map +4 -4
- package/dist/prod/index.js +12 -12
- package/dist/types/common/src/constants.d.ts +2 -0
- package/dist/types/common/src/points.d.ts +1 -1
- package/dist/types/common/src/utils.d.ts +1 -1
- package/dist/types/element/src/arrowEndpointText.d.ts +49 -0
- package/dist/types/element/src/arrows/focus.d.ts +5 -2
- package/dist/types/element/src/binding.d.ts +12 -3
- package/dist/types/element/src/comparisons.d.ts +4 -4
- package/dist/types/element/src/convertToShape.d.ts +23 -0
- package/dist/types/element/src/dragElements.d.ts +27 -0
- package/dist/types/element/src/flowchart.d.ts +6 -6
- package/dist/types/element/src/groups.d.ts +1 -1
- package/dist/types/element/src/index.d.ts +2 -0
- package/dist/types/element/src/linearElementEditor.d.ts +7 -0
- package/dist/types/element/src/newElement.d.ts +13 -0
- package/dist/types/element/src/selection.d.ts +1 -1
- package/dist/types/element/src/textElement.d.ts +6 -3
- package/dist/types/excalidraw/actions/actionAddToLibrary.d.ts +15 -3
- package/dist/types/excalidraw/actions/actionBoundText.d.ts +10 -2
- package/dist/types/excalidraw/actions/actionCanvas.d.ts +99 -565
- package/dist/types/excalidraw/actions/actionClipboard.d.ts +10 -2
- package/dist/types/excalidraw/actions/actionCropEditor.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionDeleteSelected.d.ts +16 -3
- package/dist/types/excalidraw/actions/actionDeselect.d.ts +2 -1
- package/dist/types/excalidraw/actions/actionElementLink.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionElementLock.d.ts +10 -2
- package/dist/types/excalidraw/actions/actionExport.d.ts +12 -4
- package/dist/types/excalidraw/actions/actionFrame.d.ts +15 -178
- package/dist/types/excalidraw/actions/actionGroup.d.ts +10 -2
- package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +6 -1
- package/dist/types/excalidraw/actions/actionLink.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionMenu.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionProperties.d.ts +10 -2
- package/dist/types/excalidraw/actions/actionSelectAll.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionStyles.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionTextAutoResize.d.ts +1 -1
- package/dist/types/excalidraw/actions/actionToggleArrowBinding.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionToggleMidpointSnapping.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionToggleStats.d.ts +5 -1
- package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +6 -2
- package/dist/types/excalidraw/actions/actionToggleZenMode.d.ts +5 -1
- package/dist/types/excalidraw/actions/index.d.ts +0 -1
- package/dist/types/excalidraw/actions/manager.d.ts +1 -0
- package/dist/types/excalidraw/actions/shortcuts.d.ts +1 -1
- package/dist/types/excalidraw/actions/types.d.ts +5 -1
- package/dist/types/excalidraw/appState.d.ts +4 -4
- package/dist/types/excalidraw/components/Actions.d.ts +16 -10
- package/dist/types/excalidraw/components/App.arrowText.d.ts +72 -0
- package/dist/types/excalidraw/components/App.cursor.d.ts +31 -0
- package/dist/types/excalidraw/components/App.d.ts +322 -76
- package/dist/types/excalidraw/components/App.drawshape.d.ts +55 -0
- package/dist/types/excalidraw/components/App.flowchart.d.ts +21 -0
- package/dist/types/excalidraw/components/App.viewport.d.ts +73 -0
- package/dist/types/excalidraw/components/{ToolButton.d.ts → IconButton.d.ts} +16 -19
- package/dist/types/excalidraw/components/LaserPointerButton.d.ts +2 -4
- package/dist/types/excalidraw/components/LayerUI.d.ts +4 -2
- package/dist/types/excalidraw/components/LockButton.d.ts +3 -4
- package/dist/types/excalidraw/components/MagicButton.d.ts +0 -2
- package/dist/types/excalidraw/components/MobileMenu.d.ts +4 -4
- package/dist/types/excalidraw/components/MobileToolbar.d.ts +9 -0
- package/dist/types/excalidraw/components/PenModeButton.d.ts +2 -5
- package/dist/types/excalidraw/components/Popover.d.ts +1 -3
- package/dist/types/excalidraw/components/{ButtonIcon.d.ts → RadioButton.d.ts} +2 -5
- package/dist/types/excalidraw/components/ToolPopover.d.ts +3 -6
- package/dist/types/excalidraw/components/Toolbar.d.ts +11 -0
- package/dist/types/excalidraw/components/Tools.d.ts +145 -0
- package/dist/types/excalidraw/components/canvases/InteractiveCanvas.d.ts +2 -0
- package/dist/types/excalidraw/components/footer/Footer.d.ts +3 -1
- package/dist/types/excalidraw/components/icons.d.ts +1 -1
- package/dist/types/excalidraw/components/main-menu/DefaultItems.d.ts +1 -1
- package/dist/types/excalidraw/components/positionElementBesideCursor.d.ts +26 -0
- package/dist/types/excalidraw/components/shapeActionPredicates.d.ts +39 -0
- package/dist/types/excalidraw/data/blob.d.ts +14 -6
- package/dist/types/excalidraw/data/json.d.ts +7 -3
- package/dist/types/excalidraw/drawShapeTrail.d.ts +16 -0
- package/dist/types/excalidraw/scene/types.d.ts +3 -0
- package/dist/types/excalidraw/types.d.ts +199 -13
- package/dist/types/excalidraw/viewport.d.ts +20 -64
- package/dist/types/laser-pointer/src/state.d.ts +1 -0
- package/dist/types/math/src/index.d.ts +1 -0
- package/dist/types/math/src/pca.d.ts +79 -0
- package/dist/types/math/src/polygon.d.ts +25 -1
- package/package.json +4 -4
- package/dist/types/excalidraw/actions/actionEmbeddable.d.ts +0 -173
- package/dist/types/excalidraw/components/HandButton.d.ts +0 -10
- package/dist/types/excalidraw/components/MobileToolBar.d.ts +0 -10
- package/dist/types/excalidraw/components/shapes.d.ts +0 -270
- package/dist/types/excalidraw/cursor.d.ts +0 -5
- 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
|
|
6
|
-
type
|
|
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
|
-
|
|
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
|
|
23
|
+
type IconButtonProps = (IconButtonBaseProps & {
|
|
27
24
|
type: "button";
|
|
28
25
|
children?: React.ReactNode;
|
|
29
26
|
onClick?(event: React.MouseEvent): void;
|
|
30
|
-
}) | (
|
|
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
|
-
}) | (
|
|
39
|
-
type: "
|
|
31
|
+
}) | (IconButtonBaseProps & {
|
|
32
|
+
type: "toggle";
|
|
40
33
|
checked: boolean;
|
|
41
|
-
|
|
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
|
|
45
|
+
export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<unknown>>;
|
|
49
46
|
export {};
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
|
|
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:
|
|
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,
|
|
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
|
-
|
|
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:
|
|
8
|
+
export declare const LockButton: (props: LockButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
9
|
export {};
|
|
@@ -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,
|
|
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
|
-
|
|
18
|
+
defaultUIEnabled: boolean;
|
|
19
|
+
scrollBackToContentUIEnabled: boolean;
|
|
20
20
|
app: AppClassProperties;
|
|
21
21
|
};
|
|
22
|
-
export declare const MobileMenu: ({ appState, elements, actionManager, setAppState,
|
|
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
|
-
|
|
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:
|
|
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,
|
|
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
|
|
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
|
|
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
|
|
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,
|
|
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:
|
|
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:
|
|
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:
|
|
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;
|