@myoc/element 0.19.547 → 0.20.0

package/dist/types/excalidraw/components/Actions.d.ts

@@ -29,12 +29,14 @@ export declare const CompactShapeActions: ({ appState, elementsMap, renderAction
  * overflow measurement that promotes duplicate/delete out of the popover when
  * there is room.
  */
-export declare const MobileShapeActions: ({ appState, elementsMap, renderAction, app, setAppState, }: {
+export declare const MobileShapeActions: ({ appState, elementsMap, renderAction, app, setAppState, showUndo, showRedo, }: {
     appState: UIAppState;
     elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
     renderAction: ActionManager["renderAction"];
     app: AppClassProperties;
     setAppState: React.Component<any, AppState>["setState"];
+    showUndo?: boolean;
+    showRedo?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const ZoomActions: ({ renderAction, }: {
     renderAction: ActionManager["renderAction"];

package/dist/types/excalidraw/components/LayerUI.d.ts

@@ -30,6 +30,7 @@ interface LayerUIProps {
     isCollaborating: boolean;
     generateLinkForSelection?: AppProps["generateLinkForSelection"];
     currentUserControls?: ExcalidrawProps["currentUserControls"];
+    uiLayout?: ExcalidrawProps["uiLayout"];
 }
-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>;
+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>;
 export default _default;

package/dist/types/excalidraw/components/MobileMenu.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 import type { ActionManager } from "../actions/manager";
-import type { AppClassProperties, AppState, UIAppState } from "../types";
+import type { AppClassProperties, AppState, ExcalidrawProps, UIAppState } from "../types";
 import type { JSX } from "react";
 type MobileMenuProps = {
     appState: UIAppState;
@@ -18,6 +18,7 @@ type MobileMenuProps = {
     defaultUIEnabled: boolean;
     scrollBackToContentUIEnabled: boolean;
     app: AppClassProperties;
+    uiLayout?: ExcalidrawProps["uiLayout"];
 };
-export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, renderTopLeftUI, renderTopRightUI, renderSidebars, renderWelcomeScreen, defaultUIEnabled, scrollBackToContentUIEnabled, app, onPenModeToggle, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, renderTopLeftUI, renderTopRightUI, renderSidebars, renderWelcomeScreen, defaultUIEnabled, scrollBackToContentUIEnabled, app, onPenModeToggle, uiLayout, }: MobileMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/excalidraw/components/Toolbar.d.ts

@@ -1,7 +1,7 @@
 import type { AppClassProperties, AppProps, AppState, UIAppState } from "../types";
 import type { ActionManager } from "../actions/manager";
 /** the main (desktop/tablet) toolbar island */
-export declare const Toolbar: ({ app, appState, setAppState, UIOptions, actionManager, onPenModeToggle, onLockToggle, heading, }: {
+export declare const Toolbar: ({ app, appState, setAppState, UIOptions, actionManager, onPenModeToggle, onLockToggle, heading, showPenMode, }: {
     app: AppClassProperties;
     appState: UIAppState;
     setAppState: React.Component<any, AppState>["setState"];
@@ -10,4 +10,5 @@ export declare const Toolbar: ({ app, appState, setAppState, UIOptions, actionMa
     onPenModeToggle: AppClassProperties["togglePenMode"];
     onLockToggle: () => void;
     heading: React.ReactNode;
+    showPenMode?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/excalidraw/components/UIRegionLayout.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { EditorInterface } from "@excalidraw/common";
+import "./UIRegionLayout.scss";
+import type { ExcalidrawImperativeAPI, ExcalidrawUIFormFactorLayout, ExcalidrawUIItem, ExcalidrawUIOrientation, ExcalidrawUIRegion, UIAppState } from "../types";
+export type UIRegionLayoutItem = {
+    id: ExcalidrawUIItem;
+    content: React.ReactNode;
+    defaultRegion: ExcalidrawUIRegion;
+    defaultOrder?: number;
+    defaultOrientation?: ExcalidrawUIOrientation;
+    islandGroup?: {
+        id: string;
+        className: string;
+        padding: number;
+        gap: number;
+    };
+};
+export declare const UIRegionLayout: ({ items, layout, app, appState, editorInterface, className, legacyBottomCenter, legacyBottomLeft, }: {
+    items: readonly UIRegionLayoutItem[];
+    layout?: ExcalidrawUIFormFactorLayout;
+    app: {
+        api: ExcalidrawImperativeAPI;
+    };
+    appState: UIAppState;
+    editorInterface: EditorInterface;
+    className?: string;
+    legacyBottomCenter?: React.ReactNode;
+    legacyBottomLeft?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const getUIFormFactorLayout: (layout: {
+    desktop?: ExcalidrawUIFormFactorLayout;
+    tablet?: ExcalidrawUIFormFactorLayout;
+    mobile?: ExcalidrawUIFormFactorLayout;
+} | undefined, editorInterface: Pick<EditorInterface, "formFactor">) => ExcalidrawUIFormFactorLayout | undefined;

package/dist/types/excalidraw/types.d.ts

@@ -695,7 +695,43 @@ export type UIConfig = {
         scrollBackToContent?: boolean;
     };
 };
+export type ExcalidrawUIRegion = "topLeft" | "topCenter" | "topRight" | "middleLeft" | "middleRight" | "bottomLeft" | "bottomCenter" | "bottomRight";
+export type ExcalidrawUIOrientation = "auto" | "horizontal" | "vertical";
+/** Built-in controls that can be independently placed by `uiLayout`. */
+export type ExcalidrawUIItem = "mainMenu" | "sidebarTrigger" | "hostTopLeftUI" | "hostTopRightUI" | "toolbar" | "stylesPanel" | "collaborators" | "stats" | "undo" | "redo" | "smartZoom" | "viewMode" | "zoom" | "penMode" | "help";
+export type ExcalidrawUIItemLayout = {
+    region?: ExcalidrawUIRegion;
+    visible?: boolean;
+    order?: number;
+    orientation?: ExcalidrawUIOrientation;
+};
+export type ExcalidrawUICustomItem = ExcalidrawUIItemLayout & {
+    id: string;
+    region: ExcalidrawUIRegion;
+    render: (context: {
+        api: ExcalidrawImperativeAPI;
+        appState: UIAppState;
+        editorInterface: EditorInterface;
+        region: ExcalidrawUIRegion;
+        orientation: Exclude<ExcalidrawUIOrientation, "auto">;
+    }) => React.ReactNode;
+};
+export type ExcalidrawUIFormFactorLayout = {
+    items?: Partial<Record<ExcalidrawUIItem, ExcalidrawUIItemLayout>>;
+    customItems?: readonly ExcalidrawUICustomItem[];
+};
+/** Independent host-owned layouts for each responsive editor form factor. */
+export type ExcalidrawUILayout = {
+    desktop?: ExcalidrawUIFormFactorLayout;
+    tablet?: ExcalidrawUIFormFactorLayout;
+    mobile?: ExcalidrawUIFormFactorLayout;
+};
 export interface ExcalidrawProps {
+    /**
+     * Host-controlled placement and visibility for editor UI. Each form factor
+     * has its own overrides; omitted values retain that form factor's defaults.
+     */
+    uiLayout?: ExcalidrawUILayout;
     className?: string;
     onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
     onThemeChange?: (theme: Theme | "system") => void;
@@ -1160,6 +1196,7 @@ export interface ExcalidrawImperativeAPI {
     setCursor: InstanceType<typeof App>["cursor"]["set"];
     resetCursor: InstanceType<typeof App>["cursor"]["reset"];
     toggleSidebar: InstanceType<typeof App>["toggleSidebar"];
+    setDesktopUIMode: InstanceType<typeof App>["setDesktopUIMode"];
     getEditorInterface: () => EditorInterface;
     /**
      * Disables rendering of frames (including element clipping), but currently

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myoc/element",
-  "version": "0.19.547",
+  "version": "0.20.0",
   "type": "module",
   "types": "./dist/types/element/src/index.d.ts",
   "main": "./dist/prod/index.js",
@@ -65,9 +65,9 @@
   },
   "dependencies": {
     "@discourse/gif": "1.0.0",
-    "@excalidraw/common": "npm:@myoc/common@0.19.547",
-    "@excalidraw/fractional-indexing": "npm:@myoc/fractional-indexing@0.19.547",
-    "@excalidraw/math": "npm:@myoc/math@0.19.547",
+    "@excalidraw/common": "npm:@myoc/common@0.20.0",
+    "@excalidraw/fractional-indexing": "npm:@myoc/fractional-indexing@0.20.0",
+    "@excalidraw/math": "npm:@myoc/math@0.20.0",
     "thumbhash": "0.1.1"
   }
 }

package/dist/types/excalidraw/components/FixedSideContainer.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-import "./FixedSideContainer.scss";
-type FixedSideContainerProps = {
-    children: React.ReactNode;
-    side: "top" | "left" | "right";
-    className?: string;
-};
-export declare const FixedSideContainer: ({ children, side, className, }: FixedSideContainerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/excalidraw/components/footer/Footer.d.ts

@@ -1,14 +0,0 @@
-import type { ActionManager } from "../../actions/manager";
-import type { UIAppState } from "../../types";
-declare const Footer: {
-    ({ appState, actionManager, showExitZenModeBtn, renderWelcomeScreen, defaultUIEnabled, zoomUIEnabled, }: {
-        appState: UIAppState;
-        actionManager: ActionManager;
-        showExitZenModeBtn: boolean;
-        renderWelcomeScreen: boolean;
-        defaultUIEnabled: boolean;
-        zoomUIEnabled: boolean;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export default Footer;