Resolve "Cannot read properties of null (reading 'buildDesigner')" error.

This commit is contained in:
Paulo Gustavo Veiga 2022-11-23 22:41:43 -08:00
parent b9de729053
commit 040ae80223
4 changed files with 12 additions and 18 deletions

View File

@ -43,7 +43,7 @@ import MapInfo from '../../classes/model/map-info';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
interface AppBarProps { interface AppBarProps {
model: Editor; model: Editor | undefined;
mapInfo: MapInfo; mapInfo: MapInfo;
capability: Capability; capability: Capability;
onAction?: (type: ToolbarActionType) => void; onAction?: (type: ToolbarActionType) => void;

View File

@ -15,7 +15,7 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * 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 Popover from '@mui/material/Popover';
import Model from '../classes/model/editor'; import Model from '../classes/model/editor';
import { Vortex } from 'react-loader-spinner'; import { Vortex } from 'react-loader-spinner';
@ -25,7 +25,6 @@ import {
PersistenceManager, PersistenceManager,
Designer, Designer,
DesignerKeyboard, DesignerKeyboard,
MindplotWebComponent,
EditorRenderMode, EditorRenderMode,
} from '@wisemapping/mindplot'; } from '@wisemapping/mindplot';
@ -70,6 +69,7 @@ const Editor = ({
accountConfiguration, accountConfiguration,
}: EditorProps): ReactElement => { }: EditorProps): ReactElement => {
const [model, setModel] = useState<Model | undefined>(); const [model, setModel] = useState<Model | undefined>();
const mindplotRef = useRef(null);
// This is required to redraw in case of chansges in the canvas... // This is required to redraw in case of chansges in the canvas...
// eslint-disable-next-line @typescript-eslint/no-unused-vars // eslint-disable-next-line @typescript-eslint/no-unused-vars
@ -78,17 +78,9 @@ const Editor = ({
const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.useCreate(); const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.useCreate();
const capability = new Capability(options.mode, mapInfo.isLocked()); const capability = new Capability(options.mode, mapInfo.isLocked());
const mindplotRef: (component: MindplotWebComponent) => void = useCallback( useEffect(() => {
(component: MindplotWebComponent) => { if (!model) {
if (!component) { const model = new Model(mindplotRef.current);
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 ...
model model
.loadMindmap(mapInfo.getId(), persistenceManager, widgetManager) .loadMindmap(mapInfo.getId(), persistenceManager, widgetManager)
.then(() => { .then(() => {
@ -102,9 +94,8 @@ const Editor = ({
); );
}); });
setModel(model); setModel(model);
}, }
[], }, [mindplotRef]);
);
useEffect(() => { useEffect(() => {
if (options.enableKeyboardEvents) { if (options.enableKeyboardEvents) {

View File

@ -28,6 +28,9 @@ let designer: Designer;
export function buildDesigner(options: DesignerOptions): Designer { export function buildDesigner(options: DesignerOptions): Designer {
const divContainer = options.divContainer ? $(options.divContainer) : $(`#${options.container}`); const divContainer = options.divContainer ? $(options.divContainer) : $(`#${options.container}`);
$assert(divContainer, 'container could not be null'); $assert(divContainer, 'container could not be null');
if (designer) {
throw new Error('Designer can does not support multiple initializations');
}
// Register load events ... // Register load events ...
designer = new Designer(options, divContainer); designer = new Designer(options, divContainer);

View File

@ -13,7 +13,7 @@ import LocalStorageManager from './LocalStorageManager';
export type MindplotWebComponentInterface = { export type MindplotWebComponentInterface = {
id: string; id: string;
mode: string; mode: string;
ref: (component: object) => void; ref: object;
locale?: string; locale?: string;
}; };
/** /**