Generates SVG on save. Doesn't save it anywhere yet, though.

src/app/diagram/diagram.component.ts

@@ -31,6 +31,7 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
   private diagramType: FileType;
   private modeler: BpmnModeler | DmnModeler;
   private xml = '';
+  private svg;
   private disabled = false;
 
   // Hack so we can spy on this function
@@ -46,12 +47,16 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
     return this.xml;
   }
 
+  get svgValue(): string {
+    return this.svg;
+  }
+
   ngAfterViewInit() {
     this.initializeModeler(this.diagramType);
     this.openDiagram(this.xml);
   }
 
-  onChange(value: any) {
+  onChange(newValue: string, svgValue: string) {
   }
 
   onTouched() {
@@ -74,12 +79,12 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
       this.openDiagram(value);
     }
     this.xml = value;
-    this.onChange(this.xml);
+    this.onChange(this.xml, this.svg);
   }
 
   // Allows Angular to register a function to call when the model changes.
   // Save the function as a property to call later here.
-  registerOnChange(fn: (newXmlValue: string) => void): void {
+  registerOnChange(fn: (newXmlValue: string, newSvgValue: string) => void): void {
     this.onChange = fn;
   }
 
@@ -118,9 +123,12 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
   }
 
   saveDiagram() {
-    this.modeler.saveXML({format: true}, (err, xml) => {
-      this.xml = xml;
-      this.writeValue(xml);
+    this.modeler.saveSVG((svgErr, svg) => {
+      this.svg = svg;
+      this.modeler.saveXML({format: true}, (xmlErr, xml) => {
+        this.xml = xml;
+        this.writeValue(xml);
+      });
     });
   }
 

src/app/modeler/modeler.component.ts

@@ -42,6 +42,7 @@ export class ModelerComponent implements AfterViewInit {
   fileTypes = FileType;
   private xml = '';
   private draftXml = '';
+  private svg = '';
   @ViewChild(DiagramComponent) private diagramComponent: DiagramComponent;
   private diagramType: FileType;
   private workflowSpecId: string;
@@ -67,8 +68,9 @@ export class ModelerComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.diagramComponent.registerOnChange((newXmlValue: string) => {
+    this.diagramComponent.registerOnChange((newXmlValue: string, newSvgValue: string) => {
       this.draftXml = newXmlValue;
+      this.svg = newSvgValue;
     });
   }
 
@@ -158,6 +160,7 @@ export class ModelerComponent implements AfterViewInit {
   newDiagram(diagramType?: FileType) {
     this.xml = '';
     this.draftXml = '';
+    this.svg = '';
     this.fileName = '';
     this.diagramFileMeta = undefined;
     this.diagramFile = undefined;
@@ -306,6 +309,11 @@ export class ModelerComponent implements AfterViewInit {
     this.xml = this.draftXml;
     this.diagramFileMeta.file = new File([this.xml], this.diagramFileMeta.name, {type: 'text/xml'});
 
+    if (this.svg && this.svg !== '') {
+      const svgFile = new File([this.svg], this.diagramFileMeta.name, {type: 'text/xml'});
+      // this.api.updateFileData();
+    }
+
     this.api.updateFileData(this.diagramFileMeta).subscribe(newFileMeta => {
       this.diagramFileMeta = newFileMeta;
       this.snackBar.open(`Saved changes to file metadata ${this.diagramFileMeta.name}.`, 'Ok', {duration: 5000});