From d45472134f0138ebac262e2af3bfc8de24bb91c5 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Sun, 9 Oct 2022 17:44:55 -0700 Subject: [PATCH] Improve code wrapper --- .../editor/src/classes/model/editor/index.ts | 10 +++- packages/editor/src/components/index.tsx | 55 ++++++++----------- ...onBuilder.tsx => toolbarConfigBuilder.tsx} | 7 +-- packages/editor/src/index.tsx | 2 +- 4 files changed, 35 insertions(+), 39 deletions(-) rename packages/editor/src/components/toolbar/{toolbarConfigurationBuilder.tsx => toolbarConfigBuilder.tsx} (98%) diff --git a/packages/editor/src/classes/model/editor/index.ts b/packages/editor/src/classes/model/editor/index.ts index b6977e11..ba19faa2 100644 --- a/packages/editor/src/classes/model/editor/index.ts +++ b/packages/editor/src/classes/model/editor/index.ts @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { MindplotWebComponent, PersistenceManager } from '@wisemapping/mindplot'; +import { Designer, MindplotWebComponent, PersistenceManager } from '@wisemapping/mindplot'; import Capability from '../../action/capability'; class Editor { @@ -24,6 +24,14 @@ class Editor { this.component = mindplotComponent; } + save(minor: boolean) { + this.component.save(minor); + } + + getDesigner(): Designer | undefined { + return this.component?.getDesigner(); + } + loadMindmap(mapId: string, persistenceManager: PersistenceManager, widgetManager): void { this.component.buildDesigner(persistenceManager, widgetManager); this.component.loadMap(mapId); diff --git a/packages/editor/src/components/index.tsx b/packages/editor/src/components/index.tsx index 937bfe7a..61ca9209 100644 --- a/packages/editor/src/components/index.tsx +++ b/packages/editor/src/components/index.tsx @@ -19,10 +19,10 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import Popover from '@mui/material/Popover'; import Model from '../classes/model/editor'; import { - buildEditorAppBarConfiguration, + buildAppBarConfig, buildToolbarConfig, - buildZoomToolbarConfiguration, -} from './toolbar/toolbarConfigurationBuilder'; + buildZoomToolbarConfig, +} from './toolbar/toolbarConfigBuilder'; import { IntlProvider } from 'react-intl'; import { DesignerKeyboard, MindplotWebComponent } from '@wisemapping/mindplot'; @@ -46,9 +46,7 @@ const Editor = ({ theme, accountConfiguration, }: EditorProps) => { - const [mindplotComponent, setMindplotComponent]: [MindplotWebComponent | undefined, Function] = - useState(); - const [model, setModel]: [MindplotWebComponent | undefined, Function] = useState(); + const [model, setModel]: [Model | undefined, Function] = useState(); const editorTheme: Theme = theme ? theme : defaultEditorTheme; const [toolbarsRerenderSwitch, setToolbarsRerenderSwitch] = useState(0); const toolbarConfiguration = useRef([]); @@ -57,20 +55,18 @@ const Editor = ({ const capability = new Capability(options.mode, options.locked); const mindplotRef = useCallback((component: MindplotWebComponent) => { - setMindplotComponent(component); + // Initialized model ... + const model = new Model(component); + model.loadMindmap(mapId, persistenceManager, widgetManager); + model.registerEvents(setToolbarsRerenderSwitch, capability); + setModel(model); }, []); useEffect(() => { - if (mindplotComponent) { - // Initialized model ... - const model = new Model(mindplotComponent); - model.loadMindmap(mapId, persistenceManager, widgetManager); - model.registerEvents(setToolbarsRerenderSwitch, capability); - setModel(model); - - toolbarConfiguration.current = buildToolbarConfig(mindplotComponent.getDesigner()); + if (model) { + toolbarConfiguration.current = buildToolbarConfig(model.getDesigner()); } - }, [mindplotComponent !== undefined]); + }, [model]); useEffect(() => { if (options.enableKeyboardEvents) { @@ -84,25 +80,17 @@ const Editor = ({ const locale = options.locale; const msg = I18nMsg.loadLocaleData(locale); - const menubarConfiguration = buildEditorAppBarConfiguration( - mindplotComponent?.getDesigner(), + const menubarConfiguration = buildAppBarConfig( + model?.getDesigner(), options.mapTitle, capability, onAction, accountConfiguration, () => { - mindplotComponent.save(true); + model.save(true); }, ); - const horizontalPosition = { - position: { - right: '7px', - top: '93%', - }, - vertical: false, - }; - // 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 @@ -129,11 +117,14 @@ const Editor = ({ > )} diff --git a/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx b/packages/editor/src/components/toolbar/toolbarConfigBuilder.tsx similarity index 98% rename from packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx rename to packages/editor/src/components/toolbar/toolbarConfigBuilder.tsx index 5d8929ad..5ba07b3f 100644 --- a/packages/editor/src/components/toolbar/toolbarConfigurationBuilder.tsx +++ b/packages/editor/src/components/toolbar/toolbarConfigBuilder.tsx @@ -299,10 +299,7 @@ export function buildToolbarConfig(designer: Designer): ActionConfig[] { ]; } -export function buildZoomToolbarConfiguration( - capability: Capability, - designer: Designer, -): ActionConfig[] { +export function buildZoomToolbarConfig(capability: Capability, designer: Designer): ActionConfig[] { if (!designer) return []; return [ @@ -350,7 +347,7 @@ export function buildZoomToolbarConfiguration( ]; } -export function buildEditorAppBarConfiguration( +export function buildAppBarConfig( designer: Designer, mapTitle: string, capability: Capability, diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx index b468ed52..59063a96 100644 --- a/packages/editor/src/index.tsx +++ b/packages/editor/src/index.tsx @@ -37,7 +37,7 @@ import { import './global-styled.css'; import { Theme } from '@mui/material/styles'; import Editor from './components'; -import { ToolbarActionType } from './components/toolbar/toolbarConfigurationBuilder'; +import { ToolbarActionType } from './components/toolbar/toolbarConfigBuilder'; declare global { // used in mindplot