@excalidraw/element 0.18.0-063e025 → 0.18.0-1118751

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 (154) hide show
  1. package/dist/dev/index.js +13047 -9808
  2. package/dist/dev/index.js.map +4 -4
  3. package/dist/prod/index.js +19 -19
  4. package/dist/types/common/src/colors.d.ts +22 -0
  5. package/dist/types/common/src/constants.d.ts +54 -0
  6. package/dist/types/common/src/keys.d.ts +4 -0
  7. package/dist/types/common/src/points.d.ts +1 -1
  8. package/dist/types/common/src/random.d.ts +7 -0
  9. package/dist/types/common/src/utils.d.ts +1 -1
  10. package/dist/types/element/src/Scene.d.ts +1 -1
  11. package/dist/types/element/src/arrowEndpointText.d.ts +49 -0
  12. package/dist/types/element/src/arrows/focus.d.ts +5 -2
  13. package/dist/types/element/src/binding.d.ts +15 -8
  14. package/dist/types/element/src/bucketFill.d.ts +110 -0
  15. package/dist/types/element/src/collision.d.ts +8 -5
  16. package/dist/types/element/src/comparisons.d.ts +7 -5
  17. package/dist/types/element/src/convertToShape.d.ts +23 -0
  18. package/dist/types/element/src/delta.d.ts +23 -1
  19. package/dist/types/element/src/dragElements.d.ts +27 -0
  20. package/dist/types/element/src/duplicate.d.ts +60 -0
  21. package/dist/types/element/src/flowchart.d.ts +10 -6
  22. package/dist/types/element/src/frame.d.ts +2 -2
  23. package/dist/types/element/src/groups.d.ts +1 -1
  24. package/dist/types/element/src/index.d.ts +4 -0
  25. package/dist/types/element/src/linearElementEditor.d.ts +17 -0
  26. package/dist/types/element/src/mutateElement.d.ts +1 -1
  27. package/dist/types/element/src/newElement.d.ts +37 -2
  28. package/dist/types/element/src/renderElement.d.ts +21 -4
  29. package/dist/types/element/src/selection.d.ts +1 -1
  30. package/dist/types/element/src/shape.d.ts +27 -1
  31. package/dist/types/element/src/sizeHelpers.d.ts +6 -0
  32. package/dist/types/element/src/sortElements.d.ts +10 -0
  33. package/dist/types/element/src/stickyNote.d.ts +183 -0
  34. package/dist/types/element/src/textElement.d.ts +7 -3
  35. package/dist/types/element/src/transform.d.ts +25 -6
  36. package/dist/types/element/src/typeChecks.d.ts +3 -2
  37. package/dist/types/element/src/types.d.ts +35 -6
  38. package/dist/types/element/src/utils.d.ts +15 -4
  39. package/dist/types/element/src/zindex.d.ts +1 -1
  40. package/dist/types/excalidraw/actions/actionAddToLibrary.d.ts +48 -9
  41. package/dist/types/excalidraw/actions/actionAlign.d.ts +6 -6
  42. package/dist/types/excalidraw/actions/actionBoundText.d.ts +32 -6
  43. package/dist/types/excalidraw/actions/actionCanvas.d.ts +173 -576
  44. package/dist/types/excalidraw/actions/actionClipboard.d.ts +32 -6
  45. package/dist/types/excalidraw/actions/actionCropEditor.d.ts +16 -3
  46. package/dist/types/excalidraw/actions/actionDeleteSelected.d.ts +50 -10
  47. package/dist/types/excalidraw/actions/actionDeselect.d.ts +13 -3
  48. package/dist/types/excalidraw/actions/actionDistribute.d.ts +2 -2
  49. package/dist/types/excalidraw/actions/actionElementLink.d.ts +16 -3
  50. package/dist/types/excalidraw/actions/actionElementLock.d.ts +32 -6
  51. package/dist/types/excalidraw/actions/actionExport.d.ts +34 -8
  52. package/dist/types/excalidraw/actions/actionFinalize.d.ts +1 -0
  53. package/dist/types/excalidraw/actions/actionFrame.d.ts +99 -185
  54. package/dist/types/excalidraw/actions/actionGroup.d.ts +33 -7
  55. package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +68 -4
  56. package/dist/types/excalidraw/actions/actionLink.d.ts +16 -3
  57. package/dist/types/excalidraw/actions/actionMenu.d.ts +16 -3
  58. package/dist/types/excalidraw/actions/actionProperties.d.ts +45 -12
  59. package/dist/types/excalidraw/actions/actionSelectAll.d.ts +16 -3
  60. package/dist/types/excalidraw/actions/actionStyles.d.ts +17 -4
  61. package/dist/types/excalidraw/actions/actionTextAutoResize.d.ts +1 -1
  62. package/dist/types/excalidraw/actions/actionToggleArrowBinding.d.ts +16 -3
  63. package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +16 -3
  64. package/dist/types/excalidraw/actions/actionToggleMidpointSnapping.d.ts +16 -3
  65. package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +16 -3
  66. package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +16 -3
  67. package/dist/types/excalidraw/actions/actionToggleStats.d.ts +16 -3
  68. package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +17 -4
  69. package/dist/types/excalidraw/actions/actionToggleZenMode.d.ts +16 -3
  70. package/dist/types/excalidraw/actions/colorTargets.d.ts +39 -0
  71. package/dist/types/excalidraw/actions/index.d.ts +1 -2
  72. package/dist/types/excalidraw/actions/manager.d.ts +1 -0
  73. package/dist/types/excalidraw/actions/shortcuts.d.ts +1 -1
  74. package/dist/types/excalidraw/actions/types.d.ts +5 -1
  75. package/dist/types/excalidraw/appState.d.ts +26 -5
  76. package/dist/types/excalidraw/components/Actions.d.ts +16 -10
  77. package/dist/types/excalidraw/components/App.arrowText.d.ts +104 -0
  78. package/dist/types/excalidraw/components/App.bucketFill.d.ts +48 -0
  79. package/dist/types/excalidraw/components/App.cursor.d.ts +38 -0
  80. package/dist/types/excalidraw/components/App.d.ts +468 -99
  81. package/dist/types/excalidraw/components/App.drawshape.d.ts +55 -0
  82. package/dist/types/excalidraw/components/App.duplicate.d.ts +51 -0
  83. package/dist/types/excalidraw/components/App.flowchart.d.ts +21 -0
  84. package/dist/types/excalidraw/components/App.pan.d.ts +54 -0
  85. package/dist/types/excalidraw/components/App.toolDrag.d.ts +63 -0
  86. package/dist/types/excalidraw/components/App.viewport.d.ts +73 -0
  87. package/dist/types/excalidraw/components/App.wheel.d.ts +26 -0
  88. package/dist/types/excalidraw/components/ColorPicker/ColorPicker.d.ts +8 -2
  89. package/dist/types/excalidraw/components/ColorPicker/CustomColorList.d.ts +3 -1
  90. package/dist/types/excalidraw/components/ColorPicker/Picker.d.ts +5 -1
  91. package/dist/types/excalidraw/components/ColorPicker/PickerColorList.d.ts +9 -2
  92. package/dist/types/excalidraw/components/ColorPicker/ShadeList.d.ts +4 -2
  93. package/dist/types/excalidraw/components/ColorPicker/TopPicks.d.ts +8 -1
  94. package/dist/types/excalidraw/components/ColorPicker/colorTopPicksDnD.d.ts +11 -0
  95. package/dist/types/excalidraw/components/ColorPicker/keyboardNavHandlers.d.ts +2 -1
  96. package/dist/types/excalidraw/components/FontPicker/FontPicker.d.ts +4 -1
  97. package/dist/types/excalidraw/components/FontPicker/FontPickerList.d.ts +6 -1
  98. package/dist/types/excalidraw/components/FontPicker/fontTopPicksDnD.d.ts +12 -0
  99. package/dist/types/excalidraw/components/IconButton.d.ts +48 -0
  100. package/dist/types/excalidraw/components/LaserPointerButton.d.ts +2 -4
  101. package/dist/types/excalidraw/components/LayerUI.d.ts +5 -2
  102. package/dist/types/excalidraw/components/LockButton.d.ts +3 -4
  103. package/dist/types/excalidraw/components/MagicButton.d.ts +0 -2
  104. package/dist/types/excalidraw/components/MobileMenu.d.ts +4 -4
  105. package/dist/types/excalidraw/components/MobileToolbar.d.ts +9 -0
  106. package/dist/types/excalidraw/components/PenModeButton.d.ts +2 -5
  107. package/dist/types/excalidraw/components/Popover.d.ts +1 -3
  108. package/dist/types/excalidraw/components/{ButtonIcon.d.ts → RadioButton.d.ts} +2 -5
  109. package/dist/types/excalidraw/components/ToolPopover.d.ts +3 -6
  110. package/dist/types/excalidraw/components/Toolbar.d.ts +11 -0
  111. package/dist/types/excalidraw/components/Tools.d.ts +151 -0
  112. package/dist/types/excalidraw/components/TopPicksDnD/TopPicksContextMenu.d.ts +14 -0
  113. package/dist/types/excalidraw/components/TopPicksDnD/TopPicksTip.d.ts +11 -0
  114. package/dist/types/excalidraw/components/TopPicksDnD/topPicksDnD.d.ts +58 -0
  115. package/dist/types/excalidraw/components/UserList.d.ts +3 -2
  116. package/dist/types/excalidraw/components/ViewportStatusFrame/ViewportStatusFrame.d.ts +11 -0
  117. package/dist/types/excalidraw/components/canvases/InteractiveCanvas.d.ts +2 -0
  118. package/dist/types/excalidraw/components/canvases/NewElementCanvas.d.ts +2 -0
  119. package/dist/types/excalidraw/components/footer/Footer.d.ts +3 -1
  120. package/dist/types/excalidraw/components/icons.d.ts +5 -1
  121. package/dist/types/excalidraw/components/main-menu/DefaultItems.d.ts +2 -1
  122. package/dist/types/excalidraw/components/positionElementBesideCursor.d.ts +26 -0
  123. package/dist/types/excalidraw/components/shapeActionPredicates.d.ts +39 -0
  124. package/dist/types/excalidraw/data/blob.d.ts +36 -10
  125. package/dist/types/excalidraw/data/json.d.ts +18 -5
  126. package/dist/types/excalidraw/drawShapeTrail.d.ts +16 -0
  127. package/dist/types/excalidraw/fonts/Fonts.d.ts +3 -2
  128. package/dist/types/excalidraw/hooks/useTextEditorFocus.d.ts +5 -5
  129. package/dist/types/excalidraw/lasso/utils.d.ts +2 -0
  130. package/dist/types/excalidraw/renderOverrides.d.ts +9 -0
  131. package/dist/types/excalidraw/renderer/helpers.d.ts +25 -0
  132. package/dist/types/excalidraw/renderer/interactiveScene.d.ts +1 -1
  133. package/dist/types/excalidraw/scene/Renderer.d.ts +64 -2
  134. package/dist/types/excalidraw/scene/index.d.ts +1 -1
  135. package/dist/types/excalidraw/scene/types.d.ts +6 -1
  136. package/dist/types/excalidraw/types.d.ts +341 -21
  137. package/dist/types/excalidraw/viewport.d.ts +31 -66
  138. package/dist/types/laser-pointer/src/state.d.ts +1 -0
  139. package/dist/types/math/src/curve.d.ts +19 -12
  140. package/dist/types/math/src/index.d.ts +1 -0
  141. package/dist/types/math/src/pca.d.ts +79 -0
  142. package/dist/types/math/src/polygon.d.ts +25 -1
  143. package/dist/types/math/src/segment.d.ts +6 -0
  144. package/dist/types/utils/src/export.d.ts +1 -0
  145. package/dist/types/utils/src/shape.d.ts +2 -2
  146. package/package.json +4 -4
  147. package/dist/types/excalidraw/actions/actionEmbeddable.d.ts +0 -173
  148. package/dist/types/excalidraw/components/FollowMode/FollowMode.d.ts +0 -10
  149. package/dist/types/excalidraw/components/HandButton.d.ts +0 -10
  150. package/dist/types/excalidraw/components/MobileToolBar.d.ts +0 -10
  151. package/dist/types/excalidraw/components/ToolButton.d.ts +0 -49
  152. package/dist/types/excalidraw/components/shapes.d.ts +0 -270
  153. package/dist/types/excalidraw/cursor.d.ts +0 -5
  154. package/dist/types/excalidraw/scene/zoom.d.ts +0 -12
@@ -0,0 +1,55 @@
1
+ import { DrawShapeTrail } from "../drawShapeTrail";
2
+ import type App from "./App";
3
+ import type { PointerDownState } from "../types";
4
+ /**
5
+ * Captures the App state management for the drawShape tool (free-form
6
+ * sketch converted into a recognized excalidraw element). Pointer events
7
+ * are piped here from App.
8
+ *
9
+ * The gesture is committed by `finalize()` — recognize → (maybe upgrade
10
+ * line to arrow) → insert → bind endpoints — which is invoked from within
11
+ * `actionFinalize`, the editor's single finalization funnel. Whatever
12
+ * triggers a finalize (the gesture's own pointerup, a mid-gesture paste
13
+ * switching tools, …), the pending sketch resolves there exactly once.
14
+ */
15
+ export declare class AppDrawShape {
16
+ private app;
17
+ trail: DrawShapeTrail;
18
+ /** a pointerdown started a sketch that `finalize()` hasn't resolved yet */
19
+ private gestureInProgress;
20
+ constructor(app: App);
21
+ stop: () => void;
22
+ hasPendingGesture: () => boolean;
23
+ handlePointerDown: (pointerDownState: PointerDownState) => void;
24
+ /** returns true when the pointermove was consumed by the shape preview */
25
+ handlePointerMove: (pointerCoords: {
26
+ x: number;
27
+ y: number;
28
+ }) => boolean;
29
+ /**
30
+ * Binds both endpoints of a freshly inserted drawShape arrow to the
31
+ * bindable elements they hover, if any.
32
+ *
33
+ * Endpoints bind in "orbit" mode — the arrow starts/ends at the target's
34
+ * outline — even when the stroke was started or released inside the shape
35
+ * (a sketched connector aims at the shape, not at a point inside it). The
36
+ * exception is a sketch contained in a single shape: both ends then bind
37
+ * "inside" and stay where they were drawn, like the interactive
38
+ * inside→inside flow.
39
+ */
40
+ private bindRecognizedArrow;
41
+ /**
42
+ * A sketched line that connects a bindable element with something else —
43
+ * another element or blank canvas — was meant as a connector: upgrade it
44
+ * to an arrow (called before insertion). A line touching no shape, or
45
+ * contained in a single shape (an annotation, not a connector), stays a
46
+ * line.
47
+ */
48
+ private maybeUpgradeLineToArrow;
49
+ /**
50
+ * Commits the pending sketch, if any, and clears the trail. Invoked from
51
+ * within `actionFinalize` — never call directly, execute `actionFinalize`
52
+ * instead so element insertion flows into the action's returned elements.
53
+ */
54
+ finalize: () => void;
55
+ }
@@ -0,0 +1,51 @@
1
+ import { duplicateElements } from "@excalidraw/element";
2
+ import type { ExcalidrawElement } from "@excalidraw/element/types";
3
+ import type { PointerDownState } from "../types";
4
+ import type App from "./App";
5
+ type Duplication = Pick<ReturnType<typeof duplicateElements>, "duplicatedElements" | "duplicateElementsMap" | "origElementsMap" | "origIdToDuplicateId" | "duplicateIdToOrigId">;
6
+ /**
7
+ * Owns the duplication paths which involve the host (`props.onDuplicate`):
8
+ * duplicating elements into the scene (paste, library insert etc.), and
9
+ * duplicating the dragged selection (alt-drag). The duplicate action shares
10
+ * `runOnDuplicate()`.
11
+ */
12
+ export declare class AppDuplicate {
13
+ private app;
14
+ constructor(app: App);
15
+ /**
16
+ * Hands the duplication over to the host's `props.onDuplicate` (if any),
17
+ * and reconciles what it returned with the duplicates.
18
+ *
19
+ * @returns next elements, and the duplicates that weren't vetoed
20
+ */
21
+ runOnDuplicate: (duplication: Duplication, nextElements: ExcalidrawElement[],
22
+ /** excludes the duplicated elements */
23
+ prevElements: readonly ExcalidrawElement[]) => {
24
+ elements: ExcalidrawElement[];
25
+ duplicatedElements: import("@excalidraw/element/types").NonDeletedExcalidrawElement[];
26
+ };
27
+ /**
28
+ * Duplicates elements so that they end up centered at the scene coords
29
+ * (and in the frame at that point, if any). Doesn't update the scene.
30
+ *
31
+ * @returns `null` if the host vetoed the duplication
32
+ */
33
+ duplicateAtSceneCoords: (elements: readonly ExcalidrawElement[], { x, y }: {
34
+ x: number;
35
+ y: number;
36
+ }, opts?: {
37
+ retainSeed?: boolean;
38
+ preserveFrameChildrenOrder?: boolean;
39
+ }) => {
40
+ nextElements: ExcalidrawElement[];
41
+ duplicatedElements: import("@excalidraw/element/types").NonDeletedExcalidrawElement[];
42
+ } | null;
43
+ /**
44
+ * Duplicates the selection being dragged: the originals go back to where
45
+ * the drag started, and the drag continues with the duplicates.
46
+ *
47
+ * If the host vetoes the duplication, the originals keep being dragged.
48
+ */
49
+ duplicateDraggedSelection: (pointerDownState: PointerDownState, event: PointerEvent) => void;
50
+ }
51
+ export {};
@@ -0,0 +1,21 @@
1
+ import type React from "react";
2
+ import type App from "./App";
3
+ import type { PendingExcalidrawElements } from "../types";
4
+ /**
5
+ * Captures the App state management for the flowchart functionality.
6
+ */
7
+ export declare class AppFlowchart {
8
+ private app;
9
+ private creator;
10
+ private navigator;
11
+ constructor(app: App);
12
+ get pendingNodes(): PendingExcalidrawElements | null;
13
+ get isCreatingChart(): boolean;
14
+ /** ends any in-progress flowchart creation/navigation session */
15
+ clear: () => void;
16
+ handleKeyEvent: (event: React.KeyboardEvent | KeyboardEvent) => boolean;
17
+ private resolveKeyboardEventToOperation;
18
+ private selectAndReveal;
19
+ private captureUpdate;
20
+ private static getLinkDirectionFromKey;
21
+ }
@@ -0,0 +1,54 @@
1
+ import type React from "react";
2
+ import type App from "./App";
3
+ /**
4
+ * The drag-pan: a pointer drag that moves the canvas — the wheel or the
5
+ * secondary button, the main button while space is held or the hand tool
6
+ * is active, or any button in view mode. One session at a time, owning its
7
+ * window listeners and teardown; wheel input is gated on it (see
8
+ * `AppWheel`).
9
+ *
10
+ * A secondary-button session is a pan only once the pointer travels past
11
+ * the drag threshold; released before that, it is a right-click. The
12
+ * platform's `contextmenu` event opens the menu for a right-click where it
13
+ * follows the release (Windows), as it always has; where it comes with the
14
+ * press (macOS, Linux) it is swallowed — a drag cannot be told from a
15
+ * click yet — and the session opens the menu on release instead.
16
+ */
17
+ export declare class AppPan {
18
+ private app;
19
+ private dependencies;
20
+ /** space held down turns a main-button drag into a pan */
21
+ private spaceHeld;
22
+ private active;
23
+ /** the secondary-button session, while one is active */
24
+ private secondary;
25
+ /** the platform fires `contextmenu` on mouseup (Windows) or on mousedown
26
+ * (macOS, Linux); the one belonging to a secondary-button session is not a
27
+ * new click, whichever side of the session it lands on */
28
+ private suppressNextContextMenu;
29
+ /** applies the pointer move the session is holding back for its next
30
+ * frame, if any */
31
+ private pendingMoveFlush;
32
+ private teardown;
33
+ constructor(app: App, dependencies: {
34
+ /** pointers currently down (a two-finger gesture is not a pan) */
35
+ getPointerCount: () => number;
36
+ });
37
+ isActive: () => boolean;
38
+ isSpaceHeld: () => boolean;
39
+ setSpaceHeld: (held: boolean) => void;
40
+ /** applies the pointer move still waiting for its frame, if any */
41
+ flushMove: () => void;
42
+ /** ends the active session, if any — pointerup may never arrive (the user
43
+ * tabs away, a new pointerdown lands first) */
44
+ end: () => void;
45
+ /**
46
+ * Whether a `contextmenu` event belongs to a secondary-button session and
47
+ * must not open the menu: it came with the press (the session decides on
48
+ * release), or it follows a release that turned out to be a drag.
49
+ */
50
+ consumesContextMenuEvent: () => boolean;
51
+ /** starts a session for the pointerdown if it qualifies; returns whether
52
+ * it did */
53
+ start: (event: React.PointerEvent<HTMLElement> | MouseEvent) => boolean;
54
+ }
@@ -0,0 +1,63 @@
1
+ import type { ExcalidrawNonSelectionElement, NonDeleted } from "@excalidraw/element/types";
2
+ import type App from "./App";
3
+ import type { ToolType } from "../types";
4
+ type ScenePoint = {
5
+ x: number;
6
+ y: number;
7
+ };
8
+ /** what a drag places: any element the new-element canvas can preview */
9
+ type DraggedElement = NonDeleted<ExcalidrawNonSelectionElement>;
10
+ /**
11
+ * A tool the user can drag out of the toolbar to drop a default-sized element
12
+ * where the pointer is released.
13
+ */
14
+ type DraggableTool = {
15
+ /** the element the drop creates, centered on the pointer */
16
+ createElement: (app: App, center: ScenePoint) => DraggedElement;
17
+ /** what the tool does once its element is on the canvas (e.g. start editing) */
18
+ onDrop?: (app: App, element: DraggedElement) => void;
19
+ };
20
+ /**
21
+ * The tools that can be dragged out of the toolbar. Add an entry to make a
22
+ * tool's button draggable — the gesture, preview and drop are shared.
23
+ */
24
+ export declare const DRAGGABLE_TOOLS: Partial<Record<ToolType, DraggableTool>>;
25
+ /** CSS opacity of the preview canvas while dragging */
26
+ export declare const TOOL_DRAG_PREVIEW_OPACITY = 0.5;
27
+ /**
28
+ * Dragging a tool out of the toolbar. The preview element exists only here
29
+ * until the drop — it is not in the scene, the store or the history, so
30
+ * collaborators never see it and an aborted drag leaves nothing behind. It
31
+ * is painted by the `NewElementCanvas`, drawn exactly as it will land, with
32
+ * the canvas itself made translucent.
33
+ *
34
+ * The button arms on pointerdown; the drag starts once the pointer has
35
+ * moved `DRAGGING_THRESHOLD`, so a plain click still selects the tool. The
36
+ * gesture lives on the owner window (the pointer leaves the button at once),
37
+ * like the other pointer gestures in `App`.
38
+ */
39
+ export declare class AppToolDrag {
40
+ private app;
41
+ constructor(app: App);
42
+ /** the element under the pointer while dragging, `null` otherwise */
43
+ preview: DraggedElement | null;
44
+ private armed;
45
+ private tool;
46
+ private type;
47
+ static isDraggable: (type: ToolType) => boolean;
48
+ isDragging: () => boolean;
49
+ /**
50
+ * Arm a drag from a tool button's pointerdown. Returns whether the tool is
51
+ * draggable (the caller lets a non-draggable press fall through).
52
+ */
53
+ handleButtonPointerDown: (type: ToolType, event: PointerEvent) => boolean;
54
+ private onPointerMove;
55
+ private onPointerUp;
56
+ private onKeyDown;
57
+ /** drop the gesture without a trace */
58
+ cancel: () => void;
59
+ private isOverCanvas;
60
+ private addListeners;
61
+ private removeListeners;
62
+ }
63
+ export {};
@@ -0,0 +1,73 @@
1
+ import { type StylesPanelMode } from "@excalidraw/common";
2
+ import type { NonDeletedSceneElementsMap } from "@excalidraw/element/types";
3
+ import { type SetViewportOptions } from "../viewport";
4
+ import type { AppProps, AppState, Offsets, ScrollConstraints, ViewportOffsets, ViewportOffsetsOptions, ViewportUIName } from "../types";
5
+ import type App from "./App";
6
+ export declare const SCROLL_TO_CONTENT_ANIMATION_KEY = "animateScrollToContent";
7
+ export declare const SCROLL_CONSTRAINTS_SNAP_BACK_ANIMATION_KEY = "animateScrollConstraintsSnapBack";
8
+ /** single source of truth for the `--right-sidebar-width` CSS variable */
9
+ export declare const RIGHT_SIDEBAR_WIDTH = 302;
10
+ type Viewport = Pick<AppState, "scrollX" | "scrollY" | "zoom">;
11
+ type AppViewportDependencies = {
12
+ getContainer: () => HTMLDivElement | null;
13
+ getStylesPanelMode: () => StylesPanelMode;
14
+ isGestureActive: () => boolean;
15
+ };
16
+ /**
17
+ * Rubberband snap-back: animates the viewport from its current (possibly
18
+ * overscrolled) position back inside the lock box via the shared
19
+ * AnimationController. No-op when already within the hard bounds (or when
20
+ * there is no lock).
21
+ */
22
+ export declare const snapBackToConstraints: (state: Pick<AppState, "scrollX" | "scrollY" | "zoom" | "width" | "height" | "scrollConstraints">, onFrame: (updater: (state: Pick<AppState, "scrollX" | "scrollY" | "zoom" | "width" | "height" | "scrollConstraints">) => Viewport | null) => void, duration?: number) => void;
23
+ /**
24
+ * Owns viewport state transitions and App-bound viewport concerns. Pure
25
+ * viewport geometry remains in `viewport.ts` so actions and public helpers can
26
+ * calculate state without an App instance.
27
+ */
28
+ export declare class AppViewport {
29
+ private app;
30
+ private dependencies;
31
+ lastPosition: {
32
+ x: number;
33
+ y: number;
34
+ };
35
+ private activeTransition;
36
+ private uiLastMeasured;
37
+ constructor(app: App, dependencies: AppViewportDependencies);
38
+ get isAnimating(): boolean;
39
+ /** Whether a programmatic transition into a locked viewport currently owns
40
+ * user pan/zoom input. */
41
+ get isLockedTransitionPending(): boolean;
42
+ invalidateUIOffset: (name: ViewportUIName) => void;
43
+ /**
44
+ * Resolves user-supplied viewport offsets into concrete per-side pixel
45
+ * values. Static sides take precedence over UI-derived sides.
46
+ */
47
+ resolveOffsets: (offsets: ViewportOffsets | undefined) => Offsets | undefined;
48
+ /**
49
+ * Measures the currently rendered editor UI and returns the usable viewport
50
+ * offsets, including optional padding and reserved hidden surfaces.
51
+ */
52
+ getOffsets: (opts?: ViewportOffsetsOptions) => Offsets;
53
+ /** Resolves the host-supplied initial viewport against restored scene data. */
54
+ resolveInitialViewport: (opts: Omit<SetViewportOptions, "animation">, elementsMap: NonDeletedSceneElementsMap, appState: AppState) => (Viewport & {
55
+ scrollConstraints: ScrollConstraints | null;
56
+ }) | null;
57
+ /** Navigates to a target and optionally installs scroll/zoom constraints. */
58
+ setViewport: (opts: SetViewportOptions | null) => void;
59
+ /** Use when changing scrollX/scrollY/zoom based on user interaction. */
60
+ translate: <K extends keyof AppState>(state: AppState | Pick<AppState, K> | null | ((prevState: Readonly<AppState>, props: Readonly<AppProps>) => AppState | Pick<AppState, K> | null), opts?: {
61
+ zoomPreConstrained?: boolean;
62
+ preserveScrollConstraintsSnapBack?: boolean;
63
+ }) => boolean;
64
+ /** Clamps the viewport into the active scroll constraints. */
65
+ constrain: (overscroll?: number) => void;
66
+ /** Releases a held rubberband overscroll. */
67
+ releaseOverscroll: () => void;
68
+ private snapBack;
69
+ private snapBackDebounced;
70
+ private cancelTransition;
71
+ destroy: () => void;
72
+ }
73
+ export {};
@@ -0,0 +1,26 @@
1
+ import type App from "./App";
2
+ /**
3
+ * Wheel input over the editor: pans the canvas, or zooms it around the
4
+ * pointer (`viewport.lastPosition`) — on ctrl/cmd+wheel (which is also how
5
+ * a trackpad pinch is delivered), while the wheel button itself is held
6
+ * down, or on a plain wheel when the input device is a mouse
7
+ * (`appState.inputDevice`). Shift+wheel pans horizontally;
8
+ * ctrl/cmd+shift+wheel pans vertically.
9
+ */
10
+ export declare class AppWheel {
11
+ private app;
12
+ constructor(app: App);
13
+ /** the editor surfaces whose wheel input the editor consumes; everywhere
14
+ * else (menus, sidebars, …) the DOM keeps scrolling. The frame-name labels
15
+ * are DOM, but sit inside the container this listener is attached to */
16
+ private isOverEditorSurface;
17
+ handle: (event: WheelEvent) => void;
18
+ /**
19
+ * Prevents the browser's own zoom over the non-interactive editor while
20
+ * letting regular scroll through (trackpad pinch is delivered as
21
+ * ctrl+wheel).
22
+ */
23
+ preventBrowserZoom: (event: WheelEvent) => void;
24
+ /** zooms around the pointer by a wheel delta (positive = zoom out) */
25
+ private zoomBy;
26
+ }
@@ -2,7 +2,7 @@ import type { ColorTuple, ColorPaletteCustom } from "@excalidraw/common";
2
2
  import type { ExcalidrawElement } from "@excalidraw/element/types";
3
3
  import "./ColorPicker.scss";
4
4
  import type { ColorPickerType } from "./colorPickerUtils";
5
- import type { UIAppState } from "../../types";
5
+ import type { AppState, UIAppState } from "../../types";
6
6
  interface ColorPickerProps {
7
7
  type: ColorPickerType;
8
8
  /**
@@ -17,6 +17,12 @@ interface ColorPickerProps {
17
17
  palette?: ColorPaletteCustom | null;
18
18
  topPicks?: ColorTuple;
19
19
  updateData: (formData?: any) => void;
20
+ /** palette colors to hide from the popup, keeping hotkey positions */
21
+ excludedColors?: readonly string[];
22
+ /** allow users to customize the top picks strip by drag & dropping colors
23
+ * from the picker popup onto it. The value names the
24
+ * `appState.colorTopPicks` slot the customization is stored in */
25
+ customizableTopPicks?: keyof AppState["colorTopPicks"];
20
26
  }
21
- export declare const ColorPicker: ({ type, color, onChange, label, elements, palette, topPicks, updateData, appState, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
27
+ export declare const ColorPicker: import("react").MemoExoticComponent<({ type, color, onChange, label, elements, palette, topPicks, updateData, appState, excludedColors, customizableTopPicks, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element>;
22
28
  export {};
@@ -1,8 +1,10 @@
1
+ import type { Theme } from "@excalidraw/element/types";
1
2
  interface CustomColorListProps {
3
+ theme: Theme;
2
4
  colors: string[];
3
5
  color: string | null;
4
6
  onChange: (color: string) => void;
5
7
  label: string;
6
8
  }
7
- export declare const CustomColorList: ({ colors, color, onChange, label, }: CustomColorListProps) => import("react/jsx-runtime").JSX.Element;
9
+ export declare const CustomColorList: ({ theme, colors, color, onChange, label, }: CustomColorListProps) => import("react/jsx-runtime").JSX.Element;
8
10
  export {};
@@ -1,8 +1,9 @@
1
1
  import React from "react";
2
- import type { ExcalidrawElement } from "@excalidraw/element/types";
2
+ import type { ExcalidrawElement, Theme } from "@excalidraw/element/types";
3
3
  import type { ColorPaletteCustom } from "@excalidraw/common";
4
4
  import type { ColorPickerType } from "./colorPickerUtils";
5
5
  interface PickerProps {
6
+ theme: Theme;
6
7
  color: string | null;
7
8
  onChange: (color: string) => void;
8
9
  type: ColorPickerType;
@@ -14,6 +15,9 @@ interface PickerProps {
14
15
  onEyeDropperToggle: (force?: boolean) => void;
15
16
  onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
16
17
  showHotKey?: boolean;
18
+ excludedColors?: readonly string[];
19
+ /** present only while the top picks are customized */
20
+ onResetTopPicks?: () => void;
17
21
  }
18
22
  export declare const Picker: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<unknown>>;
19
23
  export {};
@@ -1,10 +1,17 @@
1
- import type { ColorPaletteCustom } from "@excalidraw/common";
1
+ import { type ColorPaletteCustom } from "@excalidraw/common";
2
+ import type { Theme } from "@excalidraw/element/types";
2
3
  interface PickerColorListProps {
4
+ theme: Theme;
3
5
  palette: ColorPaletteCustom;
4
6
  color: string | null;
5
7
  onChange: (color: string) => void;
6
8
  activeShade: number;
7
9
  showHotKey?: boolean;
10
+ /**
11
+ * palette colors to hide. Hidden entries keep their position in the hotkey
12
+ * order (their hotkey goes dead instead of remapping the colors after them).
13
+ */
14
+ excludedColors?: readonly string[];
8
15
  }
9
- declare const PickerColorList: ({ palette, color, onChange, activeShade, showHotKey, }: PickerColorListProps) => import("react/jsx-runtime").JSX.Element;
16
+ declare const PickerColorList: ({ theme, palette, color, onChange, activeShade, showHotKey, excludedColors, }: PickerColorListProps) => import("react/jsx-runtime").JSX.Element;
10
17
  export default PickerColorList;
@@ -1,9 +1,11 @@
1
- import type { ColorPaletteCustom } from "@excalidraw/common";
1
+ import { type ColorPaletteCustom } from "@excalidraw/common";
2
+ import type { Theme } from "@excalidraw/element/types";
2
3
  interface ShadeListProps {
4
+ theme: Theme;
3
5
  color: string | null;
4
6
  onChange: (color: string) => void;
5
7
  palette: ColorPaletteCustom;
6
8
  showHotKey?: boolean;
7
9
  }
8
- export declare const ShadeList: ({ color, onChange, palette, showHotKey, }: ShadeListProps) => import("react/jsx-runtime").JSX.Element;
10
+ export declare const ShadeList: ({ theme, color, onChange, palette, showHotKey, }: ShadeListProps) => import("react/jsx-runtime").JSX.Element;
9
11
  export {};
@@ -1,9 +1,16 @@
1
+ import type { Theme } from "@excalidraw/element/types";
1
2
  import type { ColorPickerType } from "./colorPickerUtils";
2
3
  interface TopPicksProps {
4
+ theme: Theme;
3
5
  onChange: (color: string) => void;
4
6
  type: ColorPickerType;
5
7
  activeColor: string | null;
6
8
  topPicks?: readonly string[];
9
+ /** present when the strip is user-customizable — enables the right-click
10
+ * context menu resetting the strip to its default picks */
11
+ onReset?: () => void;
12
+ /** whether custom picks are currently applied (enables the reset item) */
13
+ isCustomized?: boolean;
7
14
  }
8
- export declare const TopPicks: ({ onChange, type, activeColor, topPicks, }: TopPicksProps) => import("react/jsx-runtime").JSX.Element | null;
15
+ export declare const TopPicks: ({ theme, onChange, type, activeColor, topPicks, onReset, isCustomized, }: TopPicksProps) => import("react/jsx-runtime").JSX.Element | null;
9
16
  export {};
@@ -0,0 +1,11 @@
1
+ import type { TopPicksDnD } from "../TopPicksDnD/topPicksDnD";
2
+ export type ColorPickerDnD = TopPicksDnD<string>;
3
+ export declare const ColorPickerDnDContext: import("react").Context<ColorPickerDnD | null>;
4
+ export declare const useColorPickerDnD: () => ColorPickerDnD | null;
5
+ /** pinning colors from the picker popup (palette/shades/custom) or the
6
+ * active-color trigger to the top-picks strip, and reordering the strip */
7
+ export declare const useColorTopPicksDnD: ({ enabled, picks, onPicksChange, }: {
8
+ enabled: boolean;
9
+ picks: readonly string[];
10
+ onPicksChange: (picks: string[]) => void;
11
+ }) => ColorPickerDnD;
@@ -12,9 +12,10 @@ interface ColorPickerKeyNavHandlerProps {
12
12
  activeShade: number;
13
13
  onEyeDropperToggle: (force?: boolean) => void;
14
14
  onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
15
+ excludedColors?: readonly string[];
15
16
  }
16
17
  /**
17
18
  * @returns true if the event was handled
18
19
  */
19
- export declare const colorPickerKeyNavHandler: ({ event, activeColorPickerSection, palette, color, onChange, customColors, setActiveColorPickerSection, updateData, activeShade, onEyeDropperToggle, onEscape, }: ColorPickerKeyNavHandlerProps) => boolean;
20
+ export declare const colorPickerKeyNavHandler: ({ event, activeColorPickerSection, palette, color, onChange, customColors, setActiveColorPickerSection, updateData, activeShade, onEyeDropperToggle, onEscape, excludedColors, }: ColorPickerKeyNavHandlerProps) => boolean;
20
21
  export {};
@@ -12,11 +12,14 @@ interface FontPickerProps {
12
12
  isOpened: boolean;
13
13
  selectedFontFamily: FontFamilyValues | null;
14
14
  hoveredFontFamily: FontFamilyValues | null;
15
+ /** user-customized top picks (`appState.fontTopPicks`) */
16
+ topPicks: readonly FontFamilyValues[] | null;
15
17
  onSelect: (fontFamily: FontFamilyValues) => void;
18
+ onTopPicksChange: (fontTopPicks: FontFamilyValues[] | null) => void;
16
19
  onHover: (fontFamily: FontFamilyValues) => void;
17
20
  onLeave: () => void;
18
21
  onPopupChange: (open: boolean) => void;
19
22
  compactMode?: boolean;
20
23
  }
21
- export declare const FontPicker: React.MemoExoticComponent<({ isOpened, selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onPopupChange, compactMode, }: FontPickerProps) => import("react/jsx-runtime").JSX.Element>;
24
+ export declare const FontPicker: React.MemoExoticComponent<({ isOpened, selectedFontFamily, hoveredFontFamily, topPicks, onSelect, onTopPicksChange, onHover, onLeave, onPopupChange, compactMode, }: FontPickerProps) => import("react/jsx-runtime").JSX.Element>;
22
25
  export {};
@@ -3,6 +3,7 @@ import { type FontFamilyValues } from "@excalidraw/element/types";
3
3
  import type { ValueOf } from "@excalidraw/common/utility-types";
4
4
  import { DropDownMenuItemBadgeType } from "../dropdownMenu/DropdownMenuItem";
5
5
  import type { JSX } from "react";
6
+ import type { ExcalidrawFontFace } from "../../fonts/ExcalidrawFontFace";
6
7
  export interface FontDescriptor {
7
8
  value: number;
8
9
  icon: JSX.Element;
@@ -21,6 +22,10 @@ interface FontPickerListProps {
21
22
  onLeave: () => void;
22
23
  onOpen: () => void;
23
24
  onClose: () => void;
25
+ /** present only while the top picks are customized */
26
+ onResetTopPicks?: () => void;
24
27
  }
25
- export declare const FontPickerList: React.MemoExoticComponent<({ selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onOpen, onClose, }: FontPickerListProps) => import("react/jsx-runtime").JSX.Element>;
28
+ export declare const getFontFamilyIcon: (fontFamily: FontFamilyValues) => JSX.Element;
29
+ export declare const getFontFamilyLabel: (fontFamily: FontFamilyValues, fontFaces: ExcalidrawFontFace[]) => string;
30
+ export declare const FontPickerList: React.MemoExoticComponent<({ selectedFontFamily, hoveredFontFamily, onSelect, onHover, onLeave, onOpen, onClose, onResetTopPicks, }: FontPickerListProps) => import("react/jsx-runtime").JSX.Element>;
26
31
  export {};
@@ -0,0 +1,12 @@
1
+ import type { FontFamilyValues } from "@excalidraw/element/types";
2
+ import type { TopPicksDnD } from "../TopPicksDnD/topPicksDnD";
3
+ export type FontPickerDnD = TopPicksDnD<FontFamilyValues>;
4
+ export declare const FontPickerDnDContext: import("react").Context<FontPickerDnD | null>;
5
+ export declare const useFontPickerDnD: () => FontPickerDnD | null;
6
+ /** pinning fonts from the font picker list to the top-picks strip, and
7
+ * reordering the strip */
8
+ export declare const useFontTopPicksDnD: ({ enabled, picks, onPicksChange, }: {
9
+ enabled: boolean;
10
+ picks: readonly FontFamilyValues[];
11
+ onPicksChange: (picks: FontFamilyValues[]) => void;
12
+ }) => FontPickerDnD;
@@ -0,0 +1,48 @@
1
+ import React from "react";
2
+ import type { PointerType } from "@excalidraw/element/types";
3
+ import "./ToolIcon.scss";
4
+ import type { CSSProperties } from "react";
5
+ export type IconButtonSize = "small" | "medium";
6
+ type IconButtonBaseProps = {
7
+ icon?: React.ReactNode;
8
+ "aria-label": string;
9
+ "aria-keyshortcuts"?: string;
10
+ "data-testid"?: string;
11
+ label?: string;
12
+ title?: string;
13
+ size?: IconButtonSize;
14
+ keyBindingLabel?: string | null;
15
+ showAriaLabel?: boolean;
16
+ hidden?: boolean;
17
+ visible?: boolean;
18
+ disabled?: boolean;
19
+ className?: string;
20
+ style?: CSSProperties;
21
+ isLoading?: boolean;
22
+ };
23
+ type IconButtonProps = (IconButtonBaseProps & {
24
+ type: "button";
25
+ children?: React.ReactNode;
26
+ onClick?(event: React.MouseEvent): void;
27
+ }) | (IconButtonBaseProps & {
28
+ type: "icon";
29
+ children?: React.ReactNode;
30
+ onClick?(): void;
31
+ }) | (IconButtonBaseProps & {
32
+ type: "toggle";
33
+ checked: boolean;
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
+ pointerType: PointerType | null;
43
+ }): void;
44
+ /** the press that may become a click — e.g. to arm a drag out of the toolbar */
45
+ onPointerDown?(event: React.PointerEvent<HTMLButtonElement>): void;
46
+ });
47
+ export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<unknown>>;
48
+ 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,12 @@ 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"];
32
+ currentUserControls?: ExcalidrawProps["currentUserControls"];
30
33
  }
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>;
34
+ 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, currentUserControls, }: LayerUIProps) => import("react/jsx-runtime").JSX.Element>;
32
35
  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;