From 02c12369626883d2d330eaf573d2741c0a3b7299 Mon Sep 17 00:00:00 2001 From: zsviczian Date: Fri, 4 Nov 2022 19:39:12 +0100 Subject: [PATCH] Package configuration options --- src/components/App.tsx | 3 +++ src/components/LayerUI.tsx | 27 ++++++++++++++++++------ src/components/MobileMenu.tsx | 34 ++++++++++++++++++++++--------- src/constants.ts | 1 + src/packages/excalidraw/README.md | 19 +++++++++++++++++ src/packages/excalidraw/index.tsx | 4 ++++ src/types.ts | 5 +++++ 7 files changed, 77 insertions(+), 16 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 3d5e6a36d..e3f705882 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 2cefeed56..8544bfe06 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 59dd299d7..2fcfb37aa 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 dab82771f..ca24012e8 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 d31c27cf8..e1d04618d 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 4ac071592..319f5b9cb 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 52a84ef3c..cbab0f0b4 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<