Migrate messages

packages/editor/lang/de.json

@@ -79,5 +79,74 @@
     },
     "note.label": {
         "defaultMessage": "Notiz"
-    }
+    },
+    "zoom-panel.tooltip-keyboard": {
+        "defaultMessage": "Tastatürkürzel"
+    },
+    "zoom-panel.tooltip-zoom-in": {
+        "defaultMessage": "Hineinzoomen"
+    },
+    "zoom-panel.tooltip-zoom-out": {
+        "defaultMessage": "Rauszoomen"
+    },
+    "zoom-panel.tooltip-zoom-to-fit": {
+        "defaultMessage": "Zoom zu passen"
+    },
+    "editor-panel.tooltip-add-icon": {
+        "defaultMessage":"Symbol hinzufügen"
+    },
+    "editor-panel.tooltip-add-link": {
+        "defaultMessage": "Link hinzufügen"
+    },
+    "editor-panel.tooltip-add-note": {
+        "defaultMessage": "Notiz hinzufügen"
+    },
+    "editor-panel.tooltip-add-relationship": {
+        "defaultMessage": "Beziehung hinzufügen"
+    },
+    "editor-panel.tooltip-add-topic": {
+        "defaultMessage": "Thema hinzufügen"
+    },
+    "editor-panel.tooltip-delete-topic": {
+        "defaultMessage": "Thema löschen"
+    },
+    "editor-panel.tooltip-topic-border-color": {
+        "defaultMessage": "Randfarbe"
+    },
+    "editor-panel.tooltip-topic-fill-color": {
+        "defaultMessage": "Füllfarbe"
+    },
+    "editor-panel.tooltip-topic-font-bigger": {
+        "defaultMessage": "Größer"
+    },
+    "editor-panel.tooltip-topic-font-bold": {
+        "defaultMessage": "Fett gedruckt"
+    },
+    "editor-panel.tooltip-topic-font-color": {
+        "defaultMessage": "Farbe"
+    },
+    "editor-panel.tooltip-topic-font-italic": {
+        "defaultMessage": "Kursiv"
+    },
+    "editor-panel.tooltip-topic-font-smaller": {
+        "defaultMessage": "Kleiner"
+    },
+    "editor-panel.tooltip-topic-font-style": {
+        "defaultMessage": "Schriftstil"
+    },
+    "editor-panel.tooltip-topic-share-ellipse": {
+        "defaultMessage": "Ellipseform"
+    },
+    "editor-panel.tooltip-topic-share-line": {
+        "defaultMessage": "Linienform"
+    },
+    "editor-panel.tooltip-topic-share-rectagle": {
+        "defaultMessage": "Rechteckform"
+    },
+    "editor-panel.tooltip-topic-share-rounded": {
+        "defaultMessage": "Abgerundete Form"
+    },
+    "editor-panel.tooltip-topic-style": {
+        "defaultMessage": "Themenstil"
+    },
 }

packages/editor/lang/en.json

@@ -47,6 +47,63 @@
   "appbar.tooltip-undo": {
     "defaultMessage": "Undo"
   },
+  "editor-panel.tooltip-add-icon": {
+    "defaultMessage": "Add Icon"
+  },
+  "editor-panel.tooltip-add-link": {
+    "defaultMessage": "Add Link"
+  },
+  "editor-panel.tooltip-add-note": {
+    "defaultMessage": "Add Note"
+  },
+  "editor-panel.tooltip-add-relationship": {
+    "defaultMessage": "Add Relationship"
+  },
+  "editor-panel.tooltip-add-topic": {
+    "defaultMessage": "Add Topic"
+  },
+  "editor-panel.tooltip-delete-topic": {
+    "defaultMessage": "Delete Topic"
+  },
+  "editor-panel.tooltip-topic-border-color": {
+    "defaultMessage": "Border color"
+  },
+  "editor-panel.tooltip-topic-fill-color": {
+    "defaultMessage": "Fill color"
+  },
+  "editor-panel.tooltip-topic-font-bigger": {
+    "defaultMessage": "Bigger"
+  },
+  "editor-panel.tooltip-topic-font-bold": {
+    "defaultMessage": "Bold"
+  },
+  "editor-panel.tooltip-topic-font-color": {
+    "defaultMessage": "Color"
+  },
+  "editor-panel.tooltip-topic-font-italic": {
+    "defaultMessage": "Italic"
+  },
+  "editor-panel.tooltip-topic-font-smaller": {
+    "defaultMessage": "Smaller"
+  },
+  "editor-panel.tooltip-topic-font-style": {
+    "defaultMessage": "Font Style"
+  },
+  "editor-panel.tooltip-topic-share-ellipse": {
+    "defaultMessage": "Ellipse shape"
+  },
+  "editor-panel.tooltip-topic-share-line": {
+    "defaultMessage": "Line shape"
+  },
+  "editor-panel.tooltip-topic-share-rectagle": {
+    "defaultMessage": "Rectagle shape"
+  },
+  "editor-panel.tooltip-topic-share-rounded": {
+    "defaultMessage": "Rounded shape"
+  },
+  "editor-panel.tooltip-topic-style": {
+    "defaultMessage": "Topic Style"
+  },
   "editor.edit-description-mobile": {
     "defaultMessage": "Limited mindmap edition capabilities are supported in Mobile devices. Use Desktop browser for full editor capabilities."
   },
@@ -73,5 +130,17 @@
   },
   "note.label": {
     "defaultMessage": "Note"
+  },
+  "zoom-panel.tooltip-keyboard": {
+    "defaultMessage": "Keyboard Shortcuts"
+  },
+  "zoom-panel.tooltip-zoom-in": {
+    "defaultMessage": "Zoom In"
+  },
+  "zoom-panel.tooltip-zoom-out": {
+    "defaultMessage": "Zoom Out"
+  },
+  "zoom-panel.tooltip-zoom-to-fit": {
+    "defaultMessage": "Zoom to Fit"
   }
 }

packages/editor/lang/es.json

@@ -73,5 +73,74 @@
     },
     "note.label": {
         "defaultMessage": "Nota"
+    },
+    "editor-panel.tooltip-add-icon": {
+        "defaultMessage": "Agregar Icono"
+    },
+    "editor-panel.tooltip-add-link": {
+        "defaultMessage": "Ajouter un lien"
+    },
+    "editor-panel.tooltip-add-note": {
+        "defaultMessage": "Ajouter une note"
+    },
+    "editor-panel.tooltip-add-relationship": {
+        "defaultMessage": "Ajouter une relation"
+    },
+    "editor-panel.tooltip-add-topic": {
+        "defaultMessage": "Ajouter le sujet "
+    },
+    "editor-panel.tooltip-delete-topic": {
+        "defaultMessage": "Supprimer le sujet"
+    },
+    "editor-panel.tooltip-topic-border-color": {
+        "defaultMessage": "Couleur de bord"
+    },
+    "editor-panel.tooltip-topic-fill-color": {
+        "defaultMessage": "Couleur de contenu"
+    },
+    "editor-panel.tooltip-topic-font-bigger": {
+        "defaultMessage": "Plus gros"
+    },
+    "editor-panel.tooltip-topic-font-bold": {
+        "defaultMessage": "Caractère gras"
+    },
+    "editor-panel.tooltip-topic-font-color": {
+        "defaultMessage": "Couleur"
+    },
+    "editor-panel.tooltip-topic-font-italic": {
+        "defaultMessage": "Italica"
+    },
+    "editor-panel.tooltip-topic-font-smaller": {
+        "defaultMessage": "Petite"
+    },
+    "editor-panel.tooltip-topic-font-style": {
+        "defaultMessage": "Le style de police"
+    },
+    "editor-panel.tooltip-topic-share-ellipse": {
+        "defaultMessage": "Figure d'ellipse"
+    },
+    "editor-panel.tooltip-topic-share-line": {
+        "defaultMessage": "Forme de ligne"
+    },
+    "editor-panel.tooltip-topic-share-rectagle": {
+        "defaultMessage": "Forme Rectangulaire"
+    },
+    "editor-panel.tooltip-topic-share-rounded": {
+        "defaultMessage": "Forme redonda"
+    },
+    "editor-panel.tooltip-topic-style": {
+        "defaultMessage": "Style de sujet"
+    },
+    "zoom-panel.tooltip-keyboard": {
+        "defaultMessage": "Raccourcis clavier"
+    },
+    "zoom-panel.tooltip-zoom-in": {
+        "defaultMessage": "Agrandir"
+    },
+    "zoom-panel.tooltip-zoom-out": {
+        "defaultMessage": "Dézoomer"
+    },
+    "zoom-panel.tooltip-zoom-to-fit": {
+        "defaultMessage": "Centre"
     }
 }

packages/editor/lang/fr.json

@@ -73,5 +73,74 @@
     },
     "note.label": {
         "defaultMessage": "Noter"
+    },
+    "editor-panel.tooltip-add-icon": {
+        "defaultMessage": "Agregar Icono"
+    },
+    "editor-panel.tooltip-add-link": {
+        "defaultMessage": "Agregar Enlace"
+    },
+    "editor-panel.tooltip-add-note": {
+        "defaultMessage": "Agregar Nota"
+    },
+    "editor-panel.tooltip-add-relationship": {
+        "defaultMessage": "Agregar Relación"
+    },
+    "editor-panel.tooltip-add-topic": {
+        "defaultMessage": "Agregar Topico"
+    },
+    "editor-panel.tooltip-delete-topic": {
+        "defaultMessage": "Borrar Topico"
+    },
+    "editor-panel.tooltip-topic-border-color": {
+        "defaultMessage": "Color del borde"
+    },
+    "editor-panel.tooltip-topic-fill-color": {
+        "defaultMessage": "Color del cotenido"
+    },
+    "editor-panel.tooltip-topic-font-bigger": {
+        "defaultMessage": "Grande"
+    },
+    "editor-panel.tooltip-topic-font-bold": {
+        "defaultMessage": "Negrita"
+    },
+    "editor-panel.tooltip-topic-font-color": {
+        "defaultMessage": "Color"
+    },
+    "editor-panel.tooltip-topic-font-italic": {
+        "defaultMessage": "Italica"
+    },
+    "editor-panel.tooltip-topic-font-smaller": {
+        "defaultMessage": "Pequeña"
+    },
+    "editor-panel.tooltip-topic-font-style": {
+        "defaultMessage": "Estilo de Fuente"
+    },
+    "editor-panel.tooltip-topic-share-ellipse": {
+        "defaultMessage": "Figura elipse"
+    },
+    "editor-panel.tooltip-topic-share-line": {
+        "defaultMessage": "Figura linea"
+    },
+    "editor-panel.tooltip-topic-share-rectagle": {
+        "defaultMessage": "Figura rectangulo"
+    },
+    "editor-panel.tooltip-topic-share-rounded": {
+        "defaultMessage": "Figura redonda"
+    },
+    "editor-panel.tooltip-topic-style": {
+        "defaultMessage": "Estilo de Topico"
+    },
+    "zoom-panel.tooltip-keyboard": {
+        "defaultMessage": "Keyboard Shortcuts"
+    },
+    "zoom-panel.tooltip-zoom-in": {
+        "defaultMessage": "Acercar"
+    },
+    "zoom-panel.tooltip-zoom-out": {
+        "defaultMessage": "Alejarse"
+    },
+    "zoom-panel.tooltip-zoom-to-fit": {
+        "defaultMessage": "Centrar"
     }
 }

packages/editor/src/components/app-bar/editor-toolbar/configBuilder.tsx

@@ -25,9 +25,6 @@ import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
 import FormatItalicIcon from '@mui/icons-material/FormatItalic';
 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 CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
 import SquareOutlinedIcon from '@mui/icons-material/SquareOutlined';
@@ -35,63 +32,69 @@ import CheckBoxOutlineBlankOutlinedIcon from '@mui/icons-material/CheckBoxOutlin
 import HorizontalRuleOutlinedIcon from '@mui/icons-material/HorizontalRuleOutlined';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
-import Box from '@mui/material/Box';
 
 import Palette from '@mui/icons-material/Square';
 import SquareOutlined from '@mui/icons-material/SquareOutlined';
-import { $msg } from '@wisemapping/mindplot';
+import ActionConfig from '../../../classes/action/action-config';
-import ActionConfig from '../../classes/action/action-config';
+import { SwitchValueDirection } from '../../toolbar/ToolbarValueModelBuilder';
-import { SwitchValueDirection } from './ToolbarValueModelBuilder';
+import NodePropertyValueModelBuilder from '../../../classes/model/node-property-builder';
-import NodePropertyValueModelBuilder from '../../classes/model/node-property-builder';
+import ColorPicker from '../../action-widget/pane/color-picker';
-import Typography from '@mui/material/Typography';
+import TopicLink from '../../action-widget/pane/topic-link';
-import KeyboardOutlined from '@mui/icons-material/KeyboardOutlined';
+import TopicNote from '../../action-widget/pane/topic-note';
-import ColorPicker from '../action-widget/pane/color-picker';
+import IconPicker from '../../action-widget/pane/icon-picker';
-import KeyboardShorcutsHelp from '../action-widget/pane/keyboard-shortcut-help';
+import FontFamilySelector from '../../action-widget/button/font-family-selector';
-import TopicLink from '../action-widget/pane/topic-link';
+import Editor from '../../../classes/model/editor';
-import TopicNote from '../action-widget/pane/topic-note';
+import { useIntl } from 'react-intl';
-import IconPicker from '../action-widget/pane/icon-picker';
+
-import FontFamilySelector from '../action-widget/button/font-family-selector';
+const keyTooltip = (msg: string, key: string): string => {
-import Capability from '../../classes/action/capability';
+  const isMac = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-import Editor from '../../classes/model/editor';
+  return `${msg} (${isMac ? '⌘' : 'Ctrl'} + ${key})`;
+};
 
-/**
- *
- * @param designer designer to aply changes
- * @returns configuration for @wisemapping/editor priAppbarmary toolbar
- */
 export function buildEditorPanelConfig(model: Editor): ActionConfig[] {
   const toolbarValueModelBuilder = new NodePropertyValueModelBuilder(model.getDesigner());
-
+  const intl = useIntl();
-  /**
-   * submenu to manipulate node color and shape
-   */
   const colorAndShapeToolbarConfiguration: ActionConfig = {
     icon: <BrushOutlinedIcon />,
-
+    tooltip: intl.formatMessage({
-    tooltip: $msg('TOPIC_SHAPE'),
+      id: 'editor-panel.tooltip-topic-style',
+      defaultMessage: 'Topic Style',
+    }),
     options: [
       {
         icon: <SquareOutlinedIcon />,
-        tooltip: $msg('TOPIC_SHAPE_RECTANGLE'),
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-topic-share-rectagle',
+          defaultMessage: 'Rectagle shape',
+        }),
         onClick: () => toolbarValueModelBuilder.getTopicShapeModel().setValue('rectagle'),
         selected: () => toolbarValueModelBuilder.getTopicShapeModel().getValue() === 'rectagle',
       },
       {
         icon: <CheckBoxOutlineBlankOutlinedIcon />,
-        tooltip: $msg('TOPIC_SHAPE_ROUNDED'),
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-topic-share-rounded',
+          defaultMessage: 'Rounded shape',
+        }),
         onClick: () => toolbarValueModelBuilder.getTopicShapeModel().setValue('rounded rectagle'),
         selected: () =>
           toolbarValueModelBuilder.getTopicShapeModel().getValue() === 'rounded rectagle',
       },
       {
         icon: <HorizontalRuleOutlinedIcon />,
-        tooltip: $msg('TOPIC_SHAPE_LINE'),
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-topic-share-line',
+          defaultMessage: 'Line shape',
+        }),
         onClick: () => toolbarValueModelBuilder.getTopicShapeModel().setValue('line'),
         selected: () => toolbarValueModelBuilder.getTopicShapeModel().getValue() === 'line',
       },
       {
         icon: <CircleOutlinedIcon />,
-        tooltip: $msg('TOPIC_SHAPE_ELLIPSE'),
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-topic-share-ellipse',
+          defaultMessage: 'Ellipse shape',
+        }),
         onClick: () => toolbarValueModelBuilder.getTopicShapeModel().setValue('elipse'),
         selected: () => toolbarValueModelBuilder.getTopicShapeModel().getValue() === 'elipse',
       },
@@ -102,7 +105,10 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] {
             htmlColor={toolbarValueModelBuilder.getSelectedTopicColorModel().getValue()}
           ></Palette>
         ),
-        tooltip: $msg('TOPIC_COLOR'),
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-topic-fill-color',
+          defaultMessage: 'Fill color',
+        }),
         options: [
           {
             render: (closeModal) => {
@@ -122,7 +128,10 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] {
             htmlColor={toolbarValueModelBuilder.getColorBorderModel().getValue()}
           ></SquareOutlined>
         ),
-        tooltip: $msg('TOPIC_BORDER_COLOR'),
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-topic-border-color',
+          defaultMessage: 'Border color',
+        }),
         options: [
           {
             render: (closeModal) => {
@@ -145,7 +154,10 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] {
    */
   const fontFormatToolbarConfiguration: ActionConfig = {
     icon: <FontDownloadOutlinedIcon></FontDownloadOutlinedIcon>,
-    tooltip: $msg('FONT_FORMAT'),
+    tooltip: intl.formatMessage({
+      id: 'editor-panel.tooltip-topic-font-style',
+      defaultMessage: 'Font Style',
+    }),
     options: [
       {
         render: () => (
@@ -155,26 +167,44 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] {
       null,
       {
         icon: <TextIncreaseOutlinedIcon></TextIncreaseOutlinedIcon>,
-        tooltip: $msg('FONT_INCREASE'),
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-topic-font-bigger',
+          defaultMessage: 'Bigger',
+        }),
         onClick: () =>
           toolbarValueModelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.up),
       },
       {
         icon: <TextDecreaseOutlinedIcon></TextDecreaseOutlinedIcon>,
-        tooltip: $msg('FONT_DECREASE'),
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-topic-font-smaller',
+          defaultMessage: 'Smaller',
+        }),
         onClick: () =>
           toolbarValueModelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.down),
       },
       null,
       {
         icon: <FormatBoldOutlinedIcon></FormatBoldOutlinedIcon>,
-        tooltip: $msg('FONT_BOLD') + ' (' + $msg('CTRL') + ' + B)',
+        tooltip: keyTooltip(
+          intl.formatMessage({
+            id: 'editor-panel.tooltip-topic-font-bold',
+            defaultMessage: 'Bold',
+          }),
+          'B',
+        ),
         onClick: toolbarValueModelBuilder.fontWeigthModel().switchValue,
         selected: () => toolbarValueModelBuilder.fontWeigthModel().getValue() === 'bold',
       },
       {
         icon: <FormatItalicIcon />,
-        tooltip: $msg('FONT_ITALIC') + ' (' + $msg('CTRL') + ' + I)',
+        tooltip: keyTooltip(
+          intl.formatMessage({
+            id: 'editor-panel.tooltip-topic-font-italic',
+            defaultMessage: 'Italic',
+          }),
+          'I',
+        ),
         onClick: toolbarValueModelBuilder.getFontStyleModel().switchValue,
         selected: () => toolbarValueModelBuilder.getFontStyleModel().getValue() === 'italic',
       },
@@ -182,7 +212,10 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] {
         icon: () => (
           <Palette htmlColor={toolbarValueModelBuilder.getFontColorModel().getValue()}></Palette>
         ),
-        tooltip: $msg('FONT_COLOR'),
+        tooltip: intl.formatMessage({
+          id: 'editor-panel.tooltip-topic-font-color',
+          defaultMessage: 'Color',
+        }),
         options: [
           {
             render: (closeModal) => {
@@ -205,7 +238,10 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] {
    */
   const addRelationConfiguration: ActionConfig = {
     icon: <SettingsEthernetIcon></SettingsEthernetIcon>,
-    tooltip: $msg('TOPIC_RELATIONSHIP'),
+    tooltip: intl.formatMessage({
+      id: 'editor-panel.tooltip-add-relationship',
+      defaultMessage: 'Add Relationship',
+    }),
     onClick: (e) => {
       designer.showRelPivot(e);
     },
@@ -217,7 +253,10 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] {
    */
   const editLinkUrlConfiguration: ActionConfig = {
     icon: <LinkOutlinedIcon />,
-    tooltip: $msg('TOPIC_LINK'),
+    tooltip: keyTooltip(
+      intl.formatMessage({ id: 'editor-panel.tooltip-add-link', defaultMessage: 'Add Link' }),
+      'L',
+    ),
     useClickToClose: true,
     options: [
       {
@@ -237,7 +276,10 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] {
    */
   const editNoteConfiguration: ActionConfig = {
     icon: <NoteOutlinedIcon />,
-    tooltip: $msg('TOPIC_NOTE'),
+    tooltip: keyTooltip(
+      intl.formatMessage({ id: 'editor-panel.tooltip-add-note', defaultMessage: 'Add Note' }),
+      'K',
+    ),
     useClickToClose: true,
     options: [
       {
@@ -258,7 +300,10 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] {
    */
   const editIconConfiguration: ActionConfig = {
     icon: <SentimentSatisfiedAltIcon />,
-    tooltip: $msg('TOPIC_ICON'),
+    tooltip: intl.formatMessage({
+      id: 'editor-panel.tooltip-add-icon',
+      defaultMessage: 'Add Icon',
+    }),
     options: [
       {
         tooltip: 'Node icon',
@@ -275,13 +320,19 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] {
 
   const addNodeToolbarConfiguration = {
     icon: <AddCircleOutlineOutlinedIcon />,
-    tooltip: $msg('TOPIC_ADD'),
+    tooltip:
+      intl.formatMessage({ id: 'editor-panel.tooltip-add-topic', defaultMessage: 'Add Topic' }) +
+      ' (Enter)',
     onClick: () => designer.createSiblingForSelectedNode(),
     disabled: () => designer.getModel().filterSelectedTopics().length === 0,
   };
   const deleteNodeToolbarConfiguration = {
     icon: <RemoveCircleOutlineIcon />,
-    tooltip: $msg('TOPIC_DELETE'),
+    tooltip:
+      intl.formatMessage({
+        id: 'editor-panel.tooltip-delete-topic',
+        defaultMessage: 'Delete Topic',
+      }) + ' (Delete)',
     onClick: () => designer.deleteSelectedEntities(),
     disabled: () => designer.getModel().filterSelectedTopics().length === 0,
   };
@@ -296,56 +347,3 @@ export function buildEditorPanelConfig(model: Editor): ActionConfig[] {
     addRelationConfiguration,
   ];
 }
-
-export function buildZoomToolbarConfig(model: Editor, capability: Capability): ActionConfig[] {
-  return [
-    {
-      icon: <CenterFocusStrongOutlinedIcon />,
-      tooltip: $msg('CENTER_POSITION'),
-      onClick: () => {
-        model.getDesigner().zoomToFit();
-      },
-      disabled: () => !model?.isMapLoadded(),
-    },
-    {
-      // zoom value candidate, neds to fixit
-      render: () => (
-        <Box sx={{ p: 0.5 }}>
-          <Typography variant="overline" color="gray">
-            %
-            {!model?.isMapLoadded()
-              ? 100
-              : Math.floor((1 / designer.getWorkSpace()?.getZoom()) * 100)}
-          </Typography>
-        </Box>
-      ),
-      disabled: () => !model?.isMapLoadded(),
-    },
-    {
-      icon: <ZoomInOutlinedIcon />,
-      tooltip: $msg('ZOOM_IN'),
-      onClick: () => {
-        model.getDesigner().zoomIn();
-      },
-      disabled: () => !model?.isMapLoadded(),
-    },
-    {
-      icon: <ZoomOutOutlinedIcon />,
-      tooltip: $msg('ZOOM_OUT'),
-      onClick: () => {
-        model.getDesigner().zoomOut();
-      },
-      disabled: () => !model?.isMapLoadded(),
-    },
-    {
-      icon: <KeyboardOutlined />,
-      tooltip: $msg('KEYBOARD_SHOTCUTS'),
-      visible: !capability.isHidden('keyboard-shortcuts'),
-      options: [
-        {
-          render: () => <KeyboardShorcutsHelp />,
-        },
-      ],
-    },
-  ];
-}

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

@@ -0,0 +1,39 @@
+/*
+ *    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 React from 'react';
+import ActionConfig from '../../../classes/action/action-config';
+import Capability from '../../../classes/action/capability';
+import Model from '../../../classes/model/editor';
+import Toolbar from '../../toolbar';
+import { buildEditorPanelConfig } from './configBuilder';
+
+type EditorToolbarProps = {
+  model: Model | undefined;
+  capability: Capability;
+};
+
+const EditorToolbar = ({ model, capability }: EditorToolbarProps) => {
+  let config: ActionConfig[] | undefined;
+
+  if (!capability.isHidden('edition-toolbar') && model?.isMapLoadded()) {
+    config = buildEditorPanelConfig(model);
+  }
+
+  return <span>{config ? <Toolbar configurations={config} /> : <></>}</span>;
+};
+export default EditorToolbar;

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

@@ -0,0 +1,117 @@
+/*
+ *    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 KeyboardOutlined from '@mui/icons-material/KeyboardOutlined';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import { useIntl } from 'react-intl';
+import ActionConfig from '../../../classes/action/action-config';
+import Capability from '../../../classes/action/capability';
+import Editor from '../../../classes/model/editor';
+import Model from '../../../classes/model/editor';
+import KeyboardShorcutsHelp from '../../action-widget/pane/keyboard-shortcut-help';
+import Toolbar from '../../toolbar';
+import ZoomOutOutlinedIcon from '@mui/icons-material/ZoomOutOutlined';
+import ZoomInOutlinedIcon from '@mui/icons-material/ZoomInOutlined';
+import CenterFocusStrongOutlinedIcon from '@mui/icons-material/CenterFocusStrongOutlined';
+import Box from '@mui/material/Box';
+
+export function buildZoomToolbarConfig(model: Editor, capability: Capability): ActionConfig[] {
+  const intl = useIntl();
+
+  return [
+    {
+      icon: <CenterFocusStrongOutlinedIcon />,
+      tooltip: intl.formatMessage({
+        id: 'zoom-panel.tooltip-zoom-to-fit',
+        defaultMessage: 'Zoom to Fit',
+      }),
+      onClick: () => {
+        model.getDesigner().zoomToFit();
+      },
+      disabled: () => !model?.isMapLoadded(),
+    },
+    {
+      // zoom value candidate, neds to fixit
+      render: () => (
+        <Box sx={{ p: 0.5 }}>
+          <Typography variant="overline" color="gray">
+            %
+            {!model?.isMapLoadded()
+              ? 100
+              : Math.floor((1 / designer.getWorkSpace()?.getZoom()) * 100)}
+          </Typography>
+        </Box>
+      ),
+      disabled: () => !model?.isMapLoadded(),
+    },
+    {
+      icon: <ZoomInOutlinedIcon />,
+      tooltip: intl.formatMessage({ id: 'zoom-panel.tooltip-zoom-in', defaultMessage: 'Zoom In' }),
+      onClick: () => {
+        model.getDesigner().zoomIn();
+      },
+      disabled: () => !model?.isMapLoadded(),
+    },
+    {
+      icon: <ZoomOutOutlinedIcon />,
+      tooltip: intl.formatMessage({
+        id: 'zoom-panel.tooltip-zoom-out',
+        defaultMessage: 'Zoom Out',
+      }),
+      onClick: () => {
+        model.getDesigner().zoomOut();
+      },
+      disabled: () => !model?.isMapLoadded(),
+    },
+    {
+      icon: <KeyboardOutlined />,
+      tooltip: intl.formatMessage({
+        id: 'zoom-panel.tooltip-keyboard',
+        defaultMessage: 'Keyboard Shortcuts',
+      }),
+      visible: !capability.isHidden('keyboard-shortcuts'),
+      options: [
+        {
+          render: () => <KeyboardShorcutsHelp />,
+        },
+      ],
+    },
+  ];
+}
+
+type ZoomPanelProps = {
+  model: Model | undefined;
+  capability: Capability;
+};
+
+const ZoomPanel = ({ model, capability }: ZoomPanelProps) => {
+  const config = buildZoomToolbarConfig(model, capability);
+  return (
+    <Toolbar
+      configurations={config}
+      position={{
+        position: {
+          right: '7px',
+          top: '93%',
+        },
+        vertical: false,
+      }}
+    />
+  );
+};
+export default ZoomPanel;

packages/editor/src/components/index.tsx

@@ -15,10 +15,9 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import React, { ErrorInfo, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Popover from '@mui/material/Popover';
 import Model from '../classes/model/editor';
-import { buildEditorPanelConfig, buildZoomToolbarConfig } from './toolbar/toolbarConfigBuilder';
 
 import { IntlProvider } from 'react-intl';
 import {
@@ -30,7 +29,6 @@ import {
 } from '@wisemapping/mindplot';
 
 import I18nMsg from '../classes/i18n-msg';
-import Toolbar from './toolbar';
 import { theme as defaultEditorTheme } from '../theme';
 import ThemeProvider from '@mui/material/styles/ThemeProvider';
 import { Theme } from '@mui/material/styles';
@@ -41,6 +39,8 @@ import AppBar from './app-bar';
 import Capability from '../classes/action/capability';
 import { ToolbarActionType } from './toolbar/ToolbarActionType';
 import MapInfo from '../classes/model/map-info';
+import EditorToolbar from './app-bar/editor-toolbar';
+import ZoomPanel from './app-bar/zoom-panel';
 
 export type EditorOptions = {
   mode: EditorRenderMode;
@@ -67,6 +67,8 @@ const Editor = ({
   accountConfiguration,
 }: EditorProps) => {
   const [model, setModel] = useState<Model | undefined>();
+
+  // This is required to redraw in case of chansges in the canvas...
   const [canvasUpdate, setCanvasUpdate] = useState<number>();
   const editorTheme: Theme = theme ? theme : defaultEditorTheme;
   const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.create();
@@ -115,20 +117,9 @@ const Editor = ({
         >
           {widgetManager.getEditorContent()}
         </Popover>
-        {!capability.isHidden('edition-toolbar') && model?.isMapLoadded() && (
-          <Toolbar configurations={buildEditorPanelConfig(model)} />
-        )}
 
-        <Toolbar
+        <EditorToolbar model={model} capability={capability} />
-          configurations={buildZoomToolbarConfig(model, capability)}
+        <ZoomPanel model={model} capability={capability} />
-          position={{
-            position: {
-              right: '7px',
-              top: '93%',
-            },
-            vertical: false,
-          }}
-        />
 
         <mindplot-component
           ref={mindplotRef}
@@ -138,7 +129,6 @@ const Editor = ({
         />
 
         <Notifier id="headerNotifier" />
-
         <WarningDialog
           capability={capability}
           message={mapInfo.isLocked() ? mapInfo.getLockedMessage() : ''}

packages/mindplot/src/components/lang/en.js

@@ -1,51 +1,24 @@
 const EN = {
   SAVING: 'Saving ...',
-  SAVE_COMPLETE: 'Save Complete',
+  SAVE_COMPLETE: 'Save completed',
-
-  ZOOM_IN: 'Zoom In',
-  ZOOM_OUT: 'Zoom Out',
-  TOPIC_SHAPE: 'Topic Shape',
-  TOPIC_ADD: 'Add Topic',
-  TOPIC_DELETE: 'Delete Topic',
-  TOPIC_ICON: 'Add Icon',
-  TOPIC_LINK: 'Add Link',
-  TOPIC_RELATIONSHIP: 'Add Relationship',
-  TOPIC_COLOR: 'Topic Color',
-  TOPIC_BORDER_COLOR: 'Topic Border Color',
-  TOPIC_NOTE: 'Add Note',
-  TOPIC_SHAPE_RECTANGLE: 'Change Topic Shape to Rectangle',
-  TOPIC_SHAPE_ROUNDED: 'Change Topic Shape to Rounded Corners Rectangle',
-  TOPIC_SHAPE_ELLIPSE: 'Change Topic Shape to Ellipse',
-  TOPIC_SHAPE_LINE: 'Change Topic Shape to Line',
-  FONT_FAMILY: 'Font Type',
-  FONT_SIZE: 'Text Size',
-  FONT_BOLD: 'Text Bold',
-  FONT_ITALIC: 'Text Italic',
-  INSERT: 'Insert',
-  ADD_TOPIC: 'Add Topic',
-  LOADING: 'Loading ...',
-  FONT_COLOR: 'Text Color',
   ZOOM_IN_ERROR: 'Zoom too high.',
   ZOOM_ERROR: 'No more zoom can be applied.',
   ONLY_ONE_TOPIC_MUST_BE_SELECTED: 'Could not create a topic. Only one topic must be selected.',
   ONE_TOPIC_MUST_BE_SELECTED: 'Could not create a topic. One topic must be selected.',
   ONLY_ONE_TOPIC_MUST_BE_SELECTED_COLLAPSE: 'Children can not be collapsed. One topic must be selected.',
   SAVE_COULD_NOT_BE_COMPLETED: 'Save could not be completed, please try again latter.',
-  UNEXPECTED_ERROR_LOADING: "We're sorry, an unexpected error has occurred.\nTry again reloading the editor.If the problem persists, contact us to support@wisemapping.com.",
   MAIN_TOPIC: 'Main Topic',
   SUB_TOPIC: 'Sub Topic',
   ISOLATED_TOPIC: 'Isolated Topic',
   CENTRAL_TOPIC: 'Central Topic',
-  SHORTCUTS: 'Keyboard Shortcuts',
   ENTITIES_COULD_NOT_BE_DELETED: 'Could not delete topic or relation. At least one map entity must be selected.',
   AT_LEAST_ONE_TOPIC_MUST_BE_SELECTED: 'At least one topic must be selected.',
   CLIPBOARD_IS_EMPTY: 'Nothing to copy. Clipboard is empty.',
   CENTRAL_TOPIC_CAN_NOT_BE_DELETED: 'Central topic can not be deleted.',
   RELATIONSHIP_COULD_NOT_BE_CREATED: 'Relationship could not be created. A parent relationship topic must be selected first.',
   SELECTION_COPIED_TO_CLIPBOARD: 'Topics copied to the clipboard',
-  WRITE_YOUR_TEXT_HERE: 'Write your note here ...',
-  LINK: 'Link',
   SESSION_EXPIRED: 'Your session has expired, please log-in again.',
+
   ACTION: 'Action',
   CREATE_SIBLING_TOPIC: 'Create Sibling Topic',
   CREATE_CHILD_TOPIC: 'Create Child Topic',
@@ -74,10 +47,8 @@ const EN = {
   MOUSE_CLICK: 'Mouse Click',
   K_DELETE: 'Delete',
   BACKSPACE: 'Backspace',
-  CENTER_POSITION: 'Zoom To Fit',
+  TOPIC_NOTE: 'Add Note',
-  FONT_FORMAT: 'Font Format',
+  TOPIC_LINK: 'Add Link',
-  FONT_INCREASE: 'Font Size Increase',
-  FONT_DECREASE: 'Font Size Decrease',
 };
 
 export default EN;