Improve code wrapper

packages/editor/src/classes/model/editor/index.ts

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import { MindplotWebComponent, PersistenceManager } from '@wisemapping/mindplot';
+import { Designer, MindplotWebComponent, PersistenceManager } from '@wisemapping/mindplot';
 import Capability from '../../action/capability';
 
 class Editor {
@@ -24,6 +24,14 @@ class Editor {
     this.component = mindplotComponent;
   }
 
+  save(minor: boolean) {
+    this.component.save(minor);
+  }
+
+  getDesigner(): Designer | undefined {
+    return this.component?.getDesigner();
+  }
+
   loadMindmap(mapId: string, persistenceManager: PersistenceManager, widgetManager): void {
     this.component.buildDesigner(persistenceManager, widgetManager);
     this.component.loadMap(mapId);

packages/editor/src/components/index.tsx

@@ -19,10 +19,10 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Popover from '@mui/material/Popover';
 import Model from '../classes/model/editor';
 import {
-  buildEditorAppBarConfiguration,
+  buildAppBarConfig,
   buildToolbarConfig,
-  buildZoomToolbarConfiguration,
+  buildZoomToolbarConfig,
-} from './toolbar/toolbarConfigurationBuilder';
+} from './toolbar/toolbarConfigBuilder';
 
 import { IntlProvider } from 'react-intl';
 import { DesignerKeyboard, MindplotWebComponent } from '@wisemapping/mindplot';
@@ -46,9 +46,7 @@ const Editor = ({
   theme,
   accountConfiguration,
 }: EditorProps) => {
-  const [mindplotComponent, setMindplotComponent]: [MindplotWebComponent | undefined, Function] =
+  const [model, setModel]: [Model | undefined, Function] = useState();
-    useState();
-  const [model, setModel]: [MindplotWebComponent | undefined, Function] = useState();
   const editorTheme: Theme = theme ? theme : defaultEditorTheme;
   const [toolbarsRerenderSwitch, setToolbarsRerenderSwitch] = useState(0);
   const toolbarConfiguration = useRef([]);
@@ -57,20 +55,18 @@ const Editor = ({
   const capability = new Capability(options.mode, options.locked);
 
   const mindplotRef = useCallback((component: MindplotWebComponent) => {
-    setMindplotComponent(component);
+    // Initialized model ...
+    const model = new Model(component);
+    model.loadMindmap(mapId, persistenceManager, widgetManager);
+    model.registerEvents(setToolbarsRerenderSwitch, capability);
+    setModel(model);
   }, []);
 
   useEffect(() => {
-    if (mindplotComponent) {
+    if (model) {
-      // Initialized model ...
+      toolbarConfiguration.current = buildToolbarConfig(model.getDesigner());
-      const model = new Model(mindplotComponent);
-      model.loadMindmap(mapId, persistenceManager, widgetManager);
-      model.registerEvents(setToolbarsRerenderSwitch, capability);
-      setModel(model);
-
-      toolbarConfiguration.current = buildToolbarConfig(mindplotComponent.getDesigner());
     }
-  }, [mindplotComponent !== undefined]);
+  }, [model]);
 
   useEffect(() => {
     if (options.enableKeyboardEvents) {
@@ -84,25 +80,17 @@ const Editor = ({
   const locale = options.locale;
   const msg = I18nMsg.loadLocaleData(locale);
 
-  const menubarConfiguration = buildEditorAppBarConfiguration(
+  const menubarConfiguration = buildAppBarConfig(
-    mindplotComponent?.getDesigner(),
+    model?.getDesigner(),
     options.mapTitle,
     capability,
     onAction,
     accountConfiguration,
     () => {
-      mindplotComponent.save(true);
+      model.save(true);
     },
   );
 
-  const horizontalPosition = {
-    position: {
-      right: '7px',
-      top: '93%',
-    },
-    vertical: false,
-  };
-
   // 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
@@ -129,11 +117,14 @@ const Editor = ({
           ></Toolbar>
         )}
         <Toolbar
-          configurations={buildZoomToolbarConfiguration(
+          configurations={buildZoomToolbarConfig(capability, model?.getDesigner())}
-            capability,
+          position={{
-            mindplotComponent?.getDesigner(),
+            position: {
-          )}
+              right: '7px',
-          position={horizontalPosition}
+              top: '93%',
+            },
+            vertical: false,
+          }}
           rerender={toolbarsRerenderSwitch}
         ></Toolbar>
 

packages/editor/src/components/toolbar/toolbarConfigBuilder.tsx

@@ -299,10 +299,7 @@ export function buildToolbarConfig(designer: Designer): ActionConfig[] {
   ];
 }
 
-export function buildZoomToolbarConfiguration(
+export function buildZoomToolbarConfig(capability: Capability, designer: Designer): ActionConfig[] {
-  capability: Capability,
-  designer: Designer,
-): ActionConfig[] {
   if (!designer) return [];
 
   return [
@@ -350,7 +347,7 @@ export function buildZoomToolbarConfiguration(
   ];
 }
 
-export function buildEditorAppBarConfiguration(
+export function buildAppBarConfig(
   designer: Designer,
   mapTitle: string,
   capability: Capability,

packages/editor/src/index.tsx

@@ -37,7 +37,7 @@ import {
 import './global-styled.css';
 import { Theme } from '@mui/material/styles';
 import Editor from './components';
-import { ToolbarActionType } from './components/toolbar/toolbarConfigurationBuilder';
+import { ToolbarActionType } from './components/toolbar/toolbarConfigBuilder';
 
 declare global {
   // used in mindplot