From d98827fbba3692d25d524c4ec53a4d1f5e7cd4a2 Mon Sep 17 00:00:00 2001 From: crusader Date: Thu, 11 Oct 2018 00:13:25 +0900 Subject: [PATCH] ing --- src/app/app.component.html | 4 +- .../component/menu/export-csv.component.ts | 40 ++++++++++++++++++- .../component/target/display/map.component.ts | 3 ++ src/app/store/target/target/target.action.ts | 9 +++++ src/app/store/target/target/target.reducer.ts | 7 ++++ src/app/store/target/target/target.state.ts | 4 ++ 6 files changed, 63 insertions(+), 4 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index fbad36d..85e04cc 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -35,9 +35,9 @@ - + - + diff --git a/src/app/component/menu/export-csv.component.ts b/src/app/component/menu/export-csv.component.ts index 70bbd82..297dbd0 100644 --- a/src/app/component/menu/export-csv.component.ts +++ b/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, ) { } + 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(); + } } diff --git a/src/app/component/target/display/map.component.ts b/src/app/component/target/display/map.component.ts index 087da7f..510a475 100644 --- a/src/app/component/target/display/map.component.ts +++ b/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(); } diff --git a/src/app/store/target/target/target.action.ts b/src/app/store/target/target/target.action.ts index 7b24edf..f4cd6a0 100644 --- a/src/app/store/target/target/target.action.ts +++ b/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 ; diff --git a/src/app/store/target/target/target.reducer.ts b/src/app/store/target/target/target.reducer.ts index fde0bea..52b7d59 100644 --- a/src/app/store/target/target/target.reducer.ts +++ b/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; } diff --git a/src/app/store/target/target/target.state.ts b/src/app/store/target/target/target.state.ts index 05b48a9..8a3ff7d 100644 --- a/src/app/store/target/target/target.state.ts +++ b/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(selector: Selector) { @@ -33,5 +36,6 @@ export function getSelectors(selector: Selector) { 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), }; }