@zsviczian/excalidraw 0.13.0-obsidian-1 → 0.14.0-obsidian

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 (88) hide show
  1. package/README.md +418 -20
  2. package/dist/excalidraw.development.js +571 -1154
  3. package/dist/excalidraw.production.min.js +1 -1
  4. package/dist/excalidraw.production.min.js.LICENSE.txt +0 -102
  5. package/package.json +1 -1
  6. package/types/actions/actionAddToLibrary.d.ts +21 -9
  7. package/types/actions/actionAlign.d.ts +6 -18
  8. package/types/actions/actionBoundText.d.ts +9 -5
  9. package/types/actions/actionCanvas.d.ts +83 -55
  10. package/types/actions/actionClipboard.d.ts +63 -16
  11. package/types/actions/actionDeleteSelected.d.ts +31 -12
  12. package/types/actions/actionDistribute.d.ts +2 -6
  13. package/types/actions/actionDuplicateSelection.d.ts +1 -3
  14. package/types/actions/actionExport.d.ts +79 -58
  15. package/types/actions/actionFinalize.d.ts +15 -9
  16. package/types/actions/actionFlip.d.ts +2 -2
  17. package/types/actions/actionGroup.d.ts +4 -8
  18. package/types/actions/actionLinearEditor.d.ts +8 -4
  19. package/types/actions/actionMenu.d.ts +24 -17
  20. package/types/actions/actionNavigate.d.ts +2 -3
  21. package/types/actions/actionProperties.d.ts +106 -80
  22. package/types/actions/actionStyles.d.ts +7 -3
  23. package/types/actions/actionToggleGridMode.d.ts +9 -3
  24. package/types/actions/actionToggleLock.d.ts +7 -3
  25. package/types/actions/actionToggleStats.d.ts +8 -3
  26. package/types/actions/actionToggleViewMode.d.ts +9 -3
  27. package/types/actions/actionToggleZenMode.d.ts +9 -3
  28. package/types/actions/actionZindex.d.ts +4 -12
  29. package/types/actions/manager.d.ts +2 -1
  30. package/types/actions/types.d.ts +6 -5
  31. package/types/appState.d.ts +8 -9
  32. package/types/clipboard.d.ts +6 -1
  33. package/types/components/App.d.ts +8 -51
  34. package/types/components/Button.d.ts +15 -0
  35. package/types/components/CollabButton.d.ts +1 -2
  36. package/types/components/ContextMenu.d.ts +8 -21
  37. package/types/components/JSONExportDialog.d.ts +3 -1
  38. package/types/components/LayerUI.d.ts +2 -3
  39. package/types/components/LibraryMenuHeaderContent.d.ts +23 -0
  40. package/types/components/MobileMenu.d.ts +4 -6
  41. package/types/components/UserList.d.ts +0 -2
  42. package/types/components/dropdownMenu/DropdownMenu.d.ts +64 -0
  43. package/types/components/dropdownMenu/DropdownMenuContent.d.ts +11 -0
  44. package/types/components/dropdownMenu/DropdownMenuGroup.d.ts +11 -0
  45. package/types/components/dropdownMenu/DropdownMenuItem.d.ts +13 -0
  46. package/types/components/dropdownMenu/DropdownMenuItemContent.d.ts +6 -0
  47. package/types/components/dropdownMenu/DropdownMenuItemCustom.d.ts +6 -0
  48. package/types/components/dropdownMenu/DropdownMenuItemLink.d.ts +12 -0
  49. package/types/components/dropdownMenu/DropdownMenuSeparator.d.ts +5 -0
  50. package/types/components/dropdownMenu/DropdownMenuTrigger.d.ts +9 -0
  51. package/types/components/dropdownMenu/dropdownMenuUtils.d.ts +3 -0
  52. package/types/components/footer/Footer.d.ts +13 -0
  53. package/types/components/footer/FooterCenter.d.ts +8 -0
  54. package/types/components/icons.d.ts +1 -1
  55. package/types/components/live-collaboration/LiveCollaborationTrigger.d.ts +10 -0
  56. package/types/components/main-menu/DefaultItems.d.ts +44 -0
  57. package/types/components/main-menu/MainMenu.d.ts +55 -0
  58. package/types/components/mainMenu/DefaultItems.d.ts +44 -0
  59. package/types/components/mainMenu/MainMenu.d.ts +63 -0
  60. package/types/components/welcome-screen/WelcomeScreen.Center.d.ts +58 -0
  61. package/types/components/welcome-screen/WelcomeScreen.Hints.d.ts +19 -0
  62. package/types/components/welcome-screen/WelcomeScreen.d.ts +85 -0
  63. package/types/constants.d.ts +6 -7
  64. package/types/element/Hyperlink.d.ts +9 -7
  65. package/types/element/bounds.d.ts +3 -2
  66. package/types/element/linearElementEditor.d.ts +38 -6
  67. package/types/element/newElement.d.ts +2 -2
  68. package/types/element/resizeElements.d.ts +0 -1
  69. package/types/element/textElement.d.ts +24 -2
  70. package/types/element/textWysiwyg.d.ts +6 -1
  71. package/types/element/transformHandles.d.ts +2 -3
  72. package/types/element/typeChecks.d.ts +10 -1
  73. package/types/element/types.d.ts +11 -4
  74. package/types/excalidraw-app/data/index.d.ts +13 -9
  75. package/types/excalidraw-app/data/localStorage.d.ts +13 -9
  76. package/types/keys.d.ts +2 -0
  77. package/types/math.d.ts +2 -1
  78. package/types/packages/excalidraw/example/CustomFooter.d.ts +5 -0
  79. package/types/packages/excalidraw/example/MobileFooter.d.ts +5 -0
  80. package/types/packages/excalidraw/index.d.ts +10 -0
  81. package/types/renderer/easingFunctions.d.ts +6 -0
  82. package/types/renderer/renderElement.d.ts +4 -3
  83. package/types/scene/Fonts.d.ts +21 -0
  84. package/types/scene/Scene.d.ts +15 -0
  85. package/types/scene/comparisons.d.ts +2 -3
  86. package/types/scene/index.d.ts +1 -1
  87. package/types/types.d.ts +43 -22
  88. package/types/utils.d.ts +17 -0
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
- import { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement } from "./types";
3
- import { Point, AppState } from "../types";
2
+ import { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer } from "./types";
3
+ import { Point, AppState, PointerCoords } from "../types";
4
4
  import History from "../history";
5
5
  import Scene from "../scene/Scene";
6
6
  declare const editorMidPointsCache: {
@@ -18,6 +18,15 @@ export declare class LinearElementEditor {
18
18
  prevSelectedPointsIndices: readonly number[] | null;
19
19
  /** index */
20
20
  lastClickedPoint: number;
21
+ origin: Readonly<{
22
+ x: number;
23
+ y: number;
24
+ }> | null;
25
+ segmentMidpoint: {
26
+ value: Point | null;
27
+ index: number | null;
28
+ added: boolean;
29
+ };
21
30
  }>;
22
31
  /** whether you're dragging a point */
23
32
  readonly isDragging: boolean;
@@ -60,7 +69,6 @@ export declare class LinearElementEditor {
60
69
  didAddPoint: boolean;
61
70
  hitElement: NonDeleted<ExcalidrawElement> | null;
62
71
  linearElementEditor: LinearElementEditor | null;
63
- isMidPoint: boolean;
64
72
  };
65
73
  static arePointsEqual(point1: Point | null, point2: Point | null): boolean;
66
74
  static handlePointerMove(event: React.PointerEvent<HTMLCanvasElement>, scenePointerX: number, scenePointerY: number, appState: AppState): LinearElementEditor | null;
@@ -94,6 +102,15 @@ export declare class LinearElementEditor {
94
102
  prevSelectedPointsIndices: readonly number[] | null;
95
103
  /** index */
96
104
  lastClickedPoint: number;
105
+ origin: Readonly<{
106
+ x: number;
107
+ y: number;
108
+ }> | null;
109
+ segmentMidpoint: {
110
+ value: readonly [number, number] | null;
111
+ index: number | null;
112
+ added: boolean;
113
+ };
97
114
  }>;
98
115
  isDragging: boolean;
99
116
  lastUncommittedPoint: readonly [number, number] | null;
@@ -106,6 +123,11 @@ export declare class LinearElementEditor {
106
123
  hoverPointIndex: number;
107
124
  segmentMidPointHoveredCoords: readonly [number, number] | null;
108
125
  };
126
+ contextMenu: {
127
+ items: import("../components/ContextMenu").ContextMenuItems;
128
+ top: number;
129
+ left: number;
130
+ } | null;
109
131
  showWelcomeScreen: boolean;
110
132
  isLoading: boolean;
111
133
  errorMessage: string | null;
@@ -144,10 +166,9 @@ export declare class LinearElementEditor {
144
166
  currentItemFontFamily: number;
145
167
  currentItemFontSize: number;
146
168
  currentItemTextAlign: string;
147
- currentItemStrokeSharpness: import("./types").StrokeSharpness;
148
169
  currentItemStartArrowhead: import("./types").Arrowhead | null;
149
170
  currentItemEndArrowhead: import("./types").Arrowhead | null;
150
- currentItemLinearStrokeSharpness: import("./types").StrokeSharpness;
171
+ currentItemRoundness: import("./types").StrokeRoundness;
151
172
  viewBackgroundColor: string;
152
173
  scrollX: number;
153
174
  scrollY: number;
@@ -162,7 +183,7 @@ export declare class LinearElementEditor {
162
183
  openMenu: "canvas" | "shape" | null;
163
184
  openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
164
185
  openSidebar: "library" | "customSidebar" | null;
165
- openDialog: "imageExport" | "help" | null;
186
+ openDialog: "imageExport" | "help" | "jsonExport" | null;
166
187
  isSidebarDocked: boolean;
167
188
  lastPointerDownWith: import("./types").PointerType;
168
189
  selectedElementIds: {
@@ -224,7 +245,18 @@ export declare class LinearElementEditor {
224
245
  startBinding?: PointBinding;
225
246
  endBinding?: PointBinding;
226
247
  }): void;
248
+ static shouldAddMidpoint(linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, appState: AppState): boolean;
249
+ static addMidpoint(linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, appState: AppState): {
250
+ pointerDownState: LinearElementEditor["pointerDownState"];
251
+ selectedPointsIndices: LinearElementEditor["selectedPointsIndices"];
252
+ } | undefined;
227
253
  private static _updatePoints;
228
254
  private static _getShiftLockedDelta;
255
+ static getBoundTextElementPosition: (element: ExcalidrawLinearElement, boundTextElement: ExcalidrawTextElementWithContainer) => {
256
+ x: number;
257
+ y: number;
258
+ };
259
+ static getMinMaxXYWithBoundText: (element: ExcalidrawLinearElement, elementBounds: [number, number, number, number], boundTextElement: ExcalidrawTextElementWithContainer) => [number, number, number, number, number, number];
260
+ static getElementAbsoluteCoords: (element: ExcalidrawLinearElement, includeBoundText?: boolean) => [number, number, number, number, number, number];
229
261
  }
230
262
  export {};
@@ -1,4 +1,4 @@
1
- import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawRectangleElement } from "../element/types";
1
+ import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer } from "../element/types";
2
2
  import { AppState } from "../types";
3
3
  declare type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "boundElements" | "seed" | "version" | "versionNonce" | "link">;
4
4
  export declare const newElement: (opts: {
@@ -11,7 +11,7 @@ export declare const newTextElement: (opts: {
11
11
  fontFamily: FontFamilyValues;
12
12
  textAlign: TextAlign;
13
13
  verticalAlign: VerticalAlign;
14
- containerId?: ExcalidrawRectangleElement["id"];
14
+ containerId?: ExcalidrawTextContainer["id"];
15
15
  } & ElementConstructorOpts) => NonDeleted<ExcalidrawTextElement>;
16
16
  export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement, text?: string) => {
17
17
  x: number;
@@ -3,7 +3,6 @@ import { MaybeTransformHandleType, TransformHandleDirection } from "./transformH
3
3
  import { PointerDownState } from "../types";
4
4
  export declare const normalizeAngle: (angle: number) => number;
5
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;
6
- export declare const reshapeSingleTwoPointElement: (element: NonDeleted<ExcalidrawLinearElement>, resizeArrowDirection: "origin" | "end", shouldRotateWithDiscreteAngle: boolean, pointerX: number, pointerY: number) => void;
7
6
  export declare const resizeSingleElement: (originalElements: PointerDownState["originalElements"], shouldMaintainAspectRatio: boolean, element: NonDeletedExcalidrawElement, transformHandleDirection: TransformHandleDirection, shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
8
7
  export declare const getResizeOffsetXY: (transformHandleType: MaybeTransformHandleType, selectedElements: NonDeletedExcalidrawElement[], x: number, y: number) => [number, number];
9
8
  export declare const getResizeArrowDirection: (transformHandleType: MaybeTransformHandleType, element: NonDeleted<ExcalidrawLinearElement>) => "origin" | "end";
@@ -1,14 +1,23 @@
1
- import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontString, NonDeletedExcalidrawElement } from "./types";
1
+ import { ExcalidrawElement, ExcalidrawTextContainer, ExcalidrawTextElement, ExcalidrawTextElementWithContainer, FontString, NonDeletedExcalidrawElement } from "./types";
2
2
  import { MaybeTransformHandleType } from "./transformHandles";
3
+ import { AppState } from "../types";
4
+ export declare const normalizeText: (text: string) => string;
3
5
  export declare const redrawTextBoundingBox: (textElement: ExcalidrawTextElement, container: ExcalidrawElement | null) => void;
4
6
  export declare const bindTextToShapeAfterDuplication: (sceneElements: ExcalidrawElement[], oldElements: ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
5
- export declare const handleBindTextResize: (element: NonDeletedExcalidrawElement, transformHandleType: MaybeTransformHandleType) => void;
7
+ export declare const handleBindTextResize: (container: NonDeletedExcalidrawElement, transformHandleType: MaybeTransformHandleType) => void;
6
8
  export declare const measureText: (text: string, font: FontString, maxWidth?: number | null) => {
7
9
  width: number;
8
10
  height: number;
9
11
  baseline: number;
12
+ container: HTMLDivElement;
13
+ } | {
14
+ width: number;
15
+ height: number;
16
+ baseline: number;
17
+ container?: undefined;
10
18
  };
11
19
  export declare const getApproxLineHeight: (font: FontString) => number;
20
+ export declare const getTextWidth: (text: string, font: FontString) => number;
12
21
  export declare const wrapText: (text: string, font: FontString, maxWidth: number) => string;
13
22
  export declare const charWidth: {
14
23
  calculate: (char: string, font: FontString) => number;
@@ -28,3 +37,16 @@ export declare const getContainerDims: (element: ExcalidrawElement) => {
28
37
  width: number;
29
38
  height: number;
30
39
  };
40
+ export declare const getContainerCenter: (container: ExcalidrawElement, appState: AppState) => {
41
+ x: number;
42
+ y: number;
43
+ };
44
+ export declare const getTextElementAngle: (textElement: ExcalidrawTextElement) => number;
45
+ export declare const getBoundTextElementOffset: (boundTextElement: ExcalidrawTextElement | null) => number;
46
+ export declare const getBoundTextElementPosition: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElementWithContainer) => {
47
+ x: number;
48
+ y: number;
49
+ } | undefined;
50
+ export declare const shouldAllowVerticalAlign: (selectedElements: NonDeletedExcalidrawElement[]) => boolean;
51
+ export declare const getTextBindableContainerAtPosition: (elements: readonly ExcalidrawElement[], appState: AppState, x: number, y: number) => ExcalidrawTextContainer | null;
52
+ export declare const isValidTextContainer: (element: ExcalidrawElement) => boolean;
@@ -1,5 +1,10 @@
1
- import { ExcalidrawElement, ExcalidrawTextElement } from "./types";
1
+ import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawTextContainer } from "./types";
2
2
  import App from "../components/App";
3
+ export declare const updateOriginalContainerCache: (id: ExcalidrawTextContainer["id"], height: ExcalidrawTextContainer["height"]) => {
4
+ height: ExcalidrawTextContainer["height"];
5
+ };
6
+ export declare const resetOriginalContainerCache: (id: ExcalidrawTextContainer["id"]) => void;
7
+ export declare const getOriginalContainerHeightFromCache: (id: ExcalidrawTextContainer["id"]) => number | null;
3
8
  export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, }: {
4
9
  id: ExcalidrawElement["id"];
5
10
  onChange?: ((text: string) => void) | undefined;
@@ -1,5 +1,4 @@
1
1
  import { ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
2
- import { Bounds } from "./bounds";
3
2
  import { AppState, Zoom } from "../types";
4
3
  export declare type TransformHandleDirection = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
5
4
  export declare type TransformHandleType = TransformHandleDirection | "rotation";
@@ -14,11 +13,11 @@ export declare const OMIT_SIDES_FOR_MULTIPLE_ELEMENTS: {
14
13
  n: boolean;
15
14
  w: boolean;
16
15
  };
17
- export declare const getTransformHandlesFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, zoom: Zoom, pointerType: PointerType, omitSides?: {
16
+ export declare const getTransformHandlesFromCoords: ([x1, y1, x2, y2, cx, cy]: [number, number, number, number, number, number], angle: number, zoom: Zoom, pointerType: PointerType, omitSides?: {
18
17
  s?: boolean | undefined;
19
18
  e?: boolean | undefined;
20
- w?: boolean | undefined;
21
19
  n?: boolean | undefined;
20
+ w?: boolean | undefined;
22
21
  nw?: boolean | undefined;
23
22
  ne?: boolean | undefined;
24
23
  sw?: boolean | undefined;
@@ -1,5 +1,5 @@
1
1
  import { AppState } from "../types";
2
- import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawGenericElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer } from "./types";
2
+ import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawGenericElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, RoundnessType } from "./types";
3
3
  export declare const isGenericElement: (element: ExcalidrawElement | null) => element is ExcalidrawGenericElement;
4
4
  export declare const isInitializedImageElement: (element: ExcalidrawElement | null) => element is InitializedExcalidrawImageElement;
5
5
  export declare const isImageElement: (element: ExcalidrawElement | null) => element is ExcalidrawImageElement;
@@ -7,6 +7,7 @@ export declare const isTextElement: (element: ExcalidrawElement | null) => eleme
7
7
  export declare const isFreeDrawElement: (element?: ExcalidrawElement | null) => element is ExcalidrawFreeDrawElement;
8
8
  export declare const isFreeDrawElementType: (elementType: ExcalidrawElement["type"]) => boolean;
9
9
  export declare const isLinearElement: (element?: ExcalidrawElement | null) => element is ExcalidrawLinearElement;
10
+ export declare const isArrowElement: (element?: ExcalidrawElement | null) => element is ExcalidrawLinearElement;
10
11
  export declare const isLinearElementType: (elementType: AppState["activeTool"]["type"]) => boolean;
11
12
  export declare const isBindingElement: (element?: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawLinearElement;
12
13
  export declare const isBindingElementType: (elementType: AppState["activeTool"]["type"]) => boolean;
@@ -15,3 +16,11 @@ export declare const isTextBindableContainer: (element: ExcalidrawElement | null
15
16
  export declare const isExcalidrawElement: (element: any) => boolean;
16
17
  export declare const hasBoundTextElement: (element: ExcalidrawElement | null) => element is ExcalidrawBindableElement;
17
18
  export declare const isBoundToContainer: (element: ExcalidrawElement | null) => element is ExcalidrawTextElementWithContainer;
19
+ export declare const isUsingAdaptiveRadius: (type: string) => boolean;
20
+ export declare const isUsingProportionalRadius: (type: string) => boolean;
21
+ export declare const canApplyRoundnessTypeToElement: (roundnessType: RoundnessType, element: ExcalidrawElement) => boolean;
22
+ export declare const getDefaultRoundnessTypeForElement: (element: ExcalidrawElement) => {
23
+ type: 2;
24
+ } | {
25
+ type: 3;
26
+ } | null;
@@ -1,5 +1,5 @@
1
1
  import { Point } from "../types";
2
- import { FONT_FAMILY, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "../constants";
2
+ import { FONT_FAMILY, ROUNDNESS, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "../constants";
3
3
  export declare type ChartType = "bar" | "line";
4
4
  export declare type FillStyle = "hachure" | "cross-hatch" | "solid";
5
5
  export declare type FontFamilyKeys = keyof typeof FONT_FAMILY;
@@ -10,7 +10,8 @@ export declare type FontString = string & {
10
10
  };
11
11
  export declare type GroupId = string;
12
12
  export declare type PointerType = "mouse" | "pen" | "touch";
13
- export declare type StrokeSharpness = "round" | "sharp";
13
+ export declare type StrokeRoundness = "round" | "sharp";
14
+ export declare type RoundnessType = ValueOf<typeof ROUNDNESS>;
14
15
  export declare type StrokeStyle = "solid" | "dashed" | "dotted";
15
16
  export declare type TextAlign = typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
16
17
  declare type VerticalAlignKeys = keyof typeof VERTICAL_ALIGN;
@@ -24,7 +25,10 @@ declare type _ExcalidrawElementBase = Readonly<{
24
25
  fillStyle: FillStyle;
25
26
  strokeWidth: number;
26
27
  strokeStyle: StrokeStyle;
27
- strokeSharpness: StrokeSharpness;
28
+ roundness: null | {
29
+ type: RoundnessType;
30
+ value?: number;
31
+ };
28
32
  roughness: number;
29
33
  opacity: number;
30
34
  width: number;
@@ -103,7 +107,7 @@ export declare type ExcalidrawTextElement = _ExcalidrawElementBase & Readonly<{
103
107
  originalText: string;
104
108
  }>;
105
109
  export declare type ExcalidrawBindableElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawTextElement | ExcalidrawImageElement;
106
- export declare type ExcalidrawTextContainer = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawImageElement;
110
+ export declare type ExcalidrawTextContainer = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawImageElement | ExcalidrawArrowElement;
107
111
  export declare type ExcalidrawTextElementWithContainer = {
108
112
  containerId: ExcalidrawTextContainer["id"];
109
113
  } & ExcalidrawTextElement;
@@ -122,6 +126,9 @@ export declare type ExcalidrawLinearElement = _ExcalidrawElementBase & Readonly<
122
126
  startArrowhead: Arrowhead | null;
123
127
  endArrowhead: Arrowhead | null;
124
128
  }>;
129
+ export declare type ExcalidrawArrowElement = ExcalidrawLinearElement & Readonly<{
130
+ type: "arrow";
131
+ }>;
125
132
  export declare type ExcalidrawFreeDrawElement = _ExcalidrawElementBase & Readonly<{
126
133
  type: "freedraw";
127
134
  points: readonly Point[];
@@ -91,13 +91,11 @@ export declare const loadScene: (id: string | null, privateKey: string | null, l
91
91
  lastActiveToolBeforeEraser: import("../../types").LastActiveToolBeforeEraser;
92
92
  locked: boolean;
93
93
  };
94
- scrollX: number;
95
- scrollY: number;
96
- viewBackgroundColor: string;
97
- zoom: Readonly<{
98
- value: import("../../types").NormalizedZoomValue;
99
- }>;
100
- shouldCacheIgnoreZoom: boolean;
94
+ contextMenu: {
95
+ items: import("../../components/ContextMenu").ContextMenuItems;
96
+ top: number;
97
+ left: number;
98
+ } | null;
101
99
  showWelcomeScreen: boolean;
102
100
  isLoading: boolean;
103
101
  errorMessage: string | null;
@@ -126,14 +124,19 @@ export declare const loadScene: (id: string | null, privateKey: string | null, l
126
124
  currentItemFontFamily: number;
127
125
  currentItemFontSize: number;
128
126
  currentItemTextAlign: string;
129
- currentItemStrokeSharpness: import("../../element/types").StrokeSharpness;
130
127
  currentItemStartArrowhead: import("../../element/types").Arrowhead | null;
131
128
  currentItemEndArrowhead: import("../../element/types").Arrowhead | null;
132
- currentItemLinearStrokeSharpness: import("../../element/types").StrokeSharpness;
129
+ currentItemRoundness: import("../../element/types").StrokeRoundness;
130
+ viewBackgroundColor: string;
131
+ scrollX: number;
132
+ scrollY: number;
133
133
  cursorButton: "up" | "down";
134
134
  scrolledOutside: boolean;
135
135
  isResizing: boolean;
136
136
  isRotating: boolean;
137
+ zoom: Readonly<{
138
+ value: import("../../types").NormalizedZoomValue;
139
+ }>;
137
140
  openMenu: "canvas" | "shape" | null;
138
141
  openPopup: "canvasColorPicker" | "backgroundColorPicker" | "strokeColorPicker" | null;
139
142
  openSidebar: "library" | "customSidebar" | null;
@@ -146,6 +149,7 @@ export declare const loadScene: (id: string | null, privateKey: string | null, l
146
149
  previousSelectedElementIds: {
147
150
  [id: string]: boolean;
148
151
  };
152
+ shouldCacheIgnoreZoom: boolean;
149
153
  toast: {
150
154
  message: string;
151
155
  closable?: boolean | undefined;
@@ -17,13 +17,6 @@ export declare const importFromLocalStorage: () => {
17
17
  lastActiveToolBeforeEraser: import("../../types").LastActiveToolBeforeEraser;
18
18
  locked: boolean;
19
19
  };
20
- scrollX: number;
21
- scrollY: number;
22
- viewBackgroundColor: string;
23
- zoom: Readonly<{
24
- value: import("../../types").NormalizedZoomValue;
25
- }>;
26
- shouldCacheIgnoreZoom: boolean;
27
20
  showWelcomeScreen: boolean;
28
21
  penMode: boolean;
29
22
  penDetected: boolean;
@@ -41,12 +34,17 @@ export declare const importFromLocalStorage: () => {
41
34
  currentItemFontFamily: number;
42
35
  currentItemFontSize: number;
43
36
  currentItemTextAlign: string;
44
- currentItemStrokeSharpness: import("../../element/types").StrokeSharpness;
45
37
  currentItemStartArrowhead: import("../../element/types").Arrowhead | null;
46
38
  currentItemEndArrowhead: import("../../element/types").Arrowhead | null;
47
- currentItemLinearStrokeSharpness: import("../../element/types").StrokeSharpness;
39
+ currentItemRoundness: import("../../element/types").StrokeRoundness;
40
+ viewBackgroundColor: string;
41
+ scrollX: number;
42
+ scrollY: number;
48
43
  cursorButton: "up" | "down";
49
44
  scrolledOutside: boolean;
45
+ zoom: Readonly<{
46
+ value: import("../../types").NormalizedZoomValue;
47
+ }>;
50
48
  openMenu: "canvas" | "shape" | null;
51
49
  openSidebar: "library" | "customSidebar" | null;
52
50
  isSidebarDocked: boolean;
@@ -57,6 +55,7 @@ export declare const importFromLocalStorage: () => {
57
55
  previousSelectedElementIds: {
58
56
  [id: string]: boolean;
59
57
  };
58
+ shouldCacheIgnoreZoom: boolean;
60
59
  zenModeEnabled: boolean;
61
60
  gridSize: number | null;
62
61
  selectedGroupIds: {
@@ -66,6 +65,11 @@ export declare const importFromLocalStorage: () => {
66
65
  showStats: boolean;
67
66
  currentChartType: import("../../element/types").ChartType;
68
67
  selectedLinearElement: import("../../element/linearElementEditor").LinearElementEditor | null;
68
+ contextMenu: {
69
+ items: import("../../components/ContextMenu").ContextMenuItems;
70
+ top: number;
71
+ left: number;
72
+ } | null;
69
73
  isLoading: boolean;
70
74
  errorMessage: string | null;
71
75
  draggingElement: import("../../element/types").NonDeletedExcalidrawElement | null;
package/types/keys.d.ts CHANGED
@@ -27,6 +27,8 @@ export declare const KEYS: {
27
27
  readonly ARROW_LEFT: "ArrowLeft";
28
28
  readonly ARROW_RIGHT: "ArrowRight";
29
29
  readonly ARROW_UP: "ArrowUp";
30
+ readonly PAGE_UP: "PageUp";
31
+ readonly PAGE_DOWN: "PageDown";
30
32
  readonly BACKSPACE: "Backspace";
31
33
  readonly ALT: "Alt";
32
34
  readonly CTRL_OR_CMD: "metaKey" | "ctrlKey";
package/types/math.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Point, Zoom } from "./types";
2
- import { ExcalidrawLinearElement, NonDeleted } from "./element/types";
2
+ import { ExcalidrawElement, ExcalidrawLinearElement, NonDeleted } from "./element/types";
3
3
  export declare const rotate: (x1: number, y1: number, x2: number, y2: number, angle: number) => [number, number];
4
4
  export declare const rotatePoint: (point: readonly [number, number], center: readonly [number, number], angle: number) => [number, number];
5
5
  export declare const adjustXYWithRotation: (sides: {
@@ -18,6 +18,7 @@ export declare const centerPoint: (a: readonly [number, number], b: readonly [nu
18
18
  export declare const isPathALoop: (points: ExcalidrawLinearElement["points"], zoomValue?: Zoom["value"]) => boolean;
19
19
  export declare const isPointInPolygon: (points: Point[], x: number, y: number) => boolean;
20
20
  export declare const getGridPoint: (x: number, y: number, gridSize: number | null) => [number, number];
21
+ export declare const getCornerRadius: (x: number, element: ExcalidrawElement) => number;
21
22
  export declare const getControlPointsForBezierCurve: (element: NonDeleted<ExcalidrawLinearElement>, endPoint: readonly [number, number]) => [number, number][] | null;
22
23
  export declare const getBezierXY: (p0: readonly [number, number], p1: readonly [number, number], p2: readonly [number, number], p3: readonly [number, number], t: number) => number[];
23
24
  export declare const getPointsInBezierCurve: (element: NonDeleted<ExcalidrawLinearElement>, endPoint: readonly [number, number]) => [number, number][];
@@ -0,0 +1,5 @@
1
+ import { ExcalidrawImperativeAPI } from "../../../types";
2
+ declare const CustomFooter: ({ excalidrawAPI, }: {
3
+ excalidrawAPI: ExcalidrawImperativeAPI;
4
+ }) => JSX.Element;
5
+ export default CustomFooter;
@@ -0,0 +1,5 @@
1
+ import { ExcalidrawImperativeAPI } from "../../../types";
2
+ declare const MobileFooter: ({ excalidrawAPI, }: {
3
+ excalidrawAPI: ExcalidrawImperativeAPI;
4
+ }) => JSX.Element | null;
5
+ export default MobileFooter;
@@ -2,6 +2,10 @@ import React from "react";
2
2
  import "../../css/app.scss";
3
3
  import "../../css/styles.scss";
4
4
  import { ExcalidrawAPIRefValue, ExcalidrawProps } from "../../types";
5
+ import Footer from "../../components/footer/FooterCenter";
6
+ import MainMenu from "../../components/main-menu/MainMenu";
7
+ import WelcomeScreen from "../../components/welcome-screen/WelcomeScreen";
8
+ import LiveCollaborationTrigger from "../../components/live-collaboration/LiveCollaborationTrigger";
5
9
  declare type PublicExcalidrawProps = Omit<ExcalidrawProps, "forwardedRef">;
6
10
  export declare const Excalidraw: React.MemoExoticComponent<React.ForwardRefExoticComponent<PublicExcalidrawProps & React.RefAttributes<ExcalidrawAPIRefValue>>>;
7
11
  export { getSceneVersion, isInvisiblySmallElement, getNonDeletedElements, } from "../../element";
@@ -22,3 +26,9 @@ export { mutateElement, newElementWith, bumpVersion, } from "../../element/mutat
22
26
  export { parseLibraryTokensFromUrl, useHandleLibrary, } from "../../data/library";
23
27
  export { sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, } from "../../utils";
24
28
  export { Sidebar } from "../../components/Sidebar/Sidebar";
29
+ export { Button } from "../../components/Button";
30
+ export { Footer };
31
+ export { MainMenu };
32
+ export { useDevice } from "../../components/App";
33
+ export { WelcomeScreen };
34
+ export { LiveCollaborationTrigger };
@@ -0,0 +1,6 @@
1
+ declare type EasingFunction = (progress: number) => number;
2
+ interface EasingDictionary {
3
+ [easing: string]: EasingFunction;
4
+ }
5
+ declare const easingsFunctions: EasingDictionary;
6
+ export default easingsFunctions;
@@ -3,7 +3,7 @@ import { RoughCanvas } from "roughjs/bin/canvas";
3
3
  import { Drawable, Options } from "roughjs/bin/core";
4
4
  import { RoughSVG } from "roughjs/bin/svg";
5
5
  import { RenderConfig } from "../scene/types";
6
- import { BinaryFiles, Zoom } from "../types";
6
+ import { AppState, BinaryFiles, Zoom } from "../types";
7
7
  export interface ExcalidrawElementWithCanvas {
8
8
  element: ExcalidrawElement | ExcalidrawTextElement;
9
9
  canvas: HTMLCanvasElement;
@@ -11,6 +11,7 @@ export interface ExcalidrawElementWithCanvas {
11
11
  canvasZoom: Zoom["value"];
12
12
  canvasOffsetX: number;
13
13
  canvasOffsetY: number;
14
+ boundTextElementVersion: number | null;
14
15
  }
15
16
  export declare const DEFAULT_LINK_SIZE = 14;
16
17
  declare type ElementShape = Drawable | Drawable[] | null;
@@ -25,8 +26,8 @@ export declare const getShapeForElement: <T extends ExcalidrawElement>(element:
25
26
  export declare const setShapeForElement: <T extends ExcalidrawElement>(element: T, shape: T["type"] extends keyof ElementShapes ? ElementShapes[T["type"]] : Drawable) => WeakMap<ExcalidrawElement, ElementShape>;
26
27
  export declare const invalidateShapeForElement: (element: ExcalidrawElement) => boolean;
27
28
  export declare const generateRoughOptions: (element: ExcalidrawElement, continuousPath?: boolean) => Options;
28
- export declare const renderElement: (element: NonDeletedExcalidrawElement, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: RenderConfig) => void;
29
- export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX?: number, offsetY?: number, exportWithDarkMode?: boolean) => void;
29
+ export declare const renderElement: (element: NonDeletedExcalidrawElement, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: RenderConfig, appState: AppState) => void;
30
+ export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX: number, offsetY: number, exportWithDarkMode?: boolean) => void;
30
31
  export declare const pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
31
32
  export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;
32
33
  export declare function getFreeDrawPath2D(element: ExcalidrawFreeDrawElement): Path2D | undefined;
@@ -0,0 +1,21 @@
1
+ import { ExcalidrawElement } from "../element/types";
2
+ import type Scene from "./Scene";
3
+ export declare class Fonts {
4
+ private scene;
5
+ private onSceneUpdated;
6
+ constructor({ scene, onSceneUpdated, }: {
7
+ scene: Scene;
8
+ onSceneUpdated: () => void;
9
+ });
10
+ private static loadedFontFaces;
11
+ /**
12
+ * if we load a (new) font, it's likely that text elements using it have
13
+ * already been rendered using a fallback font. Thus, we want invalidate
14
+ * their shapes and rerender. See #637.
15
+ *
16
+ * Invalidates text elements and rerenders scene, provided that at least one
17
+ * of the supplied fontFaces has not already been processed.
18
+ */
19
+ onFontsLoaded: (fontFaces: readonly FontFace[]) => false | undefined;
20
+ loadFontsForElements: (elements: readonly ExcalidrawElement[]) => Promise<void>;
21
+ }
@@ -17,9 +17,24 @@ declare class Scene {
17
17
  getNonDeletedElements(): readonly NonDeletedExcalidrawElement[];
18
18
  getElement<T extends ExcalidrawElement>(id: T["id"]): T | null;
19
19
  getNonDeletedElement(id: ExcalidrawElement["id"]): NonDeleted<ExcalidrawElement> | null;
20
+ /**
21
+ * A utility method to help with updating all scene elements, with the added
22
+ * performance optimization of not renewing the array if no change is made.
23
+ *
24
+ * Maps all current excalidraw elements, invoking the callback for each
25
+ * element. The callback should either return a new mapped element, or the
26
+ * original element if no changes are made. If no changes are made to any
27
+ * element, this results in a no-op. Otherwise, the newly mapped elements
28
+ * are set as the next scene's elements.
29
+ *
30
+ * @returns whether a change was made
31
+ */
32
+ mapElements(iteratee: (element: ExcalidrawElement) => ExcalidrawElement): boolean;
20
33
  replaceAllElements(nextElements: readonly ExcalidrawElement[]): void;
21
34
  informMutation(): void;
22
35
  addCallback(cb: SceneStateCallback): SceneStateCallbackRemover;
23
36
  destroy(): void;
37
+ insertElementAtIndex(element: ExcalidrawElement, index: number): void;
38
+ getElementIndex(elementId: string): number;
24
39
  }
25
40
  export default Scene;
@@ -1,11 +1,10 @@
1
- import { ExcalidrawElement, ExcalidrawTextContainer, NonDeletedExcalidrawElement } from "../element/types";
1
+ import { NonDeletedExcalidrawElement } from "../element/types";
2
2
  export declare const hasBackground: (type: string) => boolean;
3
3
  export declare const hasStrokeColor: (type: string) => boolean;
4
4
  export declare const hasStrokeWidth: (type: string) => boolean;
5
5
  export declare const hasStrokeStyle: (type: string) => boolean;
6
- export declare const canChangeSharpness: (type: string) => boolean;
6
+ export declare const canChangeRoundness: (type: string) => boolean;
7
7
  export declare const hasText: (type: string) => boolean;
8
8
  export declare const canHaveArrowheads: (type: string) => boolean;
9
9
  export declare const getElementAtPosition: (elements: readonly NonDeletedExcalidrawElement[], isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean) => NonDeletedExcalidrawElement | null;
10
10
  export declare const getElementsAtPosition: (elements: readonly NonDeletedExcalidrawElement[], isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean) => NonDeletedExcalidrawElement[];
11
- export declare const getTextBindableContainerAtPosition: (elements: readonly ExcalidrawElement[], x: number, y: number) => ExcalidrawTextContainer | null;
@@ -1,5 +1,5 @@
1
1
  export { isOverScrollBars } from "./scrollbars";
2
2
  export { isSomeElementSelected, getElementsWithinSelection, getCommonAttributeOfSelectedElements, getSelectedElements, getTargetElements, } from "./selection";
3
3
  export { calculateScrollCenter } from "./scroll";
4
- export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeSharpness, getElementAtPosition, getTextBindableContainerAtPosition, hasText, getElementsAtPosition, } from "./comparisons";
4
+ export { hasBackground, hasStrokeWidth, hasStrokeStyle, canHaveArrowheads, canChangeRoundness, getElementAtPosition, hasText, getElementsAtPosition, } from "./comparisons";
5
5
  export { getNormalizedZoom } from "./zoom";