Fixes v15 - swipe layer render, map layers order, catalogue remove

projects/hslayers/components/add-data/common/url/details/details.component.html

@@ -88,14 +88,14 @@
     <div class="capabilities_input d-flex flex-column">
       @if (type === 'wms') {
       <label class="capabilities_label control-label"> <input type="checkbox" class="me-1 checkbox-lg" name="useTiles"
-          [(ngModel)]="data.use_tiles" />
+          [(ngModel)]="data.useTiles" />
         {{'ADDLAYERS.useTiles' | translateHs }}
       </label>
       }
     </div>
   </div>
   @if (type === 'wms' || type === 'arcgis') {
-  <p class="col-sm-12 alert alert-warning" [hidden]="data.use_tiles">
+  <p class="col-sm-12 alert alert-warning" [hidden]="data.useTiles">
     {{'ADDLAYERS.considerUsingTiles' | translateHs }}
   </p>
   }

projects/hslayers/components/layer-manager/layer-manager.component.html

@@ -2,8 +2,8 @@
 <div class="card panel-default hs-main-panel hs-layermanager-card" [ngClass]="panelWidthClass">
     <hs-panel-header name="layerManager" [panelTabs]="'LM'">
         <button mainButton class="btn btn-sm btn-outline-primary border-0 align-items-center d-flex gap-2"
-            [class.text-bg-primary]="physicalLayerListEnabled"
-            (click)="physicalLayerListEnabled = !physicalLayerListEnabled" [title]="'LAYERMANAGER.enablePhysicalLayerList' |
+            [class.text-bg-primary]="physicalLayerListEnabled()"
+            (click)="togglePhysicalLayerList()" [title]="'LAYERMANAGER.enablePhysicalLayerList' |
         translateHs"> {{'COMMON.reorder' | translateHs}}
             <i class="glyphicon icon-layerorder"></i>
         </button>
@@ -21,7 +21,7 @@
                 <i class="glyphicon icon-fatredo"></i>&nbsp;{{'LAYERMANAGER.resetMap' |
                 translateHs }}
             </a>
-            @if(hsLayerManagerService.data.layers?.length > 0 && !physicalLayerListEnabled){
+            @if(hsLayerManagerService.data.layers?.length > 0 && !physicalLayerListEnabled()){
             <a class="dropdown-item" (click)="toggleVisibilityForAll()">
                 <i class="glyphicon me-0" [ngClass]="allLayersVisible ? 'hs-checkmark' : 'hs-uncheckmark'"></i>
                 {{'LAYERMANAGER.toggleAllLayerVisibility'|translateHs}}
@@ -132,7 +132,7 @@
                 <span class="align-middle" style="line-height: 2em;">{{ 'LAYERMANAGER.mapContent' | translateHs}}</span>
             </li>
             }
-            @if(!physicalLayerListEnabled){
+            @if(!physicalLayerListEnabled()){
             @for(entry of hsLayerManagerService.data.folders() | keyvalue :keepOrder; track entry.key){
             <ul class="list-group hs-lm-layerlist mb-1">
                 @if(hsLayerManagerService.data.folders().size > 1){

projects/hslayers/components/layer-manager/layer-manager.component.ts

@@ -4,6 +4,7 @@ import {
   ElementRef,
   OnInit,
   ViewChild,
+  signal,
 } from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
@@ -66,7 +67,7 @@ export class HsLayerManagerComponent
   composition_id: string;
   layerlistVisible: boolean;
   hovering: boolean;
-  physicalLayerListEnabled = false;
+  physicalLayerListEnabled = signal(false);
   cesiumActive$: Observable<boolean>;
   icons = [
     'bag1.svg',
@@ -122,7 +123,6 @@ export class HsLayerManagerComponent
   getThumbnail = getThumbnail;
   name = 'layerManager';
   layerTooltipDelay = 0;
-
   constructor(
     public hsCore: HslayersService,
     public hsUtilsService: HsUtilsService,
@@ -279,6 +279,10 @@ export class HsLayerManagerComponent
     super.ngOnInit();
   }
 
+  togglePhysicalLayerList() {
+    this.physicalLayerListEnabled.update((enabled) => !enabled);
+  }
+
   changeBaseLayerVisibility(e?, layer?: HsLayerDescriptor) {
     return this.hsLayerManagerVisibilityService.changeBaseLayerVisibility(
       e,

projects/hslayers/components/layer-manager/widgets/layer-folder-widget/layer-folder-widget.component.ts

@@ -65,6 +65,8 @@ export class HsLayerFolderWidgetComponent extends HsLayerEditorWidgetBaseCompone
     this.folderService.folderAction$.next(
       this.folderService.addLayer(this.hsLayerSelectorService.currentLayer),
     );
-    this.folderService.folderAction$.next(this.folderService.sortByZ());
+    this.folderService.folderAction$.next(
+      this.folderService.sortByZ({debounce: false}),
+    );
   }
 }

projects/hslayers/components/map-swipe/map-swipe.service.ts

@@ -1,5 +1,6 @@
 import {Injectable, NgZone} from '@angular/core';
-import {buffer, filter, first, map} from 'rxjs';
+import {Observable, merge} from 'rxjs';
+import {buffer, filter, first, map, switchMap, take} from 'rxjs/operators';
 
 import {Layer} from 'ol/layer';
 import {Source} from 'ol/source';
@@ -78,18 +79,28 @@ export class HsMapSwipeService {
       }
     });
 
-    this.hsEventBusService.layerManagerUpdates
+    //Stream used to update layers while mapSwipe panel is active
+    const isMapSwipe$ = this.getLayerUpdateWithCurrentPanel().pipe(
+      filter(({panel}) => panel === 'mapSwipe'),
+      map(({layer}) => [layer]),
+    );
+    //Stream used to update layers while mapSwipe panel is not active
+    const isNotMapSwipe$ = this.getLayerUpdateWithCurrentPanel().pipe(
+      filter(({panel}) => panel !== 'mapSwipe'),
+      map(({layer}) => layer),
+      //buffer layerManagerUpdates until mapSwipe panel is opened
+      buffer(
+        this.hsLayoutService.mainpanel$.pipe(filter((p) => p === 'mapSwipe')),
+      ),
+    );
+
+    merge(isMapSwipe$, isNotMapSwipe$)
       .pipe(
-        //Buffer layerManagerUpdates until mapSwipe panel is opened
-        buffer(
-          this.hsLayoutService.mainpanel$.pipe(filter((p) => p === 'mapSwipe')),
-        ),
-        //Do not accept empty array
-        filter((layers) => layers.length > 0),
+        filter((layers) => layers?.length > 0),
         map((layers) => this.removeDuplicateUpdates(layers as Layer<Source>[])),
       )
-      .subscribe((filteredLayers) => {
-        this.fillSwipeLayers(filteredLayers);
+      .subscribe((layers) => {
+        this.fillSwipeLayers(layers);
       });
 
     this.hsLayerEditorService.layerTitleChange.subscribe(({layer}) => {
@@ -100,6 +111,25 @@ export class HsMapSwipeService {
     });
   }
 
+  /**
+   * Get layer manager update along with the current mainPanel
+   */
+  private getLayerUpdateWithCurrentPanel(): Observable<{
+    layer: Layer<Source>;
+    panel: string;
+  }> {
+    return this.hsEventBusService.layerManagerUpdates.pipe(
+      //filter out nulls
+      filter((layer): layer is Layer<Source> => !!layer),
+      switchMap((layer) =>
+        this.hsLayoutService.mainpanel$.pipe(
+          take(1),
+          map((panel) => ({layer, panel})),
+        ),
+      ),
+    );
+  }
+
   /**
    * Remove duplicate layerManagerUpdates to get one update per layer
    */

projects/hslayers/services/add-data/common-file.service.ts

@@ -515,7 +515,7 @@ export class HsAddDataCommonFileService extends HsAddDataCommonFileServiceParams
    */
   handleLaymanError(response: PostPatchLayerResponse): void {
     const errorMessage =
-      response?.error?.message ?? response?.message == 'Wrong parameter value'
+      (response?.error?.message ?? response?.message == 'Wrong parameter value')
         ? `${response?.message} : ${response?.detail.parameter}`
         : response?.message;
     const errorDetails = response?.detail?.missing_extensions
@@ -577,6 +577,7 @@ export class HsAddDataCommonFileService extends HsAddDataCommonFileServiceParams
               descriptor.style.url,
             )
           : undefined,
+        group: false, //Make sure WMS layer is not set as group, no effect on others
       },
     });
   }

projects/hslayers/services/add-data/url/add-data-ows.service.ts

@@ -20,7 +20,7 @@ import {
 } from 'hslayers-ng/services/get-capabilities';
 import {HsLogService} from 'hslayers-ng/services/log';
 
-import {AddDataUrlType} from 'hslayers-ng/types';
+import {AddDataUrlType, LayerOptions} from 'hslayers-ng/types';
 import {HsHistoryListService} from 'hslayers-ng/common/history-list';
 import {HsUrlTypeServiceModel} from 'hslayers-ng/types';
 import {LayerConnection, OwsConnection} from 'hslayers-ng/types';
@@ -90,6 +90,7 @@ export class HsAddDataOwsService {
       this.hsAddDataCommonService.throwParsingError(wrapper.response);
       return [];
     } else {
+      this.overwriteServiceDefaults(options?.layerOptions);
       const response = await this.typeService.listLayerFromCapabilities(
         wrapper,
         options?.layerOptions,
@@ -121,6 +122,18 @@ export class HsAddDataOwsService {
     }
   }
 
+  /**
+   * Overwrites service defaults with layerOptions
+   * @param layerOptions - Layer options to overwrite
+   */
+  overwriteServiceDefaults(layerOptions: LayerOptions): void {
+    for (const key in layerOptions) {
+      if (Object.hasOwn(this.typeService.data, key)) {
+        this.typeService.data[key] = layerOptions[key];
+      }
+    }
+  }
+
   /**
    * Connect to service of specified Url
    * @param params - Connection params

projects/hslayers/services/add-data/url/arcgis.service.ts

@@ -55,7 +55,7 @@ export class HsUrlArcGisService implements HsUrlTypeServiceModel {
       map_projection: '',
       tile_size: 512,
       use_resampling: false,
-      use_tiles: true,
+      useTiles: true,
       table: {
         trackBy: 'id',
         nameProperty: 'name',

projects/hslayers/services/add-data/url/wms.service.ts

@@ -64,7 +64,7 @@ export class HsUrlWmsService implements HsUrlTypeServiceModel {
       map_projection: '',
       tile_size: 512,
       use_resampling: false,
-      use_tiles: true,
+      useTiles: true,
       visible: true,
       table: {
         trackBy: 'Name',
@@ -475,10 +475,9 @@ export class HsUrlWmsService implements HsUrlTypeServiceModel {
       },
       crossOrigin: 'anonymous',
     };
-    const USE_TILES = options.useTiles ?? this.data.use_tiles;
-    const source: ImageWMS | TileWMS = !USE_TILES
-      ? new ImageWMS(sourceOptions)
-      : new TileWMS(sourceOptions);
+    const source: ImageWMS | TileWMS = this.data.useTiles
+      ? new TileWMS(sourceOptions)
+      : new ImageWMS(sourceOptions);
     const metadata =
       this.hsWmsGetCapabilitiesService.getMetadataObjectWithUrls(layer);
     const view = this.hsMapService.getMap().getView();
@@ -518,10 +517,10 @@ export class HsUrlWmsService implements HsUrlTypeServiceModel {
      */
     layerOptions['capsExtentSet'] = !!layerOptions.extent;
 
-    const new_layer = USE_TILES
+    const new_layer = this.data.useTiles
       ? new Tile(layerOptions as TileOptions<TileSource>)
       : new ImageLayer(layerOptions as ImageOptions<ImageSource>);
-    this.hsMapService.proxifyLayerLoader(new_layer, USE_TILES);
+    this.hsMapService.proxifyLayerLoader(new_layer, this.data.useTiles);
     return new_layer;
   }
 

projects/hslayers/services/layer-manager/layer-manager-folder.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {Subject} from 'rxjs';
+import {Subject, debounceTime} from 'rxjs';
 
 import {HsConfig} from 'hslayers-ng/config';
 import {HsLanguageService} from 'hslayers-ng/services/language';
@@ -32,6 +32,7 @@ interface RemoveLayerAction {
 interface SortFoldersByZAction {
   type: FolderActionTypes.SORT_BY_Z;
   lyr: HsLayerDescriptor;
+  debounce: boolean;
 }
 interface UpdateFoldersZIndex {
   type: FolderActionTypes.UPDATE_Z;
@@ -47,14 +48,21 @@ type FolderAction =
   providedIn: 'root',
 })
 export class HsLayerManagerFolderService {
+  private sortDebounceTime = 300;
+  private sortSubject = new Subject<void>();
+
   // Subject to dispatch actions to manipulate folders through
   folderAction$ = new Subject<FolderAction>();
 
   data: HsLayermanagerDataObject;
   constructor(
     private hsLanguageService: HsLanguageService,
     private hsConfig: HsConfig,
-  ) {}
+  ) {
+    this.sortSubject.pipe(debounceTime(this.sortDebounceTime)).subscribe(() => {
+      this.folderAction$.next(this.sortByZ({debounce: false}));
+    });
+  }
 
   foldersReducer(
     state: Map<string, HsLayermanagerFolder>,
@@ -66,7 +74,7 @@ export class HsLayerManagerFolderService {
       case FolderActionTypes.REMOVE_LAYER:
         return this.cleanFolders(state, action.lyr);
       case FolderActionTypes.SORT_BY_Z:
-        return this.sortFoldersByZ(state);
+        return this.sortFoldersByZ(state, action.debounce);
       case FolderActionTypes.UPDATE_Z:
         return this.updateFoldersZ(state);
       default:
@@ -96,10 +104,11 @@ export class HsLayerManagerFolderService {
     };
   }
 
-  sortByZ(): SortFoldersByZAction {
+  sortByZ(options = {debounce: true}): SortFoldersByZAction {
     return {
       type: FolderActionTypes.SORT_BY_Z,
       lyr: undefined,
+      debounce: options.debounce,
     };
   }
 
@@ -172,6 +181,9 @@ export class HsLayerManagerFolderService {
       }
 
       folder.layers.splice(folder.layers.indexOf(lyr), 1);
+      folder.zIndex = Math.max(
+        ...folder.layers.map((l) => l.layer.getZIndex()),
+      );
       if (folder.layers.length === 0) {
         newState.delete(path);
       }
@@ -199,21 +211,54 @@ export class HsLayerManagerFolderService {
       const zIndexes = folderChanged.layers.map((l) => l.layer.getZIndex());
       folderChanged.zIndex = Math.max(...zIndexes);
     }
-    return this.sortFoldersByZ(newState);
+    return this.sortFoldersByZ(newState, false);
   }
 
   /**
    * Sorts folders by z-index.
    */
   private sortFoldersByZ(
     state: Map<string, HsLayermanagerFolder>,
+    debounce = true,
   ): Map<string, HsLayermanagerFolder> {
-    return new Map(
-      [...state.entries()].sort(
-        (a, b) =>
-          (a[1].zIndex < b[1].zIndex ? -1 : a[1].zIndex > b[1].zIndex ? 1 : 0) *
-          (this.hsConfig.reverseLayerList ?? true ? -1 : 1),
-      ),
+    if (debounce) {
+      this.sortSubject.next();
+      return state;
+    }
+
+    const shouldReverseList = this.hsConfig.reverseLayerList ?? true;
+    const sortDirection = shouldReverseList ? -1 : 1;
+
+    // Sort folders
+    const sortedEntries = [...state.entries()].sort(
+      (a, b) =>
+        (a[1].zIndex < b[1].zIndex ? -1 : a[1].zIndex > b[1].zIndex ? 1 : 0) *
+        sortDirection,
     );
+
+    // Create a new map to store the sorted result
+    const sortedState = new Map<string, HsLayermanagerFolder>();
+
+    // Sort layers within each folder using the existing sortLayersByZ method
+    sortedEntries.forEach(([key, folder]) => {
+      const sortedLayers = this.sortLayersByZ(folder.layers);
+
+      // Create a new folder object with sorted layers
+      sortedState.set(key, {
+        ...folder,
+        layers: sortedLayers,
+      });
+    });
+
+    return sortedState;
+  }
+
+  sortLayersByZ(arr: any[]): any[] {
+    const minus = this.hsConfig.reverseLayerList ?? true;
+    return arr.sort((a, b) => {
+      a = a.layer.getZIndex();
+      b = b.layer.getZIndex();
+      return (a < b ? -1 : a > b ? 1 : 0) * (minus ? -1 : 1);
+    });
   }
 }