Fix mindmap name

Classes Layout
This commit is contained in:
Paulo Gustavo Veiga 2022-10-06 20:30:27 -07:00
parent c6f04742d8
commit ed457612f6
10 changed files with 164 additions and 46 deletions

View File

@ -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). * 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. * 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 * 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. * submenu options. If null, a divider will be inserted.
*/ */
options?: (ToolbarOptionConfiguration | null)[]; options?: (ActionConfig | null)[];
/** /**
* option is disabled * option is disabled
*/ */
@ -42,3 +42,5 @@ export interface ToolbarOptionConfiguration {
*/ */
visible?: boolean; visible?: boolean;
} }
export default ActionConfig;

View File

@ -7,12 +7,12 @@ import {
NoteModel, NoteModel,
NoteIcon, NoteIcon,
} from '@wisemapping/mindplot'; } 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 editorOpen: boolean;
private editorContent: React.ReactElement; private editorContent: React.ReactElement;
private setPopoverOpen: (boolean) => void; private setPopoverOpen: (value: boolean) => void;
private setPopoverTarget: (target: Element) => void; private setPopoverTarget: (target: Element) => void;
constructor( constructor(
@ -27,7 +27,7 @@ export default class MuiWidgetManager extends WidgetManager {
showEditorForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) { showEditorForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) {
const model: any = { const model: any = {
getValue: () => topic.getLinkValue(), getValue: () => topic.getLinkValue(),
setValue: (value) => topic.setLinkValue(value), setValue: (value: string) => topic.setLinkValue(value),
}; };
this.editorContent = linkContent(model, () => this.setPopoverOpen(false)); this.editorContent = linkContent(model, () => this.setPopoverOpen(false));
this.setPopoverTarget(topic.getOuterShape().peer._native); this.setPopoverTarget(topic.getOuterShape().peer._native);
@ -64,3 +64,5 @@ export default class MuiWidgetManager extends WidgetManager {
topic.closeEditors(); topic.closeEditors();
} }
} }
export default DefaultWidgetManager;

View File

@ -1,10 +1,10 @@
import { useState, useRef } from 'react'; 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 [popoverOpen, setPopoverOpen] = useState(false);
const [popoverTarget, setPopoverTarget] = useState(undefined); const [popoverTarget, setPopoverTarget] = useState(undefined);
const widgetManager = useRef(new MuiWidgetManager(setPopoverOpen, setPopoverTarget)); const widgetManager = useRef(new DefaultWidgetManager(setPopoverOpen, setPopoverTarget));
return [popoverOpen, popoverTarget, widgetManager.current]; return [popoverOpen, popoverTarget, widgetManager.current];
}; };

View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { ToolbarOptionConfiguration } from './ToolbarOptionConfigurationInterface'; import ActionConfig from '../../classes/actions-config';
import MaterialToolbar from '@mui/material/Toolbar'; import MaterialToolbar from '@mui/material/Toolbar';
import AppBar from '@mui/material/AppBar'; import AppBar from '@mui/material/AppBar';
import { ToolbarMenuItem } from './Toolbar'; import { ToolbarMenuItem } from './Toolbar';
@ -9,7 +9,7 @@ import { ToolbarMenuItem } from './Toolbar';
* @param props.configurations the configurations array * @param props.configurations the configurations array
* @returns toolbar wich contains an entry for each configuration in the array * @returns toolbar wich contains an entry for each configuration in the array
*/ */
const Menubar = (props: { configurations: ToolbarOptionConfiguration[] }) => { const Menubar = (props: { configurations: ActionConfig[] }) => {
return ( return (
<AppBar <AppBar
role="menubar" role="menubar"

View File

@ -6,7 +6,7 @@ import Popover, { PopoverOrigin } from '@mui/material/Popover';
import Tooltip from '@mui/material/Tooltip'; import Tooltip from '@mui/material/Tooltip';
import './appbar-buttons.css'; import './appbar-buttons.css';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import { ToolbarOptionConfiguration } from './ToolbarOptionConfigurationInterface'; import ActionConfig from '../../classes/actions-config';
import ToolbarPosition, { defaultPosition } from './ToolbarPositionInterface'; import ToolbarPosition, { defaultPosition } from './ToolbarPositionInterface';
/** /**
@ -14,7 +14,7 @@ import ToolbarPosition, { defaultPosition } from './ToolbarPositionInterface';
* @param props.configuration the configuration * @param props.configuration the configuration
* @returns common button menu entry that uses the onClick of the configuration. * @returns common button menu entry that uses the onClick of the configuration.
*/ */
export const ToolbarButtonOption = (props: { configuration: ToolbarOptionConfiguration }) => { export const ToolbarButtonOption = (props: { configuration: ActionConfig }) => {
const selected = props.configuration.selected && props.configuration.selected(); const selected = props.configuration.selected && props.configuration.selected();
return ( return (
<Tooltip title={props.configuration.tooltip || ''} disableInteractive> <Tooltip title={props.configuration.tooltip || ''} disableInteractive>
@ -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. * @returns submenu entry that contains one ToolbarMenuItem for each option. Inserts a divider for null options.
*/ */
export const ToolbarSubmenu = (props: { export const ToolbarSubmenu = (props: {
configuration: ToolbarOptionConfiguration; configuration: ActionConfig;
vertical?: boolean; vertical?: boolean;
elevation?: number; elevation?: number;
}) => { }) => {
@ -111,7 +111,7 @@ export const ToolbarSubmenu = (props: {
<ToolbarMenuItem <ToolbarMenuItem
vertical={!!!props.vertical} vertical={!!!props.vertical}
key={i} key={i}
configuration={o as ToolbarOptionConfiguration} configuration={o as ActionConfig}
elevation={props.elevation + 3} elevation={props.elevation + 3}
></ToolbarMenuItem> ></ToolbarMenuItem>
); );
@ -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. * @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: { export const ToolbarMenuItem = (props: {
configuration: ToolbarOptionConfiguration | null; configuration: ActionConfig | null;
vertical?: boolean; vertical?: boolean;
elevation?: number; elevation?: number;
}) => { }) => {
@ -174,7 +174,7 @@ export const ToolbarMenuItem = (props: {
* @returns toolbar wich contains a button/submenu for each configuration in the array * @returns toolbar wich contains a button/submenu for each configuration in the array
*/ */
const Toolbar = (props: { const Toolbar = (props: {
configurations: ToolbarOptionConfiguration[]; configurations: ActionConfig[];
position?: ToolbarPosition; position?: ToolbarPosition;
rerender?: number; rerender?: number;
}) => { }) => {

View File

@ -34,7 +34,7 @@ import LogoTextBlackSvg from '../../../images/logo-text-black.svg';
import Palette from '@mui/icons-material/Square'; import Palette from '@mui/icons-material/Square';
import SquareOutlined from '@mui/icons-material/SquareOutlined'; import SquareOutlined from '@mui/icons-material/SquareOutlined';
import { $msg, Designer } from '@wisemapping/mindplot'; import { $msg, Designer } from '@wisemapping/mindplot';
import { ToolbarOptionConfiguration } from './ToolbarOptionConfigurationInterface'; import ActionConfig from '../../classes/actions-config';
import { SwitchValueDirection, NodePropertyValueModelBuilder } from './ToolbarValueModelBuilder'; import { SwitchValueDirection, NodePropertyValueModelBuilder } from './ToolbarValueModelBuilder';
import { import {
ColorPicker, ColorPicker,
@ -55,7 +55,7 @@ import Tooltip from '@mui/material/Tooltip';
* @param designer designer to aply changes * @param designer designer to aply changes
* @returns configuration for @wisemapping/editor primary toolbar * @returns configuration for @wisemapping/editor primary toolbar
*/ */
export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfiguration[] { export function buildToolbarCongiruation(designer: Designer): ActionConfig[] {
if (!designer) return []; if (!designer) return [];
/** /**
@ -70,7 +70,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi
/** /**
* submenu to manipulate node color and shape * submenu to manipulate node color and shape
*/ */
const colorAndShapeToolbarConfiguration: ToolbarOptionConfiguration = { const colorAndShapeToolbarConfiguration: ActionConfig = {
icon: <BrushOutlinedIcon />, icon: <BrushOutlinedIcon />,
tooltip: $msg('TOPIC_SHAPE'), tooltip: $msg('TOPIC_SHAPE'),
@ -148,7 +148,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi
/** /**
* submenu to manipulate node font * submenu to manipulate node font
*/ */
const fontFormatToolbarConfiguration: ToolbarOptionConfiguration = { const fontFormatToolbarConfiguration: ActionConfig = {
icon: <FontDownloadOutlinedIcon></FontDownloadOutlinedIcon>, icon: <FontDownloadOutlinedIcon></FontDownloadOutlinedIcon>,
tooltip: $msg('FONT_FORMAT'), tooltip: $msg('FONT_FORMAT'),
options: [ options: [
@ -208,7 +208,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi
/** /**
* button to show relation pivot * button to show relation pivot
*/ */
const addRelationConfiguration: ToolbarOptionConfiguration = { const addRelationConfiguration: ActionConfig = {
icon: <SettingsEthernetIcon></SettingsEthernetIcon>, icon: <SettingsEthernetIcon></SettingsEthernetIcon>,
tooltip: $msg('TOPIC_RELATIONSHIP'), tooltip: $msg('TOPIC_RELATIONSHIP'),
onClick: (e) => { onClick: (e) => {
@ -220,7 +220,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi
/** /**
* tool for node link edition * tool for node link edition
*/ */
const editLinkUrlConfiguration: ToolbarOptionConfiguration = { const editLinkUrlConfiguration: ActionConfig = {
icon: <LinkOutlinedIcon />, icon: <LinkOutlinedIcon />,
tooltip: $msg('TOPIC_LINK'), tooltip: $msg('TOPIC_LINK'),
useClickToClose: true, useClickToClose: true,
@ -240,7 +240,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi
/** /**
* tool for node note edition * tool for node note edition
*/ */
const editNoteConfiguration: ToolbarOptionConfiguration = { const editNoteConfiguration: ActionConfig = {
icon: <NoteOutlinedIcon />, icon: <NoteOutlinedIcon />,
tooltip: $msg('TOPIC_NOTE'), tooltip: $msg('TOPIC_NOTE'),
useClickToClose: true, useClickToClose: true,
@ -261,7 +261,7 @@ export function buildToolbarCongiruation(designer: Designer): ToolbarOptionConfi
/** /**
* tool for emoji selection * tool for emoji selection
*/ */
const editIconConfiguration: ToolbarOptionConfiguration = { const editIconConfiguration: ActionConfig = {
icon: <SentimentSatisfiedAltIcon />, icon: <SentimentSatisfiedAltIcon />,
tooltip: $msg('TOPIC_ICON'), tooltip: $msg('TOPIC_ICON'),
options: [ options: [
@ -359,7 +359,7 @@ export function buildEditorAppBarConfiguration(
showMapEntityActions: boolean, showMapEntityActions: boolean,
showMindMapNodesActions: boolean, showMindMapNodesActions: boolean,
showPersistenceActions: boolean, showPersistenceActions: boolean,
): ToolbarOptionConfiguration[] { ): ActionConfig[] {
if (!designer) return []; if (!designer) return [];
let commonConfiguration = [ let commonConfiguration = [
@ -373,36 +373,39 @@ export function buildEditorAppBarConfiguration(
}, },
{ {
render: () => ( render: () => (
<Tooltip title={designer.getMindmap().getCentralTopic().getText()}> <Tooltip title={designer.getMindmap().getDescription()}>
<Typography <Typography
className="truncated" className="truncated"
variant="body1" variant="body1"
component="div" component="div"
sx={{ marginX: '1.5rem' }} sx={{ marginX: '1.5rem' }}
> >
{designer.getMindmap().getCentralTopic().getText()} {designer.getMindmap().getDescription()}
</Typography> </Typography>
</Tooltip> </Tooltip>
), ),
}, },
]; ];
const exportConfiguration = { const exportConfiguration: ActionConfig = {
icon: <FileDownloadOutlinedIcon />, icon: <FileDownloadOutlinedIcon />,
tooltip: $msg('EXPORT'), tooltip: $msg('EXPORT'),
onClick: () => onAction('export'), onClick: () => onAction('export'),
}; };
const helpConfiguration = {
const helpConfiguration: ActionConfig = {
icon: <HelpOutlineOutlinedIcon />, icon: <HelpOutlineOutlinedIcon />,
onClick: () => onAction('info'), onClick: () => onAction('info'),
tooltip: $msg('MAP_INFO'), tooltip: $msg('MAP_INFO'),
}; };
const appBarDivisor = { const appBarDivisor = {
render: () => <Typography component="div" sx={{ flexGrow: 1 }} />, render: () => <Typography component="div" sx={{ flexGrow: 1 }} />,
}; };
if (showOnlyCommonActions) if (showOnlyCommonActions) {
return [...commonConfiguration, appBarDivisor, exportConfiguration, helpConfiguration]; return [...commonConfiguration, appBarDivisor, exportConfiguration];
}
return [ return [
...commonConfiguration, ...commonConfiguration,

View File

@ -19,7 +19,7 @@ import Link from '@mui/material/Link';
import Tab from '@mui/material/Tab'; import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs'; import Tabs from '@mui/material/Tabs';
import { ToolbarMenuItem } from './Toolbar'; import { ToolbarMenuItem } from './Toolbar';
import { ToolbarOptionConfiguration } from './ToolbarOptionConfigurationInterface'; import ActionConfig from '../../classes/actions-config';
/** /**
* Color picker for toolbar * Color picker for toolbar
@ -309,7 +309,7 @@ export const ToolbarEmojiPcker = (props: {
}; };
export const UndoAndRedoButton = (props: { export const UndoAndRedoButton = (props: {
configuration: ToolbarOptionConfiguration; configuration: ActionConfig;
disabledCondition: (event) => boolean; disabledCondition: (event) => boolean;
}) => { }) => {
const [disabled, setDisabled] = useState(true); const [disabled, setDisabled] = useState(true);

View File

@ -277,6 +277,7 @@ function getToolsVisibilityConfiguration(options: EditorOptions, isMobile: any)
const showAccessChangeActions = options.mode === 'edition-owner' && !isMobile; const showAccessChangeActions = options.mode === 'edition-owner' && !isMobile;
const showPersistenceActions = editMode && !isMobile && !options.locked; const showPersistenceActions = editMode && !isMobile && !options.locked;
const showOnlyCommonActions = options.mode === 'viewonly' || isMobile; const showOnlyCommonActions = options.mode === 'viewonly' || isMobile;
return { return {
editMode, editMode,
showOnlyCommonActions, showOnlyCommonActions,

View File

@ -9,45 +9,45 @@ import Toolbar, {
ToolbarMenuItem, ToolbarMenuItem,
ToolbarSubmenu, ToolbarSubmenu,
} from '../../../src/components/toolbar/Toolbar'; } 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'; import Menubar from '../../../src/components/toolbar/AppBar';
require('babel-polyfill'); require('babel-polyfill');
jest.mock('../../../src/components/toolbar/appbar-buttons.css', () => ''); jest.mock('../../../src/components/toolbar/appbar-buttons.css', () => '');
const config: ToolbarOptionConfiguration = { const config: ActionConfig = {
icon: <ThreeDRotation></ThreeDRotation>, icon: <ThreeDRotation></ThreeDRotation>,
onClick: jest.fn(), onClick: jest.fn(),
}; };
const notVisibleConfig: ToolbarOptionConfiguration = { const notVisibleConfig: ActionConfig = {
icon: <ThreeDRotation></ThreeDRotation>, icon: <ThreeDRotation></ThreeDRotation>,
onClick: jest.fn(), onClick: jest.fn(),
visible: false, visible: false,
}; };
const disabledAndNotSelectedButtonConfig: ToolbarOptionConfiguration = { const disabledAndNotSelectedButtonConfig: ActionConfig = {
icon: <ThreeDRotation></ThreeDRotation>, icon: <ThreeDRotation></ThreeDRotation>,
onClick: jest.fn(), onClick: jest.fn(),
disabled: () => true, disabled: () => true,
selected: () => false, selected: () => false,
}; };
const selectedButtonConfig: ToolbarOptionConfiguration = { const selectedButtonConfig: ActionConfig = {
icon: <ThreeDRotation></ThreeDRotation>, icon: <ThreeDRotation></ThreeDRotation>,
onClick: jest.fn(), onClick: jest.fn(),
selected: () => true, selected: () => true,
}; };
const disabledSubMenuConfig: ToolbarOptionConfiguration = { const disabledSubMenuConfig: ActionConfig = {
icon: <ThreeDRotation></ThreeDRotation>, icon: <ThreeDRotation></ThreeDRotation>,
options: [config], options: [config],
disabled: () => true, disabled: () => true,
}; };
const withRenderConfig: ToolbarOptionConfiguration = { const withRenderConfig: ActionConfig = {
icon: <ThreeDRotation></ThreeDRotation>, icon: <ThreeDRotation></ThreeDRotation>,
render: () => <div data-testid="custom-render-div">test</div>, render: () => <div data-testid="custom-render-div">test</div>,
}; };
const withCloseSubmenuRender: ToolbarOptionConfiguration = { const withCloseSubmenuRender: ActionConfig = {
icon: <ThreeDRotation></ThreeDRotation>, icon: <ThreeDRotation></ThreeDRotation>,
render: (closeMenu) => { render: (closeMenu) => {
return ( return (
@ -57,20 +57,20 @@ const withCloseSubmenuRender: ToolbarOptionConfiguration = {
); );
}, },
}; };
const submenuConfig: ToolbarOptionConfiguration = { const submenuConfig: ActionConfig = {
icon: <ThreeDRotation></ThreeDRotation>, icon: <ThreeDRotation></ThreeDRotation>,
options: [config, null, config, null, withRenderConfig], options: [config, null, config, null, withRenderConfig],
}; };
const notVisibleSubmenuConfig: ToolbarOptionConfiguration = { const notVisibleSubmenuConfig: ActionConfig = {
icon: <ThreeDRotation></ThreeDRotation>, icon: <ThreeDRotation></ThreeDRotation>,
options: [config, null, config, null, withRenderConfig], options: [config, null, config, null, withRenderConfig],
visible: false, visible: false,
}; };
const submenuConfig2: ToolbarOptionConfiguration = { const submenuConfig2: ActionConfig = {
icon: <ThreeDRotation></ThreeDRotation>, icon: <ThreeDRotation></ThreeDRotation>,
options: [withCloseSubmenuRender], options: [withCloseSubmenuRender],
}; };
const iconFunctionConfig: ToolbarOptionConfiguration = { const iconFunctionConfig: ActionConfig = {
icon: () => <ThreeDRotation></ThreeDRotation>, icon: () => <ThreeDRotation></ThreeDRotation>,
onClick: jest.fn(), onClick: jest.fn(),
}; };

View File

@ -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%);
}