ing

src/app/app.component.html

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

src/app/app.component.ts

@@ -22,7 +22,7 @@ export class AppComponent implements OnInit, AfterContentInit, AfterViewInit, On
 
   menuSubscription: Subscription;
   displayAbout: boolean;
-  displayExportCSV: boolean;
+  displayExportPNG: boolean;
   displayPreferences: boolean;
   displayPrint: boolean;
 
@@ -48,8 +48,8 @@ export class AppComponent implements OnInit, AfterContentInit, AfterViewInit, On
             case 'show-about':
               this.displayAbout = true;
               break;
-            case 'show-export-csv':
-              this.displayExportCSV = true;
+            case 'show-export-png':
+              this.displayExportPNG = true;
               break;
             case 'show-preferences':
               this.displayPreferences = true;

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

@@ -1,3 +0,0 @@
-<div>
-  Export CSV
-</div>

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

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

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

@@ -4,15 +4,17 @@ 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-csv',
-  templateUrl: './export-csv.component.html',
-  styleUrls: ['./export-csv.component.scss'],
+  selector: 'app-menu-export-png',
+  templateUrl: './export-png.component.html',
+  styleUrls: ['./export-png.component.scss'],
 })
-export class ExportCSVComponent implements OnInit, AfterContentInit, OnDestroy {
+export class ExportPNGComponent implements OnInit, AfterContentInit, OnDestroy {
+  msgs: Message[] = [];
 
   constructor(
     private store: Store<any>,
@@ -31,6 +33,7 @@ export class ExportCSVComponent implements OnInit, AfterContentInit, OnDestroy {
   }
 
   export() {
+    const __this = this;
     this.store.pipe(
       take(1),
       select((state) => {
@@ -38,6 +41,12 @@ export class ExportCSVComponent implements OnInit, AfterContentInit, OnDestroy {
         const targetDisplayElementRef = AppStore.TargetSelector.TargetSelector.selectTargetDisplayElementRef(state);
 
         if (TargetDisplayType.MAP !== targetDisplayType) {
+          this.msgs = [];
+          this.msgs.push({
+            severity: 'error',
+            summary: 'Invalid Display Type',
+            detail: 'Export PNG is only supported for Map Display type'
+          });
           return;
         }
 

src/app/component/menu/index.ts

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

src/commons/type/menu-event.ts

@@ -2,6 +2,9 @@ export type MenuEvent =
   | 'save'
   | 'show-preferences'
   | 'show-about'
+  | 'show-export-png'
+  | 'show-export-jpg'
+  | 'show-export-svg'
   | 'show-export-csv'
   | 'show-print'
   | 'change-language-english'

src/commons/type/menu-ids.ts

@@ -2,6 +2,9 @@ export type MenuIDs =
   | 'save'
   | 'preferences'
   | 'about'
+  | 'export-png'
+  | 'export-jpg'
+  | 'export-svg'
   | 'export-csv'
   | 'print'
   | 'language-english'

src/electron/menu/build-default.ts

@@ -55,10 +55,28 @@ export function buildDefaultMenu(
       {
         label: __DARWIN__ ? 'Export as…' : 'Export as…',
         submenu: [
+          {
+            label: __DARWIN__ ? 'PNG…' : 'PNG…',
+            id: 'export-png',
+            click: emit('show-export-png'),
+          },
+          {
+            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…',
             id: 'export-csv',
             click: emit('show-export-csv'),
+            enabled: false,
           },
         ],
       },
@@ -67,6 +85,7 @@ export function buildDefaultMenu(
         label: __DARWIN__ ? 'Print…' : 'Print…',
         id: 'print',
         click: emit('show-print'),
+        enabled: false,
       },
     ],
   };