hslayers-ng
Version:
HSLayers-NG mapping library
239 lines (233 loc) • 17.7 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Injectable, Component, NgModule } from '@angular/core';
import { Layer } from 'ol/layer';
import { HsCommonLaymanService } from 'hslayers-ng/common/layman';
import { HsDialogContainerService } from 'hslayers-ng/common/dialogs';
import { HsLanguageService } from 'hslayers-ng/services/language';
import { HsLaymanService } from 'hslayers-ng/services/save-map';
import { HsMapService } from 'hslayers-ng/services/map';
import { HsToastService } from 'hslayers-ng/common/toast';
import { getName, getDefinition, getTitle } from 'hslayers-ng/common/extensions';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@ngx-translate/core';
import { TranslatePipe } from '@ngx-translate/core';
class HsRemoveLayerDialogService {
constructor() {
this.hsMapService = inject(HsMapService);
this.hsToastService = inject(HsToastService);
this.hsLanguageService = inject(HsLanguageService);
this.hsLaymanService = inject(HsLaymanService);
this.hsCommonLaymanService = inject(HsCommonLaymanService);
this.hsDialogContainerService = inject(HsDialogContainerService);
}
/**
* Create a remove layer wrapper
*/
wrapLayer(layer) {
return {
layer,
toRemove: false,
displayTitle: undefined,
};
}
/**
* Removes selected drawing layer from both Layermanager and Layman
* @param layer - Layer to be deleted - use when trying to delete layer other than hsDrawService.selectedLayer
* @param deleteFromOptions - From where the layer should be deleted, defaults to map, map&catalogue
*/
async removeLayer(layer, deleteFromOptions) {
const dialog = this.hsDialogContainerService.create(HsRmLayerDialogComponent, {
multiple: false,
message: 'DRAW.reallyDeleteThisLayer',
note: this.getDeleteNote(),
title: 'COMMON.confirmDelete',
items: [this.wrapLayer(layer)],
deleteFromOptions,
});
const confirmed = await dialog.waitResult();
if (confirmed.value == 'yes') {
const mapLayers = confirmed.type.includes('catalogue')
? this.hsMapService.getLayersArray()
: undefined;
await this.completeLayerRemoval(layer, confirmed.type, mapLayers);
}
return confirmed.value == 'yes';
}
/**
* Removes multiple selected layers from both Layermanager and Layman
* @param layer - Layers to be deleted - use when trying to remove other than drawableLayers
* @param deleteFromOptions - From where the layer should be deleted defaults to map, map&catalogue
*/
async removeMultipleLayers(layersToRemove, deleteFromOptions) {
const items = layersToRemove.map((l) => this.wrapLayer(l));
const dialog = this.hsDialogContainerService.create(HsRmLayerDialogComponent, {
multiple: true,
message: 'DRAW.pleaseCheckTheLayers',
note: this.getDeleteNote(true),
title: 'COMMON.selectAndConfirmToDeleteMultiple',
items: items,
deleteFromOptions,
});
const confirmed = await dialog.waitResult();
if (confirmed.value == 'yes') {
this.hsToastService.createToastPopupMessage('LAYMAN.deleteLayersRequest', 'LAYMAN.deletionInProgress', {
type: 'info',
serviceCalledFrom: 'HsDrawService',
customDelay: 600000,
});
const drawablesToRemove = items.filter((l) => l.toRemove);
/**
* Remove checked layers, may be either - from layman and/or map
*/
const mapLayers = confirmed.type.includes('catalogue')
? this.hsMapService.getLayersArray()
: undefined;
for (const l of drawablesToRemove) {
await this.completeLayerRemoval(l.layer, confirmed.type, mapLayers);
}
this.hsToastService.removeByText(this.hsLanguageService.getTranslation('LAYMAN.deletionInProgress', undefined));
}
return confirmed.value == 'yes';
}
/**
* Remove layer from map and Layman if desirable and possible
*/
async completeLayerRemoval(layerToRemove, deleteFrom, mapLayers) {
if (deleteFrom !== 'map') {
await this.removeFromCatalogue(layerToRemove);
}
if (deleteFrom.includes('map')) {
this.hsMapService.getMap().removeLayer(layerToRemove);
}
else {
this.tryRemovingFromMap(layerToRemove, mapLayers);
}
}
/**
* Once layer is removed from catalogue try to find it in the map by name and remove it as well
*/
tryRemovingFromMap(layer, layers) {
const lyr = layers.find((l) => getName(l) === layer);
if (lyr) {
this.hsMapService.getMap().removeLayer(lyr);
}
}
async removeFromCatalogue(layerToRemove) {
const isLayer = layerToRemove instanceof Layer;
if (isLayer) {
const definition = getDefinition(layerToRemove);
if (definition?.format?.toLowerCase().includes('wfs') &&
definition?.url) {
await this.hsLaymanService.removeLayer(layerToRemove);
}
}
else {
//Remove layer which is not in map from catalogue based on name
await this.hsLaymanService.removeLayer(layerToRemove);
}
}
getDeleteNote(plural) {
return this.hsCommonLaymanService.isAuthenticated()
? plural
? 'DRAW.deleteNotePlural'
: 'DRAW.deleteNote'
: '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HsRemoveLayerDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HsRemoveLayerDialogService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HsRemoveLayerDialogService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class HsRmLayerDialogComponent {
constructor() {
this.hsDialogContainerService = inject(HsDialogContainerService);
this.service = inject(HsRemoveLayerDialogService);
this.hsLanguageService = inject(HsLanguageService);
this.commonLaymanService = inject(HsCommonLaymanService);
this._selectAll = false;
this.deleteAllowed = false;
}
ngOnInit() {
this.isAuthenticated = this.commonLaymanService.isAuthenticated();
this.data.deleteFromOptions ??= ['map', 'mapcatalogue'];
if (!this.isAuthenticated || this.data.deleteFromOptions.length === 1) {
this.deleteFrom = this.data.deleteFromOptions[0];
this.deleteAllowed = !this.data.multiple;
}
if (this.data.items) {
for (const item of this.data.items) {
item.displayTitle = this.getTitle(item);
}
}
}
yes() {
this.hsDialogContainerService.destroy(this);
this.dialogItem.resolve({ value: 'yes', type: this.deleteFrom });
}
no() {
this.hsDialogContainerService.destroy(this);
this.dialogItem.resolve({ value: 'no' });
}
selectDeleteOption(option) {
this.deleteFrom = option;
/**
* If removing only one layer checkboxes are not available thus we need
* to disable delete button
*/
this.deleteAllowed = !this.data.multiple ? true : this.deleteAllowed;
}
checkToRemove(item) {
if (item.toRemove !== undefined) {
item.toRemove = !item.toRemove;
}
else {
item.toRemove = true;
}
this.deleteAllowed = !!this.data.items.find((i) => i.toRemove);
}
toggleAll() {
this._selectAll = !this._selectAll;
for (const item of this.data.items) {
item.toRemove = this._selectAll;
}
this.deleteAllowed = !!this.data.items.find((i) => i.toRemove);
}
getTitle(item) {
let title = item.layer instanceof Layer
? (getTitle(item.layer) ?? getName(item.layer))
: item.layer;
if (!title) {
title = this.hsLanguageService.getTranslation('COMMON.unknown', undefined);
}
return title;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HsRmLayerDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: HsRmLayerDialogComponent, isStandalone: false, selector: "hs-rm-layer-dialog", ngImport: i0, template: "<div class=\"modal in\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h4 class=\"modal-title d-flex\">\n {{data.title | translate }}\n @if (!data.multiple) {\n <span class=\"text-truncate d-inline-block\">:\n {{data.items[0].displayTitle}}</span>\n }\n </h4>\n <button type=\"button\" (click)=\"no()\" class=\"btn-close\" data-dismiss=\"modal\"\n [attr.aria-label]=\"'COMMON.close' | translate \"></button>\n </div>\n <div class=\"modal-body\" style=\"overflow-y:auto\">\n @if(data.items.length > 0){\n <div class=\"d-flex flex-column mb-3\"> <!-- pb-3 border-bottom -->\n <p class=\"fw-bold h6\">{{'LAYERS.removeLayer.deleteFrom' | translate }}: </p>\n <div class=\"d-flex gap-3 justify-content-center px-5\">\n @for (option of data.deleteFromOptions; track option) {\n <button type=\"button\" [attr.data-cy]=\"option\" [hidden]=\"option === 'catalogue' && !this.isAuthenticated\"\n [ngClass]=\"{'active' : deleteFrom === option, 'w-auto' : option === 'catalogue' }\"\n (click)=\"selectDeleteOption(option)\" class=\"btn btn-sm btn-outline-primary w-50\">\n {{'LAYERS.removeLayer.' + option | translate }}\n </button>\n }\n </div>\n </div>\n @if (deleteFrom && deleteFrom !== 'map') {\n <p class=\"h6 small\">{{data.note | translate }}</p>\n }\n @if (deleteFrom && data.multiple) {\n <div>\n <p class=\"fw-bold h6\">{{data.message | translate }}</p>\n @if (data.items?.length > 0) {\n <div style=\"max-height: 65vh;\">\n <div class=\"d-flex w-100 justify-content-center\">\n <button type=\"button\" class=\"mt-1 btn btn-primary\"\n (click)=\"toggleAll()\">{{'SAVECOMPOSITION.form.toggleAll' |\n translate }}</button>\n </div>\n @for (item of data.items; track item) {\n <div class=\"d-flex align-items-center\" style=\"word-break:break-all\">\n <button type=\"button\" class=\"btn btn-sm m-0 p-0\" (click)=\"checkToRemove(item);$event.stopPropagation()\"\n [ngClass]=\"item.toRemove ? 'hs-checkmark' : 'hs-uncheckmark'\"></button>\n <p class=\"m-0 ps-1\">{{item.displayTitle}}</p>\n </div>\n }\n </div>\n }\n </div>\n }\n }\n @else {\n <p class=\"fw-bold h6 text-center\">{{'LAYERS.removeLayer.noLayersToDelete' | translate }} </p>\n }\n\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" [disabled]=\"!deleteAllowed\" class=\"btn\"\n [ngClass]=\"{'btn-primary': deleteFrom === 'map', 'btn-danger': deleteFrom !== 'map'}\" (click)=\"yes()\"\n [title]=\"'COMMON.remove' | translate\" data-dismiss=\"modal\">{{'COMMON.remove' |\n translate}}</button>\n <button type=\"button\" class=\"btn btn-secondary compositions-btn-cancel\" [title]=\"'COMMON.back' | translate\"\n (click)=\"no()\" data-dismiss=\"modal\">{{'COMMON.back' | translate}}</button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".modal-title{white-space:nowrap;width:100%}.modal-title span{max-width:18ch}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HsRmLayerDialogComponent, decorators: [{
type: Component,
args: [{ selector: 'hs-rm-layer-dialog', standalone: false, template: "<div class=\"modal in\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n <div class=\"modal-dialog\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <h4 class=\"modal-title d-flex\">\n {{data.title | translate }}\n @if (!data.multiple) {\n <span class=\"text-truncate d-inline-block\">:\n {{data.items[0].displayTitle}}</span>\n }\n </h4>\n <button type=\"button\" (click)=\"no()\" class=\"btn-close\" data-dismiss=\"modal\"\n [attr.aria-label]=\"'COMMON.close' | translate \"></button>\n </div>\n <div class=\"modal-body\" style=\"overflow-y:auto\">\n @if(data.items.length > 0){\n <div class=\"d-flex flex-column mb-3\"> <!-- pb-3 border-bottom -->\n <p class=\"fw-bold h6\">{{'LAYERS.removeLayer.deleteFrom' | translate }}: </p>\n <div class=\"d-flex gap-3 justify-content-center px-5\">\n @for (option of data.deleteFromOptions; track option) {\n <button type=\"button\" [attr.data-cy]=\"option\" [hidden]=\"option === 'catalogue' && !this.isAuthenticated\"\n [ngClass]=\"{'active' : deleteFrom === option, 'w-auto' : option === 'catalogue' }\"\n (click)=\"selectDeleteOption(option)\" class=\"btn btn-sm btn-outline-primary w-50\">\n {{'LAYERS.removeLayer.' + option | translate }}\n </button>\n }\n </div>\n </div>\n @if (deleteFrom && deleteFrom !== 'map') {\n <p class=\"h6 small\">{{data.note | translate }}</p>\n }\n @if (deleteFrom && data.multiple) {\n <div>\n <p class=\"fw-bold h6\">{{data.message | translate }}</p>\n @if (data.items?.length > 0) {\n <div style=\"max-height: 65vh;\">\n <div class=\"d-flex w-100 justify-content-center\">\n <button type=\"button\" class=\"mt-1 btn btn-primary\"\n (click)=\"toggleAll()\">{{'SAVECOMPOSITION.form.toggleAll' |\n translate }}</button>\n </div>\n @for (item of data.items; track item) {\n <div class=\"d-flex align-items-center\" style=\"word-break:break-all\">\n <button type=\"button\" class=\"btn btn-sm m-0 p-0\" (click)=\"checkToRemove(item);$event.stopPropagation()\"\n [ngClass]=\"item.toRemove ? 'hs-checkmark' : 'hs-uncheckmark'\"></button>\n <p class=\"m-0 ps-1\">{{item.displayTitle}}</p>\n </div>\n }\n </div>\n }\n </div>\n }\n }\n @else {\n <p class=\"fw-bold h6 text-center\">{{'LAYERS.removeLayer.noLayersToDelete' | translate }} </p>\n }\n\n </div>\n <div class=\"modal-footer\">\n <button type=\"button\" [disabled]=\"!deleteAllowed\" class=\"btn\"\n [ngClass]=\"{'btn-primary': deleteFrom === 'map', 'btn-danger': deleteFrom !== 'map'}\" (click)=\"yes()\"\n [title]=\"'COMMON.remove' | translate\" data-dismiss=\"modal\">{{'COMMON.remove' |\n translate}}</button>\n <button type=\"button\" class=\"btn btn-secondary compositions-btn-cancel\" [title]=\"'COMMON.back' | translate\"\n (click)=\"no()\" data-dismiss=\"modal\">{{'COMMON.back' | translate}}</button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".modal-title{white-space:nowrap;width:100%}.modal-title span{max-width:18ch}\n"] }]
}] });
class HsRmLayerDialogModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HsRmLayerDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.3", ngImport: i0, type: HsRmLayerDialogModule, declarations: [HsRmLayerDialogComponent], imports: [CommonModule, TranslatePipe], exports: [HsRmLayerDialogComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HsRmLayerDialogModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: HsRmLayerDialogModule, decorators: [{
type: NgModule,
args: [{
declarations: [HsRmLayerDialogComponent],
imports: [CommonModule, TranslatePipe],
exports: [HsRmLayerDialogComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { HsRemoveLayerDialogService, HsRmLayerDialogComponent, HsRmLayerDialogModule };
//# sourceMappingURL=hslayers-ng-common-remove-multiple.mjs.map