From c6f04742d8d5b51d5780c1813501e302660db997 Mon Sep 17 00:00:00 2001 From: Gonzalo Martinez Date: Fri, 7 Oct 2022 01:58:24 +0000 Subject: [PATCH] Merged in editor-actions-by-mode (pull request #63) Editor actions by mode * Toolbar configuration for all EditorRenderMode and locked maps * fix unlock --- .../editor/src/components/toolbar/Toolbar.tsx | 1 + .../ToolbarOptionConfigurationInterface.ts | 2 +- .../toolbar/toolbarConfigurationBuilder.tsx | 211 +++++++++--------- packages/editor/src/index.tsx | 54 ++++- packages/editor/test/playground/index.html | 4 + .../playground/map-render/js/editorlocked.tsx | 53 +++++ packages/editor/webpack.playground.js | 6 + 7 files changed, 218 insertions(+), 113 deletions(-) create mode 100644 packages/editor/test/playground/map-render/js/editorlocked.tsx 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.

    +
    diff --git a/packages/editor/test/playground/map-render/js/editorlocked.tsx b/packages/editor/test/playground/map-render/js/editorlocked.tsx new file mode 100644 index 00000000..ab4299e9 --- /dev/null +++ b/packages/editor/test/playground/map-render/js/editorlocked.tsx @@ -0,0 +1,53 @@ +/* + * Copyright [2021] [wisemapping] + * + * Licensed under WiseMapping Public License, Version 1.0 (the "License"). + * It is basically the Apache License, Version 2.0 (the "License") plus the + * "powered by wisemapping" text requirement on every single page; + * you may not use this file except in compliance with the License. + * You may obtain a copy of the license at + * + * http://www.wisemapping.org/license + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Editor, { EditorOptions } from '../../../../src/index'; +import { LocalStorageManager, Designer } from '@wisemapping/mindplot'; + +const initialization = (designer: Designer) => { + designer.addEvent('loadSuccess', () => { + const elem = document.getElementById('mindmap-comp'); + if (elem) { + elem.classList.add('ready'); + } + }); +}; + +const persistence = new LocalStorageManager('samples/{id}.wxml', false, false); +const mapId = 'welcome'; +const options: EditorOptions = { + zoom: 0.8, + locked: true, + lockedMsg: 'Blockeado', + mapTitle: 'Develop WiseMapping', + mode: 'edition-editor', + locale: 'en', + enableKeyboardEvents: true, +}; + +ReactDOM.render( + console.log('action called:', action)} + onLoad={initialization} + />, + document.getElementById('root'), +); diff --git a/packages/editor/webpack.playground.js b/packages/editor/webpack.playground.js index a9d89046..8bab804f 100644 --- a/packages/editor/webpack.playground.js +++ b/packages/editor/webpack.playground.js @@ -11,6 +11,7 @@ const playgroundConfig = { viewmode: path.resolve(__dirname, './test/playground/map-render/js/viewmode'), editor: path.resolve(__dirname, './test/playground/map-render/js/editor'), showcase: path.resolve(__dirname, './test/playground/map-render/js/showcase'), + editorlocked: path.resolve(__dirname, './test/playground/map-render/js/editorlocked'), }, output: { path: path.resolve(__dirname, 'test/playground/dist'), @@ -53,6 +54,11 @@ const playgroundConfig = { filename: 'showcase.html', template: 'test/playground/map-render/html/showcase.html', }), + new HtmlWebpackPlugin({ + chunks: ['editorlocked'], + filename: 'editorlocked.html', + template: 'test/playground/map-render/html/editor.html', + }), ], };