From b0b2c0718eac8cf4da499e15d5a25b1181859b77 Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Tue, 8 Oct 2019 05:21:35 -0700 Subject: [PATCH] Dialog for screenshots introduced --- src/app/app.module.ts | 7 +- .../project-map-menu.component.ts | 60 +++++----------- .../screenshot-dialog.component.html | 30 ++++++++ .../screenshot-dialog.component.scss | 8 +++ .../screenshot-dialog.component.ts | 69 +++++++++++++++++++ 5 files changed, 129 insertions(+), 45 deletions(-) create mode 100644 src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.html create mode 100644 src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.scss create mode 100644 src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4641877b..fb25fe9a 100644 --- a/src/app/app.module.ts +++ b/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] }) diff --git a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts index d97d38c5..49964269 100644 --- a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts +++ b/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': diff --git a/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.html b/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.html new file mode 100644 index 00000000..c3bd3f57 --- /dev/null +++ b/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.html @@ -0,0 +1,30 @@ +

Take a screenshot

+ + + SVG + PNG + + +
+ + + Name for screenshot is required + Entered name is incorrect + + +
+ + +
+
diff --git a/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.scss b/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.scss new file mode 100644 index 00000000..bde5436e --- /dev/null +++ b/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; +} diff --git a/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts b/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts new file mode 100644 index 00000000..aeb181cc --- /dev/null +++ b/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, + 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; +}