Refactor code to editor.

This commit is contained in:
Paulo Gustavo Veiga 2022-10-08 13:46:52 -07:00
parent de4c6f3f0a
commit d7343f22c1
5 changed files with 91 additions and 83 deletions

View File

@ -68,8 +68,6 @@ class Capability {
) { ) {
result = true; result = true;
} }
console.log(`action: ${action}->${Boolean(result)}`);
return Boolean(result); return Boolean(result);
} }

View File

@ -0,0 +1,50 @@
import { MindplotWebComponent, PersistenceManager } from '@wisemapping/mindplot';
import Designer from '@wisemapping/mindplot/src/components/Designer';
import Capability from '../../action/capability';
class Editor {
private component: MindplotWebComponent;
constructor(mindplotComponent: MindplotWebComponent) {
this.component = mindplotComponent;
}
loadMindmap(mapId: string, persistenceManager: PersistenceManager, widgetManager): void {
this.component.buildDesigner(persistenceManager, widgetManager);
this.component.loadMap(mapId);
}
registerEvents(setToolbarsRerenderSwitch: (timestamp: number) => void, capability: Capability) {
const desiger = this.component.getDesigner();
const onNodeBlurHandler = () => {
if (!desiger.getModel().selectedTopic()) {
setToolbarsRerenderSwitch(Date.now());
}
};
const onNodeFocusHandler = () => {
setToolbarsRerenderSwitch(Date.now());
};
// Register events ...
designer.addEvent('onblur', onNodeBlurHandler);
designer.addEvent('onfocus', onNodeFocusHandler);
designer.addEvent('modelUpdate', onNodeFocusHandler);
designer.getWorkSpace().getScreenManager().addEvent('update', onNodeFocusHandler);
// Is the save action enabled ... ?
if (!capability.isHidden('save')) {
// Register unload save ...
window.addEventListener('beforeunload', () => {
this.component.save(false);
this.component.unlockMap();
});
// Autosave on a fixed period of time ...
setInterval(() => {
this.component.save(false);
}, 10000);
}
}
}
export default Editor;

View File

@ -17,6 +17,7 @@
*/ */
import React, { useCallback, useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import Popover from '@mui/material/Popover'; import Popover from '@mui/material/Popover';
import Model from '../classes/model/editor';
import { IntlProvider } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { import {
@ -43,16 +44,16 @@ const Editor = ({
options, options,
persistenceManager, persistenceManager,
onAction, onAction,
onLoad,
theme, theme,
accountConfiguration, accountConfiguration,
}: EditorProps) => { }: EditorProps) => {
const [mindplotComponent, setMindplotComponent]: [MindplotWebComponent | undefined, Function] = const [mindplotComponent, setMindplotComponent]: [MindplotWebComponent | undefined, Function] =
useState(); useState();
const [model, setModel]: [MindplotWebComponent | undefined, Function] = useState();
const editorTheme: Theme = theme ? theme : defaultEditorTheme; const editorTheme: Theme = theme ? theme : defaultEditorTheme;
const [toolbarsRerenderSwitch, setToolbarsRerenderSwitch] = useState(0); const [toolbarsRerenderSwitch, setToolbarsRerenderSwitch] = useState(0);
const toolbarConfiguration = useRef([]); const toolbarConfiguration = useRef([]);
const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.create();
// Load mindmap ... // Load mindmap ...
const capability = new Capability(options.mode, options.locked); const capability = new Capability(options.mode, options.locked);
@ -61,60 +62,25 @@ const Editor = ({
setMindplotComponent(node); setMindplotComponent(node);
}, []); }, []);
const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.create();
const onNodeBlurHandler = () => {
if (!mindplotComponent.getDesigner().getModel().selectedTopic())
setToolbarsRerenderSwitch(Date.now());
};
const onNodeFocusHandler = () => {
setToolbarsRerenderSwitch(Date.now());
};
useEffect(() => { useEffect(() => {
if (mindplotComponent === undefined) { if (mindplotComponent === undefined) {
return; return;
} }
// Change page title ... // Initialized model ...
document.title = `${options.mapTitle} | WiseMapping `; const model = new Model(mindplotComponent);
model.loadMindmap(mapId, persistenceManager, widgetManager);
const designer = onLoadDesigner(mapId, options, persistenceManager); model.registerEvents(setToolbarsRerenderSwitch, capability);
setModel(model);
// Register events ...
designer.addEvent('onblur', onNodeBlurHandler);
designer.addEvent('onfocus', onNodeFocusHandler);
designer.addEvent('modelUpdate', onNodeFocusHandler);
designer.getWorkSpace().getScreenManager().addEvent('update', onNodeFocusHandler);
// Is the save action enabled ... ?
if (!capability.isHidden('save')) {
// Register unload save ...
window.addEventListener('beforeunload', () => {
mindplotComponent.save(false);
mindplotComponent.unlockMap();
});
// Autosave on a fixed period of time ...
setInterval(() => {
mindplotComponent.save(false);
}, 10000);
}
toolbarConfiguration.current = configurationBuilder.buildToolbarCongiruation(designer); toolbarConfiguration.current = configurationBuilder.buildToolbarCongiruation(designer);
// Has extended actions been customized ...
if (onLoad) {
onLoad(designer);
}
mindplotComponent.loadMap(mapId);
if (options.locked) {
$notify(options.lockedMsg, false);
}
}, [mindplotComponent !== undefined]); }, [mindplotComponent !== undefined]);
useEffect(() => {
// Change page title ...
document.title = `${options.mapTitle} | WiseMapping `;
});
useEffect(() => { useEffect(() => {
if (options.enableKeyboardEvents) { if (options.enableKeyboardEvents) {
DesignerKeyboard.resume(); DesignerKeyboard.resume();
@ -123,16 +89,6 @@ const Editor = ({
} }
}, [options.enableKeyboardEvents]); }, [options.enableKeyboardEvents]);
const onLoadDesigner = (
_mapId: string,
_options: EditorOptions,
persistenceManager: PersistenceManager,
): Designer => {
// Build designer ...
mindplotComponent.buildDesigner(persistenceManager, widgetManager);
return mindplotComponent.getDesigner();
};
const locale = options.locale; const locale = options.locale;
const msg = I18nMsg.loadLocaleData(locale); const msg = I18nMsg.loadLocaleData(locale);
@ -141,23 +97,12 @@ const Editor = ({
options.mapTitle, options.mapTitle,
capability, capability,
onAction, onAction,
accountConfiguration,
() => { () => {
mindplotComponent.save(true); mindplotComponent.save(true);
}, },
); );
if (capability && !capability.isHidden('account')) {
menubarConfiguration.push({
render: () => accountConfiguration,
});
}
useEffect(() => {
return () => {
mindplotComponent.unlockMap();
};
}, []);
// if the Toolbar is not hidden before the variable 'isMobile' is defined, it appears intermittently when the page loads // if the Toolbar is not hidden before the variable 'isMobile' is defined, it appears intermittently when the page loads
// if the Toolbar is not rendered, Menu.ts cant find buttons for create event listeners // if the Toolbar is not rendered, Menu.ts cant find buttons for create event listeners
// so, with this hack the Toolbar is rendered but no visible until the variable 'isMobile' is defined // so, with this hack the Toolbar is rendered but no visible until the variable 'isMobile' is defined
@ -191,14 +136,20 @@ const Editor = ({
position={horizontalPosition} position={horizontalPosition}
rerender={toolbarsRerenderSwitch} rerender={toolbarsRerenderSwitch}
></Toolbar> ></Toolbar>
<mindplot-component <mindplot-component
ref={mindplotRef} ref={mindplotRef}
id="mindmap-comp" id="mindmap-comp"
mode={options.mode} mode={options.mode}
locale={options.locale} locale={options.locale}
></mindplot-component> ></mindplot-component>
<Notifier id="headerNotifier"></Notifier> <Notifier id="headerNotifier"></Notifier>
<WarningDialog capability={capability}></WarningDialog>
<WarningDialog
capability={capability}
message={options.locked ? options.lockedMsg : ''}
></WarningDialog>
</IntlProvider> </IntlProvider>
</ThemeProvider> </ThemeProvider>
); );

View File

@ -358,6 +358,7 @@ export function buildEditorAppBarConfiguration(
mapTitle: string, mapTitle: string,
capability: Capability, capability: Capability,
onAction: (type: ToolbarActionType) => void, onAction: (type: ToolbarActionType) => void,
accountConfiguration,
save: () => void, save: () => void,
): ActionConfig[] { ): ActionConfig[] {
if (!designer) { if (!designer) {
@ -462,6 +463,16 @@ export function buildEditorAppBarConfiguration(
), ),
visible: !capability.isHidden('share'), visible: !capability.isHidden('share'),
}, },
{
icon: <HelpOutlineOutlinedIcon />,
onClick: () => onAction('info'),
tooltip: $msg('MAP_INFO'),
visible: !capability.isHidden('info'),
},
{
render: () => accountConfiguration,
visible: !capability.isHidden('account'),
},
{ {
render: () => ( render: () => (
<Button variant="contained" onClick={() => (window.location.href = '/c/registration')}> <Button variant="contained" onClick={() => (window.location.href = '/c/registration')}>
@ -470,11 +481,5 @@ export function buildEditorAppBarConfiguration(
), ),
visible: !capability.isHidden('sign-up'), visible: !capability.isHidden('sign-up'),
}, },
{
icon: <HelpOutlineOutlinedIcon />,
onClick: () => onAction('info'),
tooltip: $msg('MAP_INFO'),
visible: !capability.isHidden('info'),
},
]; ];
} }

View File

@ -24,9 +24,10 @@ import Capability from '../../classes/action/capability';
export type FooterPropsType = { export type FooterPropsType = {
capability: Capability; capability: Capability;
message: string;
}; };
const WarningDialog = ({ capability }: FooterPropsType): React.ReactElement => { const WarningDialog = ({ capability, message }: FooterPropsType): React.ReactElement => {
const intl = useIntl(); const intl = useIntl();
const [dialogClass, setDialogClass] = useState('tryInfoPanel'); const [dialogClass, setDialogClass] = useState('tryInfoPanel');
@ -52,7 +53,7 @@ const WarningDialog = ({ capability }: FooterPropsType): React.ReactElement => {
return ( return (
<> <>
<Notifier id="headerNotifier"></Notifier> <Notifier id="headerNotifier"></Notifier>
{titleKey && ( {(titleKey || message) && (
<div className={dialogClass + ' ' + alertTopAdjustmentStyle}> <div className={dialogClass + ' ' + alertTopAdjustmentStyle}>
<div className="tryInfoPanelInner"> <div className="tryInfoPanelInner">
<div className="closeButton"> <div className="closeButton">
@ -66,9 +67,12 @@ const WarningDialog = ({ capability }: FooterPropsType): React.ReactElement => {
<img src={CloseDialogSvg} /> <img src={CloseDialogSvg} />
</button> </button>
</div> </div>
<p> {titleKey && (
{intl.formatMessage({ id: titleKey })} {intl.formatMessage({ id: descriptionKey })} <p>
</p> {intl.formatMessage({ id: titleKey })} {intl.formatMessage({ id: descriptionKey })}
</p>
)}
{message && <p>{message}</p>}
</div> </div>
</div> </div>
)} )}