diff --git a/packages/editor/src/components/app-bar/index.tsx b/packages/editor/src/components/app-bar/index.tsx index bf02bfaf..169d189e 100644 --- a/packages/editor/src/components/app-bar/index.tsx +++ b/packages/editor/src/components/app-bar/index.tsx @@ -43,7 +43,7 @@ import MapInfo from '../../classes/model/map-info'; import { useIntl } from 'react-intl'; interface AppBarProps { - model: Editor; + model: Editor | undefined; mapInfo: MapInfo; capability: Capability; onAction?: (type: ToolbarActionType) => void; diff --git a/packages/editor/src/components/index.tsx b/packages/editor/src/components/index.tsx index fe4ee8e9..d1c2afc8 100644 --- a/packages/editor/src/components/index.tsx +++ b/packages/editor/src/components/index.tsx @@ -15,7 +15,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { ReactElement, useCallback, useEffect, useState } from 'react'; +import React, { ReactElement, useEffect, useRef, useState } from 'react'; import Popover from '@mui/material/Popover'; import Model from '../classes/model/editor'; import { Vortex } from 'react-loader-spinner'; @@ -25,7 +25,6 @@ import { PersistenceManager, Designer, DesignerKeyboard, - MindplotWebComponent, EditorRenderMode, } from '@wisemapping/mindplot'; @@ -70,6 +69,7 @@ const Editor = ({ accountConfiguration, }: EditorProps): ReactElement => { const [model, setModel] = useState(); + const mindplotRef = useRef(null); // This is required to redraw in case of chansges in the canvas... // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -78,17 +78,9 @@ const Editor = ({ const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.useCreate(); const capability = new Capability(options.mode, mapInfo.isLocked()); - const mindplotRef: (component: MindplotWebComponent) => void = useCallback( - (component: MindplotWebComponent) => { - if (!component) { - const error = new Error(`Unexpected error during initialization. ${component}`); - window.newrelic?.noticeError(error); - throw error; - } - - const model = new Model(component); - - // Force refresh after map load ... + useEffect(() => { + if (!model) { + const model = new Model(mindplotRef.current); model .loadMindmap(mapInfo.getId(), persistenceManager, widgetManager) .then(() => { @@ -102,9 +94,8 @@ const Editor = ({ ); }); setModel(model); - }, - [], - ); + } + }, [mindplotRef]); useEffect(() => { if (options.enableKeyboardEvents) { diff --git a/packages/mindplot/src/components/DesignerBuilder.ts b/packages/mindplot/src/components/DesignerBuilder.ts index 953d2bd8..4a7a3e20 100644 --- a/packages/mindplot/src/components/DesignerBuilder.ts +++ b/packages/mindplot/src/components/DesignerBuilder.ts @@ -28,6 +28,9 @@ let designer: Designer; export function buildDesigner(options: DesignerOptions): Designer { const divContainer = options.divContainer ? $(options.divContainer) : $(`#${options.container}`); $assert(divContainer, 'container could not be null'); + if (designer) { + throw new Error('Designer can does not support multiple initializations'); + } // Register load events ... designer = new Designer(options, divContainer); diff --git a/packages/mindplot/src/components/MindplotWebComponent.ts b/packages/mindplot/src/components/MindplotWebComponent.ts index b0b0675b..969c8a71 100644 --- a/packages/mindplot/src/components/MindplotWebComponent.ts +++ b/packages/mindplot/src/components/MindplotWebComponent.ts @@ -13,7 +13,7 @@ import LocalStorageManager from './LocalStorageManager'; export type MindplotWebComponentInterface = { id: string; mode: string; - ref: (component: object) => void; + ref: object; locale?: string; }; /**