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;
|
result = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`action: ${action}->${Boolean(result)}`);
|
|
||||||
return 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 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>
|
||||||
);
|
);
|
||||||
|
@ -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'),
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
{titleKey && (
|
||||||
<p>
|
<p>
|
||||||
{intl.formatMessage({ id: titleKey })} {intl.formatMessage({ id: descriptionKey })}
|
{intl.formatMessage({ id: titleKey })} {intl.formatMessage({ id: descriptionKey })}
|
||||||
</p>
|
</p>
|
||||||
|
)}
|
||||||
|
{message && <p>{message}</p>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
Loading…
Reference in New Issue
Block a user