Skip to content

Commit

Permalink
refactor: GUI components visibility
Browse files Browse the repository at this point in the history
BREAKING CHANGE: query component (info panel) renamed to query, info component (compositionLoadingProgress) renamed to info and configuration moved from panels to components
  • Loading branch information
FilipLeitner authored and jmacura committed Feb 13, 2024
1 parent b1af6f7 commit e315647
Show file tree
Hide file tree
Showing 29 changed files with 178 additions and 130 deletions.
Original file line number Diff line number Diff line change
@@ -1,19 +1,25 @@
import {CommonModule} from '@angular/common';
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';

import {HsConfig} from '../../../config.service';
import {HsDrawService} from '../draw.service';
import {HsGuiOverlayBaseComponent} from '../../layout/panels/gui-overlay-base.component';
import {HsLanguageService} from '../../language/language.service';
import {HsLayerUtilsService} from '../../utils/layer-utils.service';
import {HsLayoutService} from '../../layout/layout.service';
import {HsRemoveLayerDialogService} from '../../../common/remove-multiple/remove-layer-dialog.service';
import {HsToolbarPanelBaseComponent} from '../../toolbar/toolbar-panel-base.component';
import {TranslateCustomPipe} from '../../language/translate-custom.pipe';
import {getTitle} from '../../../common/layer-extensions';

@Component({
selector: 'hs-draw-toolbar',
templateUrl: './draw-toolbar.component.html',
standalone: true,
imports: [CommonModule, FormsModule, NgbDropdownModule, TranslateCustomPipe],
})
export class HsDrawToolbarComponent extends HsToolbarPanelBaseComponent {
export class HsDrawToolbarComponent extends HsGuiOverlayBaseComponent {
drawToolbarExpanded = false;
onlyMineFilterVisible = false;
name = 'drawToolbar';
Expand Down
8 changes: 1 addition & 7 deletions projects/hslayers/src/components/draw/draw.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {DrawEditComponent} from './draw-edit/draw-edit.component';
import {DrawPanelComponent} from './draw-panel/draw-panel.component';
import {HsDrawComponent} from './draw.component';
import {HsDrawLayerMetadataDialogComponent} from './draw-layer-metadata/draw-layer-metadata.component';
import {HsDrawToolbarComponent} from './draw-toolbar/draw-toolbar.component';
import {HsLaymanModule} from '../../common/layman/layman.module';
import {HsPanelHeaderComponent} from '../layout/panels/panel-header/panel-header.component';
import {HsPanelHelpersModule} from '../layout/panels/panel-helpers.module';
Expand All @@ -22,7 +21,6 @@ import {TranslateCustomPipe} from '../language/translate-custom.pipe';
declarations: [
HsDrawComponent,
HsDrawLayerMetadataDialogComponent,
HsDrawToolbarComponent,
DrawPanelComponent,
DrawEditComponent,
],
Expand All @@ -38,10 +36,6 @@ import {TranslateCustomPipe} from '../language/translate-custom.pipe';
HsRmLayerDialogModule,
HsPanelHeaderComponent,
],
exports: [
HsDrawComponent,
HsDrawLayerMetadataDialogComponent,
HsDrawToolbarComponent,
],
exports: [HsDrawComponent, HsDrawLayerMetadataDialogComponent],
})
export class HsDrawModule {}
2 changes: 1 addition & 1 deletion projects/hslayers/src/components/draw/draw.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -382,7 +382,7 @@ export class HsDrawService extends HsDrawServiceParams {
this.hsLayoutService.mainpanel != 'draw' &&
this.hsConfig.openQueryPanelOnDrawEnd
) {
this.hsLayoutService.setMainPanel('info');
this.hsLayoutService.setMainPanel('query');
}
setTimeout(() => {
this.addFeatureToSelector(e.feature);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ export class HsExternalService {
this.hsQueryBaseService.clear('features');
select.getFeatures().push(feature);
this.hsQueryVectorService.createFeatureAttributeList();
this.hsLayoutService.setMainPanel('info');
this.hsLayoutService.setMainPanel('query');
this.hsLayoutService.sidebarExpanded = true;
break;
default:
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import {Component, OnInit} from '@angular/core';

import {HsGuiOverlayBaseComponent} from '../layout/panels/gui-overlay-base.component';
import {HsGeolocationService} from './geolocation.service';
import {HsLayoutService} from '../layout/layout.service';
import {HsPanelBaseComponent} from '../layout/panels/panel-base.component';
@Component({
selector: 'hs-geolocation',
templateUrl: './geolocation.component.html',
})
export class HsGeolocationComponent
extends HsPanelBaseComponent
implements OnInit
{
extends HsGuiOverlayBaseComponent
implements OnInit {
collapsed: boolean;

name = 'geolocationButton';

constructor(
private hsGeolocationService: HsGeolocationService,
public HsLayoutService: HsLayoutService,
Expand All @@ -20,6 +22,7 @@ export class HsGeolocationComponent
}
ngOnInit(): void {
this.collapsed = true;
super.ngOnInit();
}
isVisible(): boolean {
return (
Expand Down
9 changes: 7 additions & 2 deletions projects/hslayers/src/components/info/info.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,18 @@ import {takeUntil} from 'rxjs/operators';

import {HsConfig} from '../../config.service';
import {HsEventBusService} from './../core/event-bus.service';
import {HsGuiOverlayBaseComponent} from '../layout/panels/gui-overlay-base.component';
import {HsLayoutService} from '../layout/layout.service';
import {HsPanelBaseComponent} from '../layout/panels/panel-base.component';
import {getTitle} from '../../common/layer-extensions';

@Component({
selector: 'hs-info',
templateUrl: './info.component.html',
})
export class HsInfoComponent extends HsPanelBaseComponent implements OnDestroy {
export class HsInfoComponent
extends HsGuiOverlayBaseComponent
implements OnDestroy
{
/**
* Store if composition is loaded
*/
Expand All @@ -27,6 +30,8 @@ export class HsInfoComponent extends HsPanelBaseComponent implements OnDestroy {
composition_id: string;
info_image: string;
composition_edited: boolean;

name = 'info';
private end = new Subject<void>();
constructor(
private hsEventBusService: HsEventBusService,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="basemapGallery" style="z-index: 101;" [hidden]="(isVisible$ | async) === false">
<div class="basemapGallery" style="z-index: 101;" *ngIf="isVisible$ | async">
<div ngbDropdown placement="bottom-right" class="btn-group btn-group-sm" role="group"
[attr.data-cy]="'basemap-gallery'" #galleryDropdown="ngbDropdown">
<button ngbDropdownToggle type="button" class="btn rounded galleryButton pt-0 pb-0" style="font-size: 1rem"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,28 @@
import {ChangeDetectionStrategy, Component, ViewChild} from '@angular/core';
import {NgbDropdown} from '@ng-bootstrap/ng-bootstrap';
import {CommonModule} from '@angular/common';

import {NgbDropdown, NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';

import {HsGuiOverlayBaseComponent} from '../../layout/panels/gui-overlay-base.component';
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 {TranslateCustomPipe} from '../../language/translate-custom.pipe';
import {getBase, getGreyscale} from '../../../common/layer-extensions';

@Component({
selector: 'hs-layermanager-gallery',
templateUrl: './layermanager-gallery.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [CommonModule, TranslateCustomPipe, NgbDropdownModule],
})
export class HsLayerManagerGalleryComponent extends HsPanelBaseComponent {
export class HsLayerManagerGalleryComponent extends HsGuiOverlayBaseComponent {
menuExpanded = false;
getGreyscale = getGreyscale;
@ViewChild('galleryDropdown', {static: false}) dropdown: NgbDropdown;
name = 'basemapGallery';
constructor(
public hsLayoutService: HsLayoutService,
public hsLayerManagerService: HsLayerManagerService,
Expand Down Expand Up @@ -60,11 +66,4 @@ export class HsLayerManagerGalleryComponent extends HsPanelBaseComponent {
this.hsLayerManagerService.menuExpanded =
!this.hsLayerManagerService.menuExpanded;
}

isVisible(): boolean {
return (
this.hsLayoutService.componentEnabled('basemapGallery') &&
this.hsLayoutService.componentEnabled('guiOverlay')
);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {HsLayerEditorWidgetBaseComponent} from './widgets/layer-editor-widget-ba
import {HsLayerListComponent} from './logical-list/layermanager-layerlist.component';
import {HsLayerManagerComponent} from './layermanager.component';
import {HsLayerManagerFolderComponent} from './logical-list/layermanager-folder.component';
import {HsLayerManagerGalleryComponent} from './gallery/layermanager-gallery.component';
import {HsLayerManagerRemoveAllDialogComponent} from './dialogs/remove-all-dialog.component';
import {HsLayerManagerRemoveLayerDialogComponent} from './dialogs/remove-layer-dialog.component';
import {HsLayerManagerTimeEditorComponent} from './dimensions/layermanager-time-editor.component';
Expand All @@ -44,7 +43,6 @@ import {TranslateCustomPipe} from '../language/translate-custom.pipe';
HsLayerManagerComponent,
HsLayerEditorDimensionsComponent,
HsLayerEditorSubLayerCheckboxesComponent,
HsLayerManagerGalleryComponent,
HsLayerEditorComponent,
HsLayerManagerFolderComponent,
HsLayerListComponent,
Expand Down Expand Up @@ -83,7 +81,6 @@ import {TranslateCustomPipe} from '../language/translate-custom.pipe';
HsLayerManagerComponent,
HsLayerEditorDimensionsComponent,
HsLayerEditorSubLayerCheckboxesComponent,
HsLayerManagerGalleryComponent,
HsLayerEditorComponent,
HsLayerManagerFolderComponent,
HsLayerListComponent,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import {Component, OnInit, ViewRef} from '@angular/core';
import {Observable, map, of} from 'rxjs';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';

import {HsLayoutService} from '../layout.service';
import {HsPanelComponent} from './panel-component.interface';

@Component({
template: '<div></div>',
standalone: true,
})
export class HsGuiOverlayBaseComponent implements HsPanelComponent, OnInit {
name: string;
viewRef: ViewRef;
data: any;
isVisible$ = new Observable<boolean>();

/**
* Control to make sure HsPanelBaseComponent ngOnInit was run eg.
* was called from parent ngOnInit or when parents ngOnInit is not defined
*/
private baseComponentInitRun = false;

constructor(public hsLayoutService: HsLayoutService) {
setTimeout(() => {
if (!this.baseComponentInitRun) {
console.warn(
`${
this.name || this.constructor.name
} implements ngOnInit lifecycle hook without calling HsGuiOverlayBaseComponent ngOnInit.
Make sure it is executed by calling super.ngOnInit() from component's ngOnInit manually`,
);
}
}, 3000);
}

ngOnInit(): void {
this.baseComponentInitRun = true;
this.isVisible$ = this.componentEnabled();
this.hsLayoutService.hsConfig.configChanges
//.pipe(takeUntilDestroyed())
.subscribe(() => {
this.isVisible$ = this.componentEnabled();
});

if (!this.name) {
console.error(`${this.constructor.name} is missing a name property!`);
}
}

/**
* Determine component visiblity
*/
componentEnabled(): Observable<boolean> {
return of(
this.hsLayoutService.componentEnabled(this.name) &&
this.hsLayoutService.componentEnabled('guiOverlay'),
);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export class HsPanelBaseComponent implements HsPanelComponent, OnInit {
`${
this.name || this.constructor.name
} implements ngOnInit lifecycle hook without calling HsPanelBaseComponent ngOnInit.
Make sure it is executed by calling super.ngOnInit() from components ngOnInit manually`,
Make sure it is executed by calling super.ngOnInit() from component's ngOnInit manually`,
);
}
}, 3000);
Expand All @@ -50,6 +50,10 @@ export class HsPanelBaseComponent implements HsPanelComponent, OnInit {
.subscribe(() => {
this.panelWidthClass = this.getPanelWidthClass();
});

if (!this.name) {
console.error(`${this.constructor.name} is missing a name property!`);
}
}

/**
Expand Down
1 change: 1 addition & 0 deletions projects/hslayers/src/components/layout/public-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export * from './dialogs/dialog-item';
export * from './panels/panel-header/panel-header.component';
export * from './panels/panel-component.interface';
export * from './panels/panel-base.component';
export * from './panels/gui-overlay-base.component';
export * from './panels/panel-container.component';
export * from './panels/panel-container.service.interface';
export * from './panels/panel-container.service';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,26 +1,31 @@
import {Component} from '@angular/core';
import {of} from 'rxjs';

import {HsGuiOverlayBaseComponent} from '../layout/panels/gui-overlay-base.component';
import {HsLayoutService} from '../layout/layout.service';
import {HsToolbarPanelBaseComponent} from '../toolbar/toolbar-panel-base.component';

@Component({
selector: 'hs-measure-toolbar',
templateUrl: './measure-toolbar.component.html',
})
export class HsMeasureToolbarComponent extends HsToolbarPanelBaseComponent {
export class HsMeasureToolbarComponent extends HsGuiOverlayBaseComponent {
constructor(public hsLayoutService: HsLayoutService) {
super(hsLayoutService);
}
name = 'measureToolbar';

isVisible(): boolean {
return (
this.hsLayoutService.panelEnabled('measure') &&
this.hsLayoutService.componentEnabled('measureToolbar')
);
}

measureButtonClicked(): void {
this.hsLayoutService.setMainPanel('measure', true);
}

/**
* Override parent class componentEnabled. Used to determine isVisible$ value
*/
componentEnabled() {
return of(
this.hsLayoutService.panelEnabled('measure') &&
this.hsLayoutService.componentEnabled(this.name) &&
this.hsLayoutService.componentEnabled('guiOverlay'),
);
}
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="card hs-main-panel" [hidden]="(isVisible$ | async) === false">
<div class="card hs-main-panel" *ngIf="isVisible$ | async">
<hs-panel-header name="measure" [panelTabs]="'MEASURE'">
</hs-panel-header>
<div class="card-body p-2">
Expand Down Expand Up @@ -39,4 +39,4 @@
</li>
</ul>
</div>
</div>
</div>
17 changes: 3 additions & 14 deletions projects/hslayers/src/components/measure/measure.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import {HsUtilsService} from '../utils/utils.service';
})
export class HsMeasureComponent
extends HsPanelBaseComponent
implements OnDestroy, OnInit {
implements OnDestroy, OnInit
{
type: string;
name = 'measure';
private end = new Subject<void>();
Expand All @@ -34,6 +35,7 @@ export class HsMeasureComponent
}

ngOnInit() {
super.ngOnInit();
this.type = 'distance';

if (this.hsUtilsService.runningInBrowser()) {
Expand Down Expand Up @@ -72,19 +74,6 @@ export class HsMeasureComponent
if (this.hsLayoutService.mainpanel == 'measure') {
this.hsMeasureService.activateMeasuring(this.type);
}
//Don't need two buttons (sidebar and toolbar) to toggle measure panel
// if (!this.hsLayoutService.componentEnabled('measureToolbar')) {
// this.hsSidebarService.addButton({
// panel: 'measure',
// module: 'hs.measure',
// order: 2,
// fits: true,
// title: 'PANEL_HEADER.MEASURE',
// description: 'SIDEBAR.descriptions.MEASURE',
// icon: 'icon-design',
// condition: true,
// });
// }
}

/**
Expand Down
Loading

0 comments on commit e315647

Please sign in to comment.