vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2025-02-16 21:08:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

Simplefy editor modes

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2022-02-06 11:12:20 -08:00
parent 62024393e9
commit 560429116a
4 changed files with 83 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/editor/src/components/toolbar/index.tsx
View File

@ -31,14 +31,12 @@ import ActionButton from '../action-button';
export type ToolbarActionType = 'export' | 'publish' | 'history' | 'print' | 'share'; export type ToolbarActionType = 'export' | 'publish' | 'history' | 'print' | 'share';
export type ToolbarPropsType = { export type ToolbarPropsType = {
memoryPersistence: boolean; isTryMode: boolean;
readOnlyMode: boolean;
onAction: (action: ToolbarActionType) => void; onAction: (action: ToolbarActionType) => void;
}; };
export default function Toolbar({ export default function Toolbar({
memoryPersistence, isTryMode: isTryMode,
readOnlyMode,
onAction, onAction,
}: ToolbarPropsType): React.ReactElement { }: ToolbarPropsType): React.ReactElement {
const intl = useIntl(); const intl = useIntl();
@ -48,15 +46,13 @@ export default function Toolbar({
<div id="backToList"> <div id="backToList">
<img src={BackIconSvg} /> <img src={BackIconSvg} />
</div> </div>
{!memoryPersistence && ( {!isTryMode && (
<div id="persist" className="buttonContainer"> <div id="persist" className="buttonContainer">
<ToolbarButton id="save" className="buttonOn"> <ToolbarButton id="save" className="buttonOn">
<img src={SaveSvg} /> <img src={SaveSvg} />
</ToolbarButton> </ToolbarButton>
</div> </div>
)} )}
{!readOnlyMode && (
<>
<div id="edit" className="buttonContainer"> <div id="edit" className="buttonContainer">
<ToolbarButton id="undoEdition" className="buttonOn"> <ToolbarButton id="undoEdition" className="buttonOn">
<img src={UndoSvg} /> <img src={UndoSvg} />
@ -114,9 +110,7 @@ export default function Toolbar({
</ToolbarButton> </ToolbarButton>
</div> </div>
<div id="separator" className="buttonContainer"></div> <div id="separator" className="buttonContainer"></div>
</> {!isTryMode && (
)}
{!memoryPersistence && (
<ToolbarRightContainer> <ToolbarRightContainer>
<ToolbarButton <ToolbarButton
id="export" id="export"

38
packages/editor/src/index.tsx
View File

@ -38,14 +38,14 @@ declare global {
export type EditorPropsType = { export type EditorPropsType = {
initCallback?: () => void; initCallback?: () => void;
mapId: number; mapId?: number;
memoryPersistence: boolean; isTryMode: boolean;
readOnlyMode: boolean; readOnlyMode: boolean;
locale?: string; locale?: string;
onAction: (action: ToolbarActionType) => void; onAction: (action: ToolbarActionType) => void;
}; };
function loadLocaleData(locale: string) { const loadLocaleData = (locale: string) => {
switch (locale) { switch (locale) {
case 'fr': case 'fr':
return FR; return FR;
@ -65,7 +65,7 @@ const initMindplot = () => {
document.title = `${global.mapTitle} | WiseMapping `; document.title = `${global.mapTitle} | WiseMapping `;
// Configure persistence manager ... // Configure persistence manager ...
let persistence; let persistence: PersistenceManager;
if (!global.memoryPersistence && !global.readOnly) { if (!global.memoryPersistence && !global.readOnly) {
persistence = new RESTPersistenceManager({ persistence = new RESTPersistenceManager({
documentUrl: '/c/restful/maps/{id}/document', documentUrl: '/c/restful/maps/{id}/document',
@ -111,38 +111,26 @@ const initMindplot = () => {
} }
}; };
export default function Editor({ const Editor = ({
initCallback = initMindplot, initCallback = initMindplot,
mapId, mapId,
memoryPersistence, isTryMode: isTryMode,
readOnlyMode,
locale = 'en', locale = 'en',
onAction, onAction,
}: EditorPropsType): React.ReactElement { }: EditorPropsType): React.ReactElement => {
const [localeTranslation, setLocaleTranslation] = React.useState(null);
React.useEffect(() => { React.useEffect(() => {
if (localeTranslation && !global.designer) {
initCallback(); initCallback();
} }, []);
}, [localeTranslation]);
React.useEffect(() => {
const loadAndSetLocale = async () => {
setLocaleTranslation(await loadLocaleData(locale));
};
loadAndSetLocale();
}, [locale])
if (!localeTranslation) {
return null;
}
return ( return (
<IntlProvider locale={locale} defaultLocale="en" messages={localeTranslation}> <IntlProvider locale={locale} defaultLocale="en" messages={loadLocaleData(locale)}>
<Toolbar <Toolbar
memoryPersistence={memoryPersistence} isTryMode={isTryMode}
readOnlyMode={readOnlyMode}
onAction={onAction} onAction={onAction}
/> />
<div id="mindplot"></div> <div id="mindplot"></div>
<Footer showTryPanel={memoryPersistence} /> <Footer showTryPanel={isTryMode} />
</IntlProvider> </IntlProvider>
); );
} }
export default Editor;

11
packages/webapp/src/app.tsx
View File

@ -20,7 +20,7 @@ import EditorPage from './components/editor-page';
declare module '@mui/styles/defaultTheme' { declare module '@mui/styles/defaultTheme' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface // eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {} interface DefaultTheme extends Theme { }
} }
@ -41,8 +41,7 @@ const App = (): ReactElement => {
const locale = appi18n.getBrowserLocale(); const locale = appi18n.getBrowserLocale();
// global variables set server-side // global variables set server-side
const memoryPersistence = global.memoryPersistence; const istTryMode = global.memoryPersistence;
const readOnlyMode = global.readOnly;
const mapId = parseInt(global.mapId, 10); const mapId = parseInt(global.mapId, 10);
return locale.message ? ( return locale.message ? (
@ -85,12 +84,10 @@ const App = (): ReactElement => {
component={MapsPage} component={MapsPage}
/> />
<Route exact path="/c/maps/:id/edit"> <Route exact path="/c/maps/:id/edit">
<EditorPage memoryPersistence={memoryPersistence} <EditorPage isTryMode={istTryMode} mapId={mapId} />
readOnlyMode={readOnlyMode} mapId={mapId} />
</Route> </Route>
<Route exact path="/c/maps/:id/try"> <Route exact path="/c/maps/:id/try">
<EditorPage memoryPersistence={memoryPersistence} <EditorPage isTryMode={istTryMode} mapId={mapId} />
readOnlyMode={readOnlyMode} mapId={mapId} />
</Route> </Route>
</Switch> </Switch>
</Router> </Router>

7
packages/webapp/src/components/editor-page/index.tsx
View File

@ -1,13 +1,12 @@
import React from 'react'; import React from 'react';
import ActionDispatcher from '../maps-page/action-dispatcher'; import ActionDispatcher from '../maps-page/action-dispatcher';
import { ActionType } from '../maps-page/action-chooser'; import { ActionType } from '../maps-page/action-chooser';
import WiseEditor from '@wisemapping/editor'; import Editor from '@wisemapping/editor';
import AppI18n from '../../classes/app-i18n'; import AppI18n from '../../classes/app-i18n';
export type EditorPropsType = { export type EditorPropsType = {
mapId: number; mapId: number;
memoryPersistence: boolean; isTryMode: boolean;
readOnlyMode: boolean;
}; };
const EditorPage = ({ mapId, ...props }: EditorPropsType): React.ReactElement => { const EditorPage = ({ mapId, ...props }: EditorPropsType): React.ReactElement => {
@ -18,7 +17,7 @@ const EditorPage = ({ mapId, ...props }: EditorPropsType): React.ReactElement =>
const userLocale = appi18n.getUserLocale(); const userLocale = appi18n.getUserLocale();
return <> return <>
<WiseEditor {...props} onAction={setActiveDialog} locale={userLocale.code} /> <Editor {...props} onAction={setActiveDialog} locale={userLocale.code} />
{ {
activeDialog && activeDialog &&
<ActionDispatcher <ActionDispatcher