From 2cdc59b9daa37d34554201b28facb03edc3b809d Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Thu, 6 Oct 2022 22:16:21 -0700 Subject: [PATCH] Split components class. --- .../classes/default-widget-manager/index.ts | 2 +- .../react-component.tsx} | 3 +- .../editor/src/components/footer/index.tsx | 6 +- .../{ => component/color-picker}/colors.json | 0 .../toolbar/component/color-picker/index.tsx | 28 ++ .../toolbar/component/input/index.tsx | 28 ++ .../keyboard-shortcut-help/index.tsx | 127 +++++++ .../toolbar/component/link-form/index.tsx | 76 +++++ .../toolbar/component/note-form/index.tsx | 42 +++ .../component/save-and-delete/index.tsx | 34 ++ .../toolbar/toolbarConfigurationBuilder.tsx | 16 +- .../toolbar/toolbarCustomComponents.tsx | 312 +----------------- 12 files changed, 346 insertions(+), 328 deletions(-) rename packages/editor/src/{components/toolbar/contents.tsx => classes/default-widget-manager/react-component.tsx} (72%) rename packages/editor/src/components/toolbar/{ => component/color-picker}/colors.json (100%) create mode 100644 packages/editor/src/components/toolbar/component/color-picker/index.tsx create mode 100644 packages/editor/src/components/toolbar/component/input/index.tsx create mode 100644 packages/editor/src/components/toolbar/component/keyboard-shortcut-help/index.tsx create mode 100644 packages/editor/src/components/toolbar/component/link-form/index.tsx create mode 100644 packages/editor/src/components/toolbar/component/note-form/index.tsx create mode 100644 packages/editor/src/components/toolbar/component/save-and-delete/index.tsx diff --git a/packages/editor/src/classes/default-widget-manager/index.ts b/packages/editor/src/classes/default-widget-manager/index.ts index 8288b2f5..ddd001cd 100644 --- a/packages/editor/src/classes/default-widget-manager/index.ts +++ b/packages/editor/src/classes/default-widget-manager/index.ts @@ -7,7 +7,7 @@ import { NoteModel, NoteIcon, } from '@wisemapping/mindplot'; -import { linkContent, noteContent } from '../../components/toolbar/contents'; +import { linkContent, noteContent } from './react-component'; export class DefaultWidgetManager extends WidgetManager { private editorOpen: boolean; diff --git a/packages/editor/src/components/toolbar/contents.tsx b/packages/editor/src/classes/default-widget-manager/react-component.tsx similarity index 72% rename from packages/editor/src/components/toolbar/contents.tsx rename to packages/editor/src/classes/default-widget-manager/react-component.tsx index 4f1f928c..55833a57 100644 --- a/packages/editor/src/components/toolbar/contents.tsx +++ b/packages/editor/src/classes/default-widget-manager/react-component.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { NoteForm, UrlForm } from './toolbarCustomComponents'; +import UrlForm from '../../components/toolbar/component/link-form'; +import NoteForm from '../../components/toolbar/component/note-form'; const linkContent = (linkModel, closeModal): React.ReactElement => { return ; diff --git a/packages/editor/src/components/footer/index.tsx b/packages/editor/src/components/footer/index.tsx index 72dfd1df..c4bb41ed 100644 --- a/packages/editor/src/components/footer/index.tsx +++ b/packages/editor/src/components/footer/index.tsx @@ -1,11 +1,7 @@ import React, { useState } from 'react'; -import { StyledLogo, Notifier } from './styled'; +import { Notifier } from './styled'; import { useIntl } from 'react-intl'; -import KeyboardSvg from '../../../images/keyboard.svg'; -import AddSvg from '../../../images/add.svg'; -import MinusSvg from '../../../images/minus.svg'; -import CenterFocusSvg from '../../../images/center_focus.svg'; import CloseDialogSvg from '../../../images/close-dialog-icon.svg'; import ActionButton from '../action-button'; diff --git a/packages/editor/src/components/toolbar/colors.json b/packages/editor/src/components/toolbar/component/color-picker/colors.json similarity index 100% rename from packages/editor/src/components/toolbar/colors.json rename to packages/editor/src/components/toolbar/component/color-picker/colors.json diff --git a/packages/editor/src/components/toolbar/component/color-picker/index.tsx b/packages/editor/src/components/toolbar/component/color-picker/index.tsx new file mode 100644 index 00000000..c0654651 --- /dev/null +++ b/packages/editor/src/components/toolbar/component/color-picker/index.tsx @@ -0,0 +1,28 @@ +import Box from '@mui/material/Box'; +import React from 'react'; +import { NodePropertyValueModel } from '../../ToolbarValueModelBuilder'; +import { CirclePicker as ReactColorPicker } from 'react-color'; +import colors from './colors.json'; + +/** + * Color picker for toolbar + */ +const ColorPicker = (props: { closeModal: () => void; colorModel: NodePropertyValueModel }) => { + return ( + + { + props.colorModel.setValue(color.hex); + props.closeModal(); + }} + colors={colors} + width={216} + circleSpacing={9} + circleSize={18} + > + + ); +}; + +export default ColorPicker; diff --git a/packages/editor/src/components/toolbar/component/input/index.tsx b/packages/editor/src/components/toolbar/component/input/index.tsx new file mode 100644 index 00000000..c2d55d73 --- /dev/null +++ b/packages/editor/src/components/toolbar/component/input/index.tsx @@ -0,0 +1,28 @@ +import TextField, { TextFieldProps } from '@mui/material/TextField'; +import DesignerKeyboard from '@wisemapping/mindplot/src/components/DesignerKeyboard'; +import React, { useEffect } from 'react'; + +/** + * + * @param props text field props. + * @returns wrapped mui TextField, that disable mindplot keyboard events on focus and enable it on blur + */ +const Input = (props: TextFieldProps) => { + useEffect(() => { + return () => DesignerKeyboard.resume(); + }, []); + return ( + { + DesignerKeyboard.pause(); + props.onFocus && props.onFocus(e); + }} + onBlur={(e) => { + DesignerKeyboard.resume(); + props.onBlur && props.onBlur(e); + }} + > + ); +}; +export default Input; diff --git a/packages/editor/src/components/toolbar/component/keyboard-shortcut-help/index.tsx b/packages/editor/src/components/toolbar/component/keyboard-shortcut-help/index.tsx new file mode 100644 index 00000000..6a9ba3ba --- /dev/null +++ b/packages/editor/src/components/toolbar/component/keyboard-shortcut-help/index.tsx @@ -0,0 +1,127 @@ +import { $msg } from '@wisemapping/mindplot'; +import React from 'react'; + +export const KeyboardShorcutsHelp = () => { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{$msg('ACTION')}Windows - LinuxMac OS X
{$msg('SAVE_CHANGES')}{$msg('CTRL')} + S⌘ + S
{$msg('CREATE_SIBLING_TOPIC')}EnterEnter
{$msg('CREATE_CHILD_TOPIC')}{$msg('K_INSERT')} / Tab⌘ + Enter / Tab
{$msg('DELETE_TOPIC')}{$msg('K_DELETE')}Delete
{$msg('EDIT_TOPIC_TEXT')}{$msg('JUST_START_TYPING')} | F2{$msg('JUST_START_TYPING')} | F2
{$msg('MULTIPLE_LINES')}{$msg('CTRL')} + Enter⌘ + Enter
{$msg('COPY_AND_PASTE_TOPICS')} + {$msg('CTRL')} + C / {$msg('CTRL')} + V + ⌘ + C / ⌘ + V
{$msg('COLLAPSE_CHILDREN')}{$msg('SPACE_BAR')}{$msg('SPACE_BAR')}
{$msg('TOPIC_NAVIGATION')}{$msg('ARROW_KEYS')}{$msg('ARROW_KEYS')}
{$msg('SELECT_MULTIPLE_NODES')} + {$msg('CTRL')} + {$msg('MOUSE_CLICK')} + + {$msg('CTRL')} + {$msg('MOUSE_CLICK')} +
{$msg('UNDO_EDITION')}{$msg('CTRL')} + Z⌘ + Z
{$msg('REDO_EDITION')}{$msg('CTRL')} + Shift + Z⌘ + Shift + Z
{$msg('SELECT_ALL_TOPIC')}{$msg('CTRL')} + A⌘ + A
{$msg('CANCEL_TEXT_CHANGES')}EscEsc
{$msg('DESELECT_ALL_TOPIC')}{$msg('CTRL')} + Shift + A⌘ + Shift + A
{$msg('CHANGE_TEXT_ITALIC')}{$msg('CTRL')} + I⌘ + I
{$msg('CHANGE_TEXT_BOLD')}{$msg('CTRL')} + B⌘ + B
{$msg('TOPIC_NOTE')}{$msg('CTRL')} + K⌘ + K
{$msg('TOPIC_LINK')}{$msg('CTRL')} + L⌘ + L
+
+ ); +}; diff --git a/packages/editor/src/components/toolbar/component/link-form/index.tsx b/packages/editor/src/components/toolbar/component/link-form/index.tsx new file mode 100644 index 00000000..b20144e9 --- /dev/null +++ b/packages/editor/src/components/toolbar/component/link-form/index.tsx @@ -0,0 +1,76 @@ +import { useState } from 'react'; +import { $msg } from '@wisemapping/mindplot'; +import { NodePropertyValueModel } from '../../ToolbarValueModelBuilder'; +import Box from '@mui/material/Box'; +import React from 'react'; +import Input from '../input'; +import Link from '@mui/material/Link'; +import IconButton from '@mui/material/IconButton'; +import SaveAndDelete from '../save-and-delete'; +import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined'; + +/** + * Url form for toolbar and node contextual editor + */ +const UrlForm = (props: { closeModal: () => void; urlModel: NodePropertyValueModel }) => { + const [url, setUrl] = useState(props.urlModel.getValue()); + + /** + * if url is valid set model value and calls closeModal + */ + const submitHandler = () => { + if (checkURL(url)) { + props.closeModal(); + props.urlModel.setValue(url); + } + }; + + const keyDownHandler = (event) => { + if (event.key === 'Enter') { + event.preventDefault(); + submitHandler(); + } + }; + + const checkURL = (url: string): boolean => { + const regex = + /^((http|https):\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i; + return regex.test(url); + }; + + const isValidUrl = !url || checkURL(url); + + return ( + + setUrl(event.target.value)} + variant="outlined" + size="small" + onKeyDown={keyDownHandler} + InputProps={{ + endAdornment: ( + + + + + + ), + }} + sx={{ pr: 1 }} + > + + + ); +}; + +export default UrlForm; diff --git a/packages/editor/src/components/toolbar/component/note-form/index.tsx b/packages/editor/src/components/toolbar/component/note-form/index.tsx new file mode 100644 index 00000000..4bf2edd0 --- /dev/null +++ b/packages/editor/src/components/toolbar/component/note-form/index.tsx @@ -0,0 +1,42 @@ +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 SaveAndDelete from '../save-and-delete'; + +/** + * Note form for toolbar and node contextual editor + */ +const NoteForm = (props: { closeModal: () => void; noteModel: NodePropertyValueModel | null }) => { + const [note, setNote] = useState(props.noteModel.getValue()); + + const submitHandler = () => { + props.closeModal(); + props.noteModel.setValue(note); + }; + + return ( + + setNote(event.target.value)} + > +
+ + + ); +}; + +export default NoteForm; diff --git a/packages/editor/src/components/toolbar/component/save-and-delete/index.tsx b/packages/editor/src/components/toolbar/component/save-and-delete/index.tsx new file mode 100644 index 00000000..5226291e --- /dev/null +++ b/packages/editor/src/components/toolbar/component/save-and-delete/index.tsx @@ -0,0 +1,34 @@ +import Box from '@mui/material/Box'; +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 DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; + +const SaveAndDelete = (props: { + model: NodePropertyValueModel; + closeModal: () => void; + submitHandler: () => void; +}) => { + return ( + + { + props.closeModal(); + props.model.setValue(undefined); + }} + > + + + + + + ); +}; + +export default SaveAndDelete; diff --git a/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx b/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx index 7dfbff18..9da829fd 100644 --- a/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx +++ b/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React from 'react'; import BrushOutlinedIcon from '@mui/icons-material/BrushOutlined'; import FontDownloadOutlinedIcon from '@mui/icons-material/FontDownloadOutlined'; import TextIncreaseOutlinedIcon from '@mui/icons-material/TextIncreaseOutlined'; @@ -36,19 +36,15 @@ 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 { - ColorPicker, - FontFamilySelect, - KeyboardShorcutsHelp, - NoteForm, - ToolbarEmojiPcker, - UndoAndRedoButton, - UrlForm, -} from './toolbarCustomComponents'; +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 './component/color-picker'; +import { KeyboardShorcutsHelp } from './component/keyboard-shortcut-help'; /** * diff --git a/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx b/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx index df12e1ed..c3dbcf7c 100644 --- a/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx +++ b/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx @@ -1,203 +1,18 @@ import React, { useEffect, useState } from 'react'; import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; import FormControl from '@mui/material/FormControl'; -import IconButton from '@mui/material/IconButton'; -import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined'; -import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'; import MenuItem from '@mui/material/MenuItem'; import Select, { SelectChangeEvent } from '@mui/material/Select'; -import TextField, { TextFieldProps } from '@mui/material/TextField'; import Typography from '@mui/material/Typography'; -import { $msg, DesignerKeyboard, ImageIcon } from '@wisemapping/mindplot'; +import { $msg, ImageIcon } from '@wisemapping/mindplot'; -import { CirclePicker as ReactColorPicker } from 'react-color'; import { NodePropertyValueModel } from './ToolbarValueModelBuilder'; import iconGroups from './iconGroups.json'; -import colors from './colors.json'; -import Link from '@mui/material/Link'; import Tab from '@mui/material/Tab'; import Tabs from '@mui/material/Tabs'; import { ToolbarMenuItem } from './Toolbar'; import ActionConfig from '../../classes/action-config'; -/** - * Color picker for toolbar - */ -export const ColorPicker = (props: { - closeModal: () => void; - colorModel: NodePropertyValueModel; -}) => { - return ( - - { - props.colorModel.setValue(color.hex); - props.closeModal(); - }} - colors={colors} - width={216} - circleSpacing={9} - circleSize={18} - > - - ); -}; - -/** - * checks whether the input is a valid url - * @return {Boolean} true if the url is valid - */ -function checkURL(url: string): boolean { - const regex = - /^((http|https):\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i; - return regex.test(url); -} - -const SaveAndDelete = (props: { - model: NodePropertyValueModel; - closeModal: () => void; - submitHandler: () => void; -}) => { - return ( - - { - props.closeModal(); - props.model.setValue(undefined); - }} - > - - - - - - ); -}; - -/** - * Url form for toolbar and node contextual editor - */ -export const UrlForm = (props: { closeModal: () => void; urlModel: NodePropertyValueModel }) => { - const [url, setUrl] = useState(props.urlModel.getValue()); - - /** - * if url is valid set model value and calls closeModal - */ - const submitHandler = () => { - if (checkURL(url)) { - props.closeModal(); - props.urlModel.setValue(url); - } - }; - - const keyDownHandler = (event) => { - if (event.key === 'Enter') { - event.preventDefault(); - submitHandler(); - } - }; - - const isValidUrl = !url || checkURL(url); - return ( - - setUrl(event.target.value)} - variant="outlined" - size="small" - onKeyDown={keyDownHandler} - InputProps={{ - endAdornment: ( - - - - - - ), - }} - sx={{ pr: 1 }} - > - - - ); -}; - -/** - * - * @param props text field props. - * @returns wrapped mui TextField, that disable mindplot keyboard events on focus and enable it on blur - */ -const Input = (props: TextFieldProps) => { - useEffect(() => { - return () => DesignerKeyboard.resume(); - }, []); - return ( - { - DesignerKeyboard.pause(); - props.onFocus && props.onFocus(e); - }} - onBlur={(e) => { - DesignerKeyboard.resume(); - props.onBlur && props.onBlur(e); - }} - > - ); -}; - -/** - * Note form for toolbar and node contextual editor - */ -export const NoteForm = (props: { - closeModal: () => void; - noteModel: NodePropertyValueModel | null; -}) => { - const [note, setNote] = useState(props.noteModel.getValue()); - - const submitHandler = () => { - props.closeModal(); - props.noteModel.setValue(note); - }; - - return ( - - setNote(event.target.value)} - > -
- - - ); -}; - /** * Font family selector for editor toolbar */ @@ -336,128 +151,3 @@ export const UndoAndRedoButton = (props: { > ); }; - -export const KeyboardShorcutsHelp = () => { - return ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{$msg('ACTION')}Windows - LinuxMac OS X
{$msg('SAVE_CHANGES')}{$msg('CTRL')} + S⌘ + S
{$msg('CREATE_SIBLING_TOPIC')}EnterEnter
{$msg('CREATE_CHILD_TOPIC')}{$msg('K_INSERT')} / Tab⌘ + Enter / Tab
{$msg('DELETE_TOPIC')}{$msg('K_DELETE')}Delete
{$msg('EDIT_TOPIC_TEXT')}{$msg('JUST_START_TYPING')} | F2{$msg('JUST_START_TYPING')} | F2
{$msg('MULTIPLE_LINES')}{$msg('CTRL')} + Enter⌘ + Enter
{$msg('COPY_AND_PASTE_TOPICS')} - {$msg('CTRL')} + C / {$msg('CTRL')} + V - ⌘ + C / ⌘ + V
{$msg('COLLAPSE_CHILDREN')}{$msg('SPACE_BAR')}{$msg('SPACE_BAR')}
{$msg('TOPIC_NAVIGATION')}{$msg('ARROW_KEYS')}{$msg('ARROW_KEYS')}
{$msg('SELECT_MULTIPLE_NODES')} - {$msg('CTRL')} + {$msg('MOUSE_CLICK')} - - {$msg('CTRL')} + {$msg('MOUSE_CLICK')} -
{$msg('UNDO_EDITION')}{$msg('CTRL')} + Z⌘ + Z
{$msg('REDO_EDITION')}{$msg('CTRL')} + Shift + Z⌘ + Shift + Z
{$msg('SELECT_ALL_TOPIC')}{$msg('CTRL')} + A⌘ + A
{$msg('CANCEL_TEXT_CHANGES')}EscEsc
{$msg('DESELECT_ALL_TOPIC')}{$msg('CTRL')} + Shift + A⌘ + Shift + A
{$msg('CHANGE_TEXT_ITALIC')}{$msg('CTRL')} + I⌘ + I
{$msg('CHANGE_TEXT_BOLD')}{$msg('CTRL')} + B⌘ + B
{$msg('TOPIC_NOTE')}{$msg('CTRL')} + K⌘ + K
{$msg('TOPIC_LINK')}{$msg('CTRL')} + L⌘ + L
-
- ); -};