mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-25 15:47:55 +01:00
Improve code wrapper
This commit is contained in:
parent
6cc7b851b9
commit
d45472134f
@ -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);
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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,
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user