ing

src/app/app.component.html

@@ -35,9 +35,9 @@
 
 <p-dialog header="Export as CSV" [(visible)]="displayExportCSV" [modal]="true" [responsive]="true" [width]="350"
   [minWidth]="200" [minY]="70" [closable]="false">
-  <app-menu-export-csv></app-menu-export-csv>
+  <app-menu-export-csv #exportCSV></app-menu-export-csv>
   <p-footer>
-    <button type="button" pButton icon="pi pi-check" (click)="displayExportCSV=false" label="Yes"></button>
+    <button type="button" pButton icon="pi pi-check" (click)="exportCSV.export(); displayExportCSV=false;" label="Yes"></button>
     <button type="button" pButton icon="pi pi-close" (click)="displayExportCSV=false" label="No" class="ui-button-secondary"></button>
   </p-footer>
 </p-dialog>

src/app/component/menu/export-csv.component.ts

@@ -1,15 +1,51 @@
-import { Component, } from '@angular/core';
+import { Component, OnInit, AfterContentInit, OnDestroy, } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+import { take } from 'rxjs/operators';
+
+import * as AppStore from '../../store';
+import { TargetDisplayType } from '../../core/type';
+
+const { saveSvgAsPng, svgAsDataUri } = require('save-svg-as-png');
 
 @Component({
   selector: 'app-menu-export-csv',
   templateUrl: './export-csv.component.html',
   styleUrls: ['./export-csv.component.scss'],
 })
-export class ExportCSVComponent {
+export class ExportCSVComponent implements OnInit, AfterContentInit, OnDestroy {
 
   constructor(
+    private store: Store<any>,
   ) {
   }
 
+  ngOnInit(): void {
+  }
 
+  ngAfterContentInit(): void {
+
+  }
+
+  ngOnDestroy(): void {
+
+  }
+
+  export() {
+    this.store.pipe(
+      take(1),
+      select((state) => {
+        const targetDisplayType = AppStore.TargetSelector.TargetSelector.selectTargetDisplayType(state);
+        const targetDisplayElementRef = AppStore.TargetSelector.TargetSelector.selectTargetDisplayElementRef(state);
+
+        if (TargetDisplayType.MAP !== targetDisplayType) {
+          return;
+        }
+
+        // svgAsDataUri(targetDisplayElementRef.nativeElement, {}, function (uri) {
+        //   console.log(`uri: ${uri}`);
+        // });
+        saveSvgAsPng(targetDisplayElementRef.nativeElement, 'diagram.png', { backgroundColor: '#ffffff' });
+      }),
+    ).subscribe();
+  }
 }

src/app/component/target/display/map.component.ts

@@ -106,6 +106,7 @@ export class MapComponent implements OnInit, AfterContentInit, OnDestroy {
 
   @ViewChild('displayTarget') set displayTarget(content: ElementRef) {
     this.displayTargetRef = content;
+    this.store.dispatch(new TargetStore.ChangeTargetDisplayElementRef({ targetDisplayElementRef: content }));
   }
 
   private displayTargetRef: ElementRef;
@@ -260,6 +261,8 @@ export class MapComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this.store.dispatch(new TargetStore.ChangeTargetDisplayElementRef({ targetDisplayElementRef: null }));
+
     if (null !== this.targetSubscription) {
       this.targetSubscription.unsubscribe();
     }

src/app/store/target/target/target.action.ts

@@ -1,3 +1,4 @@
+import { ElementRef } from '@angular/core';
 import { Action } from '@ngrx/store';
 import { Host, Port, Service } from '@overflow/model/discovery';
 import { TargetDisplayType } from '../../../core/type';
@@ -10,6 +11,7 @@ export enum ActionType {
   ChangeTargetDisplayType = '[app.target] ChangeTargetDisplayType',
   RefreshTargetDisplay = '[app.target] RefreshTargetDisplay',
   ChangeSelectedTarget = '[app.target] ChangeSelectedTarget',
+  ChangeTargetDisplayElementRef = '[app.target] ChangeTargetDisplayElementRef',
 }
 
 export class SetHosts implements Action {
@@ -48,6 +50,12 @@ export class ChangeSelectedTarget implements Action {
   constructor(public payload: { group: string, target: Host | Port | Service }) { }
 }
 
+export class ChangeTargetDisplayElementRef implements Action {
+  readonly type = ActionType.ChangeTargetDisplayElementRef;
+
+  constructor(public payload: { targetDisplayElementRef: ElementRef }) { }
+}
+
 export type Actions =
   | SetHosts
   | SetPorts
@@ -55,5 +63,6 @@ export type Actions =
   | ChangeTargetDisplayType
   | RefreshTargetDisplay
   | ChangeSelectedTarget
+  | ChangeTargetDisplayElementRef
 
   ;

src/app/store/target/target/target.reducer.ts

@@ -52,6 +52,13 @@ export function reducer(state: State = initialState, action: Actions): State {
       };
     }
 
+    case ActionType.ChangeTargetDisplayElementRef: {
+      return {
+        ...state,
+        targetDisplayElementRef: action.payload.targetDisplayElementRef,
+      };
+    }
+
     default: {
       return state;
     }

src/app/store/target/target/target.state.ts

@@ -1,3 +1,4 @@
+import { ElementRef } from '@angular/core';
 import { Selector, createSelector } from '@ngrx/store';
 import { Host, Port, Service } from '@overflow/model/discovery';
 import { TargetDisplayType } from '../../../core/type';
@@ -13,6 +14,7 @@ export interface State {
     group: string;
     target: Host | Port | Service;
   } | null;
+  targetDisplayElementRef: ElementRef;
 }
 
 export const initialState: State = {
@@ -23,6 +25,7 @@ export const initialState: State = {
   targetDisplayType: TargetDisplayType.NONE,
   refreshTargetDisplay: false,
   selectedTarget: null,
+  targetDisplayElementRef: null,
 };
 
 export function getSelectors<S>(selector: Selector<any, State>) {
@@ -33,5 +36,6 @@ export function getSelectors<S>(selector: Selector<any, State>) {
     selectTargetDisplayType: createSelector(selector, (state: State) => state.targetDisplayType),
     selectRefreshTargetDisplay: createSelector(selector, (state: State) => state.refreshTargetDisplay),
     selectSelectedTarget: createSelector(selector, (state: State) => state.selectedTarget),
+    selectTargetDisplayElementRef: createSelector(selector, (state: State) => state.targetDisplayElementRef),
   };
 }