Merge pull request #599 from GNS3/Screenshot-SVG-image-issue

Screenshot SVG image issue

package.json

@@ -65,12 +65,14 @@
     "ini": "^1.3.5",
     "material-design-icons": "^3.0.1",
     "ng2-file-upload": "^1.3.0",
+    "ngx-device-detector": "^1.3.16",
     "ngx-electron": "^2.1.1",
     "node-fetch": "^2.6.0",
     "notosans-fontface": "^1.1.0",
     "raven-js": "^3.27.2",
     "rxjs": "^6.5.3",
     "rxjs-compat": "^6.5.3",
+    "save-html-as-image": "^1.2.0",
     "save-svg-as-png": "^1.4.14",
     "svg-crowbar": "^0.2.4",
     "tree-kill": "^1.2.1",
@@ -118,4 +120,4 @@
       "typescript"
     ]
   }
-}
+}

src/app/app.module.ts

@@ -249,6 +249,7 @@ import { PageNotFoundComponent } from './components/page-not-found/page-not-foun
 import { AlignHorizontallyActionComponent } from './components/project-map/context-menu/actions/align-horizontally/align-horizontally.component';
 import { AlignVerticallyActionComponent } from './components/project-map/context-menu/actions/align_vertically/align-vertically.component';
 import { ConfirmationBottomSheetComponent } from './components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component';
+import { DeviceDetectorModule } from 'ngx-device-detector';
 import { ConfigDialogComponent } from './components/project-map/context-menu/dialogs/config-dialog/config-dialog.component';
 
 if (environment.production) {
@@ -441,7 +442,8 @@ if (environment.production) {
     ResizableModule,
     DragAndDropModule,
     DragDropModule,
-    MATERIAL_IMPORTS
+    MATERIAL_IMPORTS,
+    DeviceDetectorModule.forRoot()
   ],
   providers: [
     SettingsService,

src/app/cartography/components/d3-map/d3-map.component.html

@@ -1,4 +1,4 @@
-<svg #svg class="map" preserveAspectRatio="none" movingCanvas zoomingCanvas>
+<svg id="map" #svg class="map" preserveAspectRatio="none" movingCanvas zoomingCanvas>
   <filter id="grayscale"><feColorMatrix id="feGrayscale" type="saturate" values="0" /></filter>
   <defs>
     <pattern id="gridDrawing" attr.width="{{project.drawing_grid_size}}" attr.height="{{project.drawing_grid_size}}" patternUnits="userSpaceOnUse">

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

@@ -11,6 +11,7 @@ import downloadSvg from 'svg-crowbar';
 import { ElectronService } from 'ngx-electron';
 import { MatDialog } from '@angular/material';
 import { ScreenshotDialogComponent, Screenshot } from '../screenshot-dialog/screenshot-dialog.component';
+import { saveAsPng, saveAsJpeg } from 'save-html-as-image';
 
 
 @Component({

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

@@ -1,9 +1,9 @@
 <h1 mat-dialog-title>Take a screenshot</h1>
 
-<!-- <mat-radio-group class="radio-group" aria-label="Sorting">
+<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> -->
+</mat-radio-group>
 
 <form [formGroup]="nameForm" class="name-form">
   <mat-form-field class="name-form">

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

@@ -3,6 +3,7 @@ import { MatDialogRef } from '@angular/material';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { ToasterService } from '../../../services/toaster.service';
 import { ElectronService } from 'ngx-electron';
+import { DeviceDetectorService } from 'ngx-device-detector';
 
 
 @Component({
@@ -19,13 +20,13 @@ export class ScreenshotDialogComponent implements OnInit {
     public dialogRef: MatDialogRef<ScreenshotDialogComponent>,
     private toasterService: ToasterService,
     private formBuilder: FormBuilder,
-    private electronService: ElectronService
+    private electronService: ElectronService,
+    private deviceService: DeviceDetectorService
   ) {
     this.nameForm = this.formBuilder.group({
       screenshotName: new FormControl(null, [Validators.required])
     });
-
-    this.isPngAvailable = this.electronService.isWindows;
+    this.isPngAvailable = this.electronService.isWindows || (this.deviceService.getDeviceInfo().os==='Windows');
   }
 
   ngOnInit() {}