Merge pull request #4 from FZJ-INM1-BDA/dev_resolve_screenshot_bug

Resolve screenshot taking background

src/ui/signinBanner/signinBanner.components.ts

-import {ChangeDetectionStrategy, Component, Input, TemplateRef } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  TemplateRef,
+  ViewChild
+} from "@angular/core";
 import { MatBottomSheet, MatDialog, MatDialogRef } from "@angular/material";
 import { select, Store } from "@ngrx/store";
 import { Observable } from "rxjs";
@@ -21,18 +29,22 @@ export class SigninBanner {
   @Input() public darktheme: boolean
   @Input() public parcellationIsSelected: boolean
 
+  @ViewChild('takeScreenshotElement', {read: ElementRef}) takeScreenshotElement: ElementRef
+
   public user$: Observable<IUser>
   public userBtnTooltip$: Observable<string>
   public favDataEntries$: Observable<IDataEntry[]>
 
   public pluginTooltipText: string = `Plugins and Tools`
   public screenshotTooltipText: string = 'Take screenshot'
+  public takingScreenshot: boolean = false
 
   constructor(
     private store$: Store<IavRootStoreInterface>,
     private authService: AuthService,
     private dialog: MatDialog,
     public bottomSheet: MatBottomSheet,
+    private changeDetectionRef: ChangeDetectorRef,
   ) {
     this.user$ = this.authService.user$
 
@@ -60,6 +72,11 @@ export class SigninBanner {
     }
   }
 
+  disableScreenshotTaking() {
+    this.takingScreenshot = false
+    this.changeDetectionRef.detectChanges()
+  }
+
   private keyListenerConfigBase = {
     type: 'keydown',
     stop: true,

src/ui/signinBanner/signinBanner.template.html

@@ -51,7 +51,7 @@
 <mat-menu #pluginDropdownMenu>
   <button mat-menu-item
     [disabled]="!parcellationIsSelected"
-    (click)="takeScreenshotElement.startScreenshot()"
+    (click)="takingScreenshot = true;"
     [matTooltip]="screenshotTooltipText">
     <mat-icon fontSet="fas" fontIcon="fa-camera">
     </mat-icon>
@@ -126,15 +126,15 @@
   </mat-dialog-actions>
 </ng-template>
 
-<ng-template #settingTemplate>	
-  <h2 mat-dialog-title>Settings</h2>	
-  <mat-dialog-content>	
-    <!-- required to avoid showing an ugly vertical scroll bar -->	
-    <!-- TODO investigate why, then remove the friller class -->	
-    <config-component class="mb-4 d-block">	
-    </config-component>	
-  </mat-dialog-content>	
-</ng-template> 
+<ng-template #settingTemplate>
+  <h2 mat-dialog-title>Settings</h2>
+  <mat-dialog-content>
+    <!-- required to avoid showing an ugly vertical scroll bar -->
+    <!-- TODO investigate why, then remove the friller class -->
+    <config-component class="mb-4 d-block">
+    </config-component>
+  </mat-dialog-content>
+</ng-template>
 
 <!-- saved dataset tmpl -->
 
@@ -172,5 +172,8 @@
 
 <take-screenshot
   #takeScreenshotElement
-  class="position-fixed fixed-top">
+  *ngIf="takingScreenshot"
+  class="position-fixed fixed-top"
+  (screenshotTaking)="disableScreenshotTaking()"
+  (resetScreenshot)="$event? takingScreenshot = true : disableScreenshotTaking()">
 </take-screenshot>

src/ui/takeScreenshot/takeScreenshot.component.ts

@@ -2,10 +2,10 @@ import {DOCUMENT} from "@angular/common";
 import {
   ChangeDetectorRef,
   Component,
-  ElementRef,
+  ElementRef, EventEmitter,
   HostListener,
-  Inject,
-  OnInit,
+  Inject, OnDestroy,
+  OnInit, Output,
   Renderer2,
   TemplateRef,
   ViewChild,
@@ -19,11 +19,21 @@ import html2canvas from "html2canvas";
   styleUrls: ['./takeScreenshot.style.css'],
 })
 
-export class TakeScreenshotComponent implements OnInit {
+export class TakeScreenshotComponent implements OnInit, OnDestroy {
+
+  ngOnDestroy(): void {
+    if (this.resettingScreenshotTaking) this.resetScreenshot.emit(true)
+    this.resettingScreenshotTaking = false
+  }
 
     @ViewChild('screenshotPreviewCard', {read: ElementRef}) public screenshotPreviewCard: ElementRef
     @ViewChild('previewImageDialog', {read: TemplateRef}) public previewImageDialogTemplateRef: TemplateRef<any>
 
+    @Output() screenshotTaking: EventEmitter<boolean> = new EventEmitter<boolean>()
+    @Output() resetScreenshot: EventEmitter<boolean> = new EventEmitter<boolean>()
+
+    private resettingScreenshotTaking: boolean = false
+
     private dialogRef: MatDialogRef<any>
 
     public takingScreenshot: boolean = false
@@ -67,6 +77,9 @@ export class TakeScreenshotComponent implements OnInit {
     public ngOnInit(): void {
       this.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
       this.windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+
+      this.startScreenshot()
+
     }
 
     @HostListener('window:resize', ['$event'])
@@ -201,6 +214,7 @@ export class TakeScreenshotComponent implements OnInit {
         .then(result => {
           switch (result) {
           case 'again': {
+            this.restartScreenshot()
             this.startScreenshot()
             this.cdr.markForCheck()
             break
@@ -241,12 +255,15 @@ export class TakeScreenshotComponent implements OnInit {
       })
     }
 
+    public restartScreenshot() {
+      this.resettingScreenshotTaking = true
+      this.resetScreenshot.emit(false)
+    }
+
     public cancelTakingScreenshot() {
-      this.takingScreenshot = false
-      this.previewingScreenshot = false
-      this.loadingScreenshot = false
-      this.croppedCanvas = null
+      this.screenshotTaking.emit(false)
     }
+
     public clearStateAfterScreenshot() {
       this.mouseIsDown = false
       this.isDragging = false

src/ui/takeScreenshot/takeScreenshot.template.html

-<div class="screenshotContainer overflow-hidden w-100 h-100"
+<div class="screenshotContainer overflow-hidden w-50 h-50"
     (mousemove)="move($event)"
     (mousedown)="mouseDown($event)"
     (mouseup)="mouseUp($event)"