diff --git a/src/components/App.tsx b/src/components/App.tsx index 3d5e6a36dc..e3f7058826 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -516,6 +516,7 @@ class App extends React.Component { const { onCollabButtonClick, renderTopRightUI, + renderMenuLinks, renderFooter, renderCustomStats, } = this.props; @@ -562,6 +563,7 @@ class App extends React.Component { langCode={getLanguage().code} isCollaborating={this.props.isCollaborating} renderTopRightUI={renderTopRightUI} + renderMenuLinks={renderMenuLinks} renderCustomFooter={renderFooter} renderCustomStats={renderCustomStats} renderCustomSidebar={this.props.renderSidebar} @@ -576,6 +578,7 @@ class App extends React.Component { id={this.id} onImageAction={this.onImageAction} renderWelcomeScreen={ + this.props.hideWelcomeScreen !== true && this.state.showWelcomeScreen && this.state.activeTool.type === "selection" && !this.scene.getElementsIncludingDeleted().length diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 2cefeed569..8544bfe061 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -71,6 +71,7 @@ interface LayerUIProps { langCode: Language["code"]; isCollaborating: boolean; renderTopRightUI?: ExcalidrawProps["renderTopRightUI"]; + renderMenuLinks?: ExcalidrawProps["renderMenuLinks"]; renderCustomFooter?: ExcalidrawProps["renderFooter"]; renderCustomStats?: ExcalidrawProps["renderCustomStats"]; renderCustomSidebar?: ExcalidrawProps["renderSidebar"]; @@ -96,6 +97,7 @@ const LayerUI = ({ showExitZenModeBtn, isCollaborating, renderTopRightUI, + renderMenuLinks, renderCustomFooter, renderCustomStats, renderCustomSidebar, @@ -218,7 +220,8 @@ const LayerUI = ({ actionManager.renderAction("loadScene")} {/* // TODO barnabasmolnar/editor-redesign */} {/* is this fine here? */} - {appState.fileHandle && + {UIOptions.canvasActions.saveToActiveFile && + appState.fileHandle && actionManager.renderAction("saveToActiveFile")} {renderJSONExportDialog()} {UIOptions.canvasActions.saveAsImage && ( @@ -240,8 +243,16 @@ const LayerUI = ({ {actionManager.renderAction("toggleShortcuts", undefined, true)} {!appState.viewModeEnabled && actionManager.renderAction("clearCanvas")} - - + {typeof renderMenuLinks === "undefined" ? ( //zsviczian + + ) : ( + renderMenuLinks && + )} + {typeof renderMenuLinks === "undefined" ? ( //zsviczian + + ) : ( + renderMenuLinks && renderMenuLinks(device.isMobile, appState) + )}
{actionManager.renderAction("toggleTheme")}
-
- -
+ {UIOptions.canvasActions.languageList !== false && ( +
+ +
+ )} {!appState.viewModeEnabled && (
@@ -484,9 +497,11 @@ const LayerUI = ({ renderCustomFooter={renderCustomFooter} onImageAction={onImageAction} renderTopRightUI={renderTopRightUI} + renderMenuLinks={renderMenuLinks} renderCustomStats={renderCustomStats} renderSidebars={renderSidebars} device={device} + UIOptions={UIOptions} /> )} diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx index 59dd299d78..2fcfb37aab 100644 --- a/src/components/MobileMenu.tsx +++ b/src/components/MobileMenu.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { AppState, Device, ExcalidrawProps } from "../types"; +import { AppProps, AppState, Device, ExcalidrawProps } from "../types"; import { ActionManager } from "../actions/manager"; import { t } from "../i18n"; import Stack from "./Stack"; @@ -45,10 +45,12 @@ type MobileMenuProps = { isMobile: boolean, appState: AppState, ) => JSX.Element | null; + renderMenuLinks?: ExcalidrawProps["renderMenuLinks"]; renderCustomStats?: ExcalidrawProps["renderCustomStats"]; renderSidebars: () => JSX.Element | null; device: Device; renderWelcomeScreen?: boolean; + UIOptions: AppProps["UIOptions"]; }; export const MobileMenu = ({ @@ -66,10 +68,12 @@ export const MobileMenu = ({ renderCustomFooter, onImageAction, renderTopRightUI, + renderMenuLinks, renderCustomStats, renderSidebars, device, renderWelcomeScreen, + UIOptions, }: MobileMenuProps) => { const renderToolbar = () => { return ( @@ -111,8 +115,8 @@ export const MobileMenu = ({ /> - {renderTopRightUI && renderTopRightUI(true, appState)}
+ {renderTopRightUI && renderTopRightUI(true, appState)} setAppState({ openDialog: "imageExport" })} - /> + {UIOptions.canvasActions.saveAsImage && ( + setAppState({ openDialog: "imageExport" })} + /> + )} {onCollabButtonClick && ( - + {typeof renderMenuLinks === "undefined" ? ( //zsviczian + + ) : ( + renderMenuLinks && + )} + {typeof renderMenuLinks === "undefined" ? ( //zsviczian + + ) : ( + renderMenuLinks && renderMenuLinks(device.isMobile, appState) + )} {!appState.viewModeEnabled && (
diff --git a/src/constants.ts b/src/constants.ts index dab82771fd..ca24012e87 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -155,6 +155,7 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = { saveToActiveFile: true, toggleTheme: null, saveAsImage: true, + languageList: true, }, }; diff --git a/src/packages/excalidraw/README.md b/src/packages/excalidraw/README.md index d31c27cf89..e1d04618df 100644 --- a/src/packages/excalidraw/README.md +++ b/src/packages/excalidraw/README.md @@ -392,6 +392,8 @@ No, Excalidraw package doesn't come with collaboration built in, since the imple | [`onPointerUpdate`](#onPointerUpdate) | Function | | Callback triggered when mouse pointer is updated. | | [`langCode`](#langCode) | string | `en` | Language code string | | [`renderTopRightUI`](#renderTopRightUI) | Function | | Function that renders custom UI in top right corner | +| [`hideWelcomeScreen`](#hideWelcomeScreen) | boolean | | This implies if the app should always hide the welcome sreen | +| [`renderMenuLinks`](#renderMenuLinks) | Function | | Function that renders custom list of links (or other custom UI) in the app menu | | [`renderFooter `](#renderFooter) | Function | | Function that renders custom UI footer | | [`renderCustomStats`](#renderCustomStats) | Function | | Function that can be used to render custom stats on the stats dialog. | | [`renderSIdebar`](#renderSIdebar) | Function | | Render function that renders custom sidebar. | @@ -613,6 +615,22 @@ import { defaultLang, languages } from "@excalidraw/excalidraw"; A function returning JSX to render custom UI in the top right corner of the app. +#### `hideWelcomeScreen` + +
+boolean
+
+ +Boolean value to override the displaying of the welcome screen elements. If set to true, the welcome screen will never be shown. + +#### `renderMenuLinks` + +
+((isMobile: boolean, appState: AppState) => JSX | null)|null
+
+ +A function returning JSX to render custom UI (intended to be a list of custom links) replacing the default list of links in the app menu. If set to null, the list of links will not be displayed. If unset, the default list of links will be displayed. + #### `renderFooter`
@@ -702,6 +720,7 @@ This prop can be used to customise UI of Excalidraw. Currently we support custom
 | `saveToActiveFile` | boolean | true | Implies whether to show `Save button` to save to current file |
 | `toggleTheme` | boolean | null | null | Implies whether to show `Theme toggle`. When defined as `boolean`, takes precedence over [`props.theme`](#theme) to show `Theme toggle` |
 | `saveAsImage` | boolean | true | Implies whether to show `Save as image button` |
+| `languageList` | boolean | true | Implies whether to show the `Language Selector Dropdown list` |
 
 ##### `dockedSidebarBreakpoint`
 
diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx
index 4ac0715920..319f5b9cbb 100644
--- a/src/packages/excalidraw/index.tsx
+++ b/src/packages/excalidraw/index.tsx
@@ -20,6 +20,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     isCollaborating = false,
     onPointerUpdate,
     renderTopRightUI,
+    hideWelcomeScreen,
+    renderMenuLinks,
     renderFooter,
     renderSidebar,
     langCode = defaultLang.code,
@@ -93,6 +95,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           isCollaborating={isCollaborating}
           onPointerUpdate={onPointerUpdate}
           renderTopRightUI={renderTopRightUI}
+          hideWelcomeScreen={hideWelcomeScreen}
+          renderMenuLinks={renderMenuLinks}
           renderFooter={renderFooter}
           langCode={langCode}
           viewModeEnabled={viewModeEnabled}
diff --git a/src/types.ts b/src/types.ts
index 52a84ef3c8..cbab0f0b46 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -284,6 +284,10 @@ export interface ExcalidrawProps {
     isMobile: boolean,
     appState: AppState,
   ) => JSX.Element | null;
+  renderMenuLinks?:
+    | ((isMobile: boolean, appState: AppState) => JSX.Element | null)
+    | null;
+  hideWelcomeScreen?: boolean;
   renderFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
   langCode?: Language["code"];
   viewModeEnabled?: boolean;
@@ -363,6 +367,7 @@ type CanvasActions = {
   saveToActiveFile?: boolean;
   toggleTheme?: boolean | null;
   saveAsImage?: boolean;
+  languageList?: boolean;
 };
 
 export type AppProps = Merge<