wisemapping-frontend/packages/mindplot/test/playground/map-render/js/viewmode.js

46 lines
1.5 KiB
JavaScript
Raw Normal View History

import '../css/viewmode.less';
2021-12-24 20:04:50 +01:00
import { buildDesigner, buildOptions } from '../../../../src/components/DesignerBuilder';
2021-12-23 19:51:26 +01:00
import { PersistenceManager, LocalStorageManager } from '../../../../src';
2022-01-02 19:37:33 +01:00
const p = new LocalStorageManager('samples/{id}.wxml');
2021-12-25 02:30:36 +01:00
const options = buildOptions({ persistenceManager: p, readOnly: true, saveOnLoad: false });
// Obtain map id from query param
const params = new URLSearchParams(window.location.search.substring(1));
const mapId = params.get('id') || 'welcome';
2021-12-23 19:51:26 +01:00
2021-12-24 20:04:50 +01:00
const designer = buildDesigner(options);
designer.addEvent('loadSuccess', () => {
document.getElementById('mindplot').classList.add('ready');
});
2021-12-24 01:35:46 +01:00
const zoomInButton = document.getElementById('zoom-plus');
const zoomOutButton = document.getElementById('zoom-minus');
if (zoomInButton) {
zoomInButton.addEventListener('click', () => {
designer.zoomIn();
});
}
if (zoomOutButton) {
zoomOutButton.addEventListener('click', () => {
designer.zoomOut();
});
}
2021-12-24 20:04:50 +01:00
// Load map from XML file persisted on disk...
const persistence = PersistenceManager.getInstance();
const mindmap = persistence.load(mapId);
designer.loadMap(mindmap);
2021-12-25 20:40:44 +01: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;
});