Merge pull request #495 from GNS3/screenshot-of-map

Ability to take screenshot of map

package.json

@@ -67,6 +67,7 @@
     "raven-js": "^3.27.2",
     "rxjs": "^6.5.2",
     "rxjs-compat": "^6.5.2",
+    "save-svg-as-png": "^1.4.14",
     "tree-kill": "^1.2.1",
     "typeface-roboto": "^0.0.75",
     "xterm": "^3.14.5",

src/app/components/preferences/common/symbols/symbols.component.spec.ts

@@ -14,6 +14,10 @@ export class MockedSymbolService {
     public list() {
       return of([]);
     }
+
+    public raw() {
+      return of('<svg></svg>')
+    }
 }
 
 describe('Symbols component', () => {

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

@@ -57,6 +57,14 @@
     (click)="changeLockValue()">
     <mat-icon>lock</mat-icon>
 </button>
+<button
+    matTooltip="Take a screenshot"
+    mat-icon-button
+    class="menu-button"
+    (click)="takeScreenshot()"
+    >
+    <mat-icon>photo_camera</mat-icon>
+</button>
 <app-drawing-added
   [server]="server"
   [project]="project"

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

@@ -10,12 +10,15 @@ import { ToolsService } from '../../../services/tools.service';
 import { D3MapComponent } from '../../../cartography/components/d3-map/d3-map.component';
 import { ANGULAR_MAP_DECLARATIONS } from '../../../cartography/angular-map.imports';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { SymbolService } from '../../../services/symbol.service';
+import { MockedSymbolService } from '../../preferences/common/symbols/symbols.component.spec';
 
 describe('ProjectMapMenuComponent', () => {
     let component: ProjectMapMenuComponent;
     let fixture: ComponentFixture<ProjectMapMenuComponent>;
     let drawingService = new MockedDrawingService();
     let mapSettingService = new MapSettingsService();
+    let mockedSymbolService = new MockedSymbolService;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -23,7 +26,8 @@ describe('ProjectMapMenuComponent', () => {
             providers: [
               { provide: DrawingService, useValue: drawingService },
               { provide: ToolsService },
-              { provide: MapSettingsService, useValue: mapSettingService }
+              { provide: MapSettingsService, useValue: mapSettingService },
+              { provide: SymbolService, useValue: mockedSymbolService}
             ],
             declarations: [ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
             schemas: [NO_ERRORS_SCHEMA]

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

@@ -4,6 +4,8 @@ import { Server } from '../../../models/server';
 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 { SymbolService } from '../../../services/symbol.service';
 
 
 @Component({
@@ -27,11 +29,34 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
     constructor(
         private toolsService: ToolsService,
         private mapSettingsService: MapSettingsService,
-        private drawingService: DrawingService
+        private drawingService: DrawingService,
+        private symbolService: SymbolService
     ) {}
 
     ngOnInit() {}
 
+    public async takeScreenshot() {
+        let splittedSvg = document.getElementsByTagName("svg")[0].outerHTML.split('image');
+        let i = 1;
+
+        while (i < splittedSvg.length) {
+            let splittedImage = splittedSvg[i].split("\"");
+            let splittedUrl = splittedImage[1].split("/");
+
+            let elem = await this.symbolService.raw(this.server, splittedUrl[7]).toPromise(); 
+            let splittedElement = elem.split('-->');
+            splittedSvg[i] = splittedElement[1].substring(2);
+            i += 2;
+        }
+        let svgString = splittedSvg.join();
+
+        let placeholder = document.createElement('div');
+        placeholder.innerHTML = svgString;
+        let element = placeholder.firstChild;
+
+        svg.saveSvgAsPng(element, "screenshot.png");
+    }
+
     public addDrawing(selectedObject: string) {
         switch (selectedObject) {
           case 'rectangle':

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

@@ -80,7 +80,7 @@ g.node:hover {
 }
 
 .extended {
-  width: 700px !important;
+  width: 770px !important;
   height: 100%;
   overflow: hidden;
 }

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

@@ -43,6 +43,7 @@ import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProje
 import { MapLink } from '../../cartography/models/map/map-link';
 import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter';
 import { MovingEventSource } from '../../cartography/events/moving-event-source';
+import { log } from 'util';
 import { LinkWidget } from '../../cartography/widgets/link';
 import { MapScaleService } from '../../services/mapScale.service';
 import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer';

yarn.lock

@@ -7351,6 +7351,11 @@ saucelabs@^1.5.0:
   dependencies:
     https-proxy-agent "^2.2.1"
 
+save-svg-as-png@^1.4.14:
+  version "1.4.14"
+  resolved "https://registry.npmjs.org/save-svg-as-png/-/save-svg-as-png-1.4.14.tgz#d5017bb9746adf00c146a17e63ed4badd1e10b40"
+  integrity sha512-hJqOFSdRvhBVD2pQSM+mJStvQGfnvQCCF6ULtAxdjF4lDwXYfWZ9Eug0fcRl05YyPL2yknCDBEOpbO4Fkw5qmg==
+
 sax@0.5.x:
   version "0.5.8"
   resolved "https://registry.npmjs.org/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"