PAB profile graph: enable resetZoom button only when zoom changed; add "title" to graph buttons

src/app/components/pab-profile-graph/pab-profile-graph.component.html

 <div class="graph-results-container" #graphProfile fxLayout="row wrap" fxLayoutAlign="center center">
     <div fxFlex="1 1 100%">
         <div class="graph-profile-buttons">
-            <button mat-icon-button (click)="resetZoom()">
+            <button mat-icon-button (click)="resetZoom()" [disabled]="! zoomWasChanged" [title]="uitextResetZoomTitle">
                 <mat-icon color="primary">replay</mat-icon>
             </button>
-            <button mat-icon-button (click)="exportAsImage(graphProfile)">
+            <button mat-icon-button (click)="exportAsImage(graphProfile)" [title]="uitextExportImageTitle">
                 <mat-icon color="primary">image</mat-icon>
             </button>
-            <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(graphProfile)">
+            <button mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(graphProfile)" [title]="uitextEnterFSTitle">
                 <mat-icon color="primary" class="scaled12">fullscreen</mat-icon>
             </button>
-            <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()">
+            <button mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()" [title]="uitextExitFSTitle">
                 <mat-icon color="primary" class="scaled12">fullscreen_exit</mat-icon>
             </button>
         </div>

src/app/components/pab-profile-graph/pab-profile-graph.component.scss

@@ -19,5 +19,11 @@
                 transform: scale(1.2);
             }
         }
+
+        &:disabled {
+            mat-icon {
+                color: #bfbfbf;
+            }
+        }
     }
 }

src/app/components/pab-profile-graph/pab-profile-graph.component.ts

-import { Component, ViewChild } from "@angular/core";
+import { Component, ViewChild, ChangeDetectorRef } from "@angular/core";
 
 import { ChartComponent } from "angular2-chartjs";
 
@@ -27,6 +27,8 @@ export class PabProfileGraphComponent extends ResultsComponent {
     /** inferred extended values list for each variating parameter */
     private varValues = [];
 
+    private _zoomWasChanged = false;
+
     /*
      * config du graphe
      */
@@ -55,7 +57,8 @@ export class PabProfileGraphComponent extends ResultsComponent {
 
     public constructor(
         private appSetupService: ApplicationSetupService,
-        private intlService: I18nService
+        private intlService: I18nService,
+        private cd: ChangeDetectorRef
     ) {
         super();
         const nDigits = this.appSetupService.displayDigits;
@@ -85,6 +88,7 @@ export class PabProfileGraphComponent extends ResultsComponent {
             }]
         };
         // enable zoom and pan (using "chartjs-plugin-zoom" package)
+        const that = this;
         this.graph_options["plugins"] = {
             zoom: {
                 pan: {
@@ -96,7 +100,8 @@ export class PabProfileGraphComponent extends ResultsComponent {
                     drag: true, // conflicts with pan; set to false to enable mouse wheel zoom
                     mode: "xy",
                     // percentage of zoom on a wheel event
-                    speed: 0.1,
+                    // speed: 0.1,
+                    onZoomComplete: function(t: any) { return function() { t.zoomComplete(); }; }(that)
                 }
             }
         };
@@ -130,6 +135,16 @@ export class PabProfileGraphComponent extends ResultsComponent {
         }
     }
 
+    private zoomComplete() {
+        console.log("zoom complete du Q !");
+        this._zoomWasChanged = true;
+        this.cd.detectChanges();
+    }
+
+    public get zoomWasChanged(): boolean {
+        return this._zoomWasChanged;
+    }
+
     public updateView() {
         this.generateScatterGraph();
     }
@@ -193,6 +208,23 @@ export class PabProfileGraphComponent extends ResultsComponent {
 
     public resetZoom() {
         this.chartComponent.chart.resetZoom();
+        this._zoomWasChanged = false;
+    }
+
+    public get uitextResetZoomTitle() {
+        return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_RESET_ZOOM");
+    }
+
+    public get uitextExportImageTitle() {
+        return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_EXPORT_IMAGE");
+    }
+
+    public get uitextEnterFSTitle() {
+        return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_ENTER_FS");
+    }
+
+    public get uitextExitFSTitle() {
+        return this.intlService.localizeText("INFO_GRAPH_BUTTON_TITLE_EXIT_FS");
     }
 
     private getXSeries(): string[] {

src/locale/messages.en.json

@@ -101,6 +101,10 @@
     "INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_1": "Partially submerged",
     "INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_2": "Submerged",
     "INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_3": "Zero flow",
+    "INFO_GRAPH_BUTTON_TITLE_RESET_ZOOM": "Restore default zoom",
+    "INFO_GRAPH_BUTTON_TITLE_EXPORT_IMAGE": "Save picture",
+    "INFO_GRAPH_BUTTON_TITLE_ENTER_FS": "Display fullscreen",
+    "INFO_GRAPH_BUTTON_TITLE_EXIT_FS": "Exis fullscreen mode",
     "INFO_DEVICE_ADDED": "1 device added",
     "INFO_DEVICE_ADDED_N_TIMES": "%s devices added",
     "INFO_DEVICE_COPIED": "Device #%s copied",

src/locale/messages.fr.json

@@ -101,6 +101,10 @@
     "INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_1": "Partiellement noyé",
     "INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_2": "Noyé",
     "INFO_EXTRARES_ENUM_STRUCTUREFLOWREGIME_3": "Débit nul",
+    "INFO_GRAPH_BUTTON_TITLE_RESET_ZOOM": "Réinitialiser le zoom",
+    "INFO_GRAPH_BUTTON_TITLE_EXPORT_IMAGE": "Enregistrer l'image",
+    "INFO_GRAPH_BUTTON_TITLE_ENTER_FS": "Afficher en plein écran",
+    "INFO_GRAPH_BUTTON_TITLE_EXIT_FS": "Sortir du mode plein écran",
     "INFO_DEVICE_ADDED": "1 ouvrage ajouté",
     "INFO_DEVICE_ADDED_N_TIMES": "%s ouvrages ajoutés",
     "INFO_DEVICE_COPIED": "Ouvrage n°%s copié",