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;
}
console.log(`action: ${action}->${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 Popover from '@mui/material/Popover';
import Model from '../classes/model/editor';
import { IntlProvider } from 'react-intl';
import {
@ -43,16 +44,16 @@ const Editor = ({
options,
persistenceManager,
onAction,
onLoad,
theme,
accountConfiguration,
}: EditorProps) => {
const [mindplotComponent, setMindplotComponent]: [MindplotWebComponent | undefined, Function] =
useState();
const [model, setModel]: [MindplotWebComponent | undefined, Function] = useState();
const editorTheme: Theme = theme ? theme : defaultEditorTheme;
const [toolbarsRerenderSwitch, setToolbarsRerenderSwitch] = useState(0);
const toolbarConfiguration = useRef([]);
const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.create();
// Load mindmap ...
const capability = new Capability(options.mode, options.locked);
@ -61,60 +62,25 @@ const Editor = ({
setMindplotComponent(node);
}, []);
const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.create();
const onNodeBlurHandler = () => {
if (!mindplotComponent.getDesigner().getModel().selectedTopic())
setToolbarsRerenderSwitch(Date.now());
};
const onNodeFocusHandler = () => {
setToolbarsRerenderSwitch(Date.now());
};
useEffect(() => {
if (mindplotComponent === undefined) {
return;
}
// Change page title ...
document.title = `${options.mapTitle} | WiseMapping `;
const designer = onLoadDesigner(mapId, options, persistenceManager);
// 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);
}
// Initialized model ...
const model = new Model(mindplotComponent);
model.loadMindmap(mapId, persistenceManager, widgetManager);
model.registerEvents(setToolbarsRerenderSwitch, capability);
setModel(model);
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]);
useEffect(() => {
// Change page title ...
document.title = `${options.mapTitle} | WiseMapping `;
});
useEffect(() => {
if (options.enableKeyboardEvents) {
DesignerKeyboard.resume();
@ -123,16 +89,6 @@ const Editor = ({
}
}, [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 msg = I18nMsg.loadLocaleData(locale);
@ -141,23 +97,12 @@ const Editor = ({
options.mapTitle,
capability,
onAction,
accountConfiguration,
() => {
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 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
@ -191,14 +136,20 @@ const Editor = ({
position={horizontalPosition}
rerender={toolbarsRerenderSwitch}
></Toolbar>
<mindplot-component
ref={mindplotRef}
id="mindmap-comp"
mode={options.mode}
locale={options.locale}
></mindplot-component>
<Notifier id="headerNotifier"></Notifier>
<WarningDialog capability={capability}></WarningDialog>
<WarningDialog
capability={capability}
message={options.locked ? options.lockedMsg : ''}
></WarningDialog>
</IntlProvider>
</ThemeProvider>
);

View File

@ -358,6 +358,7 @@ export function buildEditorAppBarConfiguration(
mapTitle: string,
capability: Capability,
onAction: (type: ToolbarActionType) => void,
accountConfiguration,
save: () => void,
): ActionConfig[] {
if (!designer) {
@ -462,6 +463,16 @@ export function buildEditorAppBarConfiguration(
),
visible: !capability.isHidden('share'),
},
{
icon: <HelpOutlineOutlinedIcon />,
onClick: () => onAction('info'),
tooltip: $msg('MAP_INFO'),
visible: !capability.isHidden('info'),
},
{
render: () => accountConfiguration,
visible: !capability.isHidden('account'),
},
{
render: () => (
<Button variant="contained" onClick={() => (window.location.href = '/c/registration')}>
@ -470,11 +481,5 @@ export function buildEditorAppBarConfiguration(
),
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 = {
capability: Capability;
message: string;
};
const WarningDialog = ({ capability }: FooterPropsType): React.ReactElement => {
const WarningDialog = ({ capability, message }: FooterPropsType): React.ReactElement => {
const intl = useIntl();
const [dialogClass, setDialogClass] = useState('tryInfoPanel');
@ -52,7 +53,7 @@ const WarningDialog = ({ capability }: FooterPropsType): React.ReactElement => {
return (
<>
<Notifier id="headerNotifier"></Notifier>
{titleKey && (
{(titleKey || message) && (
<div className={dialogClass + ' ' + alertTopAdjustmentStyle}>
<div className="tryInfoPanelInner">
<div className="closeButton">
@ -66,9 +67,12 @@ const WarningDialog = ({ capability }: FooterPropsType): React.ReactElement => {
<img src={CloseDialogSvg} />
</button>
</div>
<p>
{intl.formatMessage({ id: titleKey })} {intl.formatMessage({ id: descriptionKey })}
</p>
{titleKey && (
<p>
{intl.formatMessage({ id: titleKey })} {intl.formatMessage({ id: descriptionKey })}
</p>
)}
{message && <p>{message}</p>}
</div>
</div>
)}