diff --git a/packages/editor/src/components/toolbar/Toolbar.tsx b/packages/editor/src/components/toolbar/Toolbar.tsx
index e8f5a8df..2361c949 100644
--- a/packages/editor/src/components/toolbar/Toolbar.tsx
+++ b/packages/editor/src/components/toolbar/Toolbar.tsx
@@ -105,6 +105,7 @@ export const ToolbarSubmenu = (props: {
>
e.stopPropagation()}>
{props.configuration.options?.map((o, i) => {
+ if (o?.visible === false) return null;
if (!o?.render) {
return (
void,
save: () => void,
- editorMode: EditorRenderMode,
- isMobile: boolean,
+ showOnlyCommonActions: boolean,
+ showAccessChangeActions: boolean,
+ showMapEntityActions: boolean,
+ showMindMapNodesActions: boolean,
+ showPersistenceActions: boolean,
): ToolbarOptionConfiguration[] {
+ if (!designer) return [];
+
let commonConfiguration = [
{
icon: ,
@@ -366,104 +371,106 @@ export function buildEditorAppBarConfiguration(
{
render: () => ,
},
- ];
- if (editorMode === 'viewonly' || editorMode === 'showcase' || isMobile)
- return commonConfiguration;
- if (!designer) return [];
-
- const isEditor =
- editorMode === 'edition-owner' ||
- editorMode === 'edition-editor' ||
- editorMode === 'edition-viewer';
-
- if (isEditor) {
- return [
- ...commonConfiguration,
- {
- render: () => (
-
-
- {designer.getMindmap().getCentralTopic().getText()}
-
-
- ),
- },
- null,
- {
- render: () => (
- ,
- tooltip: $msg('UNDO') + ' (' + $msg('CTRL') + ' + Z)',
- onClick: () => designer.undo(),
- }}
- disabledCondition={(event) => event.undoSteps > 0}
- >
- ),
- },
- {
- render: () => (
- ,
- tooltip: $msg('REDO') + ' (' + $msg('CTRL') + ' + Shift + Z)',
- onClick: () => designer.redo(),
- }}
- disabledCondition={(event) => event.redoSteps > 0}
- >
- ),
- },
- null,
- {
- icon: ,
- tooltip: $msg('HISTORY'),
- onClick: () => onAction('history'),
- },
- {
- icon: ,
- tooltip: $msg('SAVE') + ' (' + $msg('CTRL') + ' + S)',
- onClick: save,
- },
- {
- render: () => ,
- },
- {
- icon: ,
- tooltip: $msg('PRINT'),
- onClick: () => onAction('print'),
- },
- {
- icon: ,
- tooltip: $msg('EXPORT'),
- onClick: () => onAction('export'),
- },
- {
- icon: ,
- onClick: () => onAction('publish'),
- tooltip: $msg('PUBLISH'),
- disabled: () => editorMode !== 'edition-owner',
- },
- {
- render: () => (
-
- ),
- },
- {
- icon: ,
- onClick: () => onAction('info'),
- tooltip: $msg('MAP_INFO'),
- },
- ];
- }
+ {designer.getMindmap().getCentralTopic().getText()}
+
+
+ ),
+ },
+ ];
+
+ const exportConfiguration = {
+ icon: ,
+ tooltip: $msg('EXPORT'),
+ onClick: () => onAction('export'),
+ };
+ const helpConfiguration = {
+ icon: ,
+ onClick: () => onAction('info'),
+ tooltip: $msg('MAP_INFO'),
+ };
+ const appBarDivisor = {
+ render: () => ,
+ };
+
+ if (showOnlyCommonActions)
+ return [...commonConfiguration, appBarDivisor, exportConfiguration, helpConfiguration];
+
+ return [
+ ...commonConfiguration,
+ 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,
+ },
+ null,
+ {
+ icon: ,
+ tooltip: $msg('HISTORY'),
+ onClick: () => onAction('history'),
+ visible: showPersistenceActions,
+ },
+ {
+ icon: ,
+ tooltip: $msg('SAVE') + ' (' + $msg('CTRL') + ' + S)',
+ onClick: save,
+ visible: showPersistenceActions,
+ },
+ appBarDivisor,
+ {
+ icon: ,
+ tooltip: $msg('PRINT'),
+ onClick: () => onAction('print'),
+ visible: showMapEntityActions,
+ },
+ exportConfiguration,
+ {
+ icon: ,
+ onClick: () => onAction('publish'),
+ tooltip: $msg('PUBLISH'),
+ disabled: () => !showAccessChangeActions,
+ },
+ {
+ render: () => (
+
+ ),
+ },
+ helpConfiguration,
+ ];
}
diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx
index ab866c40..e73e5cd4 100644
--- a/packages/editor/src/index.tsx
+++ b/packages/editor/src/index.tsx
@@ -96,10 +96,15 @@ const Editor = ({
const [mindplotComponent, setMindplotComponent]: [MindplotWebComponent | undefined, Function] =
useState();
- const editMode =
- options.mode === 'edition-owner' ||
- options.mode === 'edition-editor' ||
- options.mode === 'edition-viewer';
+ const {
+ editMode,
+ showOnlyCommonActions,
+ showAccessChangeActions,
+ showMapEntityActions,
+ showMindMapNodesActions,
+ showPersistenceActions,
+ } = getToolsVisibilityConfiguration(options, isMobile);
+
const editorTheme: Theme = theme ? theme : defaultEditorTheme;
const [toolbarsRerenderSwitch, setToolbarsRerenderSwitch] = useState(0);
const toolbarConfiguration = useRef([]);
@@ -200,12 +205,24 @@ const Editor = ({
() => {
mindplotComponent.save(true);
},
- options.mode,
- isMobile,
+ showOnlyCommonActions,
+ showAccessChangeActions,
+ showMapEntityActions,
+ showMindMapNodesActions,
+ showPersistenceActions,
);
- menubarConfiguration.push({
- render: () => accountConfiguration,
- });
+ if (options.mode !== 'showcase') {
+ menubarConfiguration.push({
+ render: () => accountConfiguration,
+ });
+ }
+
+ useEffect(() => {
+ return () => {
+ mindplotComponent.unlockMap();
+ };
+ }, []);
+
// if the Toolbar is not hidden before the variable 'isMobile' is defined, it appears intermittently when the page loads
// if the Toolbar is not rendered, Menu.ts cant find buttons for create event listeners
// so, with this hack the Toolbar is rendered but no visible until the variable 'isMobile' is defined
@@ -225,7 +242,7 @@ const Editor = ({
>
{widgetManager.getEditorContent()}
- {editMode && !isMobile && (
+ {showMindMapNodesActions && (
Sample
+ Editor Mode (locked):Example on how mindplot can be used for mindmap edition. Browser local storage is used for persistance.
+