Refactor code to editor.

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);
   }
 

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;

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}
         ></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>
   );

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: <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'),
-    },
   ];
 }

packages/editor/src/components/warning-dialog/index.tsx

@@ -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>
       )}