diff --git a/packages/editor/lang/de.json b/packages/editor/lang/de.json index bf9263d4..6528ea05 100644 --- a/packages/editor/lang/de.json +++ b/packages/editor/lang/de.json @@ -5,9 +5,9 @@ "editor.try-welcome-description": { "defaultMessage": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen." }, - "editor.try-welcome-mobile": { - "defaultMessage": "Diese Edition zeigt einige der Mindmap-Funktionen!" - }, + "editor.try-welcome-mobile": { + "defaultMessage": "Diese Edition zeigt einige der Mindmap-Funktionen!" + }, "editor.try-welcome-description-mobile": { "defaultMessage": "Melden Sie sich an, um kostenlos eine unbegrenzte Anzahl von Mindmaps zu erstellen, zu teilen und zu veröffentlichen. Eingeschränkte Funktionen der Mindmap-Edition werden auf Mobilgeräten unterstützt. Verwenden Sie den Desktop-Browser für vollständige Editorfunktionen." }, @@ -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" + }, } \ No newline at end of file diff --git a/packages/editor/lang/en.json b/packages/editor/lang/en.json index 5f7de701..9738f8cc 100644 --- a/packages/editor/lang/en.json +++ b/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" } } diff --git a/packages/editor/lang/es.json b/packages/editor/lang/es.json index 51305645..4fb4428e 100644 --- a/packages/editor/lang/es.json +++ b/packages/editor/lang/es.json @@ -5,9 +5,9 @@ "editor.try-welcome-description": { "defaultMessage": "Registrate para comenzar a crear, compartir y publicar una cantidad ilimitada de mapas mentales de forma gratuita." }, - "editor.try-welcome-mobile": { - "defaultMessage": "¡Este espacio de edición muestra algunas de las capacidades de mapas mentales!" - }, + "editor.try-welcome-mobile": { + "defaultMessage": "¡Este espacio de edición muestra algunas de las capacidades de mapas mentales!" + }, "editor.try-welcome-description-mobile": { "defaultMessage": "Registrate para comenzar a crear, compartir y publicar una cantidad ilimitada de mapas mentales de forma gratuita. En dispositivos móbiles las funciones son limitadas. Use la versión de escritorio para tener las funciones completas." }, @@ -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" } } \ No newline at end of file diff --git a/packages/editor/lang/fr.json b/packages/editor/lang/fr.json index 95559f19..1f6f567d 100644 --- a/packages/editor/lang/fr.json +++ b/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" } } \ No newline at end of file diff --git a/packages/editor/src/components/toolbar/toolbarConfigBuilder.tsx b/packages/editor/src/components/app-bar/editor-toolbar/configBuilder.tsx similarity index 71% rename from packages/editor/src/components/toolbar/toolbarConfigBuilder.tsx rename to packages/editor/src/components/app-bar/editor-toolbar/configBuilder.tsx index 2cc64bb8..15ee03a0 100644 --- a/packages/editor/src/components/toolbar/toolbarConfigBuilder.tsx +++ b/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 { SwitchValueDirection } from './ToolbarValueModelBuilder'; -import NodePropertyValueModelBuilder from '../../classes/model/node-property-builder'; -import Typography from '@mui/material/Typography'; -import KeyboardOutlined from '@mui/icons-material/KeyboardOutlined'; -import ColorPicker from '../action-widget/pane/color-picker'; -import KeyboardShorcutsHelp from '../action-widget/pane/keyboard-shortcut-help'; -import TopicLink from '../action-widget/pane/topic-link'; -import TopicNote from '../action-widget/pane/topic-note'; -import IconPicker from '../action-widget/pane/icon-picker'; -import FontFamilySelector from '../action-widget/button/font-family-selector'; -import Capability from '../../classes/action/capability'; -import Editor from '../../classes/model/editor'; +import ActionConfig from '../../../classes/action/action-config'; +import { SwitchValueDirection } from '../../toolbar/ToolbarValueModelBuilder'; +import NodePropertyValueModelBuilder from '../../../classes/model/node-property-builder'; +import ColorPicker from '../../action-widget/pane/color-picker'; +import TopicLink from '../../action-widget/pane/topic-link'; +import TopicNote from '../../action-widget/pane/topic-note'; +import IconPicker from '../../action-widget/pane/icon-picker'; +import FontFamilySelector from '../../action-widget/button/font-family-selector'; +import Editor from '../../../classes/model/editor'; +import { useIntl } from 'react-intl'; + +const keyTooltip = (msg: string, key: string): string => { + const isMac = window.navigator.platform.toUpperCase().indexOf('MAC') >= 0; + 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()); - - /** - * submenu to manipulate node color and shape - */ + const intl = useIntl(); const colorAndShapeToolbarConfiguration: ActionConfig = { icon: , - - tooltip: $msg('TOPIC_SHAPE'), + tooltip: intl.formatMessage({ + id: 'editor-panel.tooltip-topic-style', + defaultMessage: 'Topic Style', + }), options: [ { icon: , - 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: , - 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: , - 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: , - 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()} > ), - 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()} > ), - 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: , - 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: , - tooltip: $msg('FONT_INCREASE'), + tooltip: intl.formatMessage({ + id: 'editor-panel.tooltip-topic-font-bigger', + defaultMessage: 'Bigger', + }), onClick: () => toolbarValueModelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.up), }, { icon: , - tooltip: $msg('FONT_DECREASE'), + tooltip: intl.formatMessage({ + id: 'editor-panel.tooltip-topic-font-smaller', + defaultMessage: 'Smaller', + }), onClick: () => toolbarValueModelBuilder.getFontSizeModel().switchValue(SwitchValueDirection.down), }, null, { icon: , - 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: , - 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: () => ( ), - 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: , - 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: , - 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: , - 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: , - 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: , - 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: , - 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: , - tooltip: $msg('CENTER_POSITION'), - onClick: () => { - model.getDesigner().zoomToFit(); - }, - disabled: () => !model?.isMapLoadded(), - }, - { - // zoom value candidate, neds to fixit - render: () => ( - - - % - {!model?.isMapLoadded() - ? 100 - : Math.floor((1 / designer.getWorkSpace()?.getZoom()) * 100)} - - - ), - disabled: () => !model?.isMapLoadded(), - }, - { - icon: , - tooltip: $msg('ZOOM_IN'), - onClick: () => { - model.getDesigner().zoomIn(); - }, - disabled: () => !model?.isMapLoadded(), - }, - { - icon: , - tooltip: $msg('ZOOM_OUT'), - onClick: () => { - model.getDesigner().zoomOut(); - }, - disabled: () => !model?.isMapLoadded(), - }, - { - icon: , - tooltip: $msg('KEYBOARD_SHOTCUTS'), - visible: !capability.isHidden('keyboard-shortcuts'), - options: [ - { - render: () => , - }, - ], - }, - ]; -} diff --git a/packages/editor/src/components/app-bar/editor-toolbar/index.tsx b/packages/editor/src/components/app-bar/editor-toolbar/index.tsx new file mode 100644 index 00000000..06697ac0 --- /dev/null +++ b/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 {config ? : <>}; +}; +export default EditorToolbar; diff --git a/packages/editor/src/components/app-bar/zoom-panel/index.tsx b/packages/editor/src/components/app-bar/zoom-panel/index.tsx new file mode 100644 index 00000000..5bda6060 --- /dev/null +++ b/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: , + 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: () => ( + + + % + {!model?.isMapLoadded() + ? 100 + : Math.floor((1 / designer.getWorkSpace()?.getZoom()) * 100)} + + + ), + disabled: () => !model?.isMapLoadded(), + }, + { + icon: , + tooltip: intl.formatMessage({ id: 'zoom-panel.tooltip-zoom-in', defaultMessage: 'Zoom In' }), + onClick: () => { + model.getDesigner().zoomIn(); + }, + disabled: () => !model?.isMapLoadded(), + }, + { + icon: , + tooltip: intl.formatMessage({ + id: 'zoom-panel.tooltip-zoom-out', + defaultMessage: 'Zoom Out', + }), + onClick: () => { + model.getDesigner().zoomOut(); + }, + disabled: () => !model?.isMapLoadded(), + }, + { + icon: , + tooltip: intl.formatMessage({ + id: 'zoom-panel.tooltip-keyboard', + defaultMessage: 'Keyboard Shortcuts', + }), + visible: !capability.isHidden('keyboard-shortcuts'), + options: [ + { + render: () => , + }, + ], + }, + ]; +} + +type ZoomPanelProps = { + model: Model | undefined; + capability: Capability; +}; + +const ZoomPanel = ({ model, capability }: ZoomPanelProps) => { + const config = buildZoomToolbarConfig(model, capability); + return ( + + ); +}; +export default ZoomPanel; diff --git a/packages/editor/src/components/index.tsx b/packages/editor/src/components/index.tsx index 4f0c0606..52b09337 100644 --- a/packages/editor/src/components/index.tsx +++ b/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(); + + // This is required to redraw in case of chansges in the canvas... const [canvasUpdate, setCanvasUpdate] = useState(); const editorTheme: Theme = theme ? theme : defaultEditorTheme; const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.create(); @@ -115,20 +117,9 @@ const Editor = ({ > {widgetManager.getEditorContent()} - {!capability.isHidden('edition-toolbar') && model?.isMapLoadded() && ( - - )} - + + -