|
|
|
@ -381,7 +381,7 @@ const LayerUI = ({
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const dialogs = (
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{appState.isLoading && <LoadingMessage delay={250} />}
|
|
|
|
|
{appState.errorMessage && (
|
|
|
|
@ -409,82 +409,77 @@ const LayerUI = ({
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return device.isMobile ? (
|
|
|
|
|
<>
|
|
|
|
|
{dialogs}
|
|
|
|
|
<MobileMenu
|
|
|
|
|
appState={appState}
|
|
|
|
|
elements={elements}
|
|
|
|
|
actionManager={actionManager}
|
|
|
|
|
libraryMenu={libraryMenu}
|
|
|
|
|
renderJSONExportDialog={renderJSONExportDialog}
|
|
|
|
|
renderImageExportDialog={renderImageExportDialog}
|
|
|
|
|
setAppState={setAppState}
|
|
|
|
|
onCollabButtonClick={onCollabButtonClick}
|
|
|
|
|
onLockToggle={() => onLockToggle()}
|
|
|
|
|
onPenModeToggle={onPenModeToggle}
|
|
|
|
|
canvas={canvas}
|
|
|
|
|
isCollaborating={isCollaborating}
|
|
|
|
|
renderCustomFooter={renderCustomFooter}
|
|
|
|
|
showThemeBtn={showThemeBtn}
|
|
|
|
|
onImageAction={onImageAction}
|
|
|
|
|
renderTopRightUI={renderTopRightUI}
|
|
|
|
|
renderCustomStats={renderCustomStats}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
) : (
|
|
|
|
|
<>
|
|
|
|
|
<div
|
|
|
|
|
className={clsx("layer-ui__wrapper", {
|
|
|
|
|
"disable-pointerEvents":
|
|
|
|
|
appState.draggingElement ||
|
|
|
|
|
appState.resizingElement ||
|
|
|
|
|
(appState.editingElement &&
|
|
|
|
|
!isTextElement(appState.editingElement)),
|
|
|
|
|
})}
|
|
|
|
|
style={
|
|
|
|
|
appState.isLibraryOpen &&
|
|
|
|
|
appState.isLibraryMenuDocked &&
|
|
|
|
|
device.canDeviceFitSidebar
|
|
|
|
|
? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
|
|
|
|
|
: {}
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
{dialogs}
|
|
|
|
|
{renderFixedSideContainer()}
|
|
|
|
|
<Footer
|
|
|
|
|
{device.isMobile && (
|
|
|
|
|
<MobileMenu
|
|
|
|
|
appState={appState}
|
|
|
|
|
elements={elements}
|
|
|
|
|
actionManager={actionManager}
|
|
|
|
|
libraryMenu={libraryMenu}
|
|
|
|
|
renderJSONExportDialog={renderJSONExportDialog}
|
|
|
|
|
renderImageExportDialog={renderImageExportDialog}
|
|
|
|
|
setAppState={setAppState}
|
|
|
|
|
onCollabButtonClick={onCollabButtonClick}
|
|
|
|
|
onLockToggle={() => onLockToggle()}
|
|
|
|
|
onPenModeToggle={onPenModeToggle}
|
|
|
|
|
canvas={canvas}
|
|
|
|
|
isCollaborating={isCollaborating}
|
|
|
|
|
renderCustomFooter={renderCustomFooter}
|
|
|
|
|
showExitZenModeBtn={showExitZenModeBtn}
|
|
|
|
|
showThemeBtn={showThemeBtn}
|
|
|
|
|
onImageAction={onImageAction}
|
|
|
|
|
renderTopRightUI={renderTopRightUI}
|
|
|
|
|
renderCustomStats={renderCustomStats}
|
|
|
|
|
/>
|
|
|
|
|
{appState.showStats && (
|
|
|
|
|
<Stats
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
{!device.isMobile && (
|
|
|
|
|
<div
|
|
|
|
|
className={clsx("layer-ui__wrapper", {
|
|
|
|
|
"disable-pointerEvents":
|
|
|
|
|
appState.draggingElement ||
|
|
|
|
|
appState.resizingElement ||
|
|
|
|
|
(appState.editingElement &&
|
|
|
|
|
!isTextElement(appState.editingElement)),
|
|
|
|
|
})}
|
|
|
|
|
style={
|
|
|
|
|
appState.isLibraryOpen &&
|
|
|
|
|
appState.isLibraryMenuDocked &&
|
|
|
|
|
device.canDeviceFitSidebar
|
|
|
|
|
? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
|
|
|
|
|
: {}
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
{renderFixedSideContainer()}
|
|
|
|
|
<Footer
|
|
|
|
|
appState={appState}
|
|
|
|
|
setAppState={setAppState}
|
|
|
|
|
elements={elements}
|
|
|
|
|
onClose={() => {
|
|
|
|
|
actionManager.executeAction(actionToggleStats);
|
|
|
|
|
}}
|
|
|
|
|
renderCustomStats={renderCustomStats}
|
|
|
|
|
actionManager={actionManager}
|
|
|
|
|
renderCustomFooter={renderCustomFooter}
|
|
|
|
|
showExitZenModeBtn={showExitZenModeBtn}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
{appState.scrolledOutside && (
|
|
|
|
|
<button
|
|
|
|
|
className="scroll-back-to-content"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setAppState({
|
|
|
|
|
...calculateScrollCenter(elements, appState, canvas),
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{t("buttons.scrollBackToContent")}
|
|
|
|
|
</button>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{appState.showStats && (
|
|
|
|
|
<Stats
|
|
|
|
|
appState={appState}
|
|
|
|
|
setAppState={setAppState}
|
|
|
|
|
elements={elements}
|
|
|
|
|
onClose={() => {
|
|
|
|
|
actionManager.executeAction(actionToggleStats);
|
|
|
|
|
}}
|
|
|
|
|
renderCustomStats={renderCustomStats}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
{appState.scrolledOutside && (
|
|
|
|
|
<button
|
|
|
|
|
className="scroll-back-to-content"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setAppState({
|
|
|
|
|
...calculateScrollCenter(elements, appState, canvas),
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{t("buttons.scrollBackToContent")}
|
|
|
|
|
</button>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
{appState.isLibraryOpen && (
|
|
|
|
|
<div className="layer-ui__sidebar">{libraryMenu}</div>
|
|
|
|
|
)}
|
|
|
|
|