Fix #430 - set PreBarrage schema fullscreen

src/app/components/pb-schema/pb-schema.component.html

@@ -6,46 +6,49 @@
 
 <mat-card-content>
 
-    <div id="pb-schema-toolbar">
-
-        <button type="button" id="add-basin" mat-raised-button color="accent" (click)="onAddBasinClick()">
-            {{ uitextAddBasin }}
-        </button>
-
-        <button type="button" id="add-wall" mat-raised-button color="accent" (click)="onAddWallClick()" [disabled]="! enableAddWallButton">
-            {{ uitextAddWall }}
-        </button>
-
-        <div class="hyd-window-btns">
-            <span class="related-entity-title">
-                {{ prefixedItemDescription }}
-            </span>
-            <button type="button" mat-icon-button color="primary" [disabled]="! enableCopyButton" (click)="onCopyClick()"
-              [title]="uitextCopy">
-                <mat-icon>content_copy</mat-icon>
-            </button>
-          |
-            <button type="button" mat-icon-button color="primary" [disabled]="! enableRemoveButton" (click)="onRemoveClick()"
-              [title]="uitextRemove">
-                <mat-icon>delete</mat-icon>
-            </button>
-            <button type="button" mat-icon-button [disabled]="! enableUpButton" (click)="onMoveBasinUpClick()" [title]="uitextMoveBasinUp">
-                <mat-icon>arrow_upward</mat-icon>
+    <div #pbSchemaContainer id="pb-schema-inner-container">
+        <div id="pb-schema-toolbar">
+
+            <button type="button" id="add-basin" mat-raised-button color="accent" (click)="onAddBasinClick()">
+                {{ uitextAddBasin }}
             </button>
-            <button type="button" mat-icon-button [disabled]="! enableDownButton" (click)="onMoveBasinDownClick()" [title]="uitextMoveBasinDown">
-                <mat-icon>arrow_downward</mat-icon>
+
+            <button type="button" id="add-wall" mat-raised-button color="accent" (click)="onAddWallClick()" [disabled]="! enableAddWallButton">
+                {{ uitextAddWall }}
             </button>
-            <!-- 
+
+            <div class="hyd-window-btns">
+                <span class="related-entity-title">
+                    {{ prefixedItemDescription }}
+                </span>
+                <button type="button" mat-icon-button color="primary" [disabled]="! enableCopyButton" (click)="onCopyClick()"
+                [title]="uitextCopy">
+                    <mat-icon>content_copy</mat-icon>
+                </button>
             |
-            <button type="button" mat-icon-button color="primary" (click)="exportAsSpreadsheet()"
-              [title]="uitextExportAsSpreadsheet">
-                <mat-icon color="primary">file_download</mat-icon>
-            </button> -->
+                <button type="button" mat-icon-button color="primary" [disabled]="! enableRemoveButton" (click)="onRemoveClick()"
+                [title]="uitextRemove">
+                    <mat-icon>delete</mat-icon>
+                </button>
+                <button type="button" mat-icon-button [disabled]="! enableUpButton" (click)="onMoveBasinUpClick()" [title]="uitextMoveBasinUp">
+                    <mat-icon>arrow_upward</mat-icon>
+                </button>
+                <button type="button" mat-icon-button [disabled]="! enableDownButton" (click)="onMoveBasinDownClick()" [title]="uitextMoveBasinDown">
+                    <mat-icon>arrow_downward</mat-icon>
+                </button>
+                |
+                <button type="button" mat-icon-button *ngIf="! isFullscreen" (click)="setFullscreen(pbSchemaContainer)" [title]="uitextEnterFSTitle">
+                    <mat-icon color="primary" class="scaled12">fullscreen</mat-icon>
+                </button>
+                <button type="button" mat-icon-button *ngIf="isFullscreen" (click)="exitFullscreen()" [title]="uitextExitFSTitle">
+                    <mat-icon color="primary" class="scaled12">fullscreen_exit</mat-icon>
+                </button>
+            </div>
         </div>
-    </div>
 
-    <div id="schema" #schema></div>
+        <div id="schema" #schema></div>
 
-    <pre id="debug">{{ graphDef }} </pre>
+        <pre id="debug">{{ graphDef }} </pre>
+    </div>
 
 </mat-card-content>

src/app/components/pb-schema/pb-schema.component.scss

@@ -74,6 +74,11 @@ mat-card-content {
     }
 }
 
+#pb-schema-inner-container {
+    background-color: white;
+    overflow-y: auto;
+}
+
 #debug {
     display: none;
 }

src/app/components/pb-schema/pb-schema.component.ts

 import { Component, Input, Output, EventEmitter, OnInit, AfterViewInit, ViewChild, Inject, forwardRef, AfterContentInit } from "@angular/core";
 import { MatDialog } from "@angular/material/dialog";
 
+import * as screenfull from "screenfull";
+import { Screenfull } from "screenfull"; // @see https://github.com/sindresorhus/screenfull.js/issues/126#issuecomment-488796645
+
 import {
     PreBarrage, PbBassin, PbBassinParams, PbCloison, Observer, IObservable
  } from "jalhyd";
@@ -72,6 +75,33 @@ export class PbSchemaComponent implements AfterViewInit, AfterContentInit, OnIni
         this.hotkeysService.add(new Hotkey("del", AppComponent.onHotkey(this.removeOnHotkey, this)));
     }
 
+    /** tracks the fullscreen state */
+    public get isFullscreen() {
+        const sf = <Screenfull>screenfull;
+        if (sf.isEnabled) {
+            return sf.isFullscreen;
+        }
+    }
+
+    public async setFullscreen(element): Promise<void> {
+        const sf = <Screenfull>screenfull;
+        if (sf.isEnabled) {
+            await sf.request(element);
+            this.fullscreenChange(true);
+        }
+    }
+
+    public async exitFullscreen(): Promise<void> {
+        const sf = <Screenfull>screenfull;
+        if (sf.isEnabled) {
+            await sf.exit();
+            this.fullscreenChange(false);
+        }
+    }
+
+    /** called when fullscreen state changes */
+    public fullscreenChange(isFullscreen: boolean) { }
+
     public get selectedItem(): any {
         return this._selectedItem;
     }
@@ -239,6 +269,8 @@ export class PbSchemaComponent implements AfterViewInit, AfterContentInit, OnIni
         this.nodeSelected.emit({
             node: this._selectedItem
         });
+        // exit fullscreen
+        this.exitFullscreen();
     }
 
     // for debug only
@@ -513,6 +545,14 @@ export class PbSchemaComponent implements AfterViewInit, AfterContentInit, OnIni
         return this.i18nService.localizeText("INFO_PB_MOVE_BASIN_DOWN");
     }
 
+    public get uitextEnterFSTitle() {
+        return this.i18nService.localizeText("INFO_CHART_BUTTON_TITLE_ENTER_FS");
+    }
+
+    public get uitextExitFSTitle() {
+        return this.i18nService.localizeText("INFO_CHART_BUTTON_TITLE_EXIT_FS");
+    }
+
     /**
      * Returns true if given basin is either connected to nothing, or only to
      * river upstream or downstream