mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-12-22 19:53:49 +01:00
Simplefy editor modes
This commit is contained in:
Paulo Gustavo Veiga
parent
62024393e9
commit
560429116a
@ -31,14 +31,12 @@ import ActionButton from '../action-button';
|
||||
export type ToolbarActionType = 'export' | 'publish' | 'history' | 'print' | 'share';
|
||||
|
||||
export type ToolbarPropsType = {
|
||||
memoryPersistence: boolean;
|
||||
readOnlyMode: boolean;
|
||||
isTryMode: boolean;
|
||||
onAction: (action: ToolbarActionType) => void;
|
||||
};
|
||||
|
||||
export default function Toolbar({
|
||||
memoryPersistence,
|
||||
readOnlyMode,
|
||||
isTryMode: isTryMode,
|
||||
onAction,
|
||||
}: ToolbarPropsType): React.ReactElement {
|
||||
const intl = useIntl();
|
||||
@ -48,75 +46,71 @@ export default function Toolbar({
|
||||
<div id="backToList">
|
||||
<img src={BackIconSvg} />
|
||||
</div>
|
||||
{!memoryPersistence && (
|
||||
{!isTryMode && (
|
||||
<div id="persist" className="buttonContainer">
|
||||
<ToolbarButton id="save" className="buttonOn">
|
||||
<img src={SaveSvg} />
|
||||
</ToolbarButton>
|
||||
</div>
|
||||
)}
|
||||
{!readOnlyMode && (
|
||||
<>
|
||||
<div id="edit" className="buttonContainer">
|
||||
<ToolbarButton id="undoEdition" className="buttonOn">
|
||||
<img src={UndoSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton id="redoEdition" className="buttonOn">
|
||||
<img src={RedoSvg} />
|
||||
</ToolbarButton>
|
||||
</div>
|
||||
<div id="nodeStyle" className="buttonContainer">
|
||||
<ToolbarButton id="addTopic" className="buttonOn">
|
||||
<img src={TopicAddSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton id="deleteTopic" className="buttonOn">
|
||||
<img src={TopicDeleteSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButtonExt id="topicBorder" className="buttonExtOn">
|
||||
<img src={TopicBorderSvg} />
|
||||
</ToolbarButtonExt>
|
||||
<ToolbarButtonExt id="topicColor" className="buttonExtOn">
|
||||
<img src={TopicColorSvg} />
|
||||
</ToolbarButtonExt>
|
||||
<ToolbarButtonExt id="topicShape" className="buttonExtOn">
|
||||
<img src={TopicShapeSvg} />
|
||||
</ToolbarButtonExt>
|
||||
</div>
|
||||
<div id="font" className="buttonContainer">
|
||||
<ToolbarButton id="fontFamily" className="buttonOn">
|
||||
<img src={FontTypeSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButtonExt id="fontSize" className="buttonExtOn">
|
||||
<img src={FontSizeSvg} />
|
||||
</ToolbarButtonExt>
|
||||
<ToolbarButton id="fontBold" className="buttonOn">
|
||||
<img src={FontBoldSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton id="fontItalic" className="buttonOn">
|
||||
<img src={FontItalicSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButtonExt id="fontColor" className="buttonExtOn">
|
||||
<img src={FontColorSvg} />
|
||||
</ToolbarButtonExt>
|
||||
</div>
|
||||
<div id="nodeContent" className="buttonContainer">
|
||||
<ToolbarButtonExt id="topicIcon" className="buttonExtOn">
|
||||
<img src={TopicIconSvg} />
|
||||
</ToolbarButtonExt>
|
||||
<ToolbarButton id="topicNote" className="buttonOn">
|
||||
<img src={TopicNoteSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton id="topicLink" className="buttonOn">
|
||||
<img src={TopicLinkSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton id="topicRelation" className="buttonOn">
|
||||
<img src={TopicRelationSvg} />
|
||||
</ToolbarButton>
|
||||
</div>
|
||||
<div id="separator" className="buttonContainer"></div>
|
||||
</>
|
||||
)}
|
||||
{!memoryPersistence && (
|
||||
<div id="edit" className="buttonContainer">
|
||||
<ToolbarButton id="undoEdition" className="buttonOn">
|
||||
<img src={UndoSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton id="redoEdition" className="buttonOn">
|
||||
<img src={RedoSvg} />
|
||||
</ToolbarButton>
|
||||
</div>
|
||||
<div id="nodeStyle" className="buttonContainer">
|
||||
<ToolbarButton id="addTopic" className="buttonOn">
|
||||
<img src={TopicAddSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton id="deleteTopic" className="buttonOn">
|
||||
<img src={TopicDeleteSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButtonExt id="topicBorder" className="buttonExtOn">
|
||||
<img src={TopicBorderSvg} />
|
||||
</ToolbarButtonExt>
|
||||
<ToolbarButtonExt id="topicColor" className="buttonExtOn">
|
||||
<img src={TopicColorSvg} />
|
||||
</ToolbarButtonExt>
|
||||
<ToolbarButtonExt id="topicShape" className="buttonExtOn">
|
||||
<img src={TopicShapeSvg} />
|
||||
</ToolbarButtonExt>
|
||||
</div>
|
||||
<div id="font" className="buttonContainer">
|
||||
<ToolbarButton id="fontFamily" className="buttonOn">
|
||||
<img src={FontTypeSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButtonExt id="fontSize" className="buttonExtOn">
|
||||
<img src={FontSizeSvg} />
|
||||
</ToolbarButtonExt>
|
||||
<ToolbarButton id="fontBold" className="buttonOn">
|
||||
<img src={FontBoldSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton id="fontItalic" className="buttonOn">
|
||||
<img src={FontItalicSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButtonExt id="fontColor" className="buttonExtOn">
|
||||
<img src={FontColorSvg} />
|
||||
</ToolbarButtonExt>
|
||||
</div>
|
||||
<div id="nodeContent" className="buttonContainer">
|
||||
<ToolbarButtonExt id="topicIcon" className="buttonExtOn">
|
||||
<img src={TopicIconSvg} />
|
||||
</ToolbarButtonExt>
|
||||
<ToolbarButton id="topicNote" className="buttonOn">
|
||||
<img src={TopicNoteSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton id="topicLink" className="buttonOn">
|
||||
<img src={TopicLinkSvg} />
|
||||
</ToolbarButton>
|
||||
<ToolbarButton id="topicRelation" className="buttonOn">
|
||||
<img src={TopicRelationSvg} />
|
||||
</ToolbarButton>
|
||||
</div>
|
||||
<div id="separator" className="buttonContainer"></div>
|
||||
{!isTryMode && (
|
||||
<ToolbarRightContainer>
|
||||
<ToolbarButton
|
||||
id="export"
|
||||
|
||||
@ -38,14 +38,14 @@ declare global {
|
||||
|
||||
export type EditorPropsType = {
|
||||
initCallback?: () => void;
|
||||
mapId: number;
|
||||
memoryPersistence: boolean;
|
||||
mapId?: number;
|
||||
isTryMode: boolean;
|
||||
readOnlyMode: boolean;
|
||||
locale?: string;
|
||||
onAction: (action: ToolbarActionType) => void;
|
||||
};
|
||||
|
||||
function loadLocaleData(locale: string) {
|
||||
const loadLocaleData = (locale: string) => {
|
||||
switch (locale) {
|
||||
case 'fr':
|
||||
return FR;
|
||||
@ -65,7 +65,7 @@ const initMindplot = () => {
|
||||
document.title = `${global.mapTitle} | WiseMapping `;
|
||||
|
||||
// Configure persistence manager ...
|
||||
let persistence;
|
||||
let persistence: PersistenceManager;
|
||||
if (!global.memoryPersistence && !global.readOnly) {
|
||||
persistence = new RESTPersistenceManager({
|
||||
documentUrl: '/c/restful/maps/{id}/document',
|
||||
@ -111,38 +111,26 @@ const initMindplot = () => {
|
||||
}
|
||||
};
|
||||
|
||||
export default function Editor({
|
||||
const Editor = ({
|
||||
initCallback = initMindplot,
|
||||
mapId,
|
||||
memoryPersistence,
|
||||
readOnlyMode,
|
||||
isTryMode: isTryMode,
|
||||
locale = 'en',
|
||||
onAction,
|
||||
}: EditorPropsType): React.ReactElement {
|
||||
const [localeTranslation, setLocaleTranslation] = React.useState(null);
|
||||
}: EditorPropsType): React.ReactElement => {
|
||||
React.useEffect(() => {
|
||||
if (localeTranslation && !global.designer) {
|
||||
initCallback();
|
||||
}
|
||||
}, [localeTranslation]);
|
||||
React.useEffect(() => {
|
||||
const loadAndSetLocale = async () => {
|
||||
setLocaleTranslation(await loadLocaleData(locale));
|
||||
};
|
||||
loadAndSetLocale();
|
||||
}, [locale])
|
||||
if (!localeTranslation) {
|
||||
return null;
|
||||
}
|
||||
initCallback();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<IntlProvider locale={locale} defaultLocale="en" messages={localeTranslation}>
|
||||
<IntlProvider locale={locale} defaultLocale="en" messages={loadLocaleData(locale)}>
|
||||
<Toolbar
|
||||
memoryPersistence={memoryPersistence}
|
||||
readOnlyMode={readOnlyMode}
|
||||
isTryMode={isTryMode}
|
||||
onAction={onAction}
|
||||
/>
|
||||
<div id="mindplot"></div>
|
||||
<Footer showTryPanel={memoryPersistence} />
|
||||
<Footer showTryPanel={isTryMode} />
|
||||
</IntlProvider>
|
||||
);
|
||||
}
|
||||
export default Editor;
|
||||
|
||||
@ -19,8 +19,8 @@ import EditorPage from './components/editor-page';
|
||||
|
||||
|
||||
declare module '@mui/styles/defaultTheme' {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
||||
interface DefaultTheme extends Theme {}
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
||||
interface DefaultTheme extends Theme { }
|
||||
}
|
||||
|
||||
|
||||
@ -41,8 +41,7 @@ const App = (): ReactElement => {
|
||||
const locale = appi18n.getBrowserLocale();
|
||||
|
||||
// global variables set server-side
|
||||
const memoryPersistence = global.memoryPersistence;
|
||||
const readOnlyMode = global.readOnly;
|
||||
const istTryMode = global.memoryPersistence;
|
||||
const mapId = parseInt(global.mapId, 10);
|
||||
|
||||
return locale.message ? (
|
||||
@ -85,12 +84,10 @@ const App = (): ReactElement => {
|
||||
component={MapsPage}
|
||||
/>
|
||||
<Route exact path="/c/maps/:id/edit">
|
||||
<EditorPage memoryPersistence={memoryPersistence}
|
||||
readOnlyMode={readOnlyMode} mapId={mapId} />
|
||||
<EditorPage isTryMode={istTryMode} mapId={mapId} />
|
||||
</Route>
|
||||
<Route exact path="/c/maps/:id/try">
|
||||
<EditorPage memoryPersistence={memoryPersistence}
|
||||
readOnlyMode={readOnlyMode} mapId={mapId} />
|
||||
<EditorPage isTryMode={istTryMode} mapId={mapId} />
|
||||
</Route>
|
||||
</Switch>
|
||||
</Router>
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import React from 'react';
|
||||
import ActionDispatcher from '../maps-page/action-dispatcher';
|
||||
import { ActionType } from '../maps-page/action-chooser';
|
||||
import WiseEditor from '@wisemapping/editor';
|
||||
import Editor from '@wisemapping/editor';
|
||||
import AppI18n from '../../classes/app-i18n';
|
||||
|
||||
export type EditorPropsType = {
|
||||
mapId: number;
|
||||
memoryPersistence: boolean;
|
||||
readOnlyMode: boolean;
|
||||
isTryMode: boolean;
|
||||
};
|
||||
|
||||
const EditorPage = ({ mapId, ...props }: EditorPropsType): React.ReactElement => {
|
||||
@ -18,7 +17,7 @@ const EditorPage = ({ mapId, ...props }: EditorPropsType): React.ReactElement =>
|
||||
const userLocale = appi18n.getUserLocale();
|
||||
|
||||
return <>
|
||||
<WiseEditor {...props} onAction={setActiveDialog} locale={userLocale.code} />
|
||||
<Editor {...props} onAction={setActiveDialog} locale={userLocale.code} />
|
||||
{
|
||||
activeDialog &&
|
||||
<ActionDispatcher
|
||||
|
||||
Loading…
Reference in New Issue
Block a user