Migrate messages

This commit is contained in:
Paulo Gustavo Veiga 2022-10-23 00:15:44 -07:00
parent 1110d94dcd
commit cf8c7eb336
9 changed files with 548 additions and 157 deletions

View File

@ -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"
},
}

View File

@ -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"
}
}

View File

@ -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"
}
}

View File

@ -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"
}
}

View File

@ -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: <BrushOutlinedIcon />,
tooltip: $msg('TOPIC_SHAPE'),
tooltip: intl.formatMessage({
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 />,
},
],
},
];
}

View File

@ -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;

View File

@ -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;

View File

@ -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
configurations={buildZoomToolbarConfig(model, capability)}
position={{
position: {
right: '7px',
top: '93%',
},
vertical: false,
}}
/>
<EditorToolbar model={model} capability={capability} />
<ZoomPanel model={model} capability={capability} />
<mindplot-component
ref={mindplotRef}
@ -138,7 +129,6 @@ const Editor = ({
/>
<Notifier id="headerNotifier" />
<WarningDialog
capability={capability}
message={mapInfo.isLocked() ? mapInfo.getLockedMessage() : ''}

View File

@ -1,51 +1,24 @@
const EN = {
SAVING: 'Saving ...',
SAVE_COMPLETE: 'Save Complete',
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',
SAVE_COMPLETE: 'Save completed',
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',
FONT_FORMAT: 'Font Format',
FONT_INCREASE: 'Font Size Increase',
FONT_DECREASE: 'Font Size Decrease',
TOPIC_NOTE: 'Add Note',
TOPIC_LINK: 'Add Link',
};
export default EN;