@myoc/excalidraw 0.19.547 → 0.20.0

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 (46) hide show
  1. package/CHANGELOG.md +106 -0
  2. package/README.md +94 -0
  3. package/dist/dev/{chunk-6X722ZMM.js → chunk-JAMVC3FK.js} +2 -2
  4. package/dist/dev/{chunk-OWS32STE.js → chunk-SYLLRP5N.js} +5 -5
  5. package/dist/dev/chunk-SYLLRP5N.js.map +7 -0
  6. package/dist/dev/data/{image-SHO5VNS6.js → image-MIDG6L22.js} +3 -3
  7. package/dist/dev/index.css +270 -34
  8. package/dist/dev/index.css.map +3 -3
  9. package/dist/dev/index.js +1510 -1049
  10. package/dist/dev/index.js.map +4 -4
  11. package/dist/dev/subset-shared.chunk.js +1 -1
  12. package/dist/dev/subset-worker.chunk.js +1 -1
  13. package/dist/prod/{chunk-U23VT5B7.js → chunk-7YEIEXKT.js} +1 -1
  14. package/dist/prod/chunk-PITW2T2E.js +4 -0
  15. package/dist/prod/data/image-SFMYPR3Z.js +1 -0
  16. package/dist/prod/index.css +1 -1
  17. package/dist/prod/index.js +20 -20
  18. package/dist/prod/subset-shared.chunk.js +1 -1
  19. package/dist/prod/subset-worker.chunk.js +1 -1
  20. package/dist/types/excalidraw/actions/actionArrange.d.ts +1 -1
  21. package/dist/types/excalidraw/actions/actionElementLock.d.ts +2 -2
  22. package/dist/types/excalidraw/actions/actionFlipViewpoint.d.ts +2 -2
  23. package/dist/types/excalidraw/actions/actionLinearEditor.d.ts +2 -2
  24. package/dist/types/excalidraw/actions/actionLink.d.ts +1 -1
  25. package/dist/types/excalidraw/actions/actionNormalise.d.ts +1 -1
  26. package/dist/types/excalidraw/actions/actionToggleArrowBinding.d.ts +1 -1
  27. package/dist/types/excalidraw/actions/actionToggleGridMode.d.ts +1 -1
  28. package/dist/types/excalidraw/actions/actionToggleMidpointSnapping.d.ts +1 -1
  29. package/dist/types/excalidraw/actions/actionToggleObjectsSnapMode.d.ts +1 -1
  30. package/dist/types/excalidraw/actions/actionToggleSearchMenu.d.ts +1 -1
  31. package/dist/types/excalidraw/actions/actionToggleShapeSwitch.d.ts +1 -1
  32. package/dist/types/excalidraw/actions/actionToggleStats.d.ts +1 -1
  33. package/dist/types/excalidraw/actions/actionToggleViewMode.d.ts +1 -1
  34. package/dist/types/excalidraw/components/Actions.d.ts +3 -1
  35. package/dist/types/excalidraw/components/LayerUI.d.ts +2 -1
  36. package/dist/types/excalidraw/components/MobileMenu.d.ts +3 -2
  37. package/dist/types/excalidraw/components/Toolbar.d.ts +2 -1
  38. package/dist/types/excalidraw/components/UIRegionLayout.d.ts +34 -0
  39. package/dist/types/excalidraw/index.d.ts +3 -1
  40. package/dist/types/excalidraw/types.d.ts +37 -0
  41. package/package.json +4 -4
  42. package/dist/dev/chunk-OWS32STE.js.map +0 -7
  43. package/dist/prod/chunk-FZE33ODQ.js +0 -4
  44. package/dist/prod/data/image-ELTE3WZG.js +0 -1
  45. /package/dist/dev/{chunk-6X722ZMM.js.map → chunk-JAMVC3FK.js.map} +0 -0
  46. /package/dist/dev/data/{image-SHO5VNS6.js.map → image-MIDG6L22.js.map} +0 -0
@@ -1 +1 @@
1
- import{a,b,c,d}from"./chunk-Z5NKEFVG.js";import"./chunk-U23VT5B7.js";import"./chunk-SRAX5OIU.js";export{a as Commands,b as subsetToBase64,c as subsetToBinary,d as toBase64};
1
+ import{a,b,c,d}from"./chunk-Z5NKEFVG.js";import"./chunk-7YEIEXKT.js";import"./chunk-SRAX5OIU.js";export{a as Commands,b as subsetToBase64,c as subsetToBinary,d as toBase64};
@@ -1 +1 @@
1
- import{a as r,c as t}from"./chunk-Z5NKEFVG.js";import"./chunk-U23VT5B7.js";import"./chunk-SRAX5OIU.js";var s=import.meta.url?new URL(import.meta.url):void 0;typeof window>"u"&&typeof self<"u"&&(self.onmessage=async e=>{switch(e.data.command){case r.Subset:let a=await t(e.data.arrayBuffer,e.data.codePoints);self.postMessage(a,{transfer:[a]});break}});export{s as WorkerUrl};
1
+ import{a as r,c as t}from"./chunk-Z5NKEFVG.js";import"./chunk-7YEIEXKT.js";import"./chunk-SRAX5OIU.js";var s=import.meta.url?new URL(import.meta.url):void 0;typeof window>"u"&&typeof self<"u"&&(self.onmessage=async e=>{switch(e.data.command){case r.Subset:let a=await t(e.data.arrayBuffer,e.data.codePoints);self.postMessage(a,{transfer:[a]});break}});export{s as WorkerUrl};
@@ -1,6 +1,6 @@
1
1
  import type { ExcalidrawElement } from "@excalidraw/element/types";
2
2
  import type { AppClassProperties, AppState } from "../types";
3
- export declare const arrangeElementsPredicate: (appState: import("../types").UIAppState, app: AppClassProperties) => boolean;
3
+ export declare const arrangeElementsPredicate: (appState: import("..").UIAppState, app: AppClassProperties) => boolean;
4
4
  /**
5
5
  * Arranges selected elements in to be positioned nicely next to each
6
6
  * other.
@@ -2,8 +2,8 @@ import type { ExcalidrawElement } from "@excalidraw/element/types";
2
2
  import type { AppState } from "../types";
3
3
  export declare const actionToggleElementLock: {
4
4
  name: "toggleElementLock";
5
- label: (elements: readonly ExcalidrawElement[], appState: Readonly<import("../types").UIAppState>, app: import("../types").AppClassProperties) => "labels.elementLock.lock" | "labels.elementLock.unlock";
6
- icon: (appState: import("../types").UIAppState, elements: readonly ExcalidrawElement[]) => import("react/jsx-runtime").JSX.Element;
5
+ label: (elements: readonly ExcalidrawElement[], appState: Readonly<import("..").UIAppState>, app: import("../types").AppClassProperties) => "labels.elementLock.lock" | "labels.elementLock.unlock";
6
+ icon: (appState: import("..").UIAppState, elements: readonly ExcalidrawElement[]) => import("react/jsx-runtime").JSX.Element;
7
7
  trackEvent: {
8
8
  category: "element";
9
9
  };
@@ -15,7 +15,7 @@ export declare const actionFlipViewpointHorizontal: {
15
15
  };
16
16
  captureUpdate: "NEVER";
17
17
  };
18
- checked: (appState: Readonly<import("../types").UIAppState>) => boolean;
18
+ checked: (appState: Readonly<import("..").UIAppState>) => boolean;
19
19
  keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
20
20
  } & {
21
21
  keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
@@ -36,7 +36,7 @@ export declare const actionFlipViewpointVertical: {
36
36
  };
37
37
  captureUpdate: "NEVER";
38
38
  };
39
- checked: (appState: Readonly<import("../types").UIAppState>) => boolean;
39
+ checked: (appState: Readonly<import("..").UIAppState>) => boolean;
40
40
  keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
41
41
  } & {
42
42
  keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
@@ -1,7 +1,7 @@
1
1
  import type { ExcalidrawLinearElement } from "@excalidraw/element/types";
2
2
  export declare const actionToggleLinearEditor: {
3
3
  name: "toggleLinearEditor";
4
- label: (elements: readonly import("@excalidraw/element/types").ExcalidrawElement[], appState: Readonly<import("../types").UIAppState>, app: import("../types").AppClassProperties) => "labels.lineEditor.editArrow" | "labels.lineEditor.edit";
4
+ label: (elements: readonly import("@excalidraw/element/types").ExcalidrawElement[], appState: Readonly<import("..").UIAppState>, app: import("../types").AppClassProperties) => "labels.lineEditor.editArrow" | "labels.lineEditor.edit";
5
5
  keywords: string[];
6
6
  trackEvent: {
7
7
  category: "element";
@@ -229,7 +229,7 @@ export declare const actionTogglePolygon: {
229
229
  name: "togglePolygon";
230
230
  icon: import("react/jsx-runtime").JSX.Element;
231
231
  keywords: string[];
232
- label: (elements: readonly import("@excalidraw/element/types").ExcalidrawElement[], appState: Readonly<import("../types").UIAppState>, app: import("../types").AppClassProperties) => "labels.polygon.breakPolygon" | "labels.polygon.convertToPolygon";
232
+ label: (elements: readonly import("@excalidraw/element/types").ExcalidrawElement[], appState: Readonly<import("..").UIAppState>, app: import("../types").AppClassProperties) => "labels.polygon.breakPolygon" | "labels.polygon.convertToPolygon";
233
233
  trackEvent: {
234
234
  category: "element";
235
235
  };
@@ -1,6 +1,6 @@
1
1
  export declare const actionLink: {
2
2
  name: "hyperlink";
3
- label: (elements: readonly import("@excalidraw/element/types").ExcalidrawElement[], appState: Readonly<import("../types").UIAppState>) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.create";
3
+ label: (elements: readonly import("@excalidraw/element/types").ExcalidrawElement[], appState: Readonly<import("..").UIAppState>) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.create";
4
4
  icon: import("react/jsx-runtime").JSX.Element;
5
5
  perform: (elements: readonly import("@excalidraw/element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>) => false | {
6
6
  elements: readonly import("@excalidraw/element/types").OrderedExcalidrawElement[];
@@ -1,6 +1,6 @@
1
1
  import type { ExcalidrawElement } from "@excalidraw/element/types";
2
2
  import type { AppClassProperties, AppState } from "../types";
3
- export declare const normaliseElementsPredicate: (appState: import("../types").UIAppState, app: AppClassProperties) => boolean;
3
+ export declare const normaliseElementsPredicate: (appState: import("..").UIAppState, app: AppClassProperties) => boolean;
4
4
  /**
5
5
  * Normalises selected image elements to a common size based on the configured
6
6
  * mode and metric.
@@ -187,7 +187,7 @@ export declare const actionToggleArrowBinding: {
187
187
  };
188
188
  captureUpdate: "NEVER";
189
189
  };
190
- checked: (appState: Readonly<import("../types").UIAppState>) => boolean;
190
+ checked: (appState: Readonly<import("..").UIAppState>) => boolean;
191
191
  } & {
192
192
  keyTest?: undefined;
193
193
  };
@@ -189,7 +189,7 @@ export declare const actionToggleGridMode: {
189
189
  };
190
190
  captureUpdate: "EVENTUALLY";
191
191
  };
192
- checked: (appState: Readonly<import("../types").UIAppState>) => boolean;
192
+ checked: (appState: Readonly<import("..").UIAppState>) => boolean;
193
193
  predicate: (element: readonly import("@excalidraw/element/types").ExcalidrawElement[], appState: import("../types").AppState, props: import("../types").ExcalidrawProps) => boolean;
194
194
  keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
195
195
  } & {
@@ -187,7 +187,7 @@ export declare const actionToggleMidpointSnapping: {
187
187
  };
188
188
  captureUpdate: "NEVER";
189
189
  };
190
- checked: (appState: Readonly<import("../types").UIAppState>) => boolean;
190
+ checked: (appState: Readonly<import("..").UIAppState>) => boolean;
191
191
  } & {
192
192
  keyTest?: undefined;
193
193
  };
@@ -188,7 +188,7 @@ export declare const actionToggleObjectsSnapMode: {
188
188
  };
189
189
  captureUpdate: "EVENTUALLY";
190
190
  };
191
- checked: (appState: Readonly<import("../types").UIAppState>) => boolean;
191
+ checked: (appState: Readonly<import("..").UIAppState>) => boolean;
192
192
  predicate: (elements: readonly import("@excalidraw/element/types").ExcalidrawElement[], appState: import("../types").AppState, appProps: import("../types").ExcalidrawProps) => boolean;
193
193
  keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
194
194
  } & {
@@ -179,7 +179,7 @@ export declare const actionToggleSearchMenu: {
179
179
  };
180
180
  captureUpdate: "EVENTUALLY";
181
181
  };
182
- checked: (appState: Readonly<import("../types").UIAppState>) => boolean;
182
+ checked: (appState: Readonly<import("..").UIAppState>) => boolean;
183
183
  predicate: (element: readonly import("@excalidraw/element/types").ExcalidrawElement[], appState: import("../types").AppState, props: import("../types").ExcalidrawProps) => boolean;
184
184
  keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
185
185
  } & {
@@ -12,7 +12,7 @@ export declare const actionToggleShapeSwitch: {
12
12
  perform(elements: readonly import("@excalidraw/element/types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: unknown, app: import("../types").AppClassProperties): {
13
13
  captureUpdate: "NEVER";
14
14
  };
15
- checked: (appState: Readonly<import("../types").UIAppState>) => boolean;
15
+ checked: (appState: Readonly<import("..").UIAppState>) => boolean;
16
16
  predicate: (elements: readonly ExcalidrawElement[], appState: import("../types").AppState, props: import("../types").ExcalidrawProps) => boolean;
17
17
  } & {
18
18
  keyTest?: undefined;
@@ -188,7 +188,7 @@ export declare const actionToggleStats: {
188
188
  };
189
189
  captureUpdate: "EVENTUALLY";
190
190
  };
191
- checked: (appState: Readonly<import("../types").UIAppState>) => boolean;
191
+ checked: (appState: Readonly<import("..").UIAppState>) => boolean;
192
192
  keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
193
193
  } & {
194
194
  keyTest?: ((event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean) | undefined;
@@ -188,7 +188,7 @@ export declare const actionToggleViewMode: {
188
188
  };
189
189
  captureUpdate: "EVENTUALLY";
190
190
  };
191
- checked: (appState: Readonly<import("../types").UIAppState>) => boolean;
191
+ checked: (appState: Readonly<import("..").UIAppState>) => boolean;
192
192
  predicate: (elements: readonly import("@excalidraw/element/types").ExcalidrawElement[], appState: import("../types").AppState, appProps: import("../types").ExcalidrawProps, app: import("../types").AppClassProperties) => boolean;
193
193
  keyTest: (event: import("react").KeyboardEvent<Element> | KeyboardEvent) => boolean;
194
194
  PanelComponent: ({ data, updateData, appState, appProps }: import("./types").PanelComponentProps) => import("react/jsx-runtime").JSX.Element | null;
@@ -29,12 +29,14 @@ export declare const CompactShapeActions: ({ appState, elementsMap, renderAction
29
29
  * overflow measurement that promotes duplicate/delete out of the popover when
30
30
  * there is room.
31
31
  */
32
- export declare const MobileShapeActions: ({ appState, elementsMap, renderAction, app, setAppState, }: {
32
+ export declare const MobileShapeActions: ({ appState, elementsMap, renderAction, app, setAppState, showUndo, showRedo, }: {
33
33
  appState: UIAppState;
34
34
  elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
35
35
  renderAction: ActionManager["renderAction"];
36
36
  app: AppClassProperties;
37
37
  setAppState: React.Component<any, AppState>["setState"];
38
+ showUndo?: boolean;
39
+ showRedo?: boolean;
38
40
  }) => import("react/jsx-runtime").JSX.Element;
39
41
  export declare const ZoomActions: ({ renderAction, }: {
40
42
  renderAction: ActionManager["renderAction"];
@@ -30,6 +30,7 @@ interface LayerUIProps {
30
30
  isCollaborating: boolean;
31
31
  generateLinkForSelection?: AppProps["generateLinkForSelection"];
32
32
  currentUserControls?: ExcalidrawProps["currentUserControls"];
33
+ uiLayout?: ExcalidrawProps["uiLayout"];
33
34
  }
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>;
35
+ 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, uiLayout, }: LayerUIProps) => import("react/jsx-runtime").JSX.Element>;
35
36
  export default _default;
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
3
3
  import type { ActionManager } from "../actions/manager";
4
- import type { AppClassProperties, AppState, UIAppState } from "../types";
4
+ import type { AppClassProperties, AppState, ExcalidrawProps, UIAppState } from "../types";
5
5
  import type { JSX } from "react";
6
6
  type MobileMenuProps = {
7
7
  appState: UIAppState;
@@ -18,6 +18,7 @@ type MobileMenuProps = {
18
18
  defaultUIEnabled: boolean;
19
19
  scrollBackToContentUIEnabled: boolean;
20
20
  app: AppClassProperties;
21
+ uiLayout?: ExcalidrawProps["uiLayout"];
21
22
  };
22
- export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, renderTopLeftUI, renderTopRightUI, renderSidebars, renderWelcomeScreen, defaultUIEnabled, scrollBackToContentUIEnabled, app, onPenModeToggle, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
23
+ export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, renderTopLeftUI, renderTopRightUI, renderSidebars, renderWelcomeScreen, defaultUIEnabled, scrollBackToContentUIEnabled, app, onPenModeToggle, uiLayout, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
23
24
  export {};
@@ -1,7 +1,7 @@
1
1
  import type { AppClassProperties, AppProps, AppState, UIAppState } from "../types";
2
2
  import type { ActionManager } from "../actions/manager";
3
3
  /** the main (desktop/tablet) toolbar island */
4
- export declare const Toolbar: ({ app, appState, setAppState, UIOptions, actionManager, onPenModeToggle, onLockToggle, heading, }: {
4
+ export declare const Toolbar: ({ app, appState, setAppState, UIOptions, actionManager, onPenModeToggle, onLockToggle, heading, showPenMode, }: {
5
5
  app: AppClassProperties;
6
6
  appState: UIAppState;
7
7
  setAppState: React.Component<any, AppState>["setState"];
@@ -10,4 +10,5 @@ export declare const Toolbar: ({ app, appState, setAppState, UIOptions, actionMa
10
10
  onPenModeToggle: AppClassProperties["togglePenMode"];
11
11
  onLockToggle: () => void;
12
12
  heading: React.ReactNode;
13
+ showPenMode?: boolean;
13
14
  }) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,34 @@
1
+ import React from "react";
2
+ import type { EditorInterface } from "@excalidraw/common";
3
+ import "./UIRegionLayout.scss";
4
+ import type { ExcalidrawImperativeAPI, ExcalidrawUIFormFactorLayout, ExcalidrawUIItem, ExcalidrawUIOrientation, ExcalidrawUIRegion, UIAppState } from "../types";
5
+ export type UIRegionLayoutItem = {
6
+ id: ExcalidrawUIItem;
7
+ content: React.ReactNode;
8
+ defaultRegion: ExcalidrawUIRegion;
9
+ defaultOrder?: number;
10
+ defaultOrientation?: ExcalidrawUIOrientation;
11
+ islandGroup?: {
12
+ id: string;
13
+ className: string;
14
+ padding: number;
15
+ gap: number;
16
+ };
17
+ };
18
+ export declare const UIRegionLayout: ({ items, layout, app, appState, editorInterface, className, legacyBottomCenter, legacyBottomLeft, }: {
19
+ items: readonly UIRegionLayoutItem[];
20
+ layout?: ExcalidrawUIFormFactorLayout;
21
+ app: {
22
+ api: ExcalidrawImperativeAPI;
23
+ };
24
+ appState: UIAppState;
25
+ editorInterface: EditorInterface;
26
+ className?: string;
27
+ legacyBottomCenter?: React.ReactNode;
28
+ legacyBottomLeft?: React.ReactNode;
29
+ }) => import("react/jsx-runtime").JSX.Element;
30
+ export declare const getUIFormFactorLayout: (layout: {
31
+ desktop?: ExcalidrawUIFormFactorLayout;
32
+ tablet?: ExcalidrawUIFormFactorLayout;
33
+ mobile?: ExcalidrawUIFormFactorLayout;
34
+ } | undefined, editorInterface: Pick<EditorInterface, "formFactor">) => ExcalidrawUIFormFactorLayout | undefined;
@@ -35,6 +35,7 @@ export { mutateElement, newElementWith, bumpVersion, } from "@excalidraw/element
35
35
  export { CaptureUpdateAction } from "@excalidraw/element";
36
36
  export { Sidebar } from "./components/Sidebar/Sidebar";
37
37
  export { Button } from "./components/Button";
38
+ export * from "./components/icons";
38
39
  export { Footer };
39
40
  export { MainMenu };
40
41
  export { Ellipsify } from "./components/Ellipsify";
@@ -51,7 +52,8 @@ export { getDataURL } from "./data/blob";
51
52
  export { isElementLink } from "@excalidraw/element";
52
53
  export { Fonts } from "./fonts/Fonts";
53
54
  export { setCustomTextMetricsProvider } from "@excalidraw/element";
54
- export type { AlignPreferences, ArrangePreferences, CompressImageFile, CompressImageFileOpts, ExcalidrawCommandCatalogEntry, EditorPreferences, ImageContextMenuItem, ImageDownloadErrorStatus, ImageUploadProgressStatus, ImageStatus, ImageStatusStyle, NormalisePreferences, SmartZoomPreferences, ViewpointFlip, } from "./types";
55
+ export type { EditorInterface } from "@excalidraw/common";
56
+ export type { AlignPreferences, ArrangePreferences, CompressImageFile, CompressImageFileOpts, ExcalidrawCommandCatalogEntry, EditorPreferences, ImageContextMenuItem, ImageDownloadErrorStatus, ImageUploadProgressStatus, ImageStatus, ImageStatusStyle, NormalisePreferences, SmartZoomPreferences, ViewpointFlip, ExcalidrawImperativeAPI, UIAppState, ExcalidrawUICustomItem, ExcalidrawUIFormFactorLayout, ExcalidrawUIItem, ExcalidrawUIItemLayout, ExcalidrawUIOrientation, ExcalidrawUIRegion, ExcalidrawUILayout, } from "./types";
55
57
  export type { DragImageMetadata, ParsedDataTranferList, ParsedDataTransferFile, DragDataSnapshot, RawDragData, } from "./clipboard";
56
58
  export { renderSpreadsheet, tryParseSpreadsheet, isSpreadsheetValidForChartType, } from "./charts";
57
59
  /**
@@ -695,7 +695,43 @@ export type UIConfig = {
695
695
  scrollBackToContent?: boolean;
696
696
  };
697
697
  };
698
+ export type ExcalidrawUIRegion = "topLeft" | "topCenter" | "topRight" | "middleLeft" | "middleRight" | "bottomLeft" | "bottomCenter" | "bottomRight";
699
+ export type ExcalidrawUIOrientation = "auto" | "horizontal" | "vertical";
700
+ /** Built-in controls that can be independently placed by `uiLayout`. */
701
+ export type ExcalidrawUIItem = "mainMenu" | "sidebarTrigger" | "hostTopLeftUI" | "hostTopRightUI" | "toolbar" | "stylesPanel" | "collaborators" | "stats" | "undo" | "redo" | "smartZoom" | "viewMode" | "zoom" | "penMode" | "help";
702
+ export type ExcalidrawUIItemLayout = {
703
+ region?: ExcalidrawUIRegion;
704
+ visible?: boolean;
705
+ order?: number;
706
+ orientation?: ExcalidrawUIOrientation;
707
+ };
708
+ export type ExcalidrawUICustomItem = ExcalidrawUIItemLayout & {
709
+ id: string;
710
+ region: ExcalidrawUIRegion;
711
+ render: (context: {
712
+ api: ExcalidrawImperativeAPI;
713
+ appState: UIAppState;
714
+ editorInterface: EditorInterface;
715
+ region: ExcalidrawUIRegion;
716
+ orientation: Exclude<ExcalidrawUIOrientation, "auto">;
717
+ }) => React.ReactNode;
718
+ };
719
+ export type ExcalidrawUIFormFactorLayout = {
720
+ items?: Partial<Record<ExcalidrawUIItem, ExcalidrawUIItemLayout>>;
721
+ customItems?: readonly ExcalidrawUICustomItem[];
722
+ };
723
+ /** Independent host-owned layouts for each responsive editor form factor. */
724
+ export type ExcalidrawUILayout = {
725
+ desktop?: ExcalidrawUIFormFactorLayout;
726
+ tablet?: ExcalidrawUIFormFactorLayout;
727
+ mobile?: ExcalidrawUIFormFactorLayout;
728
+ };
698
729
  export interface ExcalidrawProps {
730
+ /**
731
+ * Host-controlled placement and visibility for editor UI. Each form factor
732
+ * has its own overrides; omitted values retain that form factor's defaults.
733
+ */
734
+ uiLayout?: ExcalidrawUILayout;
699
735
  className?: string;
700
736
  onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
701
737
  onThemeChange?: (theme: Theme | "system") => void;
@@ -1160,6 +1196,7 @@ export interface ExcalidrawImperativeAPI {
1160
1196
  setCursor: InstanceType<typeof App>["cursor"]["set"];
1161
1197
  resetCursor: InstanceType<typeof App>["cursor"]["reset"];
1162
1198
  toggleSidebar: InstanceType<typeof App>["toggleSidebar"];
1199
+ setDesktopUIMode: InstanceType<typeof App>["setDesktopUIMode"];
1163
1200
  getEditorInterface: () => EditorInterface;
1164
1201
  /**
1165
1202
  * Disables rendering of frames (including element clipping), but currently
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@myoc/excalidraw",
3
- "version": "0.19.547",
3
+ "version": "0.20.0",
4
4
  "type": "module",
5
5
  "types": "./dist/types/excalidraw/index.d.ts",
6
6
  "main": "./dist/prod/index.js",
@@ -82,10 +82,10 @@
82
82
  },
83
83
  "dependencies": {
84
84
  "@braintree/sanitize-url": "6.0.2",
85
- "@excalidraw/common": "npm:@myoc/common@0.19.547",
86
- "@excalidraw/element": "npm:@myoc/element@0.19.547",
85
+ "@excalidraw/common": "npm:@myoc/common@0.20.0",
86
+ "@excalidraw/element": "npm:@myoc/element@0.20.0",
87
87
  "@excalidraw/laser-pointer": "1.3.1",
88
- "@excalidraw/math": "npm:@myoc/math@0.19.547",
88
+ "@excalidraw/math": "npm:@myoc/math@0.20.0",
89
89
  "@excalidraw/random-username": "1.1.0",
90
90
  "@lezer/highlight": "^1.0.0",
91
91
  "browser-fs-access": "0.38.0",