diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx index 9fcb18f190..a9630bad1c 100644 --- a/packages/excalidraw/components/LayerUI.tsx +++ b/packages/excalidraw/components/LayerUI.tsx @@ -91,6 +91,7 @@ interface LayerUIProps { onPenModeToggle: AppClassProperties["togglePenMode"]; showExitZenModeBtn: boolean; langCode: Language["code"]; + renderTopLeftUI?: ExcalidrawProps["renderTopLeftUI"]; renderTopRightUI?: ExcalidrawProps["renderTopRightUI"]; renderCustomStats?: ExcalidrawProps["renderCustomStats"]; UIOptions: AppProps["UIOptions"]; @@ -149,6 +150,7 @@ const LayerUI = ({ onHandToolToggle, onPenModeToggle, showExitZenModeBtn, + renderTopLeftUI, renderTopRightUI, renderCustomStats, UIOptions, @@ -584,6 +586,7 @@ const LayerUI = ({ setAppState={setAppState} onHandToolToggle={onHandToolToggle} onPenModeToggle={onPenModeToggle} + renderTopLeftUI={renderTopLeftUI} renderTopRightUI={renderTopRightUI} renderSidebars={renderSidebars} renderWelcomeScreen={renderWelcomeScreen} diff --git a/packages/excalidraw/components/MobileMenu.tsx b/packages/excalidraw/components/MobileMenu.tsx index acb72e6fe8..1d0a8a598f 100644 --- a/packages/excalidraw/components/MobileMenu.tsx +++ b/packages/excalidraw/components/MobileMenu.tsx @@ -36,6 +36,10 @@ type MobileMenuProps = { isMobile: boolean, appState: UIAppState, ) => JSX.Element | null; + renderTopLeftUI?: ( + isMobile: boolean, + appState: UIAppState, + ) => JSX.Element | null; renderSidebars: () => JSX.Element | null; renderWelcomeScreen: boolean; UIOptions: AppProps["UIOptions"]; @@ -48,7 +52,7 @@ export const MobileMenu = ({ actionManager, setAppState, onHandToolToggle, - + renderTopLeftUI, renderTopRightUI, renderSidebars, renderWelcomeScreen, @@ -61,19 +65,20 @@ export const MobileMenu = ({ DefaultSidebarTriggerTunnel, } = useTunnels(); const renderAppTopBar = () => { + const topRightUI = renderTopRightUI?.(true, appState) ?? ( + + ); + const topLeftUI = renderTopLeftUI?.(true, appState) ?? ( + + ); + if ( appState.viewModeEnabled || appState.openDialog?.name === "elementLinkSelector" ) { - return ( -
- -
- ); + return
{topLeftUI}
; } - const topRightUI = renderTopRightUI?.(true, appState); - return (
- - {topRightUI ? topRightUI : } + {topLeftUI} + {topRightUI}
); }; diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts index dd1505d644..49d6faad9d 100644 --- a/packages/excalidraw/types.ts +++ b/packages/excalidraw/types.ts @@ -571,6 +571,10 @@ export interface ExcalidrawProps { /** excludes the duplicated elements */ prevElements: readonly ExcalidrawElement[], ) => ExcalidrawElement[] | void; + renderTopLeftUI?: ( + isMobile: boolean, + appState: UIAppState, + ) => JSX.Element | null; renderTopRightUI?: ( isMobile: boolean, appState: UIAppState,