@excalidraw/excalidraw 0.16.0-f8b3692 → 0.16.1-26ff399

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 (62) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/excalidraw.development.js +149 -39
  3. package/dist/excalidraw.production.min.js +1 -1
  4. package/package.json +1 -1
  5. package/types/actions/actionAddToLibrary.d.ts +24 -24
  6. package/types/actions/actionAlign.d.ts +8 -8
  7. package/types/actions/actionBoundText.d.ts +16 -16
  8. package/types/actions/actionCanvas.d.ts +112 -112
  9. package/types/actions/actionClipboard.d.ts +44 -44
  10. package/types/actions/actionDeleteSelected.d.ts +26 -26
  11. package/types/actions/actionDistribute.d.ts +4 -4
  12. package/types/actions/actionDuplicateSelection.d.ts +2 -2
  13. package/types/actions/actionElementLock.d.ts +18 -18
  14. package/types/actions/actionExport.d.ts +87 -87
  15. package/types/actions/actionFinalize.d.ts +18 -18
  16. package/types/actions/actionFlip.d.ts +4 -4
  17. package/types/actions/actionFrame.d.ts +26 -26
  18. package/types/actions/actionGroup.d.ts +20 -20
  19. package/types/actions/actionLinearEditor.d.ts +8 -8
  20. package/types/actions/actionMenu.d.ts +26 -26
  21. package/types/actions/actionProperties.d.ts +108 -108
  22. package/types/actions/actionSelectAll.d.ts +10 -10
  23. package/types/actions/actionStyles.d.ts +12 -12
  24. package/types/actions/actionToggleGridMode.d.ts +10 -10
  25. package/types/actions/actionToggleObjectsSnapMode.d.ts +137 -0
  26. package/types/actions/actionToggleStats.d.ts +10 -10
  27. package/types/actions/actionToggleViewMode.d.ts +10 -10
  28. package/types/actions/actionToggleZenMode.d.ts +10 -10
  29. package/types/actions/actionZindex.d.ts +8 -8
  30. package/types/actions/index.d.ts +1 -0
  31. package/types/actions/shortcuts.d.ts +1 -1
  32. package/types/actions/types.d.ts +1 -1
  33. package/types/appState.d.ts +6 -11
  34. package/types/components/Actions.d.ts +3 -4
  35. package/types/components/App.d.ts +14 -5
  36. package/types/components/LaserTool/LaserPathManager.d.ts +28 -0
  37. package/types/components/LaserTool/LaserPointerButton.d.ts +10 -0
  38. package/types/components/LaserTool/LaserTool.d.ts +7 -0
  39. package/types/components/LayerUI.d.ts +2 -1
  40. package/types/components/Sidebar/Sidebar.d.ts +1 -1
  41. package/types/components/Stack.d.ts +2 -2
  42. package/types/components/dropdownMenu/DropdownMenu.d.ts +6 -3
  43. package/types/components/dropdownMenu/DropdownMenuItem.d.ts +2 -1
  44. package/types/components/dropdownMenu/DropdownMenuItemCustom.d.ts +2 -1
  45. package/types/components/dropdownMenu/DropdownMenuItemLink.d.ts +2 -1
  46. package/types/components/dropdownMenu/common.d.ts +1 -1
  47. package/types/components/icons.d.ts +2 -0
  48. package/types/components/main-menu/MainMenu.d.ts +6 -3
  49. package/types/cursor.d.ts +5 -0
  50. package/types/element/Hyperlink.d.ts +10 -10
  51. package/types/element/bounds.d.ts +4 -5
  52. package/types/element/dragElements.d.ts +11 -2
  53. package/types/element/embeddable.d.ts +8 -8
  54. package/types/element/linearElementEditor.d.ts +8 -8
  55. package/types/element/resizeElements.d.ts +2 -2
  56. package/types/keys.d.ts +1 -0
  57. package/types/math.d.ts +2 -0
  58. package/types/renderer/renderSnaps.d.ts +2 -0
  59. package/types/scene/selection.d.ts +1 -0
  60. package/types/snapping.d.ts +108 -0
  61. package/types/types.d.ts +31 -16
  62. package/types/utils.d.ts +3 -8
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import { Theme } from "../element/types";
3
+ export declare const iconFillColor: (theme: Theme) => string;
3
4
  type Opts = {
4
5
  width?: number;
5
6
  height?: number;
@@ -149,4 +150,5 @@ export declare const alertTriangleIcon: JSX.Element;
149
150
  export declare const eyeDropperIcon: JSX.Element;
150
151
  export declare const extraToolsIcon: JSX.Element;
151
152
  export declare const frameToolIcon: JSX.Element;
153
+ export declare const laserPointerToolIcon: JSX.Element;
152
154
  export {};
@@ -19,29 +19,32 @@ declare const MainMenu: React.FC<{
19
19
  displayName: string;
20
20
  };
21
21
  Item: {
22
- ({ icon, onSelect, children, shortcut, className, ...rest }: {
22
+ ({ icon, onSelect, children, shortcut, className, selected, ...rest }: {
23
23
  icon?: JSX.Element | undefined;
24
24
  onSelect: (event: Event) => void;
25
25
  children: React.ReactNode;
26
26
  shortcut?: string | undefined;
27
+ selected?: boolean | undefined;
27
28
  className?: string | undefined;
28
29
  } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
29
30
  displayName: string;
30
31
  };
31
32
  ItemLink: {
32
- ({ icon, shortcut, href, children, onSelect, className, ...rest }: {
33
+ ({ icon, shortcut, href, children, onSelect, className, selected, ...rest }: {
33
34
  href: string;
34
35
  icon?: JSX.Element | undefined;
35
36
  children: React.ReactNode;
36
37
  shortcut?: string | undefined;
37
38
  className?: string | undefined;
39
+ selected?: boolean | undefined;
38
40
  onSelect?: ((event: Event) => void) | undefined;
39
41
  } & React.AnchorHTMLAttributes<HTMLAnchorElement>): JSX.Element;
40
42
  displayName: string;
41
43
  };
42
- ItemCustom: ({ children, className, ...rest }: {
44
+ ItemCustom: ({ children, className, selected, ...rest }: {
43
45
  children: React.ReactNode;
44
46
  className?: string | undefined;
47
+ selected?: boolean | undefined;
45
48
  } & React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
46
49
  Group: {
47
50
  ({ children, className, style, title, }: {
@@ -0,0 +1,5 @@
1
+ import { AppState } from "./types";
2
+ export declare const resetCursor: (interactiveCanvas: HTMLCanvasElement | null) => void;
3
+ export declare const setCursor: (interactiveCanvas: HTMLCanvasElement | null, cursor: string) => void;
4
+ export declare const setEraserCursor: (interactiveCanvas: HTMLCanvasElement | null, theme: AppState["theme"]) => void;
5
+ export declare const setCursorForShape: (interactiveCanvas: HTMLCanvasElement | null, appState: Pick<AppState, "activeTool" | "theme">) => void;
@@ -51,15 +51,9 @@ export declare const actionLink: {
51
51
  editingElement: NonDeletedExcalidrawElement | null;
52
52
  editingLinearElement: import("./linearElementEditor").LinearElementEditor | null;
53
53
  activeTool: {
54
- lastActiveTool: import("../types").LastActiveTool;
54
+ lastActiveTool: import("../types").ActiveTool | null;
55
55
  locked: boolean;
56
- } & ({
57
- type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
58
- customType: null;
59
- } | {
60
- type: "custom";
61
- customType: string;
62
- });
56
+ } & import("../types").ActiveTool;
63
57
  penMode: boolean;
64
58
  penDetected: boolean;
65
59
  exportBackground: boolean;
@@ -136,6 +130,12 @@ export declare const actionLink: {
136
130
  };
137
131
  pendingImageElementId: string | null;
138
132
  selectedLinearElement: import("./linearElementEditor").LinearElementEditor | null;
133
+ snapLines: readonly import("../snapping").SnapLine[];
134
+ originSnapOffset: {
135
+ x: number;
136
+ y: number;
137
+ } | null;
138
+ objectsSnapModeEnabled: boolean;
139
139
  };
140
140
  commitToHistory: true;
141
141
  };
@@ -143,12 +143,12 @@ export declare const actionLink: {
143
143
  category: "hyperlink";
144
144
  action: string;
145
145
  };
146
- keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
146
+ keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
147
147
  contextItemLabel: (elements: readonly import("./types").ExcalidrawElement[], appState: Readonly<AppState>) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.createEmbed" | "labels.link.create";
148
148
  predicate: (elements: readonly import("./types").ExcalidrawElement[], appState: AppState) => boolean;
149
149
  PanelComponent: ({ elements, appState, updateData }: import("../actions/types").PanelComponentProps) => JSX.Element;
150
150
  } & {
151
- keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
151
+ keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
152
152
  };
153
153
  export declare const getContextMenuLabel: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.createEmbed" | "labels.link.create";
154
154
  export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: Pick<UIAppState, "zoom">) => [x: number, y: number, width: number, height: number];
@@ -15,11 +15,6 @@ export declare class ElementBounds {
15
15
  private static calculateBounds;
16
16
  }
17
17
  export declare const getElementAbsoluteCoords: (element: ExcalidrawElement, includeBoundText?: boolean) => [number, number, number, number, number, number];
18
- /**
19
- * for a given element, `getElementLineSegments` returns line segments
20
- * that can be used for visual collision detection (useful for frames)
21
- * as opposed to bounding box collision detection
22
- */
23
18
  export declare const getElementLineSegments: (element: ExcalidrawElement) => [Point, Point][];
24
19
  /**
25
20
  * Scene -> Scene coords, but in x1,x2,y1,y2 format.
@@ -34,6 +29,10 @@ export declare const getMinMaxXYFromCurvePathOps: (ops: Op[], transformXY?: ((x:
34
29
  export declare const getArrowheadPoints: (element: ExcalidrawLinearElement, shape: Drawable[], position: "start" | "end", arrowhead: Arrowhead) => number[] | null;
35
30
  export declare const getElementBounds: (element: ExcalidrawElement) => Bounds;
36
31
  export declare const getCommonBounds: (elements: readonly ExcalidrawElement[]) => Bounds;
32
+ export declare const getDraggedElementsBounds: (elements: ExcalidrawElement[], dragOffset: {
33
+ x: number;
34
+ y: number;
35
+ }) => number[];
37
36
  export declare const getResizedElementAbsoluteCoords: (element: ExcalidrawElement, nextWidth: number, nextHeight: number, normalizePoints: boolean) => [number, number, number, number];
38
37
  export declare const getElementPointsCoords: (element: ExcalidrawLinearElement, points: readonly (readonly [number, number])[]) => [number, number, number, number];
39
38
  export declare const getClosestElementBounds: (elements: readonly ExcalidrawElement[], from: {
@@ -1,6 +1,15 @@
1
1
  import { NonDeletedExcalidrawElement } from "./types";
2
2
  import { AppState, PointerDownState } from "../types";
3
3
  import Scene from "../scene/Scene";
4
- export declare const dragSelectedElements: (pointerDownState: PointerDownState, selectedElements: NonDeletedExcalidrawElement[], pointerX: number, pointerY: number, lockDirection: boolean | undefined, distanceX: number | undefined, distanceY: number | undefined, appState: AppState, scene: Scene) => void;
4
+ export declare const dragSelectedElements: (pointerDownState: PointerDownState, selectedElements: NonDeletedExcalidrawElement[], offset: {
5
+ x: number;
6
+ y: number;
7
+ }, appState: AppState, scene: Scene, snapOffset: {
8
+ x: number;
9
+ y: number;
10
+ }, gridSize: AppState["gridSize"]) => void;
5
11
  export declare const getDragOffsetXY: (selectedElements: NonDeletedExcalidrawElement[], x: number, y: number) => [number, number];
6
- export declare const dragNewElement: (draggingElement: NonDeletedExcalidrawElement, elementType: AppState["activeTool"]["type"], originX: number, originY: number, x: number, y: number, width: number, height: number, shouldMaintainAspectRatio: boolean, shouldResizeFromCenter: boolean, widthAspectRatio?: number | null) => void;
12
+ export declare const dragNewElement: (draggingElement: NonDeletedExcalidrawElement, elementType: AppState["activeTool"]["type"], originX: number, originY: number, x: number, y: number, width: number, height: number, shouldMaintainAspectRatio: boolean, shouldResizeFromCenter: boolean, widthAspectRatio?: number | null, originOffset?: {
13
+ x: number;
14
+ y: number;
15
+ } | null) => void;
@@ -25,15 +25,9 @@ export declare const actionSetEmbeddableAsActiveTool: {
25
25
  elements: readonly ExcalidrawElement[];
26
26
  appState: {
27
27
  activeTool: {
28
- lastActiveTool: import("../types").LastActiveTool;
28
+ lastActiveTool: import("../types").ActiveTool | null;
29
29
  locked: boolean;
30
- } & ({
31
- type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
32
- customType: null;
33
- } | {
34
- type: "custom";
35
- customType: string;
36
- });
30
+ } & import("../types").ActiveTool;
37
31
  contextMenu: {
38
32
  items: import("../components/ContextMenu").ContextMenuItems;
39
33
  top: number;
@@ -142,6 +136,12 @@ export declare const actionSetEmbeddableAsActiveTool: {
142
136
  pendingImageElementId: string | null;
143
137
  showHyperlinkPopup: false | "editor" | "info";
144
138
  selectedLinearElement: import("./linearElementEditor").LinearElementEditor | null;
139
+ snapLines: readonly import("../snapping").SnapLine[];
140
+ originSnapOffset: {
141
+ x: number;
142
+ y: number;
143
+ } | null;
144
+ objectsSnapModeEnabled: boolean;
145
145
  };
146
146
  commitToHistory: false;
147
147
  };
@@ -152,15 +152,9 @@ export declare class LinearElementEditor {
152
152
  elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
153
153
  editingElement: import("./types").NonDeletedExcalidrawElement | null;
154
154
  activeTool: {
155
- lastActiveTool: import("../types").LastActiveTool;
155
+ lastActiveTool: import("../types").ActiveTool | null;
156
156
  locked: boolean;
157
- } & ({
158
- type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
159
- customType: null;
160
- } | {
161
- type: "custom";
162
- customType: string;
163
- });
157
+ } & import("../types").ActiveTool;
164
158
  penMode: boolean;
165
159
  penDetected: boolean;
166
160
  exportBackground: boolean;
@@ -239,6 +233,12 @@ export declare class LinearElementEditor {
239
233
  pendingImageElementId: string | null;
240
234
  showHyperlinkPopup: false | "editor" | "info";
241
235
  selectedLinearElement: LinearElementEditor | null;
236
+ snapLines: readonly import("../snapping").SnapLine[];
237
+ originSnapOffset: {
238
+ x: number;
239
+ y: number;
240
+ } | null;
241
+ objectsSnapModeEnabled: boolean;
242
242
  };
243
243
  };
244
244
  static deletePoints(element: NonDeleted<ExcalidrawLinearElement>, pointIndices: readonly number[]): void;
@@ -1,8 +1,8 @@
1
1
  import { ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted } from "./types";
2
2
  import { MaybeTransformHandleType, TransformHandleDirection } from "./transformHandles";
3
- import { PointerDownState } from "../types";
3
+ import { AppState, PointerDownState } from "../types";
4
4
  export declare const normalizeAngle: (angle: number) => number;
5
- export declare const transformElements: (pointerDownState: PointerDownState, transformHandleType: MaybeTransformHandleType, selectedElements: readonly NonDeletedExcalidrawElement[], resizeArrowDirection: "origin" | "end", shouldRotateWithDiscreteAngle: boolean, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number, centerX: number, centerY: number) => boolean;
5
+ export declare const transformElements: (pointerDownState: PointerDownState, transformHandleType: MaybeTransformHandleType, selectedElements: readonly NonDeletedExcalidrawElement[], resizeArrowDirection: "origin" | "end", shouldRotateWithDiscreteAngle: boolean, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number, centerX: number, centerY: number, appState: AppState) => boolean;
6
6
  export declare const resizeSingleElement: (originalElements: PointerDownState["originalElements"], shouldMaintainAspectRatio: boolean, element: NonDeletedExcalidrawElement, transformHandleDirection: TransformHandleDirection, shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
7
7
  export declare const resizeMultipleElements: (pointerDownState: PointerDownState, selectedElements: readonly NonDeletedExcalidrawElement[], transformHandleType: "nw" | "ne" | "sw" | "se", shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
8
8
  export declare const getResizeOffsetXY: (transformHandleType: MaybeTransformHandleType, selectedElements: NonDeletedExcalidrawElement[], x: number, y: number) => [number, number];
package/types/keys.d.ts CHANGED
@@ -19,6 +19,7 @@ export declare const CODES: {
19
19
  readonly V: "KeyV";
20
20
  readonly Z: "KeyZ";
21
21
  readonly R: "KeyR";
22
+ readonly S: "KeyS";
22
23
  };
23
24
  export declare const KEYS: {
24
25
  readonly ARROW_DOWN: "ArrowDown";
package/types/math.d.ts CHANGED
@@ -28,3 +28,5 @@ export declare const getBezierCurveLength: (element: NonDeleted<ExcalidrawLinear
28
28
  export declare const mapIntervalToBezierT: (element: NonDeleted<ExcalidrawLinearElement>, endPoint: readonly [number, number], interval: number) => number;
29
29
  export declare const arePointsEqual: (p1: readonly [number, number], p2: readonly [number, number]) => boolean;
30
30
  export declare const isRightAngle: (angle: number) => boolean;
31
+ export declare const rangesOverlap: ([a0, a1]: [number, number], [b0, b1]: [number, number]) => boolean;
32
+ export declare const rangeIntersection: (rangeA: [number, number], rangeB: [number, number]) => [number, number] | null;
@@ -0,0 +1,2 @@
1
+ import { InteractiveCanvasAppState } from "../types";
2
+ export declare const renderSnaps: (context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;
@@ -8,6 +8,7 @@ import { AppState, InteractiveCanvasAppState } from "../types";
8
8
  */
9
9
  export declare const excludeElementsInFramesFromSelection: <T extends ExcalidrawElement>(selectedElements: readonly T[]) => T[];
10
10
  export declare const getElementsWithinSelection: (elements: readonly NonDeletedExcalidrawElement[], selection: NonDeletedExcalidrawElement, excludeElementsInFrames?: boolean) => NonDeletedExcalidrawElement[];
11
+ export declare const getVisibleAndNonSelectedElements: (elements: readonly NonDeletedExcalidrawElement[], selectedElements: readonly NonDeletedExcalidrawElement[], appState: AppState) => NonDeletedExcalidrawElement[];
11
12
  export declare const isSomeElementSelected: {
12
13
  (elements: readonly NonDeletedExcalidrawElement[], appState: Pick<AppState, "selectedElementIds">): boolean;
13
14
  clearCache(): void;
@@ -0,0 +1,108 @@
1
+ import { Bounds } from "./element/bounds";
2
+ import { MaybeTransformHandleType } from "./element/transformHandles";
3
+ import { ExcalidrawElement, NonDeletedExcalidrawElement } from "./element/types";
4
+ import { AppState, KeyboardModifiersObject, Point } from "./types";
5
+ export declare const getSnapDistance: (zoomValue: number) => number;
6
+ type Vector2D = {
7
+ x: number;
8
+ y: number;
9
+ };
10
+ type PointPair = [Point, Point];
11
+ export type PointSnap = {
12
+ type: "point";
13
+ points: PointPair;
14
+ offset: number;
15
+ };
16
+ export type Gap = {
17
+ startBounds: Bounds;
18
+ endBounds: Bounds;
19
+ startSide: [Point, Point];
20
+ endSide: [Point, Point];
21
+ overlap: [number, number];
22
+ length: number;
23
+ };
24
+ export type GapSnap = {
25
+ type: "gap";
26
+ direction: "center_horizontal" | "center_vertical" | "side_left" | "side_right" | "side_top" | "side_bottom";
27
+ gap: Gap;
28
+ offset: number;
29
+ };
30
+ export type GapSnaps = GapSnap[];
31
+ export type Snap = GapSnap | PointSnap;
32
+ export type Snaps = Snap[];
33
+ export type PointSnapLine = {
34
+ type: "points";
35
+ points: Point[];
36
+ };
37
+ export type PointerSnapLine = {
38
+ type: "pointer";
39
+ points: PointPair;
40
+ direction: "horizontal" | "vertical";
41
+ };
42
+ export type GapSnapLine = {
43
+ type: "gap";
44
+ direction: "horizontal" | "vertical";
45
+ points: PointPair;
46
+ };
47
+ export type SnapLine = PointSnapLine | GapSnapLine | PointerSnapLine;
48
+ export declare class SnapCache {
49
+ private static referenceSnapPoints;
50
+ private static visibleGaps;
51
+ static setReferenceSnapPoints: (snapPoints: Point[] | null) => void;
52
+ static getReferenceSnapPoints: () => (readonly [number, number])[] | null;
53
+ static setVisibleGaps: (gaps: {
54
+ verticalGaps: Gap[];
55
+ horizontalGaps: Gap[];
56
+ } | null) => void;
57
+ static getVisibleGaps: () => {
58
+ verticalGaps: Gap[];
59
+ horizontalGaps: Gap[];
60
+ } | null;
61
+ static destroy: () => void;
62
+ }
63
+ export declare const isSnappingEnabled: ({ event, appState, selectedElements, }: {
64
+ appState: AppState;
65
+ event: KeyboardModifiersObject;
66
+ selectedElements: NonDeletedExcalidrawElement[];
67
+ }) => boolean;
68
+ export declare const areRoughlyEqual: (a: number, b: number, precision?: number) => boolean;
69
+ export declare const getElementsCorners: (elements: ExcalidrawElement[], { omitCenter, boundingBoxCorners, dragOffset, }?: {
70
+ omitCenter?: boolean | undefined;
71
+ boundingBoxCorners?: boolean | undefined;
72
+ dragOffset?: Vector2D | undefined;
73
+ }) => Point[];
74
+ export declare const getVisibleGaps: (elements: readonly NonDeletedExcalidrawElement[], selectedElements: ExcalidrawElement[], appState: AppState) => {
75
+ horizontalGaps: Gap[];
76
+ verticalGaps: Gap[];
77
+ };
78
+ export declare const getReferenceSnapPoints: (elements: readonly NonDeletedExcalidrawElement[], selectedElements: ExcalidrawElement[], appState: AppState) => (readonly [number, number])[];
79
+ export declare const snapDraggedElements: (selectedElements: ExcalidrawElement[], dragOffset: Vector2D, appState: AppState, event: KeyboardModifiersObject) => {
80
+ snapOffset: {
81
+ x: number;
82
+ y: number;
83
+ };
84
+ snapLines: (PointSnapLine | GapSnapLine)[];
85
+ };
86
+ export declare const snapResizingElements: (selectedElements: ExcalidrawElement[], selectedOriginalElements: ExcalidrawElement[], appState: AppState, event: KeyboardModifiersObject, dragOffset: Vector2D, transformHandle: MaybeTransformHandleType) => {
87
+ snapOffset: {
88
+ x: number;
89
+ y: number;
90
+ };
91
+ snapLines: PointSnapLine[];
92
+ };
93
+ export declare const snapNewElement: (draggingElement: ExcalidrawElement, appState: AppState, event: KeyboardModifiersObject, origin: Vector2D, dragOffset: Vector2D) => {
94
+ snapOffset: {
95
+ x: number;
96
+ y: number;
97
+ };
98
+ snapLines: PointSnapLine[];
99
+ };
100
+ export declare const getSnapLinesAtPointer: (elements: readonly ExcalidrawElement[], appState: AppState, pointer: Vector2D, event: KeyboardModifiersObject) => {
101
+ originOffset: {
102
+ x: number;
103
+ y: number;
104
+ };
105
+ snapLines: PointerSnapLine[];
106
+ };
107
+ export declare const isActiveToolNonLinearSnappable: (activeToolType: AppState["activeTool"]["type"]) => boolean;
108
+ export {};
package/types/types.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from "react";
2
2
  import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawFrameElement, ExcalidrawEmbeddableElement } from "./element/types";
3
- import { SHAPES } from "./shapes";
4
3
  import { Point as RoughPoint } from "roughjs/bin/geometry";
5
4
  import { LinearElementEditor } from "./element/linearElementEditor";
6
5
  import { SuggestedBinding } from "./element/binding";
@@ -16,13 +15,11 @@ import Library from "./data/library";
16
15
  import type { FileSystemHandle } from "./data/filesystem";
17
16
  import type { IMAGE_MIME_TYPES, MIME_TYPES } from "./constants";
18
17
  import { ContextMenuItems } from "./components/ContextMenu";
18
+ import { SnapLine } from "./snapping";
19
19
  import { Merge, ForwardRef, ValueOf } from "./utility-types";
20
20
  export type Point = Readonly<RoughPoint>;
21
21
  export type Collaborator = {
22
- pointer?: {
23
- x: number;
24
- y: number;
25
- };
22
+ pointer?: CollaboratorPointer;
26
23
  button?: "up" | "down";
27
24
  selectedElementIds?: AppState["selectedElementIds"];
28
25
  username?: string | null;
@@ -34,6 +31,11 @@ export type Collaborator = {
34
31
  avatarUrl?: string;
35
32
  id?: string;
36
33
  };
34
+ export type CollaboratorPointer = {
35
+ x: number;
36
+ y: number;
37
+ tool: "pointer" | "laser";
38
+ };
37
39
  export type DataURL = string & {
38
40
  _brand: "DataURL";
39
41
  };
@@ -56,13 +58,14 @@ export type BinaryFileData = {
56
58
  };
57
59
  export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
58
60
  export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
59
- export type LastActiveTool = {
60
- type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
61
+ export type ToolType = "selection" | "rectangle" | "diamond" | "ellipse" | "arrow" | "line" | "freedraw" | "text" | "image" | "eraser" | "hand" | "frame" | "embeddable" | "laser";
62
+ export type ActiveTool = {
63
+ type: ToolType;
61
64
  customType: null;
62
65
  } | {
63
66
  type: "custom";
64
67
  customType: string;
65
- } | null;
68
+ };
66
69
  export type SidebarName = string;
67
70
  export type SidebarTabName = string;
68
71
  type _CommonCanvasAppState = {
@@ -103,6 +106,8 @@ export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
103
106
  openSidebar: AppState["openSidebar"];
104
107
  showHyperlinkPopup: AppState["showHyperlinkPopup"];
105
108
  collaborators: AppState["collaborators"];
109
+ snapLines: AppState["snapLines"];
110
+ zenModeEnabled: AppState["zenModeEnabled"];
106
111
  }>;
107
112
  export type AppState = {
108
113
  contextMenu: {
@@ -140,15 +145,9 @@ export type AppState = {
140
145
  * indicates a previous tool we should revert back to if we deselect the
141
146
  * currently active tool. At the moment applies to `eraser` and `hand` tool.
142
147
  */
143
- lastActiveTool: LastActiveTool;
148
+ lastActiveTool: ActiveTool | null;
144
149
  locked: boolean;
145
- } & ({
146
- type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
147
- customType: null;
148
- } | {
149
- type: "custom";
150
- customType: string;
151
- });
150
+ } & ActiveTool;
152
151
  penMode: boolean;
153
152
  penDetected: boolean;
154
153
  exportBackground: boolean;
@@ -236,6 +235,12 @@ export type AppState = {
236
235
  pendingImageElementId: ExcalidrawImageElement["id"] | null;
237
236
  showHyperlinkPopup: false | "info" | "editor";
238
237
  selectedLinearElement: LinearElementEditor | null;
238
+ snapLines: readonly SnapLine[];
239
+ originSnapOffset: {
240
+ x: number;
241
+ y: number;
242
+ } | null;
243
+ objectsSnapModeEnabled: boolean;
239
244
  };
240
245
  export type UIAppState = Omit<AppState, "suggestedBindings" | "startBoundElement" | "cursorButton" | "scrollX" | "scrollY">;
241
246
  export type NormalizedZoomValue = number & {
@@ -294,6 +299,7 @@ export interface ExcalidrawProps {
294
299
  pointer: {
295
300
  x: number;
296
301
  y: number;
302
+ tool: "pointer" | "laser";
297
303
  };
298
304
  button: "down" | "up";
299
305
  pointersMap: Gesture["pointers"];
@@ -304,6 +310,7 @@ export interface ExcalidrawProps {
304
310
  viewModeEnabled?: boolean;
305
311
  zenModeEnabled?: boolean;
306
312
  gridModeEnabled?: boolean;
313
+ objectsSnapModeEnabled?: boolean;
307
314
  libraryReturnUrl?: string;
308
315
  theme?: Theme;
309
316
  name?: string;
@@ -386,6 +393,8 @@ export type AppClassProperties = {
386
393
  onInsertElements: App["onInsertElements"];
387
394
  onExportImage: App["onExportImage"];
388
395
  lastViewportPosition: App["lastViewportPosition"];
396
+ togglePenMode: App["togglePenMode"];
397
+ setActiveTool: App["setActiveTool"];
389
398
  };
390
399
  export type PointerDownState = Readonly<{
391
400
  origin: Readonly<{
@@ -496,4 +505,10 @@ export type FrameNameBoundsCache = {
496
505
  versionNonce: ExcalidrawFrameElement["versionNonce"];
497
506
  }>;
498
507
  };
508
+ export type KeyboardModifiersObject = {
509
+ ctrlKey: boolean;
510
+ shiftKey: boolean;
511
+ altKey: boolean;
512
+ metaKey: boolean;
513
+ };
499
514
  export {};
package/types/utils.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { EVENT } from "./constants";
2
2
  import { FontFamilyValues, FontString, NonDeletedExcalidrawElement } from "./element/types";
3
- import { AppState, LastActiveTool, Zoom } from "./types";
4
- import { SHAPES } from "./shapes";
3
+ import { ActiveTool, AppState, ToolType, Zoom } from "./types";
5
4
  export declare const setDateTimeForTests: (dateTime: string) => void;
6
5
  export declare const getDateTime: () => string;
7
6
  export declare const capitalizeString: (str: string) => string;
@@ -81,17 +80,13 @@ export declare const selectNode: (node: Element) => void;
81
80
  export declare const removeSelection: () => void;
82
81
  export declare const distance: (x: number, y: number) => number;
83
82
  export declare const updateActiveTool: (appState: Pick<AppState, "activeTool">, data: ({
84
- type: (typeof SHAPES)[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
83
+ type: ToolType;
85
84
  } | {
86
85
  type: "custom";
87
86
  customType: string;
88
87
  }) & {
89
- lastActiveToolBeforeEraser?: LastActiveTool;
88
+ lastActiveToolBeforeEraser?: ActiveTool | null;
90
89
  }) => AppState["activeTool"];
91
- export declare const resetCursor: (interactiveCanvas: HTMLCanvasElement | null) => void;
92
- export declare const setCursor: (interactiveCanvas: HTMLCanvasElement | null, cursor: string) => void;
93
- export declare const setEraserCursor: (interactiveCanvas: HTMLCanvasElement | null, theme: AppState["theme"]) => void;
94
- export declare const setCursorForShape: (interactiveCanvas: HTMLCanvasElement | null, appState: Pick<AppState, "activeTool" | "theme">) => void;
95
90
  export declare const isFullScreen: () => boolean;
96
91
  export declare const allowFullScreen: () => Promise<void>;
97
92
  export declare const exitFullScreen: () => Promise<void>;