feat: Make map overlay panels dynamically added

projects/decoupling-test-app/src/hslayers-app/hslayers-app.component.ts

@@ -8,13 +8,10 @@ import {Tile} from 'ol/layer';
 import {Vector as VectorLayer} from 'ol/layer';
 
 import {HsConfig} from '../../../hslayers/src/config.service';
-import {HsDrawToolbarComponent} from '../../../hslayers/src/components/draw/public-api';
 import {HsLayerEditorService} from '../../../hslayers/src/components/layermanager/layer-editor.service';
-import {HsLayoutService} from 'hslayers-ng/src/public-api';
-import {HsMeasureToolbarComponent} from 'hslayers-ng/src/components/measure/measure-toolbar.component';
+import {HsLayoutService} from 'hslayers-ng/src/components/layout/public-api';
 import {HsQueryComponent} from '../../../hslayers/src/components/query/query.component';
-import {HsSearchToolbarComponent} from 'hslayers-ng/src/components/search/search-toolbar.component';
-import {HsToolbarPanelContainerService} from 'hslayers-ng/src/components/toolbar/toolbar-panel-container.service';
+//import {HsToolbarPanelContainerService} from 'hslayers-ng/src/components/toolbar/toolbar-panel-container.service';
 
 @Component({
   selector: 'hslayers-app',
@@ -25,8 +22,8 @@ export class HslayersAppComponent {
   constructor(
     public HsConfig: HsConfig,
     private hsLayerEditorService: HsLayerEditorService,
-    hsLayoutService: HsLayoutService,
-    hsToolbarPanelContainerService: HsToolbarPanelContainerService
+    hsLayoutService: HsLayoutService
+    //hsToolbarPanelContainerService: HsToolbarPanelContainerService
   ) {
     const count = 200;
     const features = new Array(count);
@@ -152,6 +149,11 @@ export class HslayersAppComponent {
         : '/proxy/',
       panelsEnabled: {
         tripPlanner: true,
+        compositionLoadingProgress: true,
+      },
+      componentsEnabled: {
+        geolocationButton: true,
+        guiOverlay: true,
       },
       assetsPath: 'assets',
       symbolizerIcons: [
@@ -334,9 +336,11 @@ export class HslayersAppComponent {
       });
     }, 100);
     hsLayoutService.createPanel(HsQueryComponent, {});
-    hsToolbarPanelContainerService.create(HsSearchToolbarComponent, {});
-    hsToolbarPanelContainerService.create(HsDrawToolbarComponent, {});
-    hsToolbarPanelContainerService.create(HsMeasureToolbarComponent, {});
+    //hsToolbarPanelContainerService.create(HsSearchToolbarComponent, {});
+    //hsToolbarPanelContainerService.create(HsDrawToolbarComponent, {});
+    //hsToolbarPanelContainerService.create(HsMeasureToolbarComponent, {});
+    //hsLayoutService.createOverlay(HsInfoComponent, {});
+    //hsLayoutService.createOverlay(HsGeolocationComponent, {});
   }
   title = 'hslayers-workspace';
 }

projects/decoupling-test-app/src/hslayers-app/hslayers-app.module.ts

@@ -2,9 +2,14 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 
 import {HsCoreModule} from '../../../hslayers/src/components/core/core.module';
+/* import {
+  HsGeolocationModule,
+  HsInfoModule,
+  HsSearchModule,
+} from 'hslayers-ng/src/public-api'; */
 import {HsLayoutModule} from '../../../hslayers/src/components/layout/layout.module';
-import {HsMeasureModule} from 'hslayers-ng/src/components/measure/public-api';
-import {HsSearchModule} from 'hslayers-ng/src/public-api';
+//import {HsMeasureModule} from 'hslayers-ng/src/components/measure/public-api';
+import {HsDrawModule} from 'hslayers-ng/src/components/draw/public-api';
 import {HslayersAppComponent} from './hslayers-app.component';
 import {TranslateModule} from '@ngx-translate/core';
 
@@ -15,8 +20,11 @@ import {TranslateModule} from '@ngx-translate/core';
     HsCoreModule,
     TranslateModule,
     HsLayoutModule,
-    HsMeasureModule,
-    HsSearchModule,
+    HsDrawModule,
+    //HsMeasureModule,
+    //HsSearchModule,
+    //HsInfoModule,
+    //HsGeolocationModule,
   ],
   providers: [],
   bootstrap: [HslayersAppComponent],

projects/hslayers/src/components/core/core.module.ts

@@ -7,16 +7,13 @@ import {HsCommonEndpointsModule} from '../../common/endpoints/endpoints.module';
 import {HsConfig} from '../../config.service';
 import {HsConfirmModule} from './../../common/confirm/confirm.module';
 import {HsDragModule} from './../drag/drag.module';
-import {HsGeolocationModule} from './../geolocation/geolocation.module';
 import {HsHistoryListModule} from './../../common/history-list/history-list.module';
-import {HsInfoModule} from './../info/info.module';
 import {HsLanguageModule} from './../language/language.module';
 import {HsLayerManagerModule} from '../layermanager/layermanager.module';
 import {HsLayoutModule} from '../layout/layout.module';
 import {HsLogModule} from '../../common/log/log.module';
 import {HsMapModule} from '../map/map.module';
 import {HsSidebarModule} from '../sidebar/sidebar.module';
-import {HsToolbarModule} from '../toolbar/toolbar.module';
 import {HsUtilsModule} from './../utils/utils.module';
 import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
@@ -93,7 +90,6 @@ export function getWebpackTranslateLoader(
 @NgModule({
   declarations: [],
   imports: [
-    HsGeolocationModule,
     HttpClientModule,
     HsLayoutModule,
     HsDragModule,
@@ -103,7 +99,6 @@ export function getWebpackTranslateLoader(
     HsLanguageModule,
     HsLogModule,
     HsUtilsModule,
-    HsToolbarModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
@@ -112,7 +107,6 @@ export function getWebpackTranslateLoader(
         deps: [HsConfig],
       },
     }),
-    HsInfoModule,
     HsConfirmModule,
     HsMapModule,
     HsCommonEndpointsModule,

projects/hslayers/src/components/geolocation/geolocation.component.ts

@@ -1,20 +1,26 @@
 import {Component, OnInit} from '@angular/core';
 import {HsGeolocationService} from './geolocation.service';
 import {HsLayoutService} from '../layout/layout.service';
+import {HsPanelBaseComponent} from '../layout/panels/panel-base.component';
 @Component({
   selector: 'hs-geolocation',
   templateUrl: './partials/geolocation.html',
 })
-export class HsGeolocationComponent implements OnInit {
+export class HsGeolocationComponent
+  extends HsPanelBaseComponent
+  implements OnInit
+{
   collapsed: boolean;
   constructor(
     public HsGeolocationService: HsGeolocationService,
     public HsLayoutService: HsLayoutService
-  ) {}
+  ) {
+    super(HsLayoutService);
+  }
   ngOnInit(): void {
     this.collapsed = true;
   }
-  geolocationVisible(): boolean {
+  isVisible(): boolean {
     return (
       this.HsLayoutService.componentEnabled('geolocationButton') &&
       this.HsLayoutService.componentEnabled('guiOverlay')

projects/hslayers/src/components/geolocation/partials/geolocation.html

@@ -1,4 +1,4 @@
-<div class="hs-locate ol-unselectable ol-control hs-locateToggler" [hidden]="!geolocationVisible()"
+<div class="hs-locate ol-unselectable ol-control hs-locateToggler" [hidden]="!isVisible()"
     [ngClass]="{'ol-collapsed': collapsed}">
     <button class="ol-has-tooltip blocate hs-locateToggler" [title]="'GEOLOCATION.locateMe' | translate" *ngIf="!HsGeolocationService.localization"
         type="button" (click)="HsGeolocationService.startLocalization()">

projects/hslayers/src/components/info/info.component.ts

@@ -4,6 +4,8 @@ import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
 import {HsEventBusService} from './../core/event-bus.service';
+import {HsLayoutService} from '../layout/layout.service';
+import {HsPanelBaseComponent} from '../layout/panels/panel-base.component';
 import {HsUtilsService} from './../utils/utils.service';
 import {getTitle} from '../../common/layer-extensions';
 /**
@@ -13,7 +15,7 @@ import {getTitle} from '../../common/layer-extensions';
   selector: 'hs-info',
   templateUrl: './partials/info.html',
 })
-export class HsInfoComponent implements OnDestroy {
+export class HsInfoComponent extends HsPanelBaseComponent implements OnDestroy {
   /**
    * @type {boolean} true
    * Store if composition is loaded
@@ -32,8 +34,10 @@ export class HsInfoComponent implements OnDestroy {
   private ngUnsubscribe = new Subject();
   constructor(
     public HsUtilsService: HsUtilsService,
-    public HsEventBusService: HsEventBusService
+    public HsEventBusService: HsEventBusService,
+    private HsLayoutService: HsLayoutService
   ) {
+    super(HsLayoutService);
     this.HsEventBusService.compositionLoading
       .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe((data) => {
@@ -134,5 +138,8 @@ export class HsInfoComponent implements OnDestroy {
   compositionLoaded(): boolean {
     return this.composition_title !== undefined;
   }
-  //this.$emit('scope_loaded', 'info');
+
+  isVisible(): boolean {
+    return this.HsLayoutService.panelEnabled('compositionLoadingProgress');
+  }
 }

projects/hslayers/src/components/info/partials/info.html

@@ -1,44 +1,48 @@
-<div class="hs-info-composition hs-main-panel" [hidden]="!!compositionLoaded()">
-    <div class="hs-info-composition-image" [hidden]="!!composition_loaded">
-        <span class="icon-refresh icon-spin"></span>
-        <span class="glyphicon" [ngClass]="info_image" [hidden]="!composition_loaded"></span>
-    </div>
-    <div class="hs-info-composition-container" *ngIf="!composition_edited">
-        <div class="hs-info-composition-title" title="{{'INFOCOMPONENT.viewComposeAndAnalyse' | translate}}">{{'INFOCOMPONENT.newMap' | translate}}</div>
-    </div>
-    <div class="hs-info-composition-container" *ngIf="composition_edited">
-        <div class="hs-info-composition-title">{{'INFOCOMPONENT.unsavedMap' | translate}}</div>
-        <div class="hs-info-composition-abstract" [hidden]="!!(!layer_loading.length && composition_edited)">
-            {{'INFOCOMPONENT.youHaveUnsavedChanges' | translate}}</div>
-    </div>
-</div>
+<div class="hs-info-container" [hidden]="!isVisible()">
+    <div class="hs-info-area">
+        <div class="hs-info-composition hs-main-panel" [hidden]="!!compositionLoaded()">
+            <div class="hs-info-composition-image" [hidden]="!!composition_loaded">
+                <span class="icon-refresh icon-spin"></span>
+                <span class="glyphicon" [ngClass]="info_image" [hidden]="!composition_loaded"></span>
+            </div>
+            <div class="hs-info-composition-container" *ngIf="!composition_edited">
+                <div class="hs-info-composition-title" title="{{'INFOCOMPONENT.viewComposeAndAnalyse' | translate}}">{{'INFOCOMPONENT.newMap' | translate}}</div>
+            </div>
+            <div class="hs-info-composition-container" *ngIf="composition_edited">
+                <div class="hs-info-composition-title">{{'INFOCOMPONENT.unsavedMap' | translate}}</div>
+                <div class="hs-info-composition-abstract" [hidden]="!!(!layer_loading.length && composition_edited)">
+                    {{'INFOCOMPONENT.youHaveUnsavedChanges' | translate}}</div>
+            </div>
+        </div>
 
-<div class="hs-info-composition" [hidden]="!compositionLoaded()">
-    <div class="hs-info-composition-image">
-        <span class="icon-refresh icon-spin" [hidden]="!!composition_loaded"></span>
-        <span class="glyphicon" [ngClass]="info_image" [hidden]="!composition_loaded"></span>
-    </div>
-    <div class="hs-info-composition-container">
-        <div class="hs-info-composition-title">{{composition_title}}</div>
-        <div class="hs-info-composition-abstract">{{composition_abstract}}</div>
-    </div>
-</div>
+        <div class="hs-info-composition" [hidden]="!compositionLoaded()">
+            <div class="hs-info-composition-image">
+                <span class="icon-refresh icon-spin" [hidden]="!!composition_loaded"></span>
+                <span class="glyphicon" [ngClass]="info_image" [hidden]="!composition_loaded"></span>
+            </div>
+            <div class="hs-info-composition-container">
+                <div class="hs-info-composition-title">{{composition_title}}</div>
+                <div class="hs-info-composition-abstract">{{composition_abstract}}</div>
+            </div>
+        </div>
 
-<div class="hs-info-layers" [hidden]="!layer_loading.length">
-    <span>{{'COMMON.loading' | translate}}: </span>
-    <span *ngFor="let layer of layer_loading; trackBy: trackByFn">{{layer}} </span>
-</div>
+        <div class="hs-info-layers" [hidden]="!layer_loading.length">
+            <span>{{'COMMON.loading' | translate}}: </span>
+            <span *ngFor="let layer of layer_loading; trackBy: trackByFn">{{layer}} </span>
+        </div>
 
-<div class="hs-info-composition-edited" [hidden]="!(!layer_loading.length && composition_edited)">
-    <span>{{'INFOCOMPONENT.youHaveUnsavedChanges' | translate}}</span>
-</div>
+        <div class="hs-info-composition-edited" [hidden]="!(!layer_loading.length && composition_edited)">
+            <span>{{'INFOCOMPONENT.youHaveUnsavedChanges' | translate}}</span>
+        </div>
 
-<update-title title="{{composition_title}}"></update-title>
-<update-meta property="og:title" content="{{composition_title}}"></update-meta>
-<update-meta property="twitter:title" content="{{composition_title}}"></update-meta>
-<update-meta itemprop="title" content="{{composition_title}}"></update-meta>
+        <update-title title="{{composition_title}}"></update-title>
+        <update-meta property="og:title" content="{{composition_title}}"></update-meta>
+        <update-meta property="twitter:title" content="{{composition_title}}"></update-meta>
+        <update-meta itemprop="title" content="{{composition_title}}"></update-meta>
 
-<update-meta name="description" content="{{composition_abstract}}"></update-meta>
-<update-meta property="og:description" content="{{composition_abstract}}"></update-meta>
-<update-meta property="twitter:description" content="{{composition_abstract}}"></update-meta>
-<update-meta itemprop="description" content="{{composition_abstract}}"></update-meta>
+        <update-meta name="description" content="{{composition_abstract}}"></update-meta>
+        <update-meta property="og:description" content="{{composition_abstract}}"></update-meta>
+        <update-meta property="twitter:description" content="{{composition_abstract}}"></update-meta>
+        <update-meta itemprop="description" content="{{composition_abstract}}"></update-meta>
+    </div>
+</div>

projects/hslayers/src/components/layermanager/layermanager-gallery.component.ts

@@ -8,13 +8,14 @@ import {HsLayerDescriptor} from './layer-descriptor.interface';
 import {HsLayerManagerService} from './layermanager.service';
 import {HsLayerUtilsService} from '../utils/layer-utils.service';
 import {HsLayoutService} from '../layout/layout.service';
+import {HsPanelBaseComponent} from '../layout/panels/panel-base.component';
 import {getBase} from '../../common/layer-extensions';
 
 @Component({
   selector: 'hs-layermanager-gallery',
   templateUrl: './partials/basemap-gallery.html',
 })
-export class HsLayerManagerGalleryComponent {
+export class HsLayerManagerGalleryComponent extends HsPanelBaseComponent {
   baseLayersExpanded = false;
   menuExpanded = false;
   data: any;
@@ -25,6 +26,7 @@ export class HsLayerManagerGalleryComponent {
     public HsConfig: HsConfig,
     public HsLayerUtilsService: HsLayerUtilsService //Used in template
   ) {
+    super(HsLayoutService);
     this.data = this.HsLayerManagerService.data;
   }
 
@@ -67,4 +69,11 @@ export class HsLayerManagerGalleryComponent {
     this.HsLayerManagerService.menuExpanded =
       !this.HsLayerManagerService.menuExpanded;
   }
+
+  isVisible(): boolean {
+    return (
+      this.HsLayoutService.componentEnabled('basemapGallery') &&
+      this.HsLayoutService.componentEnabled('guiOverlay')
+    );
+  }
 }

projects/hslayers/src/components/layermanager/partials/basemap-gallery.html

@@ -1,4 +1,4 @@
-<div class="basemapGallery" style="z-index: 101;" *ngIf="HsLayoutService.componentEnabled('guiOverlay')">
+<div class="basemapGallery" style="z-index: 101;" [hidden]="!isVisible()">
     <div class="btn-group btn-group-sm" role="group">
         <button type="button" (click)="baseLayersExpanded=!baseLayersExpanded"
             class="btn rounded galleryButton pt-0 pb-0" data-toggle="dropdown" aria-haspopup="true"

projects/hslayers/src/components/layout/layout.component.ts

@@ -14,6 +14,7 @@ import {HsMapHostDirective} from './map-host.directive';
 import {HsPanelContainerService} from './panels/panel-container.service';
 import {HsThemeService} from './themes/theme.service';
 import {HsUtilsService} from '../utils/utils.service';
+import { HsOverlayPanelContainerService } from './overlay-panel-container.service';
 
 @Component({
   selector: 'hs-layout',
@@ -45,7 +46,8 @@ export class HsLayoutComponent implements AfterViewInit {
     private elementRef: ElementRef,
     private cdr: ChangeDetectorRef,
     private HsUtilsService: HsUtilsService,
-    public HsPanelContainerService: HsPanelContainerService
+    public HsPanelContainerService: HsPanelContainerService,
+    public HsOverlayPanelContainerService: HsOverlayPanelContainerService
   ) {
     this.HsLayoutService.layoutElement = elementRef.nativeElement;
   }

projects/hslayers/src/components/layout/layout.module.ts

@@ -3,8 +3,6 @@ import {CommonModule} from '@angular/common';
 import {HsConfirmModule} from './../../common/confirm/confirm.module';
 import {HsDialogContainerComponent} from './dialogs/dialog-container.component';
 import {HsDialogHostDirective} from './dialogs/dialog-host.directive';
-import {HsGeolocationModule} from '../geolocation/geolocation.module';
-import {HsInfoModule} from '../info/info.module';
 import {HsLanguageModule} from '../language/language.module';
 import {HsLayoutComponent} from './layout.component';
 import {HsLayoutHostDirective} from './layout.directive';
@@ -13,7 +11,6 @@ import {HsMapModule} from '../map/map.module';
 import {HsPanelHelpersModule} from './panels/panel-helpers.module';
 import {HsSidebarModule} from '../sidebar/sidebar.module';
 import {HsToastModule} from './toast/toast.module';
-import {HsToolbarModule} from '../toolbar/toolbar.module';
 
 import {TranslateModule} from '@ngx-translate/core';
 
@@ -31,9 +28,6 @@ import {TranslateModule} from '@ngx-translate/core';
     TranslateModule,
     HsConfirmModule,
     HsMapModule,
-    HsGeolocationModule,
-    HsToolbarModule,
-    HsInfoModule,
     HsSidebarModule,
     HsLanguageModule,
     HsPanelHelpersModule,