From cb5d72d19f53f8e0af4e4c4467e02af68e37d21e Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Fri, 7 Oct 2022 19:18:34 -0700 Subject: [PATCH] Extract classes components. --- .../react-component.tsx | 8 +- .../src/components/action-button/index.ts | 6 - .../button/font-family-selector/index.tsx | 50 ++++++ .../button/undo-and-redo/index.tsx | 33 ++++ .../input/index.tsx | 0 .../pane}/color-picker/colors.json | 0 .../pane}/color-picker/index.tsx | 2 +- .../pane/icon-picker}/iconGroups.json | 0 .../action-widget/pane/icon-picker/index.tsx | 75 +++++++++ .../pane}/keyboard-shortcut-help/index.tsx | 0 .../pane}/save-and-delete/index.tsx | 2 +- .../pane/topic-link}/index.tsx | 8 +- .../pane/topic-note}/index.tsx | 8 +- .../editor/src/components/footer/index.tsx | 7 +- .../toolbar/toolbarConfigurationBuilder.tsx | 32 ++-- .../toolbar/toolbarCustomComponents.tsx | 153 ------------------ packages/editor/src/global-styled.css | 141 ---------------- 17 files changed, 192 insertions(+), 333 deletions(-) delete mode 100644 packages/editor/src/components/action-button/index.ts create mode 100644 packages/editor/src/components/action-widget/button/font-family-selector/index.tsx create mode 100644 packages/editor/src/components/action-widget/button/undo-and-redo/index.tsx rename packages/editor/src/components/{toolbar/component => action-widget}/input/index.tsx (100%) rename packages/editor/src/components/{toolbar => action-widget/pane}/color-picker/colors.json (100%) rename packages/editor/src/components/{toolbar => action-widget/pane}/color-picker/index.tsx (89%) rename packages/editor/src/components/{toolbar => action-widget/pane/icon-picker}/iconGroups.json (100%) create mode 100644 packages/editor/src/components/action-widget/pane/icon-picker/index.tsx rename packages/editor/src/components/{footer => action-widget/pane}/keyboard-shortcut-help/index.tsx (100%) rename packages/editor/src/components/{toolbar/component => action-widget/pane}/save-and-delete/index.tsx (91%) rename packages/editor/src/components/{toolbar/component/link-form => action-widget/pane/topic-link}/index.tsx (89%) rename packages/editor/src/components/{toolbar/component/note-form => action-widget/pane/topic-note}/index.tsx (78%) delete mode 100644 packages/editor/src/components/toolbar/toolbarCustomComponents.tsx 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 ( + + ); +}; + +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 ( - - ); -} - -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;