sartography/cr-connect-bpmn
1
0
Fork 0
mirror of https://github.com/sartography/cr-connect-bpmn.git synced 2025-02-16 18:38:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aaron Louie 2020-05-12 22:19:35 -04:00
parent 8dbcacfb4a
commit 04be04fbe4
2 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/diagram/diagram.component.ts
View File

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

10
src/app/modeler/modeler.component.ts
View File

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