Add handling for inspection panels size retention

erdblick_app/app/feature.panel.component.ts

@@ -1,13 +1,24 @@
-import {Component, Input, OnInit, ViewChild} from "@angular/core";
+import {
+    AfterContentChecked,
+    AfterViewChecked,
+    Component,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    ViewChild
+} from "@angular/core";
 import {MenuItem, TreeNode, TreeTableNode} from "primeng/api";
 import {InspectionService} from "./inspection.service";
 import {JumpTargetService} from "./jump.service";
 import {Menu} from "primeng/menu";
 import {MapService} from "./map.service";
-import {distinctUntilChanged} from "rxjs";
+import {distinctUntilChanged, Subscription} from "rxjs";
 import {coreLib} from "./wasm";
 import {ClipboardService} from "./clipboard.service";
 import {TreeTable} from "primeng/treetable";
+import {InspectionContainerSize} from "./inspection.panel.component";
+import {ParametersService} from "./parameters.service";
 
 interface Column {
     field: string;
@@ -43,14 +54,16 @@ interface Column {
                 </p-button>
             </div>
         </div>
-        <div class="flex resizable-container" [ngClass]="{'resizable-container-expanded': isExpanded}">
+        <div class="flex resizable-container"
+             [style.width.px]="inspectionContainerWidth"
+             [style.height.px]="inspectionContainerHeight"
+             (mouseup)="parameterService.onInspectionContainerResize($event)"
+             [ngClass]="{'resizable-container-expanded': isExpanded}">
             <div class="resize-handle" (click)="isExpanded = !isExpanded">
                 <i *ngIf="!isExpanded" class="pi pi-chevron-up"></i>
                 <i *ngIf="isExpanded" class="pi pi-chevron-down"></i>
             </div>
-            <p-treeTable #tt
-                         filterMode="strict"
-                         scrollHeight="flex"
+            <p-treeTable #tt filterMode="strict" scrollHeight="flex"
                          [value]="filteredTree"
                          [columns]="cols"
                          [scrollable]="true"
@@ -163,7 +176,7 @@ interface Column {
         }
     `]
 })
-export class FeaturePanelComponent implements OnInit  {
+export class FeaturePanelComponent implements OnInit, OnDestroy  {
 
     //jsonTree: string = "";
     filteredTree: TreeTableNode[] = [];
@@ -185,9 +198,14 @@ export class FeaturePanelComponent implements OnInit  {
     inspectionMenuItems: MenuItem[] | undefined;
     inspectionMenuVisible: boolean = false;
 
+    inspectionContainerWidth: number;
+    inspectionContainerHeight: number;
+    containerSizeSubscription: Subscription;
+
     constructor(private clipboardService: ClipboardService,
                 public inspectionService: InspectionService,
                 public jumpService: JumpTargetService,
+                public parameterService: ParametersService,
                 public mapService: MapService) {
         this.inspectionService.featureTree.pipe(distinctUntilChanged()).subscribe((tree: string) => {
             this.jsonTree = tree;
@@ -207,7 +225,19 @@ export class FeaturePanelComponent implements OnInit  {
                     scroller.calculateAutoSize();
                 }
             }, 0);
-        })
+        });
+
+        this.inspectionContainerWidth = this.parameterService.inspectionContainerWidth * this.parameterService.baseFontSize;
+        this.inspectionContainerHeight = (window.innerHeight - this.parameterService.inspectionContainerHeight * this.parameterService.baseFontSize) * this.parameterService.baseFontSize;
+        this.containerSizeSubscription = this.parameterService.parameters.subscribe(parameter => {
+            if (parameter.panel.length == 2) {
+                this.inspectionContainerWidth = parameter.panel[0] * this.parameterService.baseFontSize;
+                this.inspectionContainerHeight = parameter.panel[1] * this.parameterService.baseFontSize;
+            } else {
+                this.inspectionContainerWidth = this.parameterService.inspectionContainerWidth * this.parameterService.baseFontSize;
+                this.inspectionContainerHeight = (window.innerHeight - this.parameterService.inspectionContainerHeight * this.parameterService.baseFontSize) * this.parameterService.baseFontSize;
+            }
+        });
     }
 
     ngOnInit(): void {
@@ -408,4 +438,8 @@ export class FeaturePanelComponent implements OnInit  {
             this.clearFilter();
         }
     }
+
+    ngOnDestroy() {
+        this.containerSizeSubscription.unsubscribe();
+    }
 }

erdblick_app/app/inspection.panel.component.ts

@@ -20,6 +20,12 @@ interface SourceLayerMenuItem {
     command: () => void
 }
 
+export interface InspectionContainerSize {
+    height: number,
+    width: number,
+    type: string
+}
+
 @Component({
     selector: 'inspection-panel',
     template: `

erdblick_app/app/parameters.service.ts

@@ -4,6 +4,7 @@ import {Cartesian3, Cartographic, CesiumMath, Camera} from "./cesium";
 import {Params, Router} from "@angular/router";
 import {ErdblickStyle} from "./style.service";
 import {InspectionService, SelectedSourceData} from "./inspection.service";
+import {InspectionContainerSize} from "./inspection.panel.component";
 
 export const MAX_NUM_TILES_TO_LOAD = 2048;
 export const MAX_NUM_TILES_TO_VISUALIZE = 512;
@@ -42,6 +43,7 @@ interface ErdblickParameters extends Record<string, any> {
     tilesVisualizeLimit: number,
     enabledCoordsTileIds: Array<string>,
     selectedSourceData: Array<any>,
+    panel: Array<number>
 }
 
 interface ParameterDescriptor {
@@ -182,6 +184,12 @@ const erdblickParameters: Record<string, ParameterDescriptor> = {
         validator: Array.isArray,
         default: [],
         urlParam: true
+    },
+    panel: {
+        converter: val => JSON.parse(val),
+        validator: val => Array.isArray(val) && val.length == 2 && val.every(item => typeof item === 'number'),
+        default: [],
+        urlParam: true
     }
 };
 
@@ -204,10 +212,16 @@ export class ParametersService {
 
     lastSearchHistoryEntry: BehaviorSubject<[number, string] | null> = new BehaviorSubject<[number, string] | null>(null);
 
+    baseFontSize: number = 16;
+    inspectionContainerWidth: number = 40;
+    inspectionContainerHeight: number = 10.5;
+
     CAMERA_MOVE_AMOUNT = 1000.0;
     CAMERA_ZOOM_AMOUNT = 5000.0;
 
     constructor(public router: Router) {
+        this.baseFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+
         let parameters = this.loadSavedParameters();
         this.parameters = new BehaviorSubject<ErdblickParameters>(parameters!);
         this.saveParameters();
@@ -493,4 +507,41 @@ export class ParametersService {
             localStorage.setItem("searchHistory", JSON.stringify(value));
         }
     }
+
+    // resizeInspectionContainer() {
+    //     this.baseFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+    //     const containerSize = localStorage.getItem('inspectContainerSize');
+    //     if (containerSize) {
+    //         const parsedContainerSize = JSON.parse(containerSize) as InspectionContainerSize;
+    //         this.inspectionContainerWidth = parsedContainerSize.width * this.baseFontSize;
+    //         this.inspectionContainerWidth = parsedContainerSize.height * this.baseFontSize;
+    //     } else {
+    //         this.inspectionContainerWidth = 40 * this.baseFontSize;
+    //         this.inspectionContainerWidth = (window.innerHeight - 10.5 * this.baseFontSize) * this.baseFontSize;
+    //     }
+    // }
+
+    onInspectionContainerResize(event: MouseEvent): void {
+        const element = event.target as HTMLElement;
+        if (!element.classList.contains("resizable-container")) {
+            return;
+        }
+        if (!element.offsetWidth || !element.offsetHeight) {
+            return;
+        }
+        this.baseFontSize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
+        const currentEmWidth = element.offsetWidth / this.baseFontSize;
+        if (currentEmWidth < 40.0) {
+            this.inspectionContainerWidth = 40 * this.baseFontSize;
+        } else {
+            this.inspectionContainerWidth = element.offsetWidth;
+        }
+        this.inspectionContainerHeight = element.offsetHeight;
+
+        this.p().panel = [
+            this.inspectionContainerWidth / this.baseFontSize,
+            this.inspectionContainerHeight / this.baseFontSize
+        ];
+        this.parameters.next(this.p());
+    }
 }

erdblick_app/app/sourcedata.panel.component.ts

@@ -1,34 +1,46 @@
-import {Component, OnInit, Input, ViewChild} from "@angular/core";
+import {
+    Component,
+    OnInit,
+    Input,
+    ViewChild,
+    AfterViewChecked,
+    AfterContentChecked,
+    OnChanges,
+    OnDestroy, SimpleChanges
+} from "@angular/core";
 import {TreeTableNode} from "primeng/api";
 import {InspectionService, SelectedSourceData} from "./inspection.service";
 import {MapService} from "./map.service";
 import {coreLib} from "./wasm";
 import {SourceDataAddressFormat} from "build/libs/core/erdblick-core";
 import {TreeTable} from "primeng/treetable";
 import {Menu} from "primeng/menu";
+import {InspectionContainerSize} from "./inspection.panel.component";
+import {ParametersService} from "./parameters.service";
+import {Subscription} from "rxjs";
 
 @Component({
     selector: 'sourcedata-panel',
     template: `
-        <div class="flex resizable-container" [ngClass]="{'resizable-container-expanded': isExpanded}">
+        <div class="flex resizable-container"
+             [style.width.px]="parameterService.inspectionContainerWidth"
+             [style.height.px]="parameterService.inspectionContainerHeight"
+             (mouseup)="parameterService.onInspectionContainerResize($event)"
+             [ngClass]="{'resizable-container-expanded': isExpanded}">
             <div class="resize-handle" (click)="isExpanded = !isExpanded">
                 <i *ngIf="!isExpanded" class="pi pi-chevron-up"></i>
                 <i *ngIf="isExpanded" class="pi pi-chevron-down"></i>
             </div>
             <ng-container *ngIf="errorMessage.length == 0; else errorTemplate">
-                <p-treeTable #tt
-                    class="panel-tree"
-                    scrollHeight="flex"
+                <p-treeTable #tt scrollHeight="flex" filterMode="strict"
                     [value]="treeData"
                     [loading]="loading"
                     [autoLayout]="true"
                     [scrollable]="true"
                     [resizableColumns]="true"
                     [virtualScroll]="true"
                     [virtualScrollItemSize]="26"
-                    [tableStyle]="{'min-width': '150px', 'min-height': '1px', 'padding': '0px'}"
-                    
-                    filterMode="strict"
+                    [tableStyle]="{'min-height': '1px', 'padding': '0px'}"
                     [globalFilterFields]="filterFields"
                 >
                     <ng-template pTemplate="caption">
@@ -81,7 +93,7 @@ import {Menu} from "primeng/menu";
         </ng-template>
     `
 })
-export class SourceDataPanelComponent implements OnInit {
+export class SourceDataPanelComponent implements OnInit, OnDestroy {
     @Input() sourceData!: SelectedSourceData;
 
     @ViewChild('tt') table!: TreeTable;
@@ -107,6 +119,10 @@ export class SourceDataPanelComponent implements OnInit {
 
     // layerMenuItems: any[] = [];
 
+    inspectionContainerWidth: number;
+    inspectionContainerHeight: number;
+    containerSizeSubscription: Subscription;
+
     /**
      * Returns a human-readable layer name for a layer id.
      *
@@ -119,7 +135,21 @@ export class SourceDataPanelComponent implements OnInit {
         return layerId;
     }
 
-    constructor(private inspectionService: InspectionService, public mapService: MapService) {}
+    constructor(private inspectionService: InspectionService,
+                public parameterService: ParametersService,
+                public mapService: MapService) {
+        this.inspectionContainerWidth = this.parameterService.inspectionContainerWidth * this.parameterService.baseFontSize;
+        this.inspectionContainerHeight = (window.innerHeight - this.parameterService.inspectionContainerHeight * this.parameterService.baseFontSize) * this.parameterService.baseFontSize;
+        this.containerSizeSubscription = this.parameterService.parameters.subscribe(parameter => {
+            if (parameter.panel.length == 2) {
+                this.inspectionContainerWidth = parameter.panel[0] * this.parameterService.baseFontSize;
+                this.inspectionContainerHeight = parameter.panel[1] * this.parameterService.baseFontSize;
+            } else {
+                this.inspectionContainerWidth = this.parameterService.inspectionContainerWidth * this.parameterService.baseFontSize;
+                this.inspectionContainerHeight = (window.innerHeight - this.parameterService.inspectionContainerHeight * this.parameterService.baseFontSize) * this.parameterService.baseFontSize;
+            }
+        });
+    }
 
     ngOnInit(): void {
         this.inspectionService.loadSourceDataLayer(this.sourceData.tileId, this.sourceData.layerId, this.sourceData.mapId)
@@ -143,10 +173,6 @@ export class SourceDataPanelComponent implements OnInit {
             .finally(() => {
                 this.loading = false;
             });
-
-        // this.mapService.maps.subscribe(maps => {
-        //
-        // });
     }
 
     /**
@@ -272,4 +298,8 @@ export class SourceDataPanelComponent implements OnInit {
             this.clearFilter();
         }
     }
+
+    ngOnDestroy() {
+        this.containerSizeSubscription.unsubscribe();
+    }
 }

erdblick_app/styles.scss

@@ -126,7 +126,7 @@ body {
     }
 
     .resizable-container {
-        height: calc(100vh - 7.5em) !important;
+        height: calc(100vh - 7.5em);
         max-height: calc(100vh - 7.5em) !important;
     }
 }