@geogirafe/lib-geoportal
Version:
GeoGirafe is a flexible application to build online geoportals.
169 lines (168 loc) • 6.2 kB
JavaScript
import GirafeHTMLElement from '../../../base/GirafeHTMLElement';
import LayerManager from '../../../tools/layers/layermanager';
import DragManager from './dragmanager';
import { isTimeAwareLayer } from '../../../models/layers/timeawarelayer';
import tippy from 'tippy.js';
import TimeRestrictionComponent from '../../timerestriction/component';
import LayerWms from '../../../models/layers/layerwms';
import Layer from '../../../models/layers/layer';
export default class TreeViewElement extends GirafeHTMLElement {
constructor(layer, name) {
super(name);
Object.defineProperty(this, "dragManager", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "layerManager", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "layer", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "dragButton", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "container", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
this.layer = layer;
this.layerManager = LayerManager.getInstance();
this.dragManager = DragManager.getInstance();
}
render() {
super.render();
this.dragButton = this.shadow.getElementById('drag-button');
this.container = this.shadow.getElementById('container');
super.girafeTranslate();
this.initializeDrag();
if (isTimeAwareLayer(this.layer)) {
this.createTimeRestrictionTooltip(this.layer);
}
}
refreshRender(layer) {
if (this.state.treeview.renderEnabled && (!layer || layer === this.layer)) {
// Is called without param, call refresh
// Else, call refresh only if the layer in param is the current one
super.refreshRender();
super.girafeTranslate();
}
}
showMetadata() {
window.gOpenWindow(this.layer.name, this.layer.metadataUrl);
}
initializeDrag() {
this.dragButton.draggable = true;
this.dragButton.ondragstart = (e) => this.dragStart(e);
this.dragButton.ondragend = (e) => this.dragEnd(e);
this.ondragenter = (e) => this.dragEnter(e);
this.ondragleave = (e) => this.dragLeave(e);
}
dragStart(event) {
this.dragManager.dragStart(this.layer);
event.dataTransfer.setDragImage(this, this.offsetWidth, 0);
}
dragEnd(_event) {
this.dragManager.dragEnd();
}
dragEnter(_event) {
if (this.dragManager.dragEnter(this.layer)) {
this.setDragStyle();
}
}
dragLeave(_event) {
if (this.dragManager.dragLeave(this.layer)) {
this.setDragStyle();
}
}
setDragStyle() {
if (this.dragManager.dragAfter) {
this.container.classList.remove('dragBefore');
this.container.classList.add('dragAfter');
}
else if (this.dragManager.dragBefore) {
this.container.classList.remove('dragAfter');
this.container.classList.add('dragBefore');
}
else {
this.container.classList.remove('dragAfter');
this.container.classList.remove('dragBefore');
}
}
getButtonClass(button) {
const buttonClasses = 'gg-icon-button gg-small gg-opacity tool';
const activeButtonClasses = buttonClasses + ' active';
switch (button) {
case 'swipedLeft':
if (!this.layer.inactive && this.layer instanceof Layer) {
return this.layer.swiped === 'left' ? activeButtonClasses : buttonClasses;
}
return 'hidden';
case 'swipedRight':
if (!this.layer.inactive && this.layer instanceof Layer) {
return this.layer.swiped === 'right' ? activeButtonClasses : buttonClasses;
}
return 'hidden';
case 'opacity':
if (!this.layer.inactive && this.layer instanceof Layer) {
return this.layer.opacity < 1 ? activeButtonClasses : buttonClasses;
}
return 'hidden';
case 'filter':
if (!this.layer.inactive && this.layer instanceof LayerWms && this.layer.queryable) {
return this.layer.hasFilter ? activeButtonClasses : buttonClasses;
}
return 'hidden';
case 'timeRestriction':
if (!this.layer.inactive && isTimeAwareLayer(this.layer)) {
return this.layer.hasTimeRestriction ? activeButtonClasses : buttonClasses;
}
return 'hidden';
default:
throw Error('Unsupported type: ' + button);
}
}
createTimeRestrictionTooltip(layer) {
const el = this.shadow.getElementById('timeRestriction');
if (!el)
return;
tippy(el, {
trigger: 'click',
arrow: true,
interactive: true,
theme: 'light',
placement: 'bottom',
appendTo: document.body,
content: (_reference) => {
return new TimeRestrictionComponent(layer);
}
});
}
removeFromParent() {
if (this.layer.parent) {
const index = this.layer.parent.children.findIndex((l) => l === this.layer);
if (index >= 0) {
this.layer.parent.children.splice(index, 1);
}
}
else {
const index = this.state.layers.layersList.findIndex((l) => l === this.layer);
if (index >= 0) {
this.state.layers.layersList.splice(index, 1);
}
}
}
}