Extract classes components.

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 <UrlForm closeModal={closeModal} urlModel={linkModel}></UrlForm>;
+  return <TopicLink closeModal={closeModal} urlModel={linkModel}></TopicLink>;
 };
 
 const noteContent = (noteModel, closeModal): React.ReactElement => {
-  return <NoteForm closeModal={closeModal} noteModel={noteModel}></NoteForm>;
+  return <TopicNote closeModal={closeModal} noteModel={noteModel}></TopicNote>;
 };
 
 export { linkContent, noteContent };

packages/editor/src/components/action-button/index.ts

@@ -1,6 +0,0 @@
-// import styled from 'styled-components';
-import Button from '@mui/material/Button';
-
-const ActionButton = Button;
-
-export default ActionButton;

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 (
+    <Box sx={{ minWidth: 120 }}>
+      <FormControl variant="standard" sx={{ m: 1, minWidth: 220 }} size="small">
+        <Select id="demo-simple-select" value={font || ''} onChange={handleChange}>
+          {[
+            'Arial',
+            'Baskerville',
+            'Tahoma',
+            'Limunari',
+            'Brush Script MT',
+            'Verdana',
+            'Times',
+            'Cursive',
+            'Fantasy',
+            'Perpetua',
+            'Brush Script',
+            'Copperplate',
+          ]
+            .sort()
+            .map((f) => (
+              <MenuItem value={f} key={f}>
+                <Typography fontFamily={f}>{f}</Typography>
+              </MenuItem>
+            ))}
+        </Select>
+      </FormControl>
+    </Box>
+  );
+};
+export default FontFamilySelect;

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 (
+    <ToolbarMenuItem
+      configuration={{
+        ...props.configuration,
+        disabled: () => disabled,
+      }}
+    ></ToolbarMenuItem>
+  );
+};
+export default UndoAndRedo;

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

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 (
+    <Box sx={{ width: '250px' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs variant="fullWidth" value={value} onChange={handleChange} aria-label="Icons tabs">
+          {iconGroups.map((family, i) => (
+            <Tab
+              key={family.id}
+              icon={<img className="panelIcon" src={ImageIcon.getImageUrl(family.icons[0])} />}
+              {...a11yProps(i)}
+            />
+          ))}
+        </Tabs>
+      </Box>
+      {iconGroups.map((family, i) => (
+        <TabPanel key={family.id} value={value} index={i}>
+          {family.icons.map((icon) => (
+            <img
+              className="panelIcon"
+              key={icon}
+              src={ImageIcon.getImageUrl(icon)}
+              onClick={() => {
+                props.iconModel.setValue(icon);
+                props.closeModal();
+              }}
+            ></img>
+          ))}
+        </TabPanel>
+      ))}
+    </Box>
+  );
+};
+
+/**
+ * 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 (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+    >
+      {value === index && <Box>{children}</Box>}
+    </div>
+  );
+};
+
+const a11yProps = (index: number) => {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+};
+export default IconPicker;

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: {

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;

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;

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 =
             </p>
             {showSignupButton && (
               <a href="/c/registration">
-                <ActionButton>
+                <Button>
                   {intl.formatMessage({ id: 'login.signup', defaultMessage: 'Sign Up' })}
-                </ActionButton>
+                </Button>
               </a>
             )}
           </div>

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: () => (
-          <FontFamilySelect fontFamilyModel={toolbarValueModelBuilder.getFontFamilyModel()} />
+          <FontFamilySelector fontFamilyModel={toolbarValueModelBuilder.getFontFamilyModel()} />
         ),
       },
       null,
@@ -223,10 +225,10 @@ export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
     options: [
       {
         render: (closeModal) => (
-          <UrlForm
+          <TopicLink
             closeModal={closeModal}
             urlModel={toolbarValueModelBuilder.getLinkModel()}
-          ></UrlForm>
+          ></TopicLink>
         ),
       },
     ],
@@ -244,10 +246,10 @@ export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
       {
         tooltip: 'Node note',
         render: (closeModal) => (
-          <NoteForm
+          <TopicNote
             closeModal={closeModal}
             noteModel={toolbarValueModelBuilder.getNoteModel()}
-          ></NoteForm>
+          ></TopicNote>
         ),
       },
     ],
@@ -264,7 +266,7 @@ export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
       {
         tooltip: 'Node icon',
         render: (closeModal) => (
-          <ToolbarEmojiPcker
+          <IconPicker
             closeModal={closeModal}
             iconModel={toolbarValueModelBuilder.getTopicIconModel()}
           />
@@ -409,27 +411,27 @@ export function buildEditorAppBarConfiguration(
     null,
     {
       render: () => (
-        <UndoAndRedoButton
+        <UndoAndRedo
           configuration={{
             icon: <UndoOutlinedIcon />,
             tooltip: $msg('UNDO') + ' (' + $msg('CTRL') + ' + Z)',
             onClick: () => designer.undo(),
           }}
           disabledCondition={(event) => event.undoSteps > 0}
-        ></UndoAndRedoButton>
+        ></UndoAndRedo>
       ),
       visible: showMindMapNodesActions,
     },
     {
       render: () => (
-        <UndoAndRedoButton
+        <UndoAndRedo
           configuration={{
             icon: <RedoOutlinedIcon />,
             tooltip: $msg('REDO') + ' (' + $msg('CTRL') + ' + Shift + Z)',
             onClick: () => designer.redo(),
           }}
           disabledCondition={(event) => event.redoSteps > 0}
-        ></UndoAndRedoButton>
+        ></UndoAndRedo>
       ),
       visible: showMindMapNodesActions,
     },

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

@@ -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 (
-    <Box sx={{ minWidth: 120 }}>
-      <FormControl variant="standard" sx={{ m: 1, minWidth: 220 }} size="small">
-        <Select id="demo-simple-select" value={font || ''} onChange={handleChange}>
-          {[
-            'Arial',
-            'Baskerville',
-            'Tahoma',
-            'Limunari',
-            'Brush Script MT',
-            'Verdana',
-            'Times',
-            'Cursive',
-            'Fantasy',
-            'Perpetua',
-            'Brush Script',
-            'Copperplate',
-          ]
-            .sort()
-            .map((f) => (
-              <MenuItem value={f} key={f}>
-                <Typography fontFamily={f}>{f}</Typography>
-              </MenuItem>
-            ))}
-        </Select>
-      </FormControl>
-    </Box>
-  );
-}
-
-/**
- * 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 (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-    >
-      {value === index && <Box>{children}</Box>}
-    </div>
-  );
-}
-
-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 (
-    <Box sx={{ width: '250px' }}>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <Tabs variant="fullWidth" value={value} onChange={handleChange} aria-label="Icons tabs">
-          {iconGroups.map((family, i) => (
-            <Tab
-              key={family.id}
-              icon={<img className="panelIcon" src={ImageIcon.getImageUrl(family.icons[0])} />}
-              {...a11yProps(i)}
-            />
-          ))}
-        </Tabs>
-      </Box>
-      {iconGroups.map((family, i) => (
-        <TabPanel key={family.id} value={value} index={i}>
-          {family.icons.map((icon) => (
-            <img
-              className="panelIcon"
-              key={icon}
-              src={ImageIcon.getImageUrl(icon)}
-              onClick={() => {
-                props.iconModel.setValue(icon);
-                props.closeModal();
-              }}
-            ></img>
-          ))}
-        </TabPanel>
-      ))}
-    </Box>
-  );
-};
-
-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 (
-    <ToolbarMenuItem
-      configuration={{
-        ...props.configuration,
-        disabled: () => disabled,
-      }}
-    ></ToolbarMenuItem>
-  );
-};

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;