diff --git a/package-lock.json b/package-lock.json index 2e5fe82..60610a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 281c492..a16a654 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/src/app/diagram/diagram.component.ts b/src/app/diagram/diagram.component.ts index 3308b3e..a52d94f 100644 --- a/src/app/diagram/diagram.component.ts +++ b/src/app/diagram/diagram.component.ts @@ -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 = new EventEmitter(); + @Input() validationState: string; + @Output() validationStart: EventEmitter = 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 = /(? { - // 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(); diff --git a/src/app/modeler/modeler.component.html b/src/app/modeler/modeler.component.html index 5056220..30196aa 100644 --- a/src/app/modeler/modeler.component.html +++ b/src/app/modeler/modeler.component.html @@ -73,7 +73,7 @@
- +
Failed to render diagram: diff --git a/src/app/modeler/modeler.component.ts b/src/app/modeler/modeler.component.ts index af715c4..cbcbc04 100644 --- a/src/app/modeler/modeler.component.ts +++ b/src/app/modeler/modeler.component.ts @@ -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 });