From d7343f22c1a40fe2bb27646378df9de386bf5137 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sat, 8 Oct 2022 13:46:52 -0700 Subject: [PATCH] Refactor code to editor. --- .../src/classes/action/capability/index.ts | 2 - .../editor/src/classes/model/editor/index.ts | 50 ++++++++++ packages/editor/src/components/index.tsx | 91 +++++-------------- .../toolbar/toolbarConfigurationBuilder.tsx | 17 ++-- .../src/components/warning-dialog/index.tsx | 14 ++- 5 files changed, 91 insertions(+), 83 deletions(-) create mode 100644 packages/editor/src/classes/model/editor/index.ts diff --git a/packages/editor/src/classes/action/capability/index.ts b/packages/editor/src/classes/action/capability/index.ts index ec05f7a5..d495bc88 100644 --- a/packages/editor/src/classes/action/capability/index.ts +++ b/packages/editor/src/classes/action/capability/index.ts @@ -68,8 +68,6 @@ class Capability { ) { result = true; } - - console.log(`action: ${action}->${Boolean(result)}`); return Boolean(result); } diff --git a/packages/editor/src/classes/model/editor/index.ts b/packages/editor/src/classes/model/editor/index.ts new file mode 100644 index 00000000..0be4428f --- /dev/null +++ b/packages/editor/src/classes/model/editor/index.ts @@ -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; diff --git a/packages/editor/src/components/index.tsx b/packages/editor/src/components/index.tsx index a96f2847..dce3112b 100644 --- a/packages/editor/src/components/index.tsx +++ b/packages/editor/src/components/index.tsx @@ -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} > + + - + + ); diff --git a/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx b/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx index 66ae18ec..8bdfb7fe 100644 --- a/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx +++ b/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx @@ -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: , + onClick: () => onAction('info'), + tooltip: $msg('MAP_INFO'), + visible: !capability.isHidden('info'), + }, + { + render: () => accountConfiguration, + visible: !capability.isHidden('account'), + }, { render: () => ( -

- {intl.formatMessage({ id: titleKey })} {intl.formatMessage({ id: descriptionKey })} -

+ {titleKey && ( +

+ {intl.formatMessage({ id: titleKey })} {intl.formatMessage({ id: descriptionKey })} +

+ )} + {message &&

{message}

} )}