前言
由于公司工作需要，所以需要将BPMN-JS（主要用于工作流绘制）集成在AngularJS这个前端框架下，所以接下来的几篇我会通过详细的描述来介绍如何在AngularJS框架下面成功的运行BPMN且绘制工作流。
明人不说暗话，我们开始吧
准备
- BPMN-JS:Business Process Modeling Notation主要针对业务流程建模的，通过这个项目可以通过前台web定义与查看标准的BPMN2.0模型，在这里先贴出BPMN-JS在github的官方仓库，本教程也是基于官方文档一步一步完成的。
首先给大家看看bpmn.io官方的绘制界面：
我们的目的是将此绘制界面集成在AngularJS框架下面
开始
在AngularJS下完成一个页面需要声明三个文件，如图
其中bpmn-demo.component.ts这个是展示与操作核心，通过在init()方法中BpmnModeler，来初始化展示BPMN-JS编辑页面，同时支持将编辑的任务流图BPMN导出XML(saveDiagram)与SVG(saveSVG).
1.在Angular项目中下载所需model包：
npm install bpmn-js --save
2.同时我们需要配置bpmn-js的样式修改项目中根目录的angular.json文件并且在styles中加上下面梁行代码：
"node_modules/bpmn-js/dist/assets/diagram-js.css",
"node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css"
3.这里也是核心的一步，定义组件bpmn-demo.component.ts，用于bpmn前台绘制页面以及绘制出的任务流导出，通过在init()方法中BpmnModeler，来初始化展示BPMN-JS编辑页面，同时支持将编辑的任务流图BPMN导出XML(saveDiagram)与SVG(saveSVG)，bpmn-demo.component.ts完整代码如下：
import {Component, OnInit} from '@angular/core';
import {HttpClient,HttpHeaders} from '@angular/common/http';
import BpmnModeler from 'bpmn-js/lib/Modeler.js';
import {DomSanitizer} from "@angular/platform-browser";
import {RequestBackService} from '../../../service/requestBack.service';
@Component({
selector: 'app-bpmn-demo',
templateUrl: './bpmn-demo.component.html',
styleUrls: ['./bpmn-demo.component.scss']
})
export class BpmnDemoComponent implements OnInit {
saveHref;
saveName = '';
modeler;
constructor(private http: RequestBackService,private https: HttpClient, private sanitizer: DomSanitizer) {
}
ngOnInit(): void {
this.modeler = new BpmnModeler({
container: '#canvas',
width: '100%',
height: '600px',
});
this.load();
}
handleError(err: any) {
if (err) {
console.warn('Ups, error: ', err);
}
}
load(): void {
const url = 'assets/bpmn/newDiagram.bpmn';
this.https.get(url, {
headers: {observe: 'response'}, responseType: 'text'
}).subscribe(
(x: any) => {
this.modeler.importXML(x, this.handleError);
},
this.handleError
);
}
save(): void {
this.modeler.saveXML((err: any, xml: any) => console.log('Result of saving XML: ', err, xml));
}
saveDiagram(e) {
this.modeler.saveXML({format: true}, (err, xml) => {
if (err) {
console.error(err);
} else {
this.setEncoded(xml, 'bpmn.xml');
}
});
e.preventDefault();
e.stopPropagation();
}
saveSVG(e) {
this.modeler.saveSVG((err, svg) => {
if (err) {
console.error(err);
} else {
this.setEncoded(svg, 'bpmn.svg');
}
});
e.preventDefault();
e.stopPropagation();
}
setEncoded(data, name) {
const encodedData = encodeURIComponent(data);
if (data) {
this.saveHref = this.sanitizer.bypassSecurityTrustResourceUrl('data:application/bpmn20-xml;charset=UTF-8,' + encodedData);
this.saveName = name;
}
}
}
注意在loan()方法中有一行代码
const url = 'assets/bpmn/newDiagram.bpmn';
所以我们需要在assets文件夹下面创建一个bpmn资源文件夹并且初始化一个名为newDiagram.bpmn的工作流文件（XML格式），如果我们没有初始化这个文件最终完成的绘制页面将不能进行工作流绘制就像下图：
所以我们需要在如上所示路径中初始化一个bpmn文件并且初始设置一个start event，如下图：
4.接下来是编写前台代码bpmn-demo.component.html，其代码如下：
5.src/styles.scss代码如下：
/* You can add global styles to this file, and also import other style files */
* {
box-sizing: border-box;
}
body,
html {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
height: 100%;
padding: 0;
margin: 0;
}
a:link {
text-decoration: none;
}
.content,
.content>div {
width: 100%;
height: 100%;
}
.content>.message {
text-align: center;
display: table;
font-size: 16px;
color: #111;
}
.content>.message .note {
vertical-align: middle;
text-align: center;
display: table-cell;
}
.content .error .details {
max-width: 500px;
font-size: 12px;
margin: 20px auto;
text-align: left;
}
.content .error pre {
border: solid 1px #CCC;
background: #EEE;
padding: 10px;
}
.content:not(.with-error) .error,
.content.with-error .intro,
.content.with-diagram .intro {
display: none;
height: 1000px;
}
.content .canvas,
.content.with-error .canvas {
visibility: hidden;
}
.content.with-diagram .canvas {
visibility: visible;
height: 1000px;
}
.buttons {
position: fixed;
bottom: 20px;
padding: 0;
margin: 0;
list-style: none;
}
.buttons>li {
display: inline-block;
margin-right: 10px;
}
.buttons>li>a {
background: #DDD;
border: solid 1px #666;
display: inline-block;
padding: 5px;
}
.buttons a {
opacity: 0.3;
}
.buttons a.active {
opacity: 1.0;
}
6.以上一切完成后我们基于AngularJS的BPMN绘制页面已经完成接下来启动项目进入相应页面即可看到如下页面表示已经成功完成：
如果您成功的出现如上页面，说明基于AngularJS的工作流绘制初步你已经成功告破，接下来的下一篇我会继续集成属性编辑页面以及如何向后台进行部署等相关操作。