diff --git a/packages/editor/src/classes/default-widget-manager/react-component.tsx b/packages/editor/src/classes/default-widget-manager/react-component.tsx
index 55833a57..3e1c4f05 100644
--- a/packages/editor/src/classes/default-widget-manager/react-component.tsx
+++ b/packages/editor/src/classes/default-widget-manager/react-component.tsx
@@ -1,13 +1,13 @@
import React from 'react';
-import UrlForm from '../../components/toolbar/component/link-form';
-import NoteForm from '../../components/toolbar/component/note-form';
+import TopicLink from '../../components/action-widget/pane/topic-link';
+import TopicNote from '../../components/action-widget/pane/topic-note';
const linkContent = (linkModel, closeModal): React.ReactElement => {
- return ;
+ return ;
};
const noteContent = (noteModel, closeModal): React.ReactElement => {
- return ;
+ return ;
};
export { linkContent, noteContent };
diff --git a/packages/editor/src/components/action-button/index.ts b/packages/editor/src/components/action-button/index.ts
deleted file mode 100644
index 7173f987..00000000
--- a/packages/editor/src/components/action-button/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// import styled from 'styled-components';
-import Button from '@mui/material/Button';
-
-const ActionButton = Button;
-
-export default ActionButton;
diff --git a/packages/editor/src/components/action-widget/button/font-family-selector/index.tsx b/packages/editor/src/components/action-widget/button/font-family-selector/index.tsx
new file mode 100644
index 00000000..ee9cf6b4
--- /dev/null
+++ b/packages/editor/src/components/action-widget/button/font-family-selector/index.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+
+import { NodePropertyValueModel } from '../../../toolbar/ToolbarValueModelBuilder';
+
+/**
+ * Font family selector for editor toolbar
+ */
+const FontFamilySelect = (props: { fontFamilyModel: NodePropertyValueModel }) => {
+ const [font, setFont] = React.useState(props.fontFamilyModel.getValue());
+
+ const handleChange = (event: SelectChangeEvent) => {
+ setFont(event.target.value as string);
+ props.fontFamilyModel.setValue(event.target.value);
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+export default FontFamilySelect;
diff --git a/packages/editor/src/components/action-widget/button/undo-and-redo/index.tsx b/packages/editor/src/components/action-widget/button/undo-and-redo/index.tsx
new file mode 100644
index 00000000..81f4d67b
--- /dev/null
+++ b/packages/editor/src/components/action-widget/button/undo-and-redo/index.tsx
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+import ActionConfig from '../../../../classes/action-config';
+import { ToolbarMenuItem } from '../../../toolbar/Toolbar';
+
+const UndoAndRedo = (props: {
+ configuration: ActionConfig;
+ disabledCondition: (event) => boolean;
+}) => {
+ const [disabled, setDisabled] = useState(true);
+ useEffect(() => {
+ const handleUpdate: any = (event) => {
+ if (props.disabledCondition(event)) {
+ setDisabled(false);
+ } else {
+ setDisabled(true);
+ }
+ };
+ designer.addEvent('modelUpdate', handleUpdate);
+ return () => {
+ designer.removeEvent('modelUpdate', handleUpdate);
+ };
+ }, []);
+
+ return (
+ disabled,
+ }}
+ >
+ );
+};
+export default UndoAndRedo;
diff --git a/packages/editor/src/components/toolbar/component/input/index.tsx b/packages/editor/src/components/action-widget/input/index.tsx
similarity index 100%
rename from packages/editor/src/components/toolbar/component/input/index.tsx
rename to packages/editor/src/components/action-widget/input/index.tsx
diff --git a/packages/editor/src/components/toolbar/color-picker/colors.json b/packages/editor/src/components/action-widget/pane/color-picker/colors.json
similarity index 100%
rename from packages/editor/src/components/toolbar/color-picker/colors.json
rename to packages/editor/src/components/action-widget/pane/color-picker/colors.json
diff --git a/packages/editor/src/components/toolbar/color-picker/index.tsx b/packages/editor/src/components/action-widget/pane/color-picker/index.tsx
similarity index 89%
rename from packages/editor/src/components/toolbar/color-picker/index.tsx
rename to packages/editor/src/components/action-widget/pane/color-picker/index.tsx
index 5c3056c0..d4ba1d6c 100644
--- a/packages/editor/src/components/toolbar/color-picker/index.tsx
+++ b/packages/editor/src/components/action-widget/pane/color-picker/index.tsx
@@ -1,6 +1,6 @@
import Box from '@mui/material/Box';
import React from 'react';
-import { NodePropertyValueModel } from '../ToolbarValueModelBuilder';
+import { NodePropertyValueModel } from '../../../toolbar/ToolbarValueModelBuilder';
import { CirclePicker as ReactColorPicker } from 'react-color';
import colors from './colors.json';
diff --git a/packages/editor/src/components/toolbar/iconGroups.json b/packages/editor/src/components/action-widget/pane/icon-picker/iconGroups.json
similarity index 100%
rename from packages/editor/src/components/toolbar/iconGroups.json
rename to packages/editor/src/components/action-widget/pane/icon-picker/iconGroups.json
diff --git a/packages/editor/src/components/action-widget/pane/icon-picker/index.tsx b/packages/editor/src/components/action-widget/pane/icon-picker/index.tsx
new file mode 100644
index 00000000..e111f653
--- /dev/null
+++ b/packages/editor/src/components/action-widget/pane/icon-picker/index.tsx
@@ -0,0 +1,75 @@
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import React from 'react';
+import iconGroups from './iconGroups.json';
+import { ImageIcon } from '@wisemapping/mindplot';
+import { NodePropertyValueModel } from '../../../toolbar/ToolbarValueModelBuilder';
+
+/**
+ * emoji picker for editor toolbar
+ */
+const IconPicker = (props: { closeModal: () => void; iconModel: NodePropertyValueModel }) => {
+ const [value, setValue] = React.useState(0);
+
+ const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+ setValue(newValue);
+ };
+
+ return (
+
+
+
+ {iconGroups.map((family, i) => (
+ }
+ {...a11yProps(i)}
+ />
+ ))}
+
+
+ {iconGroups.map((family, i) => (
+
+ {family.icons.map((icon) => (
+ {
+ props.iconModel.setValue(icon);
+ props.closeModal();
+ }}
+ >
+ ))}
+
+ ))}
+
+ );
+};
+
+/**
+ * tab panel used for display icon families in tabs
+ */
+const TabPanel = (props: { children?: React.ReactNode; index: number; value: number }) => {
+ const { children, value, index } = props;
+
+ return (
+
+ {value === index && {children}}
+
+ );
+};
+
+const a11yProps = (index: number) => {
+ return {
+ id: `simple-tab-${index}`,
+ 'aria-controls': `simple-tabpanel-${index}`,
+ };
+};
+export default IconPicker;
diff --git a/packages/editor/src/components/footer/keyboard-shortcut-help/index.tsx b/packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/index.tsx
similarity index 100%
rename from packages/editor/src/components/footer/keyboard-shortcut-help/index.tsx
rename to packages/editor/src/components/action-widget/pane/keyboard-shortcut-help/index.tsx
diff --git a/packages/editor/src/components/toolbar/component/save-and-delete/index.tsx b/packages/editor/src/components/action-widget/pane/save-and-delete/index.tsx
similarity index 91%
rename from packages/editor/src/components/toolbar/component/save-and-delete/index.tsx
rename to packages/editor/src/components/action-widget/pane/save-and-delete/index.tsx
index 5226291e..3c952254 100644
--- a/packages/editor/src/components/toolbar/component/save-and-delete/index.tsx
+++ b/packages/editor/src/components/action-widget/pane/save-and-delete/index.tsx
@@ -3,7 +3,7 @@ import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import { $msg } from '@wisemapping/mindplot';
import React from 'react';
-import { NodePropertyValueModel } from '../../ToolbarValueModelBuilder';
+import { NodePropertyValueModel } from '../../../toolbar/ToolbarValueModelBuilder';
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
const SaveAndDelete = (props: {
diff --git a/packages/editor/src/components/toolbar/component/link-form/index.tsx b/packages/editor/src/components/action-widget/pane/topic-link/index.tsx
similarity index 89%
rename from packages/editor/src/components/toolbar/component/link-form/index.tsx
rename to packages/editor/src/components/action-widget/pane/topic-link/index.tsx
index b20144e9..ced20bc6 100644
--- a/packages/editor/src/components/toolbar/component/link-form/index.tsx
+++ b/packages/editor/src/components/action-widget/pane/topic-link/index.tsx
@@ -1,9 +1,9 @@
import { useState } from 'react';
import { $msg } from '@wisemapping/mindplot';
-import { NodePropertyValueModel } from '../../ToolbarValueModelBuilder';
+import { NodePropertyValueModel } from '../../../toolbar/ToolbarValueModelBuilder';
import Box from '@mui/material/Box';
import React from 'react';
-import Input from '../input';
+import Input from '../../input';
import Link from '@mui/material/Link';
import IconButton from '@mui/material/IconButton';
import SaveAndDelete from '../save-and-delete';
@@ -12,7 +12,7 @@ import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined';
/**
* Url form for toolbar and node contextual editor
*/
-const UrlForm = (props: { closeModal: () => void; urlModel: NodePropertyValueModel }) => {
+const TopicLink = (props: { closeModal: () => void; urlModel: NodePropertyValueModel }) => {
const [url, setUrl] = useState(props.urlModel.getValue());
/**
@@ -73,4 +73,4 @@ const UrlForm = (props: { closeModal: () => void; urlModel: NodePropertyValueMod
);
};
-export default UrlForm;
+export default TopicLink;
diff --git a/packages/editor/src/components/toolbar/component/note-form/index.tsx b/packages/editor/src/components/action-widget/pane/topic-note/index.tsx
similarity index 78%
rename from packages/editor/src/components/toolbar/component/note-form/index.tsx
rename to packages/editor/src/components/action-widget/pane/topic-note/index.tsx
index 4bf2edd0..eace456f 100644
--- a/packages/editor/src/components/toolbar/component/note-form/index.tsx
+++ b/packages/editor/src/components/action-widget/pane/topic-note/index.tsx
@@ -1,14 +1,14 @@
import Box from '@mui/material/Box';
import { $msg } from '@wisemapping/mindplot';
import React, { useState } from 'react';
-import { NodePropertyValueModel } from '../../ToolbarValueModelBuilder';
-import Input from '../input';
+import { NodePropertyValueModel } from '../../../toolbar/ToolbarValueModelBuilder';
+import Input from '../../input';
import SaveAndDelete from '../save-and-delete';
/**
* Note form for toolbar and node contextual editor
*/
-const NoteForm = (props: { closeModal: () => void; noteModel: NodePropertyValueModel | null }) => {
+const TopicNote = (props: { closeModal: () => void; noteModel: NodePropertyValueModel | null }) => {
const [note, setNote] = useState(props.noteModel.getValue());
const submitHandler = () => {
@@ -39,4 +39,4 @@ const NoteForm = (props: { closeModal: () => void; noteModel: NodePropertyValueM
);
};
-export default NoteForm;
+export default TopicNote;
diff --git a/packages/editor/src/components/footer/index.tsx b/packages/editor/src/components/footer/index.tsx
index c4bb41ed..b20d0c1b 100644
--- a/packages/editor/src/components/footer/index.tsx
+++ b/packages/editor/src/components/footer/index.tsx
@@ -3,9 +3,8 @@ import { Notifier } from './styled';
import { useIntl } from 'react-intl';
import CloseDialogSvg from '../../../images/close-dialog-icon.svg';
-
-import ActionButton from '../action-button';
import { EditorRenderMode } from '@wisemapping/mindplot';
+import { Button } from '@mui/material';
export type FooterPropsType = {
editorMode: EditorRenderMode;
@@ -61,9 +60,9 @@ const Footer = ({ editorMode, isMobile }: FooterPropsType): React.ReactElement =
{showSignupButton && (
-
+
+
)}
diff --git a/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx b/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx
index 8b9e0130..5f0b324d 100644
--- a/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx
+++ b/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx
@@ -36,15 +36,17 @@ import SquareOutlined from '@mui/icons-material/SquareOutlined';
import { $msg, Designer } from '@wisemapping/mindplot';
import ActionConfig from '../../classes/action-config';
import { SwitchValueDirection, NodePropertyValueModelBuilder } from './ToolbarValueModelBuilder';
-import { FontFamilySelect, ToolbarEmojiPcker, UndoAndRedoButton } from './toolbarCustomComponents';
import Typography from '@mui/material/Typography';
import { ToolbarActionType } from '.';
import KeyboardOutlined from '@mui/icons-material/KeyboardOutlined';
import Tooltip from '@mui/material/Tooltip';
-import UrlForm from './component/link-form';
-import NoteForm from './component/note-form';
-import ColorPicker from './color-picker';
-import { KeyboardShorcutsHelp } from '../footer/keyboard-shortcut-help';
+import ColorPicker from '../action-widget/pane/color-picker';
+import { KeyboardShorcutsHelp } from '../action-widget/pane/keyboard-shortcut-help';
+import UndoAndRedo from '../action-widget/button/undo-and-redo';
+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';
/**
*
@@ -150,7 +152,7 @@ export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
options: [
{
render: () => (
-
+
),
},
null,
@@ -223,10 +225,10 @@ export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
options: [
{
render: (closeModal) => (
-
+ >
),
},
],
@@ -244,10 +246,10 @@ export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
{
tooltip: 'Node note',
render: (closeModal) => (
-
+ >
),
},
],
@@ -264,7 +266,7 @@ export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
{
tooltip: 'Node icon',
render: (closeModal) => (
-
@@ -409,27 +411,27 @@ export function buildEditorAppBarConfiguration(
null,
{
render: () => (
- ,
tooltip: $msg('UNDO') + ' (' + $msg('CTRL') + ' + Z)',
onClick: () => designer.undo(),
}}
disabledCondition={(event) => event.undoSteps > 0}
- >
+ >
),
visible: showMindMapNodesActions,
},
{
render: () => (
- ,
tooltip: $msg('REDO') + ' (' + $msg('CTRL') + ' + Shift + Z)',
onClick: () => designer.redo(),
}}
disabledCondition={(event) => event.redoSteps > 0}
- >
+ >
),
visible: showMindMapNodesActions,
},
diff --git a/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx b/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx
deleted file mode 100644
index c3dbcf7c..00000000
--- a/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Box from '@mui/material/Box';
-import FormControl from '@mui/material/FormControl';
-import MenuItem from '@mui/material/MenuItem';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import Typography from '@mui/material/Typography';
-import { $msg, ImageIcon } from '@wisemapping/mindplot';
-
-import { NodePropertyValueModel } from './ToolbarValueModelBuilder';
-import iconGroups from './iconGroups.json';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
-import { ToolbarMenuItem } from './Toolbar';
-import ActionConfig from '../../classes/action-config';
-
-/**
- * Font family selector for editor toolbar
- */
-export function FontFamilySelect(props: { fontFamilyModel: NodePropertyValueModel }) {
- const [font, setFont] = React.useState(props.fontFamilyModel.getValue());
-
- const handleChange = (event: SelectChangeEvent) => {
- setFont(event.target.value as string);
- props.fontFamilyModel.setValue(event.target.value);
- };
-
- return (
-
-
-
-
-
- );
-}
-
-/**
- * tab panel used for display icon families in tabs
- */
-function TabPanel(props: { children?: React.ReactNode; index: number; value: number }) {
- const { children, value, index } = props;
-
- return (
-
- {value === index && {children}}
-
- );
-}
-
-function a11yProps(index: number) {
- return {
- id: `simple-tab-${index}`,
- 'aria-controls': `simple-tabpanel-${index}`,
- };
-}
-/**
- * emoji picker for editor toolbar
- */
-export const ToolbarEmojiPcker = (props: {
- closeModal: () => void;
- iconModel: NodePropertyValueModel;
-}) => {
- const [value, setValue] = React.useState(0);
-
- const handleChange = (event: React.SyntheticEvent, newValue: number) => {
- setValue(newValue);
- };
-
- return (
-
-
-
- {iconGroups.map((family, i) => (
- }
- {...a11yProps(i)}
- />
- ))}
-
-
- {iconGroups.map((family, i) => (
-
- {family.icons.map((icon) => (
- {
- props.iconModel.setValue(icon);
- props.closeModal();
- }}
- >
- ))}
-
- ))}
-
- );
-};
-
-export const UndoAndRedoButton = (props: {
- configuration: ActionConfig;
- disabledCondition: (event) => boolean;
-}) => {
- const [disabled, setDisabled] = useState(true);
- useEffect(() => {
- const handleUpdate: any = (event) => {
- if (props.disabledCondition(event)) {
- setDisabled(false);
- } else {
- setDisabled(true);
- }
- };
- designer.addEvent('modelUpdate', handleUpdate);
- return () => {
- designer.removeEvent('modelUpdate', handleUpdate);
- };
- }, []);
-
- return (
- disabled,
- }}
- >
- );
-};
diff --git a/packages/editor/src/global-styled.css b/packages/editor/src/global-styled.css
index 22e5f8ca..de334a24 100644
--- a/packages/editor/src/global-styled.css
+++ b/packages/editor/src/global-styled.css
@@ -19,88 +19,6 @@ body {
height: 100%;
}
-.notesTip {
- background-color: #dfcf3c;
- padding: 5px 15px;
- color: #666666;
- /*font-weight: bold;*/
- /*width: 100px;*/
- font-size: 13px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-}
-
-.linkTip {
- background-color: #dfcf3c;
- padding: 5px 15px;
- color: #666666;
- /*font-weight: bold;*/
- /*width: 100px;*/
- font-size: 13px;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-}
-
-.keyboardShortcutTip {
- background-color: black;
- padding: 5px 15px;
- color: white;
- font-weight: bold;
- font-size: 11px;
-}
-
-/** */
-/* Modal dialogs definitions */
-
-div.modalDialog {
- position: fixed;
- top: 50%;
- left: 50%;
- z-index: 11000;
- width: 500px;
- margin: -250px 0 0 -250px;
- background-color: #ffffff;
- border: 1px solid #999;
- padding: 10px;
- overflow: auto;
- -webkit-background-clip: padding-box;
- -moz-background-clip: padding-box;
- background-clip: padding-box;
-}
-
-div.modalDialog .content {
- padding: 5px 5px;
-}
-
-div.modalDialog .title {
- font-weight: bold;
- text-shadow: 1px 1px 0 #fff;
- border-bottom: 1px solid #eee;
- padding: 5px 15px;
- font-size: 18px;
-}
-
-/*--- End Modal Dialog Form ---*/
-
-.publishModalDialog .content {
- height: 420px;
-}
-
-.exportModalDialog .content {
- height: 400px;
-}
-
-.shareModalDialog .content {
- height: 440px;
-}
-
-div.shareModalDialog {
- width: 550px;
-}
.panelIcon {
width: 20px;
@@ -129,65 +47,6 @@ div.shareModalDialog {
align-items: stretch;
}
-div#position {
- margin-top: 5px;
-}
-
-#position-button {
- cursor: pointer;
- border: solid black 1px;
- width: 40px;
- height: 40px;
- background-position: center;
- background-repeat: no-repeat;
- background-size: 40px 40px;
- background-color: #fff;
- border-radius: 8px;
- padding: 0;
-}
-
-#position-button>img {
- vertical-align: middle;
-}
-
-#zoom-button {
- width: 40px;
- border: 0;
-}
-
-#zoom-plus,
-#zoom-minus {
- border: solid black 1px;
- height: 40px;
- width: 40px;
- background-repeat: no-repeat;
- background-size: 40px 40px;
- background-position: center;
- cursor: pointer;
- background-color: #fff;
- padding: 0;
-}
-
-#zoom-plus,
-#zoom-minus>img {
- vertical-align: middle;
-}
-
-
-#zoom-plus {
- border-radius: 8px 8px 0 0;
-}
-
-#zoom-minus {
- border-radius: 0 0 8px 8px;
-}
-
-div#shotcuts>img {
- margin: 20px 0;
- width: 40px;
- height: 40px;
-}
-
#keyboardTable {
font-family: Arial, verdana, serif;
font-size: 13px;