diff --git a/src/app/components/pab-profile-graph/pab-profile-graph.component.html b/src/app/components/pab-profile-graph/pab-profile-graph.component.html index 954f059c117f46d3597047255bd20959b77187c0..28b4288fd2bbf48bcedac4e7a4ed9375a2f91cc1 100644 --- a/src/app/components/pab-profile-graph/pab-profile-graph.component.html +++ b/src/app/components/pab-profile-graph/pab-profile-graph.component.html @@ -1,16 +1,16 @@ <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> diff --git a/src/app/components/pab-profile-graph/pab-profile-graph.component.scss b/src/app/components/pab-profile-graph/pab-profile-graph.component.scss index 6382f8a709f582892c2411aa07c1701793d52dad..465866a6ce03ef7eaa710c1e4545563c44d2e9dd 100644 --- a/src/app/components/pab-profile-graph/pab-profile-graph.component.scss +++ b/src/app/components/pab-profile-graph/pab-profile-graph.component.scss @@ -19,5 +19,11 @@ transform: scale(1.2); } } + + &:disabled { + mat-icon { + color: #bfbfbf; + } + } } } diff --git a/src/app/components/pab-profile-graph/pab-profile-graph.component.ts b/src/app/components/pab-profile-graph/pab-profile-graph.component.ts index 4eb60ec9a1bd2d94f30058610f5e28010f26f54d..9cc7da3ae52e07a8790230efcfb1e03d6483dfcf 100644 --- a/src/app/components/pab-profile-graph/pab-profile-graph.component.ts +++ b/src/app/components/pab-profile-graph/pab-profile-graph.component.ts @@ -1,4 +1,4 @@ -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[] { diff --git a/src/locale/messages.en.json b/src/locale/messages.en.json index 5e07c524b0066afc7574eb4724a182194b4b031c..1fce8bfcdaf8e786cedf0587d7ed2a18410e0617 100644 --- a/src/locale/messages.en.json +++ b/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", diff --git a/src/locale/messages.fr.json b/src/locale/messages.fr.json index 8b97db8956cb20751bdbfa803453555729462bce..1c4ace04cc51b24cf453797047f00db14128cc2e 100644 --- a/src/locale/messages.fr.json +++ b/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é",