From ed457612f6a926abbcdd645f761b434bf91bd772 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Thu, 6 Oct 2022 20:30:27 -0700 Subject: [PATCH] Fix mindmap name Classes Layout --- .../actions-config/index.ts} | 6 +- .../default-widget-manager/index.ts} | 10 +- .../components/menu/useMuiWidgetManager.ts | 6 +- .../editor/src/components/toolbar/AppBar.tsx | 4 +- .../editor/src/components/toolbar/Toolbar.tsx | 12 +- .../toolbar/toolbarConfigurationBuilder.tsx | 33 +++--- .../toolbar/toolbarCustomComponents.tsx | 4 +- packages/editor/src/index.tsx | 1 + .../editor/test/unit/toolbar/toolbar.test.tsx | 24 ++-- packages/mindplot/src/mindplot-styles.css | 110 ++++++++++++++++++ 10 files changed, 164 insertions(+), 46 deletions(-) rename packages/editor/src/{components/toolbar/ToolbarOptionConfigurationInterface.ts => classes/actions-config/index.ts} (92%) rename packages/editor/src/{components/menu/MuiWidgetManager.ts => classes/default-widget-manager/index.ts} (85%) create mode 100644 packages/mindplot/src/mindplot-styles.css diff --git a/packages/editor/src/components/toolbar/ToolbarOptionConfigurationInterface.ts b/packages/editor/src/classes/actions-config/index.ts similarity index 92% rename from packages/editor/src/components/toolbar/ToolbarOptionConfigurationInterface.ts rename to packages/editor/src/classes/actions-config/index.ts index 556db705..37ea3c36 100644 --- a/packages/editor/src/components/toolbar/ToolbarOptionConfigurationInterface.ts +++ b/packages/editor/src/classes/actions-config/index.ts @@ -4,7 +4,7 @@ * Property onClick is the event handler for a common button of this menu. Set options for a submenu or render for a custom element in place (from the second level onwards). * On the first level option has priority over onClick. Second level onwards render is the first option. */ -export interface ToolbarOptionConfiguration { +interface ActionConfig { /** * the React element for put in menu entry button */ @@ -24,7 +24,7 @@ export interface ToolbarOptionConfiguration { /** * submenu options. If null, a divider will be inserted. */ - options?: (ToolbarOptionConfiguration | null)[]; + options?: (ActionConfig | null)[]; /** * option is disabled */ @@ -42,3 +42,5 @@ export interface ToolbarOptionConfiguration { */ visible?: boolean; } + +export default ActionConfig; diff --git a/packages/editor/src/components/menu/MuiWidgetManager.ts b/packages/editor/src/classes/default-widget-manager/index.ts similarity index 85% rename from packages/editor/src/components/menu/MuiWidgetManager.ts rename to packages/editor/src/classes/default-widget-manager/index.ts index 45d746c5..f2dcb67f 100644 --- a/packages/editor/src/components/menu/MuiWidgetManager.ts +++ b/packages/editor/src/classes/default-widget-manager/index.ts @@ -7,12 +7,12 @@ import { NoteModel, NoteIcon, } from '@wisemapping/mindplot'; -import { linkContent, noteContent } from './contents'; +import { linkContent, noteContent } from '../../components/menu/contents'; -export default class MuiWidgetManager extends WidgetManager { +export class DefaultWidgetManager extends WidgetManager { private editorOpen: boolean; private editorContent: React.ReactElement; - private setPopoverOpen: (boolean) => void; + private setPopoverOpen: (value: boolean) => void; private setPopoverTarget: (target: Element) => void; constructor( @@ -27,7 +27,7 @@ export default class MuiWidgetManager extends WidgetManager { showEditorForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) { const model: any = { getValue: () => topic.getLinkValue(), - setValue: (value) => topic.setLinkValue(value), + setValue: (value: string) => topic.setLinkValue(value), }; this.editorContent = linkContent(model, () => this.setPopoverOpen(false)); this.setPopoverTarget(topic.getOuterShape().peer._native); @@ -64,3 +64,5 @@ export default class MuiWidgetManager extends WidgetManager { topic.closeEditors(); } } + +export default DefaultWidgetManager; diff --git a/packages/editor/src/components/menu/useMuiWidgetManager.ts b/packages/editor/src/components/menu/useMuiWidgetManager.ts index ecab0076..42db5fab 100644 --- a/packages/editor/src/components/menu/useMuiWidgetManager.ts +++ b/packages/editor/src/components/menu/useMuiWidgetManager.ts @@ -1,10 +1,10 @@ import { useState, useRef } from 'react'; -import MuiWidgetManager from './MuiWidgetManager'; +import DefaultWidgetManager from '../../classes/default-widget-manager'; -export const useMuiWidgetManager = (): [boolean, Element | undefined, MuiWidgetManager] => { +export const useMuiWidgetManager = (): [boolean, Element | undefined, DefaultWidgetManager] => { const [popoverOpen, setPopoverOpen] = useState(false); const [popoverTarget, setPopoverTarget] = useState(undefined); - const widgetManager = useRef(new MuiWidgetManager(setPopoverOpen, setPopoverTarget)); + const widgetManager = useRef(new DefaultWidgetManager(setPopoverOpen, setPopoverTarget)); return [popoverOpen, popoverTarget, widgetManager.current]; }; diff --git a/packages/editor/src/components/toolbar/AppBar.tsx b/packages/editor/src/components/toolbar/AppBar.tsx index 63a422b1..d5635d92 100644 --- a/packages/editor/src/components/toolbar/AppBar.tsx +++ b/packages/editor/src/components/toolbar/AppBar.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ToolbarOptionConfiguration } from './ToolbarOptionConfigurationInterface'; +import ActionConfig from '../../classes/actions-config'; import MaterialToolbar from '@mui/material/Toolbar'; import AppBar from '@mui/material/AppBar'; import { ToolbarMenuItem } from './Toolbar'; @@ -9,7 +9,7 @@ import { ToolbarMenuItem } from './Toolbar'; * @param props.configurations the configurations array * @returns toolbar wich contains an entry for each configuration in the array */ -const Menubar = (props: { configurations: ToolbarOptionConfiguration[] }) => { +const Menubar = (props: { configurations: ActionConfig[] }) => { return ( { +export const ToolbarButtonOption = (props: { configuration: ActionConfig }) => { const selected = props.configuration.selected && props.configuration.selected(); return ( @@ -62,7 +62,7 @@ const horizontalAligment: { anchorOrigin: PopoverOrigin; transformOrigin: Popove * @returns submenu entry that contains one ToolbarMenuItem for each option. Inserts a divider for null options. */ export const ToolbarSubmenu = (props: { - configuration: ToolbarOptionConfiguration; + configuration: ActionConfig; vertical?: boolean; elevation?: number; }) => { @@ -111,7 +111,7 @@ export const ToolbarSubmenu = (props: { ); @@ -131,7 +131,7 @@ export const ToolbarSubmenu = (props: { * @returns menu item wich contains a submenu if options is set or a button if onClick is set or null otherwise. */ export const ToolbarMenuItem = (props: { - configuration: ToolbarOptionConfiguration | null; + configuration: ActionConfig | null; vertical?: boolean; elevation?: number; }) => { @@ -174,7 +174,7 @@ export const ToolbarMenuItem = (props: { * @returns toolbar wich contains a button/submenu for each configuration in the array */ const Toolbar = (props: { - configurations: ToolbarOptionConfiguration[]; + configurations: ActionConfig[]; position?: ToolbarPosition; rerender?: number; }) => { diff --git a/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx b/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx index 77d58320..58fefb0a 100644 --- a/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx +++ b/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx @@ -34,7 +34,7 @@ import LogoTextBlackSvg from '../../../images/logo-text-black.svg'; import Palette from '@mui/icons-material/Square'; import SquareOutlined from '@mui/icons-material/SquareOutlined'; import { $msg, Designer } from '@wisemapping/mindplot'; -import { ToolbarOptionConfiguration } from './ToolbarOptionConfigurationInterface'; +import ActionConfig from '../../classes/actions-config'; import { SwitchValueDirection, NodePropertyValueModelBuilder } from './ToolbarValueModelBuilder'; import { ColorPicker, @@ -55,7 +55,7 @@ import Tooltip from '@mui/material/Tooltip'; * @param designer designer to aply changes * @returns configuration for @wisemapping/editor primary toolbar */ -export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfiguration[] { +export function buildToolbarCongiruation(designer: Designer): ActionConfig[] { if (!designer) return []; /** @@ -70,7 +70,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi /** * submenu to manipulate node color and shape */ - const colorAndShapeToolbarConfiguration: ToolbarOptionConfiguration = { + const colorAndShapeToolbarConfiguration: ActionConfig = { icon: , tooltip: $msg('TOPIC_SHAPE'), @@ -148,7 +148,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi /** * submenu to manipulate node font */ - const fontFormatToolbarConfiguration: ToolbarOptionConfiguration = { + const fontFormatToolbarConfiguration: ActionConfig = { icon: , tooltip: $msg('FONT_FORMAT'), options: [ @@ -208,7 +208,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi /** * button to show relation pivot */ - const addRelationConfiguration: ToolbarOptionConfiguration = { + const addRelationConfiguration: ActionConfig = { icon: , tooltip: $msg('TOPIC_RELATIONSHIP'), onClick: (e) => { @@ -220,7 +220,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi /** * tool for node link edition */ - const editLinkUrlConfiguration: ToolbarOptionConfiguration = { + const editLinkUrlConfiguration: ActionConfig = { icon: , tooltip: $msg('TOPIC_LINK'), useClickToClose: true, @@ -240,7 +240,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi /** * tool for node note edition */ - const editNoteConfiguration: ToolbarOptionConfiguration = { + const editNoteConfiguration: ActionConfig = { icon: , tooltip: $msg('TOPIC_NOTE'), useClickToClose: true, @@ -261,7 +261,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi /** * tool for emoji selection */ - const editIconConfiguration: ToolbarOptionConfiguration = { + const editIconConfiguration: ActionConfig = { icon: , tooltip: $msg('TOPIC_ICON'), options: [ @@ -359,7 +359,7 @@ export function buildEditorAppBarConfiguration( showMapEntityActions: boolean, showMindMapNodesActions: boolean, showPersistenceActions: boolean, -): ToolbarOptionConfiguration[] { +): ActionConfig[] { if (!designer) return []; let commonConfiguration = [ @@ -373,36 +373,39 @@ export function buildEditorAppBarConfiguration( }, { render: () => ( - + - {designer.getMindmap().getCentralTopic().getText()} + {designer.getMindmap().getDescription()} ), }, ]; - const exportConfiguration = { + const exportConfiguration: ActionConfig = { icon: , tooltip: $msg('EXPORT'), onClick: () => onAction('export'), }; - const helpConfiguration = { + + const helpConfiguration: ActionConfig = { icon: , onClick: () => onAction('info'), tooltip: $msg('MAP_INFO'), }; + const appBarDivisor = { render: () => , }; - if (showOnlyCommonActions) - return [...commonConfiguration, appBarDivisor, exportConfiguration, helpConfiguration]; + if (showOnlyCommonActions) { + return [...commonConfiguration, appBarDivisor, exportConfiguration]; + } return [ ...commonConfiguration, diff --git a/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx b/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx index bcb5dae2..e336ceee 100644 --- a/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx +++ b/packages/editor/src/components/toolbar/toolbarCustomComponents.tsx @@ -19,7 +19,7 @@ import Link from '@mui/material/Link'; import Tab from '@mui/material/Tab'; import Tabs from '@mui/material/Tabs'; import { ToolbarMenuItem } from './Toolbar'; -import { ToolbarOptionConfiguration } from './ToolbarOptionConfigurationInterface'; +import ActionConfig from '../../classes/actions-config'; /** * Color picker for toolbar @@ -309,7 +309,7 @@ export const ToolbarEmojiPcker = (props: { }; export const UndoAndRedoButton = (props: { - configuration: ToolbarOptionConfiguration; + configuration: ActionConfig; disabledCondition: (event) => boolean; }) => { const [disabled, setDisabled] = useState(true); diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx index e73e5cd4..2602cbc4 100644 --- a/packages/editor/src/index.tsx +++ b/packages/editor/src/index.tsx @@ -277,6 +277,7 @@ function getToolsVisibilityConfiguration(options: EditorOptions, isMobile: any) const showAccessChangeActions = options.mode === 'edition-owner' && !isMobile; const showPersistenceActions = editMode && !isMobile && !options.locked; const showOnlyCommonActions = options.mode === 'viewonly' || isMobile; + return { editMode, showOnlyCommonActions, diff --git a/packages/editor/test/unit/toolbar/toolbar.test.tsx b/packages/editor/test/unit/toolbar/toolbar.test.tsx index 8c6d1879..32f18622 100644 --- a/packages/editor/test/unit/toolbar/toolbar.test.tsx +++ b/packages/editor/test/unit/toolbar/toolbar.test.tsx @@ -9,45 +9,45 @@ import Toolbar, { ToolbarMenuItem, ToolbarSubmenu, } from '../../../src/components/toolbar/Toolbar'; -import { ToolbarOptionConfiguration } from '../../../src/components/toolbar/ToolbarOptionConfigurationInterface'; +import ActionConfig from '../../../src/classes/actions-config'; import Menubar from '../../../src/components/toolbar/AppBar'; require('babel-polyfill'); jest.mock('../../../src/components/toolbar/appbar-buttons.css', () => ''); -const config: ToolbarOptionConfiguration = { +const config: ActionConfig = { icon: , onClick: jest.fn(), }; -const notVisibleConfig: ToolbarOptionConfiguration = { +const notVisibleConfig: ActionConfig = { icon: , onClick: jest.fn(), visible: false, }; -const disabledAndNotSelectedButtonConfig: ToolbarOptionConfiguration = { +const disabledAndNotSelectedButtonConfig: ActionConfig = { icon: , onClick: jest.fn(), disabled: () => true, selected: () => false, }; -const selectedButtonConfig: ToolbarOptionConfiguration = { +const selectedButtonConfig: ActionConfig = { icon: , onClick: jest.fn(), selected: () => true, }; -const disabledSubMenuConfig: ToolbarOptionConfiguration = { +const disabledSubMenuConfig: ActionConfig = { icon: , options: [config], disabled: () => true, }; -const withRenderConfig: ToolbarOptionConfiguration = { +const withRenderConfig: ActionConfig = { icon: , render: () =>
test
, }; -const withCloseSubmenuRender: ToolbarOptionConfiguration = { +const withCloseSubmenuRender: ActionConfig = { icon: , render: (closeMenu) => { return ( @@ -57,20 +57,20 @@ const withCloseSubmenuRender: ToolbarOptionConfiguration = { ); }, }; -const submenuConfig: ToolbarOptionConfiguration = { +const submenuConfig: ActionConfig = { icon: , options: [config, null, config, null, withRenderConfig], }; -const notVisibleSubmenuConfig: ToolbarOptionConfiguration = { +const notVisibleSubmenuConfig: ActionConfig = { icon: , options: [config, null, config, null, withRenderConfig], visible: false, }; -const submenuConfig2: ToolbarOptionConfiguration = { +const submenuConfig2: ActionConfig = { icon: , options: [withCloseSubmenuRender], }; -const iconFunctionConfig: ToolbarOptionConfiguration = { +const iconFunctionConfig: ActionConfig = { icon: () => , onClick: jest.fn(), }; diff --git a/packages/mindplot/src/mindplot-styles.css b/packages/mindplot/src/mindplot-styles.css new file mode 100644 index 00000000..3e566cdb --- /dev/null +++ b/packages/mindplot/src/mindplot-styles.css @@ -0,0 +1,110 @@ +/* + DO NOT USE THIS FILE until we resolve how to import .css files into shadow dom + As a workaround, use the file mindplot-styles.js instead +*/ +.mindplot-svg-tooltip { + display: none; + color: rgb(51, 51, 51); + text-align: center; + padding: 1px; + border-radius: 6px; + position: absolute; + z-index: 999; + background-color: rgb(255, 255, 255); + animation: fadeIn 0.4s; +} + +.fade-in { + animation: fadeIn ease 0.4s; + -webkit-animation: fadeIn ease 0.4s; + -moz-animation: fadeIn ease 0.4s; + -o-animation: fadeIn ease 0.4s; + -ms-animation: fadeIn ease 0.4s; + } + + + @keyframes fadeIn { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + @-moz-keyframes fadeIn { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + @-webkit-keyframes fadeIn { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + @-o-keyframes fadeIn { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + @-ms-keyframes fadeIn { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + +.mindplot-svg-tooltip-title { + background-color: rgb(247, 247, 247); + border-bottom-color: rgb(235, 235, 235); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + border-bottom-style: solid; + border-bottom-width: 1px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + box-sizing: border-box; + color: rgb(51, 51, 51); + cursor: default; + display: block; + font-family: Arial; + padding: 8px 14px; + text-align: left; +} + +.mindplot-svg-tooltip-content { + background-color: rgb(255, 255, 255); + padding: 6px 4px; + max-width: 250px; +} + +.mindplot-svg-tooltip-content-link { + padding: 3px 5px; + overflow: hidden; +} + +.mindplot-svg-tooltip-content-note { + text-align: left; +} + +.mindplot-svg-tooltip:before { + content: ""; + position: absolute; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid #fff; + bottom: 100%; + right: 50%; + transform: translateX(50%); + z-index: 5; + } + + .mindplot-svg-tooltip:after { + content: ""; + display: block; + position: absolute; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-bottom: 10px solid rgb(247, 247, 247); + bottom: calc(1px + 100%); + right: 50%; + transform: translateX(50%); + }