vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 14:47:56 +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 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,75 +46,71 @@ 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">
<> <ToolbarButton id="undoEdition" className="buttonOn">
<div id="edit" className="buttonContainer"> <img src={UndoSvg} />
<ToolbarButton id="undoEdition" className="buttonOn"> </ToolbarButton>
<img src={UndoSvg} /> <ToolbarButton id="redoEdition" className="buttonOn">
</ToolbarButton> <img src={RedoSvg} />
<ToolbarButton id="redoEdition" className="buttonOn"> </ToolbarButton>
<img src={RedoSvg} /> </div>
</ToolbarButton> <div id="nodeStyle" className="buttonContainer">
</div> <ToolbarButton id="addTopic" className="buttonOn">
<div id="nodeStyle" className="buttonContainer"> <img src={TopicAddSvg} />
<ToolbarButton id="addTopic" className="buttonOn"> </ToolbarButton>
<img src={TopicAddSvg} /> <ToolbarButton id="deleteTopic" className="buttonOn">
</ToolbarButton> <img src={TopicDeleteSvg} />
<ToolbarButton id="deleteTopic" className="buttonOn"> </ToolbarButton>
<img src={TopicDeleteSvg} /> <ToolbarButtonExt id="topicBorder" className="buttonExtOn">
</ToolbarButton> <img src={TopicBorderSvg} />
<ToolbarButtonExt id="topicBorder" className="buttonExtOn"> </ToolbarButtonExt>
<img src={TopicBorderSvg} /> <ToolbarButtonExt id="topicColor" className="buttonExtOn">
</ToolbarButtonExt> <img src={TopicColorSvg} />
<ToolbarButtonExt id="topicColor" className="buttonExtOn"> </ToolbarButtonExt>
<img src={TopicColorSvg} /> <ToolbarButtonExt id="topicShape" className="buttonExtOn">
</ToolbarButtonExt> <img src={TopicShapeSvg} />
<ToolbarButtonExt id="topicShape" className="buttonExtOn"> </ToolbarButtonExt>
<img src={TopicShapeSvg} /> </div>
</ToolbarButtonExt> <div id="font" className="buttonContainer">
</div> <ToolbarButton id="fontFamily" className="buttonOn">
<div id="font" className="buttonContainer"> <img src={FontTypeSvg} />
<ToolbarButton id="fontFamily" className="buttonOn"> </ToolbarButton>
<img src={FontTypeSvg} /> <ToolbarButtonExt id="fontSize" className="buttonExtOn">
</ToolbarButton> <img src={FontSizeSvg} />
<ToolbarButtonExt id="fontSize" className="buttonExtOn"> </ToolbarButtonExt>
<img src={FontSizeSvg} /> <ToolbarButton id="fontBold" className="buttonOn">
</ToolbarButtonExt> <img src={FontBoldSvg} />
<ToolbarButton id="fontBold" className="buttonOn"> </ToolbarButton>
<img src={FontBoldSvg} /> <ToolbarButton id="fontItalic" className="buttonOn">
</ToolbarButton> <img src={FontItalicSvg} />
<ToolbarButton id="fontItalic" className="buttonOn"> </ToolbarButton>
<img src={FontItalicSvg} /> <ToolbarButtonExt id="fontColor" className="buttonExtOn">
</ToolbarButton> <img src={FontColorSvg} />
<ToolbarButtonExt id="fontColor" className="buttonExtOn"> </ToolbarButtonExt>
<img src={FontColorSvg} /> </div>
</ToolbarButtonExt> <div id="nodeContent" className="buttonContainer">
</div> <ToolbarButtonExt id="topicIcon" className="buttonExtOn">
<div id="nodeContent" className="buttonContainer"> <img src={TopicIconSvg} />
<ToolbarButtonExt id="topicIcon" className="buttonExtOn"> </ToolbarButtonExt>
<img src={TopicIconSvg} /> <ToolbarButton id="topicNote" className="buttonOn">
</ToolbarButtonExt> <img src={TopicNoteSvg} />
<ToolbarButton id="topicNote" className="buttonOn"> </ToolbarButton>
<img src={TopicNoteSvg} /> <ToolbarButton id="topicLink" className="buttonOn">
</ToolbarButton> <img src={TopicLinkSvg} />
<ToolbarButton id="topicLink" className="buttonOn"> </ToolbarButton>
<img src={TopicLinkSvg} /> <ToolbarButton id="topicRelation" className="buttonOn">
</ToolbarButton> <img src={TopicRelationSvg} />
<ToolbarButton id="topicRelation" className="buttonOn"> </ToolbarButton>
<img src={TopicRelationSvg} /> </div>
</ToolbarButton> <div id="separator" className="buttonContainer"></div>
</div> {!isTryMode && (
<div id="separator" className="buttonContainer"></div>
</>
)}
{!memoryPersistence && (
<ToolbarRightContainer> <ToolbarRightContainer>
<ToolbarButton <ToolbarButton
id="export" id="export"

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

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

@ -19,8 +19,8 @@ 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