sartography
/
cr-connect-bpmn
mirror of https://github.com/sartography/cr-connect-bpmn.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added event to update object dropdown

This commit is contained in:
NWalker4483 2021-06-22 10:39:09 -04:00
parent b9a46f7f3b
commit bc3ce7e820
5 changed files with 83 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
package-lock.json generated
View File

@ -4477,9 +4477,9 @@
}
},
"codemirror": {
"version": "5.61.1",
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.61.1.tgz",
"integrity": "sha512-+D1NZjAucuzE93vJGbAaXzvoBHwp9nJZWWWF9utjv25+5AZUiah6CIlfb4ikG4MoDsFsCG8niiJH5++OO2LgIQ=="
"version": "5.62.0",
"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.0.tgz",
"integrity": "sha512-Xnl3304iCc8nyVZuRkzDVVwc794uc9QNX0UcPGeNic1fbzkSrO4l4GVXho9tRNKBgPYZXgocUqXyfIv3BILhCQ=="
},
"collection-visit": {
"version": "1.0.0",
@ -5560,9 +5560,9 @@
}
},
"diagram-js-code-editor": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/diagram-js-code-editor/-/diagram-js-code-editor-1.0.6.tgz",
"integrity": "sha512-4sCboTOtnUkh7lgGoqOt6aE/ENmJKpUYc1oLDFu6BWIPHPIxPwXgll98sTsZHfXEZGIQq9vfD68yvV+eGAeybg==",
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/diagram-js-code-editor/-/diagram-js-code-editor-1.1.1.tgz",
"integrity": "sha512-zAF4Z/EBfB4HZy3kpxPFIwg7Siod00LP7UelJU4/G+6zpZOb7HAFIFeGLWc3KIIO1QEO6hQlmET5+i1ojP5mGg==",
"requires": {
"ace": "^1.3.0",
"ace-builds": "^1.4.12",
@ -9721,12 +9721,6 @@
}
}
},
"node-releases": {
"version": "1.1.59",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.59.tgz",
"integrity": "sha512-H3JrdUczbdiwxN5FuJPyCHnGHIFqQ0wWxo+9j1kAXAzqNMAHlo+4I/sYYxpyK0irQ73HgdiyzD32oqQDcU2Osw==",
"dev": true
},
"node-status-codes": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/node-status-codes/-/node-status-codes-1.0.0.tgz",
@ -9746,8 +9740,7 @@
"hosted-git-info": {
"version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
"dev": true
"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
},
"semver": {
"version": "5.7.1",
@ -12447,9 +12440,9 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"sartography-workflow-lib": {
"version": "0.0.469",
"resolved": "https://registry.npmjs.org/sartography-workflow-lib/-/sartography-workflow-lib-0.0.469.tgz",
"integrity": "sha512-enqTBvU829XGjCpW7kvnWOYj4caslc86cozrCgeTqZhiJhDfzpYlBaP0BXqx+j2BQ4hXq4q12wzZmY2lZYJXDA=="
"version": "0.0.511",
"resolved": "https://registry.npmjs.org/sartography-workflow-lib/-/sartography-workflow-lib-0.0.511.tgz",
"integrity": "sha512-C0H9HbZtLz3PHG4oiolaM/XQVlje5k91cvpwO8juWMjZ8q6z1T74MO0cw936iobxgWaIyv/8lcP8vY4YHd/0sw=="
},
"sass": {
"version": "1.26.3",

4
package.json
View File

@ -42,7 +42,7 @@
"camunda-bpmn-moddle": "^4.4.0",
"camunda-dmn-moddle": "^1.0.0",
"diagram-js": "^6.6.1",
"diagram-js-code-editor": "^1.0.6",
"diagram-js-code-editor": "^1.1.1",
"diagram-js-minimap": "^2.0.3",
"dmn-js": "^7.5.1",
"dmn-js-properties-panel": "^0.3.5",
@ -55,7 +55,7 @@
"ngx-markdown": "^9.1.1",
"protractor": "^7.0.0",
"rxjs": "~6.5.4",
"sartography-workflow-lib": "0.0.469",
"sartography-workflow-lib": "0.0.511",
"tslib": "^1.13.0",
"uuid": "^7.0.2",
"zone.js": "^0.10.3"

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

@ -1,7 +1,8 @@
import {formatDate} from '@angular/common';
import {HttpErrorResponse} from '@angular/common/http';
import {AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, Output, ViewChild} from '@angular/core';
import {ControlValueAccessor} from '@angular/forms';
import { formatDate } from '@angular/common';
import { HttpErrorResponse } from '@angular/common/http';
import { stringify } from '@angular/compiler/src/util';
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import DmnModeler from 'dmn-js/lib/Modeler';
import * as fileSaver from 'file-saver';
@ -12,24 +13,27 @@ import {
FileType,
getDiagramTypeFromXml
} from 'sartography-workflow-lib';
import {v4 as uuidv4} from 'uuid';
import {BpmnWarning} from '../_interfaces/bpmn-warning';
import {ImportEvent} from '../_interfaces/import-event';
import {bpmnModelerConfig} from './bpmn-modeler-config';
import {dmnModelerConfig} from './dmn-modeler-config';
import { v4 as uuidv4 } from 'uuid';
import { BpmnWarning } from '../_interfaces/bpmn-warning';
import { ImportEvent } from '../_interfaces/import-event';
import { bpmnModelerConfig } from './bpmn-modeler-config';
import { dmnModelerConfig } from './dmn-modeler-config';
@Component({
selector: 'app-diagram',
templateUrl: 'diagram.component.html',
styleUrls: ['diagram.component.scss'],
})
export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
export class DiagramComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
@Input() fileName: string;
@ViewChild('containerRef', {static: true}) containerRef: ElementRef;
@ViewChild('propertiesRef', {static: true}) propertiesRef: ElementRef;
@Input() validation_data: Object = {};
@ViewChild('containerRef', { static: true }) containerRef: ElementRef;
@ViewChild('propertiesRef', { static: true }) propertiesRef: ElementRef;
@Output() private importDone: EventEmitter<ImportEvent> = new EventEmitter();
@Input() validationState: string;
@Output() validationStart: EventEmitter<string> = new EventEmitter();
private diagramType: FileType;
public modeler: BpmnModeler | DmnModeler;
private modeler: BpmnModeler | DmnModeler;
private xml = '';
private svg;
private disabled = false;
@ -61,6 +65,16 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
console.log('DiagramComponent default onChange');
}
ngOnChanges(changes: SimpleChanges) {
if (changes.validation_data) {
this.validation_data = changes.validation_data.currentValue;
if (this.modeler) {
this.modeler.get('eventBus').fire('editor.objects.response', { objects: this.validation_data });
}
}
}
onTouched() {
}
@ -120,7 +134,7 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
saveSVG() {
this.saveDiagram();
this.modeler.saveSVG((err, svg) => {
const blob = new Blob([svg], {type: 'image/svg+xml'});
const blob = new Blob([svg], { type: 'image/svg+xml' });
fileSaver.saveAs(blob, `${this.diagramType.toString().toUpperCase()} Diagram - ${new Date().toISOString()}.svg`);
});
}
@ -129,13 +143,13 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
if (this.modeler && this.modeler.saveSVG) {
this.modeler.saveSVG((svgErr, svg) => {
this.svg = svg;
this.modeler.saveXML({format: true}, (xmlErr, xml) => {
this.modeler.saveXML({ format: true }, (xmlErr, xml) => {
this.xml = xml;
this.writeValue(xml);
});
});
} else {
this.modeler.saveXML({format: true}, (xmlErr, xml) => {
this.modeler.saveXML({ format: true }, (xmlErr, xml) => {
this.xml = xml;
this.writeValue(xml);
});
@ -144,8 +158,8 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
saveXML() {
this.saveDiagram();
this.modeler.saveXML({format: true}, (err, xml) => {
const blob = new Blob([xml], {type: 'text/xml'});
this.modeler.saveXML({ format: true }, (err, xml) => {
const blob = new Blob([xml], { type: 'text/xml' });
fileSaver.saveAs(blob, this.insertDateIntoFileName());
});
}
@ -194,7 +208,7 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
this.modeler.get('eventBus').on('commandStack.changed', () => this.saveDiagram());
this.modeler.on('import.done', ({error}) => {
this.modeler.on('import.done', ({ error }) => {
if (!error) {
this.modeler.get('canvas').zoom('fit-viewport');
window.scrollTo({
@ -204,25 +218,29 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
});
}
});
var eventBus = this.modeler.get('eventBus');
this.eventBus = this.modeler.get('eventBus');
this.eventBus.on('editor.scripts.request', () => {
eventBus.on('editor.scripts.request', () => {
this.api.listScripts().subscribe((data) => {
data.forEach(element => {
var string = element.name,
regex = /(?<!^)([A-Z][a-z]|(?<=[a-z])[A-Z])/g;
var modified = string.replace(regex, function (match) {
return "_" + match.toLowerCase();
}).toLowerCase();
element.name = modified;
});
this.modeler.get('eventBus').fire('editor.scripts.response', { scripts: data });
})
});
// this.modeler.get('eventBus').on('editor.objects.request', () => {
// let data = [{userId: "int", description: "string"}]
// this.modeler.get('eventBus').fire('editor.scripts.response', {objects: data});
// });
eventBus.on('editor.validate.request', (request) => {
this.validationStart.emit(request.task_name);
});
return this.modeler as BpmnModeler;
}
private validate(){
}
private initializeDMNModeler(): DmnModeler {
this.modeler = new DmnModeler({
@ -249,7 +267,7 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit {
}
});
this.modeler.on('import.done', ({error}) => {
this.modeler.on('import.done', ({ error }) => {
if (!error) {
const activeView = this.modeler.getActiveView();

2
src/app/modeler/modeler.component.html
View File

@ -73,7 +73,7 @@
<div fxLayout="column">
<div class="diagram-parent">
<app-diagram #diagram (importDone)="handleImported($event)" [fileName]="getFileName()"></app-diagram>
<app-diagram #diagram (importDone)="handleImported($event)" [fileName]="getFileName()" [validation_data]="validationData" (validationStart)="partially_validate($event)" ></app-diagram>
<div *ngIf="importError" class="import-error">
<strong>Failed to render diagram: </strong>

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

@ -66,6 +66,8 @@ export class ModelerComponent implements AfterViewInit {
@ViewChild(DiagramComponent) private diagramComponent: DiagramComponent;
@ViewChild('fileInput', { static: true }) fileInput: ElementRef;
private diagramType: FileType;
private validationState: boolean;
private validationData: Object = {};
private workflowSpecId: string;
private fileMetaId: number;
private isNew = false;
@ -90,40 +92,10 @@ export class ModelerComponent implements AfterViewInit {
this.svg = newSvgValue;
});
this.diagramComponent.modeler.get('eventBus').on('editor.validate.request', (request) => {
this.saveChanges();
console.log("Validating...", request.code);
this.api.validateWorkflowSpecification(this.diagramFileMeta.workflow_spec_id).subscribe(apiErrors => {
// apiErrors =
console.log(33);
if (apiErrors && apiErrors.length > 0) {
let passing = true;
let data = {};
apiErrors.forEach((error) => {
if (error.code == "validation_break") {
data = error.task_data;
}
else
{
passing = false;
}
});
this.diagramComponent.eventBus.fire('editor.validate.response', { passing: true, msg: "msg", data: data});
// this.bottomSheet.open(ApiErrorsComponent, { data: { apiErrors: apiErrors } });
} else {
// this.snackBar.open('Workflow specification is valid!', 'Ok', { duration: 5000 });
}
});
});
if (this.requestFileClick) {
this.fileInput.nativeElement.click();
this.requestFileClick = false;
}
}
handleImported(event: ImportEvent) {
@ -225,7 +197,27 @@ export class ModelerComponent implements AfterViewInit {
}
}
partially_validate(until_task: string) {
this.saveChanges();
this.api.validateWorkflowSpecification(this.diagramFileMeta.workflow_spec_id, until_task).subscribe(apiErrors => {
this.validationState = true;
if (apiErrors && apiErrors.length > 0) {
apiErrors.forEach((error) => {
if (error.code == "validation_break") {
this.validationData = error.task_data;
} else {
this.validationState = false;
}
});
}
if (!this.validationState) {
this.bottomSheet.open(ApiErrorsComponent, { data: { apiErrors: apiErrors } });
}
});
}
validate() {
this.saveChanges();
this.api.validateWorkflowSpecification(this.diagramFileMeta.workflow_spec_id).subscribe(apiErrors => {
if (apiErrors && apiErrors.length > 0) {
this.bottomSheet.open(ApiErrorsComponent, { data: { apiErrors: apiErrors } });
@ -383,12 +375,6 @@ export class ModelerComponent implements AfterViewInit {
this.xml = this.draftXml;
this.diagramFile = new File([this.xml], this.diagramFileMeta.name, { type: 'text/xml' });
// Propose removal
// 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, this.diagramFile).subscribe(newFileMeta => {
this.diagramFileMeta = newFileMeta;
this.snackBar.open(`Saved changes to file metadata ${this.diagramFileMeta.name}.`, 'Ok', { duration: 5000 });