Layer visibility indicator if out of scale

packages/common/src/lib/badge-icon/badge-icon.directive.ts

@@ -0,0 +1,39 @@
+import { Directive, Input, ElementRef, OnInit } from '@angular/core';
+import { MatIconRegistry } from '@angular/material';
+
+@Directive({
+  selector: '[igoMatBadgeIcon]'
+})
+export class MatBadgeIconDirective implements OnInit {
+  @Input()
+  set igoMatBadgeIcon(value: string) {
+    this.matIconRegistry
+      .getNamedSvgIcon(value)
+      .subscribe(svgObj => {
+        this.badge.innerHTML = '';
+        this.badge.appendChild(svgObj);
+      });
+  }
+
+  @Input()
+  set matBadgeHidden(value: boolean) {
+    this.badge.style.display = value
+      ? 'none'
+      : 'flex';
+  }
+
+  get badge() {
+    return this.el.nativeElement.querySelector('.mat-badge-content');
+  }
+
+  constructor(
+    private el: ElementRef,
+    private matIconRegistry: MatIconRegistry
+  ) {}
+
+  ngOnInit() {
+    this.badge.style.alignItems = 'center';
+    this.badge.style.justifyContent = 'center';
+    this.badge.style.background = 'none';
+  }
+}

packages/common/src/lib/badge-icon/badge-icon.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { MatBadgeIconDirective } from './badge-icon.directive';
+import { MatBadgeModule, MatIconModule } from '@angular/material';
+
+@NgModule({
+  imports: [MatBadgeModule, MatIconModule],
+  declarations: [MatBadgeIconDirective],
+  exports: [MatBadgeIconDirective]
+})
+export class IgoMatBadgeIconModule {
+  static forRoot() {
+    return {
+      ngModule: IgoMatBadgeIconModule,
+      providers: []
+    };
+  }
+}

packages/common/src/lib/badge-icon/index.ts

@@ -0,0 +1 @@
+export * from './badge-icon.directive';

packages/common/src/public_api.ts

@@ -5,6 +5,7 @@
 export * from './lib/action/action.module';
 export * from './lib/action/actionbar/actionbar.module';
 export * from './lib/backdrop/backdrop.module';
+export * from './lib/badge-icon/badge-icon.module';
 export * from './lib/clickout/clickout.module';
 export * from './lib/clone/clone.module';
 export * from './lib/collapsible/collapsible.module';

packages/geo/src/lib/catalog/catalog-browser/catalog-browser-group.component.html

@@ -9,9 +9,8 @@
     (toggle)="onToggleCollapsed($event)">
   </mat-icon>
 
-  <h4 matLine>{{title}}</h4>
-
-  <ng-container *ngIf="added$ | async; else notadded">
+  <h4 class="igo-catalog-group-title" mat-line matTooltipShowDelay="500" [matTooltip]="title" (click)="onTitleClick()">{{title}}</h4>
+  <ng-container *ngIf="(added$ | async) && !(preview$ | async); else notadded">
     <button
       mat-icon-button
       tooltip-position="below"
@@ -44,7 +43,9 @@ <h4 matLine>{{title}}</h4>
       <igo-catalog-browser-layer
         igoListItem
         [layer]="item"
+        [resolution]="resolution"
         [added]="state.get(item).added"
+        (addedLayerIsPreview)="onLayerPreview($event)"
         (addedChange)="onLayerAddedChange($event)">
       </igo-catalog-browser-layer>
     </ng-container>

packages/geo/src/lib/catalog/catalog-browser/catalog-browser-group.component.scss

@@ -0,0 +1,3 @@
+.igo-catalog-group-title  {
+  cursor: pointer;
+}

packages/geo/src/lib/catalog/catalog-browser/catalog-browser-group.component.ts

@@ -27,6 +27,7 @@ import {
 @Component({
   selector: 'igo-catalog-browser-group',
   templateUrl: './catalog-browser-group.component.html',
+  styleUrls: ['./catalog-browser-group.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CatalogBrowserGroupComponent implements OnInit, OnDestroy {
@@ -42,7 +43,7 @@ export class CatalogBrowserGroupComponent implements OnInit, OnDestroy {
    * @internal
    */
   added$: BehaviorSubject<boolean> = new BehaviorSubject(false);
-
+  preview$: BehaviorSubject<boolean> = new BehaviorSubject(false);
   /**
    * Whether the toggle button is disabled
    * @internal
@@ -64,6 +65,8 @@ export class CatalogBrowserGroupComponent implements OnInit, OnDestroy {
    */
   @Input() collapsed: boolean = true;
 
+  @Input() resolution: number;
+
   /**
    * Whether the group can be toggled when it's collapsed
    */
@@ -184,6 +187,10 @@ export class CatalogBrowserGroupComponent implements OnInit, OnDestroy {
     });
   }
 
+  onLayerPreview(event) {
+    this.preview$.next(event);
+  }
+
   /**
    * If all the layers of the group added or removed, add or remove the group itself.
    * @param event The last layer added change event to occur
@@ -218,4 +225,8 @@ export class CatalogBrowserGroupComponent implements OnInit, OnDestroy {
     }
     this.disabled$.next(disabled);
   }
+
+  onTitleClick() {
+    this.collapsed = !this.collapsed;
+  }
 }

packages/geo/src/lib/catalog/catalog-browser/catalog-browser-layer.component.html

@@ -1,17 +1,26 @@
 <mat-list-item>
   <mat-icon mat-list-avatar svgIcon="blank"></mat-icon>
-  <h4 mat-line>{{title}}</h4>
+  <h4 mat-line matTooltipShowDelay="500" [matTooltip]="title">{{title}}</h4>
 
   <igo-metadata-button [layer]="layer"></igo-metadata-button>
 
   <button
+    (mouseenter)="onMouseEvent($event)" (mouseleave)="onMouseEvent($event)"
     mat-icon-button
     tooltip-position="below"
     matTooltipShowDelay="500"
-    [matTooltip]="(added ? 'igo.geo.catalog.layer.removeFromMap' : 'igo.geo.catalog.layer.addToMap') | translate"
-    [color]="added ? 'warn' : ''"
-    (click)="onToggleClick()">
-    <mat-icon [svgIcon]="added ? 'delete' : 'plus'"></mat-icon>
+    [matTooltip]="computeTooltip() | translate"
+    [color]="(isPreview$ | async) ? '' : added ? 'warn' : ''"
+    (click)="onToggleClick($event)">
+    <mat-icon
+       matBadge
+       igoMatBadgeIcon="eye-off"
+       [matBadgeHidden]="isInResolutionsRange()"
+       matBadgeColor="accent"
+       matBadgeSize="small"
+       matBadgePosition="after"
+       [svgIcon]="(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'">
+    </mat-icon>
   </button>
 
 </mat-list-item>

packages/geo/src/lib/catalog/catalog-browser/catalog-browser-layer.component.scss

@@ -0,0 +1,4 @@
+.mat-badge-small .mat-badge-content {
+    color: rgba(0, 0, 0, 0.38);
+  }
+

packages/geo/src/lib/catalog/catalog-browser/catalog-browser-layer.component.ts

@@ -1,18 +1,25 @@
-import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter, OnInit } from '@angular/core';
 
 import { getEntityTitle, getEntityIcon } from '@igo2/common';
 
 import { CatalogItemLayer } from '../shared';
+import { BehaviorSubject } from 'rxjs';
 
 /**
  * Catalog browser layer item
  */
 @Component({
   selector: 'igo-catalog-browser-layer',
   templateUrl: './catalog-browser-layer.component.html',
+  styleUrls: ['./catalog-browser-layer.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CatalogBrowserLayerComponent {
+export class CatalogBrowserLayerComponent implements OnInit {
+
+  public inRange$: BehaviorSubject<boolean> = new BehaviorSubject(true);
+  public isPreview$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+  @Input() resolution: number;
 
   /**
    * Catalog layer
@@ -22,7 +29,7 @@ export class CatalogBrowserLayerComponent {
   /**
    * Whether the layer is already added to the map
    */
-  @Input() added: boolean;
+  @Input() added = false;
 
   /**
    * Event emitted when the add/remove button is clicked
@@ -32,6 +39,8 @@ export class CatalogBrowserLayerComponent {
     layer: CatalogItemLayer;
   }>();
 
+  @Output() addedLayerIsPreview = new EventEmitter<boolean>();
+
   /**
    * @internal
    */
@@ -44,12 +53,48 @@ export class CatalogBrowserLayerComponent {
 
   constructor() {}
 
+  ngOnInit(): void {
+    this.isInResolutionsRange();
+    this.isPreview$.subscribe(value =>
+      this.addedLayerIsPreview.emit(value)
+    );
+  }
+
+  /**
+   * On mouse event, mouseenter /mouseleave
+   * @internal
+   */
+  onMouseEvent(event) {
+    this.onToggleClick(event);
+  }
+
   /**
    * On toggle button click, emit the added change event
    * @internal
    */
-  onToggleClick() {
-    this.added ? this.remove() : this.add();
+  onToggleClick(event) {
+    switch (event.type) {
+        case 'click':
+            if (!this.isPreview$.value) {
+                this.remove();
+            }
+            this.isPreview$.next(!this.isPreview$.value);
+            break;
+        case 'mouseenter':
+            if (!this.isPreview$.value && !this.added) {
+                this.add();
+                this.isPreview$.next(true);
+            }
+            break;
+        case 'mouseleave':
+            if (this.isPreview$.value) {
+                this.remove();
+                this.isPreview$.next(false);
+            }
+            break;
+        default:
+            break;
+    }
   }
 
   /**
@@ -68,4 +113,20 @@ export class CatalogBrowserLayerComponent {
     this.addedChange.emit({added: false, layer: this.layer});
   }
 
+  isInResolutionsRange(): boolean {
+    const minResolution = this.layer.options.minResolution;
+    const maxResolution = this.layer.options.maxResolution;
+    this.inRange$.next(this.resolution >= minResolution && this.resolution <= maxResolution);
+    return this.inRange$.value;
+  }
+
+  computeTooltip(): string {
+    if (this.added) {
+      return this.isPreview$.value ? 'igo.geo.catalog.layer.addToMap' :
+      this.inRange$.value ? 'igo.geo.catalog.layer.removeFromMap' : 'igo.geo.catalog.layer.removeFromMapOutRange';
+    } else {
+      return this.inRange$.value ? 'igo.geo.catalog.layer.addToMap' : 'igo.geo.catalog.layer.addToMapOutRange';
+    }
+  }
+
 }

packages/geo/src/lib/catalog/catalog-browser/catalog-browser.component.html

@@ -5,6 +5,7 @@
         [catalog]="catalog"
         [group]="item"
         [state]="store.state"
+        [resolution]="resolution$ | async"
         [toggleCollapsed]="toggleCollapsedGroup"
         (addedChange)="onGroupAddedChange($event)"
         (layerAddedChange)="onLayerAddedChange($event)">
@@ -15,6 +16,7 @@
       <igo-catalog-browser-layer
         igoListItem
         [layer]="item"
+        [resolution]="resolution$ | async"
         [added]="store.state.get(item).added"
         (addedChange)="onLayerAddedChange($event)">
       </igo-catalog-browser-layer>

packages/geo/src/lib/catalog/catalog-browser/catalog-browser.component.ts

@@ -7,7 +7,7 @@ import {
   OnDestroy
 } from '@angular/core';
 
-import { zip } from 'rxjs';
+import { zip, BehaviorSubject } from 'rxjs';
 
 import { EntityStore, EntityStoreWatcher } from '@igo2/common';
 import { Layer } from '../../layer/shared/layers/layer';
@@ -37,6 +37,10 @@ export class CatalogBrowserComponent implements OnInit, OnDestroy {
    */
   private watcher: EntityStoreWatcher<CatalogItem>;
 
+ // private resolution$$: Subscription;
+
+  get resolution$(): BehaviorSubject<number> { return this.map.viewController.resolution$; }
+
   /**
    * Catalog
    */
@@ -81,6 +85,7 @@ export class CatalogBrowserComponent implements OnInit, OnDestroy {
       });
     }
     this.watcher = new EntityStoreWatcher(this.store, this.cdRef);
+
   }
 
   ngOnDestroy() {

packages/geo/src/lib/catalog/catalog-browser/catalog-browser.module.ts

@@ -3,13 +3,15 @@ import { CommonModule } from '@angular/common';
 
 import {
   MatTooltipModule,
+  MatBadgeModule,
   MatButtonModule,
   MatIconModule,
   MatListModule
 } from '@angular/material';
 
 import { IgoLanguageModule } from '@igo2/core';
 import {
+  IgoMatBadgeIconModule,
   IgoCollapsibleModule,
   IgoListModule
 } from '@igo2/common';
@@ -25,10 +27,12 @@ import { CatalogBrowserGroupComponent } from './catalog-browser-group.component'
 @NgModule({
   imports: [
     CommonModule,
+    MatBadgeModule,
     MatButtonModule,
     MatIconModule,
     MatListModule,
     MatTooltipModule,
+    IgoMatBadgeIconModule,
     IgoLanguageModule,
     IgoListModule,
     IgoCollapsibleModule,

packages/geo/src/lib/catalog/catalog.module.ts

@@ -3,20 +3,23 @@ import { CommonModule } from '@angular/common';
 import {
   MatIconModule,
   MatListModule,
-  MatTooltipModule
+  MatTooltipModule,
+  MatBadgeModule
 } from '@angular/material';
 
-import { IgoListModule, IgoCollapsibleModule } from '@igo2/common';
+import { IgoListModule, IgoCollapsibleModule, IgoMatBadgeIconModule } from '@igo2/common';
 
 import { IgoCatalogBrowserModule } from './catalog-browser/catalog-browser.module';
 import { IgoCatalogLibraryModule } from './catalog-library/catalog-library.module';
 
 @NgModule({
   imports: [
     CommonModule,
+    MatBadgeModule,
     MatIconModule,
     MatListModule,
     MatTooltipModule,
+    IgoMatBadgeIconModule,
     IgoListModule,
     IgoCollapsibleModule
   ],