@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
123 lines (122 loc) • 4.5 kB
JavaScript
import GirafeHTMLElement from '../../base/GirafeHTMLElement';
import MapManager from '../../tools/state/mapManager';
import ConfigManager from '../../tools/configuration/configmanager';
import { Overlay } from 'ol';
import { RasterManager } from './rasterquerymanager';
import { MapContextMenuState } from './contextmenustate';
class ContextMenuContainer extends HTMLElement {
constructor() {
super(...arguments);
Object.defineProperty(this, "container", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
}
}
class MapContextMenuComponent extends GirafeHTMLElement {
constructor() {
super('map-context-menu');
Object.defineProperty(this, "templateUrl", {
enumerable: true,
configurable: true,
writable: true,
value: null
});
Object.defineProperty(this, "styleUrls", {
enumerable: true,
configurable: true,
writable: true,
value: null
});
Object.defineProperty(this, "map", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "eventsCallbacks", {
enumerable: true,
configurable: true,
writable: true,
value: []
});
Object.defineProperty(this, "MapContextMenuState", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "rasterQueryManager", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
this.state.extendedState.mapcontextmenu = new MapContextMenuState();
this.MapContextMenuState = this.state.extendedState.mapcontextmenu;
this.MapContextMenuState.crs = ConfigManager.getInstance().Config.contextmenu.crs;
this.map = MapManager.getInstance().getMap();
this.rasterQueryManager = new RasterManager(this.MapContextMenuState);
}
async updateData() {
this.MapContextMenuState.position = this.state.mouseCoordinates;
this.MapContextMenuState.projection = this.state.projection;
this.rasterQueryManager.refresh(this.MapContextMenuState.projection, this.MapContextMenuState.position);
}
showContextMenu(id, position, containerElement) {
let contextMenuOverlay = this.map.getOverlayById(id);
// Remove existing overlay
if (contextMenuOverlay) {
this.map.removeOverlay(contextMenuOverlay);
}
// Create new overlay
const contextMenuContainer = document.createElement(containerElement);
contextMenuContainer.container = this;
contextMenuOverlay = new Overlay({
id: id,
element: contextMenuContainer,
position: position,
autoPan: {
animation: {
duration: 250
}
}
});
this.map.addOverlay(contextMenuOverlay);
}
hideContextMenu(id) {
const contextMenuOverlay = this.map.getOverlayById(id);
if (contextMenuOverlay) {
contextMenuOverlay.setPosition(undefined);
}
}
registerEvents() {
// Right click on map event
if (this.registerInteractionListener('map.contextmenu', false)) {
this.map.getViewport().addEventListener('contextmenu', async (e) => {
if (this.canExecute('map.contextmenu')) {
e.preventDefault();
await this.updateData();
this.showContextMenu('default-overlay', this.MapContextMenuState.position, 'girafe-default-context-menu-content');
}
});
}
// Map rendering complete event
this.map.once('rendercomplete', () => {
if (this.state.position.tooltip) {
this.showContextMenu('custom-overlay', this.state.position.center, 'girafe-custom-context-menu-content');
}
});
}
unregisterEvents() {
this.unsubscribe(this.eventsCallbacks);
this.eventsCallbacks.length = 0;
}
async connectedCallback() {
await this.loadConfig();
this.registerEvents();
}
}
export default MapContextMenuComponent;