@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.
- package/dist/dev/index.js +9 -5
- package/dist/dev/index.js.map +2 -2
- package/dist/prod/index.js +3 -3
- 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 +15 -7
- 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 +5 -5
- 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 +20 -12
- package/dist/types/excalidraw/data/json.d.ts +10 -6
- 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 +1 -1
- 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>;
|
|
@@ -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:
|
|
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:
|
|
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:
|
|
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: {
|