Improve code wrapper

This commit is contained in:
Paulo Gustavo Veiga 2022-10-09 17:44:55 -07:00
parent 6cc7b851b9
commit d45472134f
4 changed files with 35 additions and 39 deletions

View File

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

View File

@ -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);
}, []);
useEffect(() => {
if (mindplotComponent) {
// Initialized model ...
const model = new Model(mindplotComponent);
const model = new Model(component);
model.loadMindmap(mapId, persistenceManager, widgetManager);
model.registerEvents(setToolbarsRerenderSwitch, capability);
setModel(model);
}, []);
toolbarConfiguration.current = buildToolbarConfig(mindplotComponent.getDesigner());
useEffect(() => {
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 = ({
></Toolbar>
)}
<Toolbar
configurations={buildZoomToolbarConfiguration(
capability,
mindplotComponent?.getDesigner(),
)}
position={horizontalPosition}
configurations={buildZoomToolbarConfig(capability, model?.getDesigner())}
position={{
position: {
right: '7px',
top: '93%',
},
vertical: false,
}}
rerender={toolbarsRerenderSwitch}
></Toolbar>

View File

@ -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,

View File

@ -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