vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-13 02:37:57 +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

128
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 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"

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

@ -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;

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

@ -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>

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

@ -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