ing

src/app/app.component.html

@@ -33,6 +33,15 @@
   </p-footer>
 </p-dialog>
 
+<p-dialog header="Export as JPG" [(visible)]="displayExportJPG" [modal]="true" [responsive]="true" [width]="350"
+  [minWidth]="200" [minY]="70" [closable]="false">
+  <app-menu-export-jpg #exportJPG></app-menu-export-jpg>
+  <p-footer>
+    <button type="button" pButton icon="pi pi-check" (click)="exportJPG.export();" label="Yes"></button>
+    <button type="button" pButton icon="pi pi-close" (click)="displayExportJPG=false" label="No" class="ui-button-secondary"></button>
+  </p-footer>
+</p-dialog>
+
 <p-dialog header="Export as PNG" [(visible)]="displayExportPNG" [modal]="true" [responsive]="true" [width]="350"
   [minWidth]="200" [minY]="70" [closable]="false">
   <app-menu-export-png #exportPNG></app-menu-export-png>
@@ -42,6 +51,15 @@
   </p-footer>
 </p-dialog>
 
+<p-dialog header="Export as SVG" [(visible)]="displayExportSVG" [modal]="true" [responsive]="true" [width]="350"
+  [minWidth]="200" [minY]="70" [closable]="false">
+  <app-menu-export-svg #exportSVG></app-menu-export-svg>
+  <p-footer>
+    <button type="button" pButton icon="pi pi-check" (click)="exportSVG.export();" label="Yes"></button>
+    <button type="button" pButton icon="pi pi-close" (click)="displayExportSVG=false" label="No" class="ui-button-secondary"></button>
+  </p-footer>
+</p-dialog>
+
 <p-dialog header="Preferences" [(visible)]="displayPreferences" [modal]="true" [responsive]="true" [width]="350"
   [minWidth]="200" [minY]="70" [closable]="false">
   <app-menu-preferences></app-menu-preferences>

src/app/app.component.ts

@@ -22,7 +22,9 @@ export class AppComponent implements OnInit, AfterContentInit, AfterViewInit, On
 
   menuSubscription: Subscription;
   displayAbout: boolean;
+  displayExportJPG: boolean;
   displayExportPNG: boolean;
+  displayExportSVG: boolean;
   displayPreferences: boolean;
   displayPrint: boolean;
 
@@ -48,9 +50,15 @@ export class AppComponent implements OnInit, AfterContentInit, AfterViewInit, On
             case 'show-about':
               this.displayAbout = true;
               break;
+            case 'show-export-jpg':
+              this.displayExportJPG = true;
+              break;
             case 'show-export-png':
               this.displayExportPNG = true;
               break;
+            case 'show-export-svg':
+              this.displayExportSVG = true;
+              break;
             case 'show-preferences':
               this.displayPreferences = true;
               break;

src/app/component/menu/export-jpg.component.html

@@ -0,0 +1,4 @@
+<div>
+  <p-messages [(value)]="msgs"></p-messages>
+  Export JPG
+</div>

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

@@ -0,0 +1,60 @@
+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';
+import { Message } from 'primeng/primeng';
+
+const { saveSvgAsPng, svgAsDataUri } = require('save-svg-as-png');
+
+@Component({
+  selector: 'app-menu-export-jpg',
+  templateUrl: './export-jpg.component.html',
+  styleUrls: ['./export-jpg.component.scss'],
+})
+export class ExportJPGComponent implements OnInit, AfterContentInit, OnDestroy {
+  msgs: Message[] = [];
+
+  constructor(
+    private store: Store<any>,
+  ) {
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterContentInit(): void {
+
+  }
+
+  ngOnDestroy(): void {
+
+  }
+
+  export() {
+    const __this = this;
+    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) {
+          this.msgs = [];
+          this.msgs.push({
+            severity: 'error',
+            summary: 'Invalid Display Type',
+            detail: 'Export JPEG is only supported for Map Display type'
+          });
+          return;
+        }
+
+        // svgAsDataUri(targetDisplayElementRef.nativeElement, {}, function (uri) {
+        //   console.log(`uri: ${uri}`);
+        // });
+        saveSvgAsPng(targetDisplayElementRef.nativeElement, 'diagram.jpg', { backgroundColor: '#ffffff', encoderType: 'image/jpeg' });
+      }),
+    ).subscribe();
+  }
+}

src/app/component/menu/export-svg.component.html

@@ -0,0 +1,4 @@
+<div>
+  <p-messages [(value)]="msgs"></p-messages>
+  Export SVG
+</div>

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

@@ -0,0 +1,59 @@
+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';
+import { Message } from 'primeng/primeng';
+
+const { saveSvgAsPng, svgAsDataUri, download } = require('save-svg-as-png');
+
+@Component({
+  selector: 'app-menu-export-svg',
+  templateUrl: './export-svg.component.html',
+  styleUrls: ['./export-svg.component.scss'],
+})
+export class ExportSVGComponent implements OnInit, AfterContentInit, OnDestroy {
+  msgs: Message[] = [];
+
+  constructor(
+    private store: Store<any>,
+  ) {
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterContentInit(): void {
+
+  }
+
+  ngOnDestroy(): void {
+
+  }
+
+  export() {
+    const __this = this;
+    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) {
+          this.msgs = [];
+          this.msgs.push({
+            severity: 'error',
+            summary: 'Invalid Display Type',
+            detail: 'Export SVG is only supported for Map Display type'
+          });
+          return;
+        }
+
+        svgAsDataUri(targetDisplayElementRef.nativeElement, { backgroundColor: '#ffffff' }, function (uri) {
+          download('diagram.svg', uri);
+        });
+      }),
+    ).subscribe();
+  }
+}

src/app/component/menu/index.ts

@@ -1,11 +1,15 @@
 import { AboutComponent } from './about.component';
+import { ExportJPGComponent } from './export-jpg.component';
 import { ExportPNGComponent } from './export-png.component';
+import { ExportSVGComponent } from './export-svg.component';
 import { PreferencesComponent } from './preferences.component';
 import { PrintComponent } from './print.component';
 
 export const COMPONENTS = [
   AboutComponent,
+  ExportJPGComponent,
   ExportPNGComponent,
+  ExportSVGComponent,
   PreferencesComponent,
   PrintComponent,
 ];

src/electron/menu/build-default.ts

@@ -65,13 +65,11 @@ export function buildDefaultMenu(
             label: __DARWIN__ ? 'JPG…' : 'JPG…',
             id: 'export-jpg',
             click: emit('show-export-jpg'),
-            enabled: false,
           },
           {
             label: __DARWIN__ ? 'SVG…' : 'SVG…',
             id: 'export-svg',
             click: emit('show-export-svg'),
-            enabled: false,
           },
           {
             label: __DARWIN__ ? 'CSV…' : 'CSV…',