refactor: Use panelBaseComponent method to set width of panels

hslayers · Feb 13, 2024 · b1af6f7 · b1af6f7
1 parent eb90cdb
commit b1af6f7
Show file tree

Hide file tree

Showing 27 changed files with 53 additions and 105 deletions.
diff --git a/projects/hslayers/src/components/add-data/add-data.component.html b/projects/hslayers/src/components/add-data/add-data.component.html
@@ -1,4 +1,5 @@
-<div class="card hs-main-panel overflow-hidden h-100" style="margin-top: 0 !important;" *ngIf="isVisible$ | async">
+<div class="card hs-main-panel overflow-hidden h-100" style="margin-top: 0 !important;" *ngIf="isVisible$ | async"
+    [ngClass]="panelWidthClass">
     <hs-panel-header name="addData" [panelTabs]="'catalogue,url,file'"
         [selectedTab$]="hsAddDataService.datasetSelected">
         <div class="card-body" style="overflow-y: auto;"

diff --git a/projects/hslayers/src/components/add-data/add-data.component.ts b/projects/hslayers/src/components/add-data/add-data.component.ts
@@ -20,8 +20,7 @@ import {servicesSupportedByUrl} from './url/services-supported.const';
 })
 export class HsAddDataComponent
   extends HsPanelBaseComponent
-  implements OnInit, OnDestroy
-{
+  implements OnInit, OnDestroy {
   private end = new Subject<void>();
 
   constructor(
@@ -81,6 +80,7 @@ export class HsAddDataComponent
           error: error,
         });
       });
+    super.ngOnInit();
   }
 
   connectServiceFromUrlParam(type: AddDataUrlType): void {

diff --git a/projects/hslayers/src/components/compositions/compositions.component.html b/projects/hslayers/src/components/compositions/compositions.component.html
@@ -1,4 +1,5 @@
-<div class="card hs-main-panel h-100 overflow-hidden" style="margin-top: 0 !important;" *ngIf="isVisible$ | async">
+<div class="card hs-main-panel h-100 overflow-hidden" style="margin-top: 0 !important;" [ngClass]="panelWidthClass"
+    *ngIf="isVisible$ | async">
     <div class="hs-compositions-header" *ngIf="{layman: hsCommonLaymanService.layman$ | async } as ctx">
         <hs-panel-header name="composition_browser" [panelTabs]="'COMPOSITIONS'">
             <button mainButton class="btn btn-sm btn-outline-primary border-0 align-items-center d-flex gap-2"

diff --git a/projects/hslayers/src/components/compositions/compositions.component.ts b/projects/hslayers/src/components/compositions/compositions.component.ts
@@ -19,8 +19,7 @@ import {HsPanelBaseComponent} from '../layout/panels/panel-base.component';
 })
 export class HsCompositionsComponent
   extends HsPanelBaseComponent
-  implements OnDestroy, OnInit
-{
+  implements OnDestroy, OnInit {
   private end = new Subject<void>();
 
   keywordsVisible = false;
@@ -58,6 +57,7 @@ export class HsCompositionsComponent
         };
         this.loadUnsavedDialogBootstrap(record);
       });
+    super.ngOnInit();
   }
 
   ngOnDestroy(): void {

diff --git a/projects/hslayers/src/components/draw/draw.component.html b/projects/hslayers/src/components/draw/draw.component.html
@@ -1,4 +1,4 @@
-<div class="card hs-main-panel" *ngIf="isVisible$ | async">
+<div class="card hs-main-panel" *ngIf="isVisible$ | async" [ngClass]="panelWidthClass">
     <hs-panel-header name="draw" [selectedTab$]="selectedOption" [panelTabs]="'draw,edit'">
         <button mainButton class="btn btn-sm" style="cursor: help" data-toggle="tooltip"
             [title]="'DRAW.drawInfo' | translateHs ">

diff --git a/projects/hslayers/src/components/draw/draw.component.ts b/projects/hslayers/src/components/draw/draw.component.ts
@@ -19,8 +19,7 @@ import {HsUtilsService} from '../utils/utils.service';
 })
 export class HsDrawComponent
   extends HsPanelBaseComponent
-  implements OnInit, OnDestroy
-{
+  implements OnInit, OnDestroy {
   name = 'draw';
   selectedOption = new BehaviorSubject('draw');
   private end = new Subject<void>();
@@ -51,7 +50,7 @@ export class HsDrawComponent
           {service: this.HsDrawService},
         );
       });
-
+    super.ngOnInit();
     this.selectedOption.pipe(takeUntil(this.end)).subscribe((option) => {
       if (option == 'edit') {
         this.HsDrawService.setType(this.HsDrawService.type);

diff --git a/projects/hslayers/src/components/language/language.component.html b/projects/hslayers/src/components/language/language.component.html
@@ -1,4 +1,4 @@
-<div class="card hs-main-panel" *ngIf="isVisible$ | async">
+<div class="card hs-main-panel" *ngIf="isVisible$ | async" [ngClass]="panelWidthClass">
     <hs-panel-header name="language" [panelTabs]="'LANGUAGE'">
     </hs-panel-header>
     <div class="card-body">

diff --git a/projects/hslayers/src/components/language/language.component.ts b/projects/hslayers/src/components/language/language.component.ts
@@ -12,7 +12,8 @@ import {HsSidebarService} from '../sidebar/sidebar.service';
 })
 export class HsLanguageComponent
   extends HsPanelBaseComponent
-  implements OnInit {
+  implements OnInit
+{
   available_languages: any;
   name = 'language';
   constructor(
@@ -33,6 +34,7 @@ export class HsLanguageComponent
 
   ngOnInit(): void {
     this.available_languages = this.hsLanguageService.listAvailableLanguages();
+    super.ngOnInit();
   }
 
   /**

diff --git a/projects/hslayers/src/components/layermanager/layermanager.component.html b/projects/hslayers/src/components/layermanager/layermanager.component.html
@@ -1,4 +1,5 @@
-<div class="card panel-default hs-main-panel hs-layermanager-card" *ngIf="isVisible$ | async">
+<div class="card panel-default hs-main-panel hs-layermanager-card" *ngIf="isVisible$ | async"
+    [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"

diff --git a/projects/hslayers/src/components/layermanager/layermanager.component.ts b/projects/hslayers/src/components/layermanager/layermanager.component.ts
@@ -43,7 +43,8 @@ import {
 })
 export class HsLayerManagerComponent
   extends HsPanelBaseComponent
-  implements OnInit, OnDestroy {
+  implements OnInit, OnDestroy
+{
   layerEditorRef: ElementRef;
   @ViewChild('layerEditor', {static: false, read: ElementRef}) set content(
     content: ElementRef,
@@ -218,6 +219,7 @@ export class HsLayerManagerComponent
   ngOnInit(): void {
     this.layerTooltipDelay = this.hsConfig.layerTooltipDelay;
     this.layerlistVisible = true;
+    super.ngOnInit();
   }
 
   changeBaseLayerVisibility(e?, layer?: Layer<Source>) {

diff --git a/projects/hslayers/src/components/layout/layout.service.ts b/projects/hslayers/src/components/layout/layout.service.ts
@@ -309,17 +309,6 @@ export class HsLayoutService extends HsLayoutParams {
       this.sidebarExpanded = true;
       this.sidebarLabels = false;
     }
-
-    const componentRefInstance = this.hsPanelContainerService.panels.find(
-      (p) => p.name == which,
-    );
-    //Set width of dynamically loaded panels
-    if (componentRefInstance) {
-      this.hsPanelContainerService.setPanelWidth(
-        this.hsConfig.panelWidths,
-        componentRefInstance,
-      );
-    }
     this.mainpanel$.next(which);
   }
 

diff --git a/projects/hslayers/src/components/layout/panels/panel-container.component.ts b/projects/hslayers/src/components/layout/panels/panel-container.component.ts
@@ -86,16 +86,6 @@ export class HsPanelContainerComponent implements OnInit, OnDestroy {
     const componentRef = viewContainerRef.createComponent(panelItem.component);
     const componentRefInstance = <HsPanelComponent>componentRef.instance;
     componentRefInstance.viewRef = componentRef.hostView;
-    if (this.hsConfig) {
-      /*
-       * Assign panel width class to a component host first child
-       * Used to define panelSpace panel width
-       */
-      this.service.setPanelWidth(
-        this.hsConfig.panelWidths,
-        componentRefInstance,
-      );
-    }
 
     /* When component doesn't create its own data object 
     set data by merging two sources: html attribute (this.data) and parameter passed 
@@ -106,16 +96,11 @@ export class HsPanelContainerComponent implements OnInit, OnDestroy {
       componentRefInstance.data = panelItem.data;
     }
     this.service.panels.push(componentRefInstance);
-    // if (componentRefInstance.isVisible$) {
-    //   const visible = componentRefInstance.isVisible
-    //     ? componentRefInstance.isVisible()
-    //     : true;
-    //   componentRefInstance.isVisible$.next(visible);
-    // } else {
-    //   this.hsLog.warn(
-    //     componentRefInstance,
-    //     'should contain isVisible$ BehaviourSubject',
-    //   );
-    // }
+    if (!componentRefInstance.isVisible$) {
+      this.hsLog.warn(
+        componentRefInstance,
+        'should extend HsPanelBaseComponent',
+      );
+    }
   }
 }
diff --git a/projects/hslayers/src/components/layout/panels/panel-container.service.ts b/projects/hslayers/src/components/layout/panels/panel-container.service.ts
@@ -10,7 +10,8 @@ import {KeyNumberDict} from '../../../config.service';
   providedIn: 'root',
 })
 export class HsPanelContainerService
-  implements HsPanelContainerServiceInterface {
+  implements HsPanelContainerServiceInterface
+{
   panels: HsPanelComponent[] = [];
   panelObserver: ReplaySubject<HsPanelItem> = new ReplaySubject();
   panelDestroyObserver: Subject<any> = new Subject();
@@ -49,36 +50,4 @@ export class HsPanelContainerService
     }
     this.panelDestroyObserver.next(component);
   }
-
-  /**
-   * An admittedly hacky solution to set panel width
-   * from dictionary containing names (as in name property in PanelComponent)
-   * and numbers stored in HsConfig.panelWidths in most cases.
-   * It's also possible to set the css class hs-panel-width-(400-850) on the panel
-   * templates root element skipping the HsConfig.panelWidths.
-   * @param panelWidths - key-value pairs of panel names and their widths
-   * @param componentRefInstance - Panel component instance which can be read from HsPanelContainerService.panels array
-   */
-  setPanelWidth(
-    panelWidths: KeyNumberDict,
-    componentRefInstance: HsPanelComponent,
-  ): void {
-    if (componentRefInstance === undefined) {
-      return;
-    }
-    const pnlWidth =
-      panelWidths[componentRefInstance.name] || panelWidths.default;
-    const guessedClass = `hs-panel-width-${Math.round(pnlWidth / 25) * 25}`;
-    setTimeout(() => {
-      const rootView = componentRefInstance.viewRef as any; //Any is used because the actual class RootViewRef is not exported from angular
-      //Without timeout componentRefInstance.viewRef.rootNodes could contain only placeholder <!--container--> until the real content is loaded
-      for (const rootNode of rootView.rootNodes) {
-        for (const child of rootNode.children) {
-          if (!child.classList.contains(guessedClass)) {
-            child.classList.add(guessedClass);
-          }
-        }
-      }
-    }, 0);
-  }
 }
diff --git a/projects/hslayers/src/components/legend/legend.component.html b/projects/hslayers/src/components/legend/legend.component.html
@@ -1,4 +1,4 @@
-<div class="card hs-main-panel" *ngIf="isVisible$ | async">
+<div class="card hs-main-panel" *ngIf="isVisible$ | async" [ngClass]="panelWidthClass">
     <hs-panel-header name="legend" [panelTabs]="'LEGEND'">
     </hs-panel-header>
     <div class="card-body">

diff --git a/projects/hslayers/src/components/legend/legend.component.ts b/projects/hslayers/src/components/legend/legend.component.ts
@@ -24,8 +24,7 @@ import {InterpolatedSource} from '../../common/layers/hs.source.interpolated';
 })
 export class HsLegendComponent
   extends HsPanelBaseComponent
-  implements OnInit, OnDestroy
-{
+  implements OnInit, OnDestroy {
   layerDescriptors = [];
   titleSearch = '';
   name = 'legend';
@@ -55,6 +54,7 @@ export class HsLegendComponent
       });
       this.buildLegendsForLayers(map);
     });
+    super.ngOnInit();
   }
 
   /**
@@ -63,9 +63,8 @@ export class HsLegendComponent
    * @param layer - Layer to add legend for
    */
   async addLayerToLegends(layer: Layer<Source>): Promise<void> {
-    const descriptor = await this.hsLegendService.getLayerLegendDescriptor(
-      layer,
-    );
+    const descriptor =
+      await this.hsLegendService.getLayerLegendDescriptor(layer);
     if (descriptor) {
       const source: any = layer.getSource();
       if (this.hsUtilsService.instOf(source, InterpolatedSource)) {

diff --git a/projects/hslayers/src/components/map-swipe/map-swipe.component.html b/projects/hslayers/src/components/map-swipe/map-swipe.component.html
@@ -14,7 +14,7 @@
   </div>
 </ng-template>
 
-<div class="card hs-main-panel" *ngIf="isVisible$ | async">
+<div class="card hs-main-panel" *ngIf="isVisible$ | async" [ngClass]="panelWidthClass">
   <hs-panel-header name="mapSwipe" [panelTabs]="'MAP_SWIPE'">
   </hs-panel-header>
   <div class="card-body m-2">

diff --git a/projects/hslayers/src/components/permalink/share.component.html b/projects/hslayers/src/components/permalink/share.component.html
@@ -1,4 +1,4 @@
-<div class="card panel-default hs-main-panel" *ngIf="isVisible$ | async">
+<div class="card panel-default hs-main-panel" *ngIf="isVisible$ | async" [ngClass]="panelWidthClass">
     <hs-panel-header name="permalink" [panelTabs]="'PERMALINK'">
     </hs-panel-header>
     <div class="card-body">

diff --git a/projects/hslayers/src/components/permalink/share.component.ts b/projects/hslayers/src/components/permalink/share.component.ts
@@ -61,5 +61,6 @@ export class HsShareComponent extends HsPanelBaseComponent implements OnInit {
 
   ngOnInit() {
     this.app = this.hsConfig.id;
+    super.ngOnInit();
   }
 }
diff --git a/projects/hslayers/src/components/query/query.component.html b/projects/hslayers/src/components/query/query.component.html
@@ -1,4 +1,4 @@
-<div class="card hs-main-panel" *ngIf="isVisible$ | async">
+<div class="card hs-main-panel" *ngIf="isVisible$ | async" [ngClass]="panelWidthClass">
     <hs-panel-header name="info" [panelTabs]="'INFO'"></hs-panel-header>
     <div class="card hs-main-panel" *ngIf="noFeatureSelected()">
         <div class="d-flex flex-column align-items-center p-4">

diff --git a/projects/hslayers/src/components/query/query.component.ts b/projects/hslayers/src/components/query/query.component.ts
@@ -20,8 +20,7 @@ import {HsQueryVectorService} from './query-vector.service';
 })
 export class HsQueryComponent
   extends HsPanelBaseComponent
-  implements OnDestroy, OnInit
-{
+  implements OnDestroy, OnInit {
   popup = new Popup();
   popupOpens: Subject<any> = new Subject();
   name = 'info';
@@ -41,6 +40,7 @@ export class HsQueryComponent
     super(hsLayoutService);
   }
   async ngOnInit() {
+    super.ngOnInit();
     this.popupOpens.pipe(takeUntil(this.end)).subscribe((source) => {
       if (source && source != 'hs.query' && this.popup !== undefined) {
         this.popup.hide();

diff --git a/projects/hslayers/src/components/save-map/save-map.component.html b/projects/hslayers/src/components/save-map/save-map.component.html
@@ -1,4 +1,5 @@
-<div class="card panel-default hs-main-panel mainpanel hs-stc-mainpanel" *ngIf="isVisible$ | async">
+<div class="card panel-default hs-main-panel mainpanel hs-stc-mainpanel" *ngIf="isVisible$ | async"
+    [ngClass]="panelWidthClass">
     <hs-panel-header name=" saveMap" [panelTabs]="'SAVECOMPOSITION'">
     </hs-panel-header>
     <div class="card-body">

diff --git a/projects/hslayers/src/components/save-map/save-map.component.ts b/projects/hslayers/src/components/save-map/save-map.component.ts
@@ -19,7 +19,8 @@ import {HsSidebarService} from '../sidebar/sidebar.service';
 })
 export class HsSaveMapComponent
   extends HsPanelBaseComponent
-  implements OnDestroy, OnInit {
+  implements OnDestroy, OnInit
+{
   endpoint: HsEndpoint = null;
   endpoints: HsEndpoint[];
   isAuthenticated = false;
@@ -40,6 +41,7 @@ export class HsSaveMapComponent
     super(hsLayoutService);
   }
   ngOnInit() {
+    super.ngOnInit();
     this.endpoints = this.hsCommonEndpointsService.endpoints;
 
     this.hsCommonEndpointsService.endpointsFilled

diff --git a/projects/hslayers/src/components/styles/styler.component.html b/projects/hslayers/src/components/styles/styler.component.html
@@ -1,4 +1,4 @@
-<div class="card hs-main-panel" [hidden]="(isVisible$ | async) === false">
+<div class="card hs-main-panel" *ngIf="isVisible$ | async" [ngClass]="panelWidthClass">
   <hs-panel-header name="styler" [panelTabs]="'styler'">
     <button mainButton class="btn btn-sm btn-outline-primary border-0 align-items-center d-flex gap-2"
       [title]="'STYLER.clear' | translateHs" (click)="clear()"> {{'COMMON.reset' | translateHs}}

diff --git a/projects/hslayers/src/components/trip-planner/trip-planner.component.html b/projects/hslayers/src/components/trip-planner/trip-planner.component.html
@@ -1,4 +1,4 @@
-<div class="card hs-main-panel" [hidden]="(isVisible$ | async) === false">
+<div class="card hs-main-panel" *ngIf="isVisible$ | async" [ngClass]="panelWidthClass">
   <hs-panel-header name="tripPlanner" [title]="'PANEL_HEADER.TRIP_PLANNER' | translateHs">
   </hs-panel-header>
   <div class="card-body">
@@ -43,4 +43,4 @@
       <div class="p-1">{{totalDistance()}}</div>
     </div>
   </div>
-</div>
+</div>
diff --git a/projects/hslayers/src/components/trip-planner/trip-planner.component.ts b/projects/hslayers/src/components/trip-planner/trip-planner.component.ts
@@ -20,8 +20,7 @@ import {setHighlighted} from '../../common/feature-extensions';
 })
 export class HsTripPlannerComponent
   extends HsPanelBaseComponent
-  implements OnInit
-{
+  implements OnInit {
   timer: any;
   name = 'tripPlanner';
 
@@ -39,6 +38,7 @@ export class HsTripPlannerComponent
     super(hsLayoutService);
   }
   async ngOnInit(): Promise<void> {
+    super.ngOnInit();
     this.hsSidebarService.addButton({
       panel: 'tripPlanner',
       module: 'hs-trip-planner',

diff --git a/projects/test-app/src/hslayers-app/some-panel/some-panel.component.html b/projects/test-app/src/hslayers-app/some-panel/some-panel.component.html
@@ -1,4 +1,4 @@
-<div [hidden]="(isVisible$ | async) === false" class="card hs-main-panel">
+<div *ngIf="isVisible$ | async" class="card hs-main-panel" [ngClass]="panelWidthClass">
   <hs-panel-header name="custom" [panelTabs]="'My Cool Panel'">
   </hs-panel-header>
   <div class="card-body">
@@ -9,4 +9,4 @@
       Illos non interficimus.
     </div>
   </div>
-</div>
+</div>