diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx index 76520f51..ae4a29e9 100644 --- a/packages/editor/src/index.tsx +++ b/packages/editor/src/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import Toolbar, { ToolbarActionType } from './components/toolbar'; import Footer from './components/footer'; import { IntlProvider } from 'react-intl'; @@ -15,35 +15,31 @@ import ES from './compiled-lang/es.json'; import EN from './compiled-lang/en.json'; import DE from './compiled-lang/de.json'; import './global-styled.css'; +import { EditorModeType } from '@wisemapping/mindplot/src/components/DesignerOptionsBuilder'; + declare global { - var memoryPersistence: boolean; - var readOnly: boolean; - var lockTimestamp: string; - var lockSession: string; - var historyId: string; - var isAuth: boolean; - var mapId: number; - var userOptions: { zoom: string | number } | null; - var locale: string; - var mindmapLocked: boolean; - var mindmapLockedMsg: string; - var mapTitle: string; - // used in mindplot var designer: Designer; var accountEmail: string; } -export type EditorPropsType = { - initCallback?: (locale: string, persistenceManager: PersistenceManager) => void; - mapId?: number; - isTryMode: boolean; - readOnlyMode: boolean; - locale?: string; +export type EditorOptions = { + mode: EditorModeType, + locale: string, + zoom?: number, + locked?: boolean, + lockedMsg?: string; + mapTitle: string; + enableKeyboardEvents: boolean; +} + +export type EditorProps = { + mapId: string; + options: EditorOptions; onAction: (action: ToolbarActionType) => void; - hotkeys?: boolean; persistenceManager: PersistenceManager; + initCallback?: (mapId: string, options: EditorOptions, persistenceManager: PersistenceManager) => void; }; const loadLocaleData = (locale: string) => { @@ -61,68 +57,60 @@ const loadLocaleData = (locale: string) => { } } -const initMindplot = (locale: string, persistenceManager: PersistenceManager) => { +const defaultCallback = (mapId: string, options: EditorOptions, persistenceManager: PersistenceManager) => { // Change page title ... - document.title = `${global.mapTitle} | WiseMapping `; + document.title = `${options.mapTitle} | WiseMapping `; - const params = new URLSearchParams(window.location.search.substring(1)); - - const zoomParam = Number.parseFloat(params.get('zoom')); - const options = DesignerOptionsBuilder.buildOptions({ + const buildOptions = DesignerOptionsBuilder.buildOptions({ persistenceManager, - readOnly: Boolean(global.readOnly || false), - mapId: String(global.mapId), + mode: options.mode, + mapId: mapId, container: 'mindplot', - zoom: - zoomParam || - (global.userOptions?.zoom != undefined - ? Number.parseFloat(global.userOptions.zoom as string) - : 0.8), - locale: locale, + zoom: options.zoom, + locale: options.locale, }); // Build designer ... - const designer = buildDesigner(options); + const designer = buildDesigner(buildOptions); // Load map from XML file persisted on disk... const instance = PersistenceManager.getInstance(); - const mindmap = instance.load(String(global.mapId)); + const mindmap = instance.load(mapId); designer.loadMap(mindmap); - if (global.mindmapLocked) { - $notify(global.mindmapLockedMsg); + if (options.locked) { + $notify(options.lockedMsg); } }; const Editor = ({ - initCallback = initMindplot, mapId, - isTryMode: isTryMode, - locale = 'en', - onAction, - hotkeys = true, + options, persistenceManager, -}: EditorPropsType): React.ReactElement => { - React.useEffect(() => { - initCallback(locale, persistenceManager); + initCallback = defaultCallback, + onAction, +}: EditorProps) => { + useEffect(() => { + initCallback(mapId, options, persistenceManager); }, []); - React.useEffect(() => { - if (hotkeys) { + useEffect(() => { + if (options.enableKeyboardEvents) { + console.log("options.enableKeyboardEvents"+options.enableKeyboardEvents) DesignerKeyboard.resume(); } else { DesignerKeyboard.pause(); } - }, [hotkeys]); + }, [options.enableKeyboardEvents]); return ( - +
-