Clean up editor code.

packages/editor/src/classes/action/capability/index.ts

@@ -149,8 +149,11 @@ const ActionConfigByRenderMode: Record<ActionType, CapabilitySupport> = {
     },
   },
   'keyboard-shortcuts': {
+    desktop: {
+      hidden: ['viewonly', 'edition-viewer'],
+    },
     mobile: {
-      hidden: ['viewonly', 'showcase', 'edition-viewer', 'edition-editor', 'edition-owner'],
+      hidden: ['edition-editor', 'edition-owner', 'showcase'],
     },
   },
   history: {

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

@@ -1,5 +1,21 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
 import { MindplotWebComponent, PersistenceManager } from '@wisemapping/mindplot';
-import Designer from '@wisemapping/mindplot/src/components/Designer';
 import Capability from '../../action/capability';
 
 class Editor {
@@ -34,6 +50,7 @@ class Editor {
     // Is the save action enabled ... ?
     if (!capability.isHidden('save')) {
       // Register unload save ...
+
       window.addEventListener('beforeunload', () => {
         this.component.save(false);
         this.component.unlockMap();

packages/editor/src/components/index.tsx

@@ -20,13 +20,7 @@ import Popover from '@mui/material/Popover';
 import Model from '../classes/model/editor';
 
 import { IntlProvider } from 'react-intl';
-import {
+import { DesignerKeyboard, MindplotWebComponent } from '@wisemapping/mindplot';
-  $notify,
-  PersistenceManager,
-  Designer,
-  DesignerKeyboard,
-  MindplotWebComponent,
-} from '@wisemapping/mindplot';
 import I18nMsg from '../classes/i18n-msg';
 import Toolbar, { horizontalPosition, configurationBuilder } from './toolbar';
 import { theme as defaultEditorTheme } from '../theme';
@@ -36,7 +30,7 @@ import { Notifier } from './warning-dialog/styled';
 import WarningDialog from './warning-dialog';
 import DefaultWidgetManager from '../classes/default-widget-manager';
 import AppBar from './app-bar';
-import { EditorOptions, EditorProps } from '..';
+import { EditorProps } from '..';
 import Capability from '../classes/action/capability';
 
 const Editor = ({
@@ -53,34 +47,28 @@ const Editor = ({
   const editorTheme: Theme = theme ? theme : defaultEditorTheme;
   const [toolbarsRerenderSwitch, setToolbarsRerenderSwitch] = useState(0);
   const toolbarConfiguration = useRef([]);
-  const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.create();
 
-  // Load mindmap ...
+  const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.create();
   const capability = new Capability(options.mode, options.locked);
 
-  const mindplotRef = useCallback((node: MindplotWebComponent) => {
+  const mindplotRef = useCallback((component: MindplotWebComponent) => {
-    setMindplotComponent(node);
+    setMindplotComponent(component);
   }, []);
 
   useEffect(() => {
-    if (mindplotComponent === undefined) {
+    if (mindplotComponent) {
-      return;
+      // Initialized model ...
+      const model = new Model(mindplotComponent);
+      model.loadMindmap(mapId, persistenceManager, widgetManager);
+      model.registerEvents(setToolbarsRerenderSwitch, capability);
+      setModel(model);
+
+      toolbarConfiguration.current = configurationBuilder.buildToolbarConfig(
+        mindplotComponent.getDesigner(),
+      );
     }
-
-    // Initialized model ...
-    const model = new Model(mindplotComponent);
-    model.loadMindmap(mapId, persistenceManager, widgetManager);
-    model.registerEvents(setToolbarsRerenderSwitch, capability);
-    setModel(model);
-
-    toolbarConfiguration.current = configurationBuilder.buildToolbarCongiruation(designer);
   }, [mindplotComponent !== undefined]);
 
-  useEffect(() => {
-    // Change page title ...
-    document.title = `${options.mapTitle} | WiseMapping `;
-  });
-
   useEffect(() => {
     if (options.enableKeyboardEvents) {
       DesignerKeyboard.resume();
@@ -89,6 +77,7 @@ const Editor = ({
     }
   }, [options.enableKeyboardEvents]);
 
+  // Initialize locate ...
   const locale = options.locale;
   const msg = I18nMsg.loadLocaleData(locale);
 

packages/editor/src/components/toolbar/index.ts

@@ -20,7 +20,7 @@ import { horizontalPosition } from './ToolbarPositionInterface';
 import Header from '../app-bar';
 import {
   buildEditorAppBarConfiguration,
-  buildToolbarCongiruation,
+  buildToolbarConfig,
   buildZoomToolbarConfiguration,
 } from './toolbarConfigurationBuilder';
 
@@ -28,7 +28,7 @@ export default Toolbar;
 
 export const configurationBuilder = {
   buildEditorAppBarConfiguration,
-  buildToolbarCongiruation,
+  buildToolbarConfig,
   buildZoomToolbarConfiguration,
 };
 export { horizontalPosition, Header };

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

@@ -55,7 +55,7 @@ import Capability from '../../classes/action/capability';
  * @param designer designer to aply changes
  * @returns configuration for @wisemapping/editor priAppbarmary toolbar
  */
-export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
+export function buildToolbarConfig(designer: Designer): ActionConfig[] {
   if (!designer) return [];
 
   /**
@@ -63,10 +63,6 @@ export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
    */
   const toolbarValueModelBuilder = new NodePropertyValueModelBuilder(designer);
 
-  // <div id="rectagle" model="rectagle"><img src="${RectangleImage}" alt="Rectangle"></div>
-  // <div id="rounded_rectagle" model="rounded rectagle" ><img src="${RectangleRoundImage}" alt="Rounded Rectangle"></div>
-  // <div id="line" model="line"><img src="${LineImage}" alt="Line"></div>
-  // <div id="elipse" model="elipse"><img src="${CircleImage}"></div>`;
   /**
    * submenu to manipulate node color and shape
    */
@@ -310,14 +306,11 @@ export function buildZoomToolbarConfiguration(
 
   return [
     {
-      icon: <KeyboardOutlined />,
+      icon: <CenterFocusStrongOutlinedIcon />,
-      tooltip: $msg('KEYBOARD_SHOTCUTS'),
+      tooltip: $msg('CENTER_POSITION'),
-      visible: !capability.isHidden('keyboard-shortcuts'),
+      onClick: () => {
-      options: [
+        designer.zoomToFit();
-        {
+      },
-          render: () => <KeyboardShorcutsHelp />,
-        },
-      ],
     },
     {
       // zoom value candidate, neds to fixit
@@ -344,11 +337,14 @@ export function buildZoomToolbarConfiguration(
       },
     },
     {
-      icon: <CenterFocusStrongOutlinedIcon />,
+      icon: <KeyboardOutlined />,
-      tooltip: $msg('CENTER_POSITION'),
+      tooltip: $msg('KEYBOARD_SHOTCUTS'),
-      onClick: () => {
+      visible: !capability.isHidden('keyboard-shortcuts'),
-        designer.zoomToFit();
+      options: [
-      },
+        {
+          render: () => <KeyboardShorcutsHelp />,
+        },
+      ],
     },
   ];
 }