Dialog for screenshots introduced

src/app/app.module.ts

@@ -240,6 +240,7 @@ import { PacketCaptureService } from './services/packet-capture.service';
 import { StartCaptureOnStartedLinkActionComponent } from './components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component';
 import { LockActionComponent } from './components/project-map/context-menu/actions/lock-action/lock-action.component';
 import { NavigationDialogComponent } from './components/projects/navigation-dialog/navigation-dialog.component';
+import { ScreenshotDialogComponent } from './components/project-map/screenshot-dialog/screenshot-dialog.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -405,7 +406,8 @@ if (environment.production) {
     ChooseNameDialogComponent,
     StartCaptureOnStartedLinkActionComponent,
     LockActionComponent,
-    NavigationDialogComponent
+    NavigationDialogComponent,
+    ScreenshotDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -524,7 +526,8 @@ if (environment.production) {
     ConfiguratorDialogTracengComponent,
     QemuImageCreatorComponent,
     ChooseNameDialogComponent,
-    NavigationDialogComponent
+    NavigationDialogComponent,
+    ScreenshotDialogComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/project-map/project-map-menu/project-map-menu.component.ts

@@ -5,11 +5,12 @@ import { ToolsService } from '../../../services/tools.service';
 import { MapSettingsService } from '../../../services/mapsettings.service';
 import { DrawingService } from '../../../services/drawing.service';
 import * as svg from 'save-svg-as-png';
-import { saveAs } from 'file-saver';
 import { SymbolService } from '../../../services/symbol.service';
 import { select } from 'd3-selection';
 import downloadSvg from 'svg-crowbar';
 import { ElectronService } from 'ngx-electron';
+import { MatDialog } from '@angular/material';
+import { ScreenshotDialogComponent, Screenshot } from '../screenshot-dialog/screenshot-dialog.component';
 
 
 @Component({
@@ -35,13 +36,23 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
         private mapSettingsService: MapSettingsService,
         private drawingService: DrawingService,
         private symbolService: SymbolService,
-        private electronService: ElectronService
+        private dialog: MatDialog
     ) {}
 
     ngOnInit() {}
 
-    public async takeScreenshot() {
-        if (this.electronService.isWindows) {
+    public takeScreenshot() {
+        const dialogRef = this.dialog.open(ScreenshotDialogComponent, {
+            width: '400px',
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe((result: Screenshot) => {
+            if (result) this.saveImage(result);
+        });
+    }
+
+    private async saveImage(screenshotProperties: Screenshot) {
+        if (screenshotProperties.filetype === 'png') {
             let splittedSvg = document.getElementsByTagName("svg")[0].outerHTML.split('image');
             let i = 1;
 
@@ -60,53 +71,16 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
             placeholder.innerHTML = svgString;
             let element = placeholder.firstChild;
 
-            svg.saveSvgAsPng(element, "screenshot.png");
+            svg.saveSvgAsPng(element, `${screenshotProperties.name}.png`);
         } else {
             var svg_el = select("svg")
             .attr("version", 1.1)
             .attr("xmlns", "http://www.w3.org/2000/svg")
             .node();
-            downloadSvg(select("svg").node(), 'screenshot');
+            downloadSvg(select("svg").node(), `${screenshotProperties.name}`);
         }
-
-        // first alternative version
-        // var canvas = document.createElement('canvas');
-        // canvas.innerHTML = svgString;
-        // canvas.width = 2000;
-        // canvas.height = 1000;
-
-        // var a = document.createElement('a');
-        // a.download = "image.png";
-        // a.href = canvas.toDataURL('image/png');
-        // document.body.appendChild(a);
-        // a.click();
-
-        // second version
-        // this.svgString2Image( svgString, 2000, 1000, 'png'); // passes Blob and filesize String to the callback
     }
 
-    // svgString2Image( svgString, width, height, format) {
-    //     var format = format ? format : 'png';
-    
-    //     var imgsrc = 'data:image/svg+xml;base64,'+ btoa( unescape( encodeURIComponent( svgString ) ) ); // Convert SVG string to data URL
-    
-    //     var canvas = document.createElement("canvas");
-    //     var context = canvas.getContext("2d");
-    
-    //     canvas.width = width;
-    //     canvas.height = height;
-    
-    //     var image = new Image();
-    //     image.src = document.getElementsByTagName("svg")[0].outerHTML;
-    //     context.clearRect ( 0, 0, width, height );
-    //     context.drawImage(image, 0, 0, width, height);
-
-    //     canvas.toBlob((blob: any) => {
-    //         var filesize = Math.round( blob.length/1024 ) + ' KB';
-    //         saveAs( blob, 'D3 vis exported to PNG.png' );
-    //     });
-    // }
-
     public addDrawing(selectedObject: string) {
         switch (selectedObject) {
           case 'rectangle':

src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.html

@@ -0,0 +1,30 @@
+<h1 mat-dialog-title>Take a screenshot</h1>
+
+<mat-radio-group class="radio-group" aria-label="Sorting">
+    <mat-radio-button value="1" (click)="setFiletype('svg')" checked>SVG</mat-radio-button>
+    <mat-radio-button [disabled]="!isPngAvailable" value="2" (click)="setFiletype('png')">PNG</mat-radio-button>
+</mat-radio-group>
+
+<form [formGroup]="nameForm" class="name-form">
+  <mat-form-field class="name-form">
+    <input
+      matInput
+      (keydown)="onKeyDown($event)"
+      type="text"
+      formControlName="screenshotName"
+      [ngClass]="{ 'is-invalid': form.acreenshotName?.errors }"
+      placeholder="Please enter name"
+    />
+    <mat-error *ngIf="form.screenshotName?.touched && form.screenshotName?.errors && form.screenshotName?.errors.required"
+      >Name for screenshot is required</mat-error
+    >
+    <mat-error *ngIf="form.screenshotName?.touched && form.screenshotName?.errors && form.acreenshotName?.errors.invalidName"
+      >Entered name is incorrect</mat-error
+    >
+  </mat-form-field>
+
+  <div mat-dialog-actions>
+    <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
+    <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Take a screenshot</button>
+  </div>
+</form>

src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.scss

@@ -0,0 +1,8 @@
+.name-form {
+    width: 100%;
+}
+
+.radio-group {
+    display: flex;
+    justify-content: space-between;
+}

src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts

@@ -0,0 +1,69 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { ToasterService } from '../../../services/toaster.service';
+import { ElectronService } from 'ngx-electron';
+
+
+@Component({
+  selector: 'app-screenshot-dialog',
+  templateUrl: './screenshot-dialog.component.html',
+  styleUrls: ['./screenshot-dialog.component.scss']
+})
+export class ScreenshotDialogComponent implements OnInit {
+  nameForm: FormGroup;
+  isPngAvailable: boolean;
+  filetype: string = 'svg';
+
+  constructor(
+    public dialogRef: MatDialogRef<ScreenshotDialogComponent>,
+    private toasterService: ToasterService,
+    private formBuilder: FormBuilder,
+    private electronService: ElectronService
+  ) {
+    this.nameForm = this.formBuilder.group({
+      screenshotName: new FormControl(null, [Validators.required])
+    });
+
+    this.isPngAvailable = this.electronService.isWindows;
+  }
+
+  ngOnInit() {}
+
+  get form() {
+    return this.nameForm.controls;
+  }
+
+  onAddClick(): void {
+    if (this.nameForm.invalid) {
+        return;
+    }
+
+    let screenshotProperties: Screenshot = {
+        name: this.nameForm.get('screenshotName').value,
+        filetype: this.filetype
+    };
+    this.dialogRef.close(screenshotProperties);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onKeyDown(event) {
+    if (event.key === "Enter") {
+        this.onAddClick();
+    }
+  }
+
+  setFiletype(type: string) {
+    if (this.isPngAvailable) {
+        this.filetype = type;   
+    }
+  }
+}
+
+export class Screenshot {
+    name: string;
+    filetype: string;
+}