feat(search-result-tool) Add a warning icon/tooltip if the selected r…

…esult is out of the current view. (#754)

packages/integration/src/lib/search/search-results-tool/search-results-tool.component.html

@@ -51,12 +51,19 @@ <h4><strong>{{ 'igo.integration.searchResultsTool.noResults' | translate }}</str
       </button>
 
       <button
+        *ngIf="feature.geometry"
         mat-icon-button
         panelRightButton
         class="igo-icon-button"
-        (click)="zoomToFeatureExtent()"
-        *ngIf="feature.geometry">
-        <mat-icon svgIcon="magnify-plus-outline"></mat-icon>
+        [matTooltip]="((isSelectedResultOutOfView$ | async) ? 'igo.integration.searchResultsTool.zoomOnFeatureTooltipOutOfView' : 'igo.integration.searchResultsTool.zoomOnFeatureTooltip') | translate"
+        matTooltipShowDelay="500"
+        (click)="zoomToFeatureExtent()">
+        <mat-icon
+        [matBadge]="(isSelectedResultOutOfView$ | async) ? '!' : ''"
+        matBadgeColor="accent"
+        matBadgeSize="small"
+        [matBadgeHidden]="!(isSelectedResultOutOfView$ | async)"     
+        svgIcon="magnify-plus-outline"></mat-icon>
       </button>
 
       <igo-feature-details

packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts

@@ -1,6 +1,6 @@
 import { Component, ChangeDetectionStrategy, Input, OnInit, ElementRef, OnDestroy } from '@angular/core';
 import { Observable, BehaviorSubject, Subscription, combineLatest } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { debounceTime, map } from 'rxjs/operators';
 import olFormatGeoJSON from 'ol/format/GeoJSON';
 import olFeature from 'ol/Feature';
 import olPoint from 'ol/geom/Point';
@@ -29,7 +29,9 @@ import {
   featureToOl,
   featureFromOl,
   getSelectedMarkerStyle,
-  createOverlayMarkerStyle
+  createOverlayMarkerStyle,
+  computeOlFeaturesExtent,
+  featuresAreOutOfView
 } from '@igo2/geo';
 
 import { MapState } from '../../map/map.state';
@@ -62,6 +64,8 @@ export class SearchResultsToolComponent implements OnInit, OnDestroy {
   private focusedOrResolution$$: Subscription;
   private selectedOrResolution$$: Subscription;
   private focusedResult$: BehaviorSubject<SearchResult> = new BehaviorSubject(undefined);
+  public isSelectedResultOutOfView$ = new BehaviorSubject(false);
+  private isSelectedResultOutOfView$$: Subscription;
   private abstractFocusedResult: Feature;
   private abstractSelectedResult: Feature;
 
@@ -171,8 +175,26 @@ export class SearchResultsToolComponent implements OnInit, OnDestroy {
         this.searchState.selectedResult$,
         this.map.viewController.resolution$
       ]).subscribe((bunch: [SearchResult<Feature>, number]) => this.buildResultEmphasis(bunch[0], 'selected'));
-
     }
+    this.monitorResultOutOfView();
+  }
+
+  private monitorResultOutOfView() {
+    this.isSelectedResultOutOfView$$ = combineLatest([
+      this.map.viewController.state$,
+      this.searchState.selectedResult$
+    ])
+    .pipe(debounceTime(100))
+    .subscribe((bunch) => {
+      const selectedResult = bunch[1] as SearchResult<Feature>;
+      if (!selectedResult) {
+        this.isSelectedResultOutOfView$.next(false);
+        return;
+      }
+      const selectedOlFeature = featureToOl(selectedResult.data, this.map.projection);
+      const selectedOlFeatureExtent = computeOlFeaturesExtent(this.map, [selectedOlFeature]);
+      this.isSelectedResultOutOfView$.next(featuresAreOutOfView(this.map, selectedOlFeatureExtent));
+    });
   }
 
   private buildResultEmphasis(
@@ -229,6 +251,9 @@ export class SearchResultsToolComponent implements OnInit, OnDestroy {
     if (this.focusedOrResolution$$) {
       this.focusedOrResolution$$.unsubscribe();
     }
+    if (this.isSelectedResultOutOfView$$) {
+      this.isSelectedResultOutOfView$$.unsubscribe();
+    }
   }
 
   /**

packages/integration/src/lib/search/search-results-tool/search-results-tool.module.ts

@@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common';
 
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { IgoLanguageModule } from '@igo2/core';
 import { IgoFlexibleModule, IgoCustomHtmlModule, IgoPanelModule } from '@igo2/common';
@@ -21,6 +23,8 @@ import { SearchResultsToolComponent } from './search-results-tool.component';
   imports: [
     CommonModule,
     MatIconModule,
+    MatBadgeModule,
+    MatTooltipModule,
     MatButtonModule,
     IgoLanguageModule,
     IgoFeatureModule,

packages/integration/src/locale/en.integration.json

@@ -21,7 +21,9 @@
       "searchResultsTool": {
         "noResults": "No results",
         "doSearch": "Do a search in the search bar.",
-        "examples": "You can use keywords to refine your search. Examples: <ul><li>#mun québec</li><li>#sante Lévis</li><li>#cpe joyeux</li></ul>"
+        "examples": "You can use keywords to refine your search. Examples: <ul><li>#mun québec</li><li>#sante Lévis</li><li>#cpe joyeux</li></ul>",
+        "zoomOnFeatureTooltip": "Zoom on selected feature.",
+        "zoomOnFeatureTooltipOutOfView": "The feature is out of view. Zoom on selected feature."
       },
       "about.html": "<style>#about .bold_class{font-weight: bold;}#about .red{color: red;}#about .tool_name{border-top: 1px solid; padding-top: 10px;}#about .titre_outil{font-weight: bold; font-size: 18px; padding-bottom: 8px;}#about .subtitle{font-size: 20px; padding-bottom: 10px;}#about .align_right{text-align: right;}#about .describe{text-align: justify;}#about a img{color: black; text-decoration: none;}</style><body> <div id='about'> <div class='bold_class subtitle'>Features overview</div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'> </path> </svg></mat-icon> Search Results </div><div class='describe'>Located in the upper left portion of the interface, the search bar allows you to locate yourself using an address, location or GPS coordinates. The tool can also be used to search for a layer. </div></div><br><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'></path> </svg></mat-icon> Contexts </div><div class='describe'> Visualize groupings of layers made by theme or by work context. When you select a <span class='bold_class'>Context</span>, you will find in <span class='bold_class'>Map</span> each of the layers it contains. You can add other layers to it from the <span class='bold_class'>Catalog</span> or the <span class='bold_class'>Search</span> tool. <br><div class='red'> <span class='bold_class'>WARNING :</span> If you select another <span class='bold_class'>Context</span>, all the layers displayed in the <span class='bold_class'>Map</span> will be replaced. </div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M15,19L9,16.89V5L15,7.11M20.5,3C20.44,3 20.39,3 20.34,3L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21C3.55,21 3.61,21 3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z'> </path> </svg></mat-icon> Map </div><div class='describe'>Personalize your map using the <span class='bold_class'>Catalog</span> or the <span class='bold_class'>Search</span> tool. This space allows you to add, delete and interrogate layers.</div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M1.39,18.36L3.16,16.6L4.58,18L5.64,16.95L4.22,15.54L5.64,14.12L8.11,16.6L9.17,15.54L6.7,13.06L8.11,11.65L9.53,13.06L10.59,12L9.17,10.59L10.59,9.17L13.06,11.65L14.12,10.59L11.65,8.11L13.06,6.7L14.47,8.11L15.54,7.05L14.12,5.64L15.54,4.22L18,6.7L19.07,5.64L16.6,3.16L18.36,1.39L22.61,5.64L5.64,22.61L1.39,18.36Z'> </path> </svg></mat-icon> Measure </div><div class='describe'>Measure distances or areas on the map.</div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M14,14.5V12H10V15H8V11A1,1 0 0,1 9,10H14V7.5L17.5,11M21.71,11.29L12.71,2.29H12.7C12.31,1.9 11.68,1.9 11.29,2.29L2.29,11.29C1.9,11.68 1.9,12.32 2.29,12.71L11.29,21.71C11.68,22.09 12.31,22.1 12.71,21.71L21.71,12.71C22.1,12.32 22.1,11.68 21.71,11.29Z'> </path> </svg></mat-icon> Directions </div><div class='describe'> Build a route between two points (by placing the two points on the map or by looking for addresses). You can then add intermediate points, copy the description of the route to the clipboard or share the link.</div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z'></path> </svg></mat-icon> Catalog </div><div class='describe'> Find all the layers that can be added to the <span class='bold_class'>Map</span>. Click on the desired layer to add it. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M14,17H18V14L23,18.5L18,23V20H14V17M13,9H18.5L13,3.5V9M6,2H14L20,8V12.34C19.37,12.12 18.7,12 18,12A6,6 0 0,0 12,18C12,19.54 12.58,20.94 13.53,22H6C4.89,22 4,21.1 4,20V4A2,2 0 0,1 6,2Z'></path> </svg></mat-icon> Import & export </div><div class='describe'> Import or export a layer with a specific projection. You can also save or reload a context. It allows you to save contexts as anonymous. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M18,3H6V7H18M19,12A1,1 0 0,1 18,11A1,1 0 0,1 19,10A1,1 0 0,1 20,11A1,1 0 0,1 19,12M16,19H8V14H16M19,8H5A3,3 0 0,0 2,11V17H6V21H18V17H22V11A3,3 0 0,0 19,8Z'></path> </svg></mat-icon> Print </div><div class='describe'>Print the map displayed on the screen. </div><br></div><div class='tool_name'> <div class='titre_outil'> <mat-icon class='mat-icon'> <svg viewBox='0 0 24 24' fit='' height='100%' width='100%' preserveAspectRatio='xMidYMid meet' focusable='false'> <path d='M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z'> </path> </svg></mat-icon> Share </div><div class='describe'> Create a URL that redirects to an exact representation of your map on the screen. This link can be shared or distributed in a document and allows you to \"save\" your map for later use. </div><br></div><div class='tool_name'> <p> <a href='http://igouverte.org/' target='_blank'><img src='./assets/igo2/core/logo.png' alt='IGO' height=32>IGO2</a> is a free web solution in geomatics, developed in collaborative mode by specialists from several departments and agencies of the government of Quebec. <p> Version :{{version.lib}}</p></div>",
       "mapTool": {