Fix mindmap name

Classes Layout

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;

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;

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];
 };

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 (
     <AppBar
       role="menubar"

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

@@ -6,7 +6,7 @@ import Popover, { PopoverOrigin } from '@mui/material/Popover';
 import Tooltip from '@mui/material/Tooltip';
 import './appbar-buttons.css';
 import Box from '@mui/material/Box';
-import { ToolbarOptionConfiguration } from './ToolbarOptionConfigurationInterface';
+import ActionConfig from '../../classes/actions-config';
 import ToolbarPosition, { defaultPosition } from './ToolbarPositionInterface';
 
 /**
@@ -14,7 +14,7 @@ import ToolbarPosition, { defaultPosition } from './ToolbarPositionInterface';
  * @param props.configuration 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();
   return (
     <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.
  */
 export const ToolbarSubmenu = (props: {
-  configuration: ToolbarOptionConfiguration;
+  configuration: ActionConfig;
   vertical?: boolean;
   elevation?: number;
 }) => {
@@ -111,7 +111,7 @@ export const ToolbarSubmenu = (props: {
                 <ToolbarMenuItem
                   vertical={!!!props.vertical}
                   key={i}
-                  configuration={o as ToolbarOptionConfiguration}
+                  configuration={o as ActionConfig}
                   elevation={props.elevation + 3}
                 ></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.
  */
 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;
 }) => {

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: <BrushOutlinedIcon />,
 
     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: <FontDownloadOutlinedIcon></FontDownloadOutlinedIcon>,
     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: <SettingsEthernetIcon></SettingsEthernetIcon>,
     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: <LinkOutlinedIcon />,
     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: <NoteOutlinedIcon />,
     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: <SentimentSatisfiedAltIcon />,
     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: () => (
-        <Tooltip title={designer.getMindmap().getCentralTopic().getText()}>
+        <Tooltip title={designer.getMindmap().getDescription()}>
           <Typography
             className="truncated"
             variant="body1"
             component="div"
             sx={{ marginX: '1.5rem' }}
           >
-            {designer.getMindmap().getCentralTopic().getText()}
+            {designer.getMindmap().getDescription()}
           </Typography>
         </Tooltip>
       ),
     },
   ];
 
-  const exportConfiguration = {
+  const exportConfiguration: ActionConfig = {
     icon: <FileDownloadOutlinedIcon />,
     tooltip: $msg('EXPORT'),
     onClick: () => onAction('export'),
   };
-  const helpConfiguration = {
+
+  const helpConfiguration: ActionConfig = {
     icon: <HelpOutlineOutlinedIcon />,
     onClick: () => onAction('info'),
     tooltip: $msg('MAP_INFO'),
   };
+
   const appBarDivisor = {
     render: () => <Typography component="div" sx={{ flexGrow: 1 }} />,
   };
 
-  if (showOnlyCommonActions)
+  if (showOnlyCommonActions) {
-    return [...commonConfiguration, appBarDivisor, exportConfiguration, helpConfiguration];
+    return [...commonConfiguration, appBarDivisor, exportConfiguration];
+  }
 
   return [
     ...commonConfiguration,

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

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,

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: <ThreeDRotation></ThreeDRotation>,
   onClick: jest.fn(),
 };
 
-const notVisibleConfig: ToolbarOptionConfiguration = {
+const notVisibleConfig: ActionConfig = {
   icon: <ThreeDRotation></ThreeDRotation>,
   onClick: jest.fn(),
   visible: false,
 };
 
-const disabledAndNotSelectedButtonConfig: ToolbarOptionConfiguration = {
+const disabledAndNotSelectedButtonConfig: ActionConfig = {
   icon: <ThreeDRotation></ThreeDRotation>,
   onClick: jest.fn(),
   disabled: () => true,
   selected: () => false,
 };
 
-const selectedButtonConfig: ToolbarOptionConfiguration = {
+const selectedButtonConfig: ActionConfig = {
   icon: <ThreeDRotation></ThreeDRotation>,
   onClick: jest.fn(),
   selected: () => true,
 };
 
-const disabledSubMenuConfig: ToolbarOptionConfiguration = {
+const disabledSubMenuConfig: ActionConfig = {
   icon: <ThreeDRotation></ThreeDRotation>,
   options: [config],
   disabled: () => true,
 };
-const withRenderConfig: ToolbarOptionConfiguration = {
+const withRenderConfig: ActionConfig = {
   icon: <ThreeDRotation></ThreeDRotation>,
   render: () => <div data-testid="custom-render-div">test</div>,
 };
-const withCloseSubmenuRender: ToolbarOptionConfiguration = {
+const withCloseSubmenuRender: ActionConfig = {
   icon: <ThreeDRotation></ThreeDRotation>,
   render: (closeMenu) => {
     return (
@@ -57,20 +57,20 @@ const withCloseSubmenuRender: ToolbarOptionConfiguration = {
     );
   },
 };
-const submenuConfig: ToolbarOptionConfiguration = {
+const submenuConfig: ActionConfig = {
   icon: <ThreeDRotation></ThreeDRotation>,
   options: [config, null, config, null, withRenderConfig],
 };
-const notVisibleSubmenuConfig: ToolbarOptionConfiguration = {
+const notVisibleSubmenuConfig: ActionConfig = {
   icon: <ThreeDRotation></ThreeDRotation>,
   options: [config, null, config, null, withRenderConfig],
   visible: false,
 };
-const submenuConfig2: ToolbarOptionConfiguration = {
+const submenuConfig2: ActionConfig = {
   icon: <ThreeDRotation></ThreeDRotation>,
   options: [withCloseSubmenuRender],
 };
-const iconFunctionConfig: ToolbarOptionConfiguration = {
+const iconFunctionConfig: ActionConfig = {
   icon: () => <ThreeDRotation></ThreeDRotation>,
   onClick: jest.fn(),
 };

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