Fix try error loading account

packages/editor/src/classes/model/toolbar-position/index.ts

@@ -18,7 +18,7 @@
 /**
  * Configure position of a toolbar
  */
-export default interface ToolbarPosition {
+interface ToolbarPosition {
   /**
    * if true, first level will be displayed in vertical orientation
    */
@@ -34,19 +34,4 @@ export default interface ToolbarPosition {
     top: string;
   };
 }
-
+export default ToolbarPosition;
-export const defaultPosition: ToolbarPosition = {
-  vertical: true,
-  position: {
-    right: '7px',
-    top: '150px',
-  },
-};
-
-export const horizontalPosition = {
-  position: {
-    right: '7px',
-    top: '93%',
-  },
-  vertical: false,
-};

packages/editor/src/components/action-widget/button/undo-and-redo/index.tsx

@@ -17,7 +17,7 @@
  */
 import React, { useEffect, useState } from 'react';
 import ActionConfig from '../../../../classes/action/action-config';
-import { ToolbarMenuItem } from '../../../toolbar/Toolbar';
+import { ToolbarMenuItem } from '../../../toolbar';
 
 const UndoAndRedo = (props: {
   configuration: ActionConfig;

packages/editor/src/components/app-bar/index.tsx

@@ -18,7 +18,7 @@
 import React from 'react';
 import MaterialToolbar from '@mui/material/Toolbar';
 import MaterialAppBar from '@mui/material/AppBar';
-import { ToolbarMenuItem } from '../toolbar/Toolbar';
+import { ToolbarMenuItem } from '../toolbar';
 import ActionConfig from '../../classes/action/action-config';
 
 /**

packages/editor/src/components/index.tsx

@@ -18,11 +18,16 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Popover from '@mui/material/Popover';
 import Model from '../classes/model/editor';
+import {
+  buildEditorAppBarConfiguration,
+  buildToolbarConfig,
+  buildZoomToolbarConfiguration,
+} from './toolbar/toolbarConfigurationBuilder';
 
 import { IntlProvider } from 'react-intl';
 import { DesignerKeyboard, MindplotWebComponent } from '@wisemapping/mindplot';
 import I18nMsg from '../classes/i18n-msg';
-import Toolbar, { horizontalPosition, configurationBuilder } from './toolbar';
+import Toolbar from './toolbar';
 import { theme as defaultEditorTheme } from '../theme';
 import ThemeProvider from '@mui/material/styles/ThemeProvider';
 import { Theme } from '@mui/material/styles';
@@ -63,9 +68,7 @@ const Editor = ({
       model.registerEvents(setToolbarsRerenderSwitch, capability);
       setModel(model);
 
-      toolbarConfiguration.current = configurationBuilder.buildToolbarConfig(
+      toolbarConfiguration.current = buildToolbarConfig(mindplotComponent.getDesigner());
-        mindplotComponent.getDesigner(),
-      );
     }
   }, [mindplotComponent !== undefined]);
 
@@ -81,7 +84,7 @@ const Editor = ({
   const locale = options.locale;
   const msg = I18nMsg.loadLocaleData(locale);
 
-  const menubarConfiguration = configurationBuilder.buildEditorAppBarConfiguration(
+  const menubarConfiguration = buildEditorAppBarConfiguration(
     mindplotComponent?.getDesigner(),
     options.mapTitle,
     capability,
@@ -92,6 +95,14 @@ const Editor = ({
     },
   );
 
+  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
@@ -118,7 +129,7 @@ const Editor = ({
           ></Toolbar>
         )}
         <Toolbar
-          configurations={configurationBuilder.buildZoomToolbarConfiguration(
+          configurations={buildZoomToolbarConfiguration(
             capability,
             mindplotComponent?.getDesigner(),
           )}

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

@@ -1,36 +0,0 @@
-/*
- *    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 Toolbar from './Toolbar';
-import { horizontalPosition } from './ToolbarPositionInterface';
-import Header from '../app-bar';
-import {
-  buildEditorAppBarConfiguration,
-  buildToolbarConfig,
-  buildZoomToolbarConfiguration,
-} from './toolbarConfigurationBuilder';
-
-export default Toolbar;
-
-export const configurationBuilder = {
-  buildEditorAppBarConfiguration,
-  buildToolbarConfig,
-  buildZoomToolbarConfiguration,
-};
-export { horizontalPosition, Header };
-
-export type ToolbarActionType = 'export' | 'publish' | 'history' | 'print' | 'share' | 'info';

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

@@ -23,7 +23,7 @@ import Popover, { PopoverOrigin } from '@mui/material/Popover';
 import Tooltip from '@mui/material/Tooltip';
 import '../app-bar/styles.css';
 import Box from '@mui/material/Box';
-import ToolbarPosition, { defaultPosition } from './ToolbarPositionInterface';
+import ToolbarPosition from '../../classes/model/toolbar-position';
 import ActionConfig from '../../classes/action/action-config';
 
 /**
@@ -186,6 +186,14 @@ export const ToolbarMenuItem = (props: {
   }
 };
 
+const defaultPosition: ToolbarPosition = {
+  vertical: true,
+  position: {
+    right: '7px',
+    top: '150px',
+  },
+};
+
 // const getOrientationProps = (orientation: 'horizontal' | 'vertical'): [top:number, number, ]
 /**
  * The entry point for create a Toolbar

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

@@ -10,7 +10,6 @@ import NoteOutlinedIcon from '@mui/icons-material/NoteOutlined';
 import LinkOutlinedIcon from '@mui/icons-material/LinkOutlined';
 import ZoomOutOutlinedIcon from '@mui/icons-material/ZoomOutOutlined';
 import ZoomInOutlinedIcon from '@mui/icons-material/ZoomInOutlined';
-import CenterFocusStrongOutlinedIcon from '@mui/icons-material/CenterFocusStrongOutlined';
 import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
 import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
 import RedoOutlinedIcon from '@mui/icons-material/RedoOutlined';
@@ -38,7 +37,6 @@ import ActionConfig from '../../classes/action/action-config';
 import { SwitchValueDirection } from './ToolbarValueModelBuilder';
 import NodePropertyValueModelBuilder from '../../classes/model/node-property-builder';
 import Typography from '@mui/material/Typography';
-import { ToolbarActionType } from '.';
 import KeyboardOutlined from '@mui/icons-material/KeyboardOutlined';
 import Tooltip from '@mui/material/Tooltip';
 import ColorPicker from '../action-widget/pane/color-picker';
@@ -50,6 +48,8 @@ import IconPicker from '../action-widget/pane/icon-picker';
 import FontFamilySelector from '../action-widget/button/font-family-selector';
 import Capability from '../../classes/action/capability';
 
+export type ToolbarActionType = 'export' | 'publish' | 'history' | 'print' | 'share' | 'info';
+
 /**
  *
  * @param designer designer to aply changes
@@ -305,13 +305,6 @@ export function buildZoomToolbarConfiguration(
   if (!designer) return [];
 
   return [
-    {
-      icon: <CenterFocusStrongOutlinedIcon />,
-      tooltip: $msg('CENTER_POSITION'),
-      onClick: () => {
-        designer.zoomToFit();
-      },
-    },
     {
       // zoom value candidate, neds to fixit
       render: () => (

packages/editor/src/index.tsx

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

packages/editor/test/unit/toolbar/toolbar.test.tsx

@@ -8,7 +8,7 @@ import Toolbar, {
   ToolbarButtonOption,
   ToolbarMenuItem,
   ToolbarSubmenu,
-} from '../../../src/components/toolbar/Toolbar';
+} from '../../../src/components/toolbar';
 import AppBar from '../../../src/components/app-bar';
 import ActionConfig from '../../../src/classes/action/action-config';
 require('babel-polyfill');

packages/webapp/src/components/editor-page/index.tsx

@@ -69,7 +69,7 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
 
   useEffect(() => {
     document.title = `${options.mapTitle} | WiseMapping `;
-  }, [loadCompleted]);
+  });
 
   return loadCompleted ? (
     <IntlProvider
@@ -84,12 +84,17 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
         mapId={mapId}
         theme={theme}
         accountConfiguration={
+          // Provent load on non-authenticated.
+          options.mode !== 'showcase' ? (
             <IntlProvider
               locale={userLocale.code}
               messages={userLocale.message as Record<string, string>}
             >
-            <AccountMenu></AccountMenu>
+              <AccountMenu />
             </IntlProvider>
+          ) : (
+            <></>
+          )
         }
       />
       {activeDialog && (