2022-02-22 06:37:00 +01:00
|
|
|
import '../css/viewmode.css';
|
|
|
|
import React from 'react';
|
|
|
|
import Editor, { EditorOptions } from '../../../../src/index';
|
2022-02-25 16:33:37 +01:00
|
|
|
import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
|
2022-10-22 02:23:32 +02:00
|
|
|
import MapInfoImpl from './MapInfoImpl';
|
2022-10-31 06:17:01 +01:00
|
|
|
import { createRoot } from 'react-dom/client';
|
2022-02-22 06:37:00 +01:00
|
|
|
|
2022-02-25 16:33:37 +01:00
|
|
|
const initialization = (designer: Designer) => {
|
2022-02-22 06:37:00 +01:00
|
|
|
designer.addEvent('loadSuccess', () => {
|
2022-09-06 21:02:47 +02:00
|
|
|
const elem = document.getElementById('mindmap-comp');
|
2022-02-22 06:37:00 +01:00
|
|
|
if (elem) {
|
|
|
|
elem.classList.add('ready');
|
|
|
|
}
|
|
|
|
|
|
|
|
// Code for selector of map.
|
|
|
|
const mapSelectElem = document.getElementById('map-select') as HTMLSelectElement;
|
|
|
|
if (mapSelectElem) {
|
|
|
|
mapSelectElem.addEventListener('change', (e) => {
|
|
|
|
// @ts-ignore
|
|
|
|
const selectMap = e.target?.value;
|
|
|
|
window.location.href = `${window.location.pathname}?id=${selectMap}`;
|
|
|
|
});
|
|
|
|
|
|
|
|
Array.from(mapSelectElem.options).forEach((option) => {
|
|
|
|
option.selected = option.value === mapId;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
// Obtain map id from query param
|
|
|
|
const params = new URLSearchParams(window.location.search.substring(1));
|
|
|
|
const mapId = params.get('id') || 'welcome';
|
|
|
|
const persistence = new LocalStorageManager('samples/{id}.wxml', false);
|
|
|
|
const options: EditorOptions = {
|
|
|
|
mode: 'viewonly',
|
|
|
|
locale: 'en',
|
2022-07-10 05:56:01 +02:00
|
|
|
enableKeyboardEvents: true,
|
2022-02-22 06:37:00 +01:00
|
|
|
};
|
|
|
|
|
2022-10-31 06:17:01 +01:00
|
|
|
const container = document.getElementById('root');
|
|
|
|
const root = createRoot(container!);
|
|
|
|
root.render(
|
2022-02-22 06:37:00 +01:00
|
|
|
<Editor
|
2022-11-17 06:12:33 +01:00
|
|
|
mapInfo={new MapInfoImpl(mapId, 'Develop Map Title', false)}
|
2022-02-22 06:37:00 +01:00
|
|
|
options={options}
|
|
|
|
persistenceManager={persistence}
|
|
|
|
onAction={(action) => console.log('action called:', action)}
|
2022-02-25 16:33:37 +01:00
|
|
|
onLoad={initialization}
|
2022-11-17 06:12:33 +01:00
|
|
|
/>,
|
|
|
|
);
|