mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-11 01:43:23 +01:00
Refactor code to editor.
This commit is contained in:
parent
de4c6f3f0a
commit
d7343f22c1
@ -68,8 +68,6 @@ class Capability {
|
||||
) {
|
||||
result = true;
|
||||
}
|
||||
|
||||
console.log(`action: ${action}->${Boolean(result)}`);
|
||||
return Boolean(result);
|
||||
}
|
||||
|
||||
|
50
packages/editor/src/classes/model/editor/index.ts
Normal file
50
packages/editor/src/classes/model/editor/index.ts
Normal 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;
|
@ -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>
|
||||
);
|
||||
|
@ -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'),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
@ -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>
|
||||
)}
|
||||
|
Loading…
Reference in New Issue
Block a user