2022-01-10 21:18:45 -08:00
|
|
|
import '../css/viewmode.css';
|
2022-01-09 10:43:04 -08:00
|
|
|
import { buildDesigner } from '../../../../src/components/DesignerBuilder';
|
2021-12-23 10:51:26 -08:00
|
|
|
import { PersistenceManager, LocalStorageManager } from '../../../../src';
|
2022-01-09 10:43:04 -08:00
|
|
|
import DesignerOptionsBuilder from '../../../../src/components/DesignerOptionsBuilder';
|
|
|
|
|
2021-12-13 21:30:37 +00:00
|
|
|
|
2022-01-02 10:37:33 -08:00
|
|
|
const p = new LocalStorageManager('samples/{id}.wxml');
|
2022-01-09 10:43:04 -08:00
|
|
|
const options = DesignerOptionsBuilder.buildOptions({ persistenceManager: p, readOnly: true, saveOnLoad: false });
|
2021-12-24 17:30:36 -08:00
|
|
|
|
|
|
|
// Obtain map id from query param
|
|
|
|
const params = new URLSearchParams(window.location.search.substring(1));
|
|
|
|
const mapId = params.get('id') || 'welcome';
|
2021-12-23 10:51:26 -08:00
|
|
|
|
2021-12-24 11:04:50 -08:00
|
|
|
const designer = buildDesigner(options);
|
|
|
|
designer.addEvent('loadSuccess', () => {
|
|
|
|
document.getElementById('mindplot').classList.add('ready');
|
|
|
|
});
|
2021-12-23 16:35:46 -08:00
|
|
|
|
2021-12-24 11:04:50 -08:00
|
|
|
// Load map from XML file persisted on disk...
|
|
|
|
const persistence = PersistenceManager.getInstance();
|
|
|
|
const mindmap = persistence.load(mapId);
|
|
|
|
designer.loadMap(mindmap);
|
2021-12-25 11:40:44 -08:00
|
|
|
|
|
|
|
// Code for selector of map.
|
|
|
|
const mapSelectElem = document.getElementById('map-select');
|
|
|
|
mapSelectElem.addEventListener('change', (e) => {
|
|
|
|
const selectMap = e.target.value;
|
|
|
|
window.location = `${window.location.pathname}?id=${selectMap}`;
|
|
|
|
});
|
|
|
|
|
|
|
|
Array.from(mapSelectElem.options).forEach((option) => {
|
|
|
|
option.selected = option.value === mapId;
|
|
|
|
});
|