快速介紹
bpmn-js是BPMN2.0渲染工具包和WEB建模器炼杖，它是用JavaScript編寫的粱快，將BPMN2.0圖嵌入到瀏覽器中，不需要服務器后端惊窖。
github地址：https://github.com/bpmn-io
demo地址：https://demo.bpmn.io/s/start
了解bpmn-js內(nèi)部
如下面的架構(gòu)圖所示敷扫，bpmn-js構(gòu)建在兩個重要的庫之上：diagram-js和bpmn-moddle哀蘑。
架構(gòu)圖.png
如何使用(基于vue)
首先通過npm安裝bpmn-js：
npm install bpmn-js
通過ES訪問BPMN建模器：
<template>
<div class="containers" ref="content">
<div class="canvas" ref="canvas"></div>
<ul class="buttons">
<li>下載</li>
<li>
<a ref="saveDiagram" href="javascript:" title="download BPMN diagram">BPMN diagram</a>
</li>
</ul>
</div>
</template>
<script>
import BpmnModeler from 'bpmn-js/lib/Modeler'
export default {
data () {
return {
// bpmn建模器
bpmnModeler: null
}
},
mounted () {
// 獲取到屬性ref為"canvas"的dom節(jié)點
const canvas = this.$refs.canvas
// 新建modeler實例，并掛載到dom節(jié)點上
this.bpmnModeler = new BpmnModeler({
container: canvas
})
// 渲染圖畫
this.createNewDiagram()
},
methods: {
createNewDiagram () {
const bpmnXmlStr = '<?xml version="1.0" encoding="UTF-8"?>\n' +
'<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">\n' +
' <bpmn2:process id="Process_1" isExecutable="false">\n' +
' <bpmn2:startEvent id="StartEvent_1"/>\n' +
' </bpmn2:process>\n' +
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">\n' +
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">\n' +
' <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">\n' +
' <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>\n' +
' </bpmndi:BPMNShape>\n' +
' </bpmndi:BPMNPlane>\n' +
' </bpmndi:BPMNDiagram>\n' +
'</bpmn2:definitions>'
// 將符合BPMN2.0標準的xml解析成對象樹渲染成圖顯示出來
this.bpmnModeler.importXML(bpmnXmlStr, function (err) {
if (err) {
console.error(err)
}
})
}
}
}
</script>
添加樣式表
將建模器嵌入到頁面時葵第，需引入diagram-js樣式表以及BPMN圖標字體：
<style lang="scss">
/*左邊工具欄以及編輯節(jié)點的樣式*/
@import 'bpmn-js/dist/assets/diagram-js.css';
@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
</style>
生命周期掛鉤事件
通過事件綁定建模器的生命周期以及圖表交互：
// 給建模器綁定事件绘迁，當模型有發(fā)生改變就會觸發(fā)這個事件
let _this = this
// 獲取a標簽dom節(jié)點
const downloadLink = this.$refs.saveDiagram
this.bpmnModeler.on('commandStack.changed', function () {
_this.bpmnModeler.saveXML({ format: true }, function (err, xml) {
_this.setEncoded(downloadLink, 'diagram.bpmn.xml', err ? null : xml)
})
})
setEncoded (link, name, data) {
// 把xml轉(zhuǎn)換為URI，下載要用到的
const encodedData = encodeURIComponent(data)
// 獲取到圖的xml卒密，保存就是把這個xml提交給后臺
this.xmlStr = data
// 下載圖的具體操作,改變a的屬性缀台，className令a標簽可點擊，href令能下載哮奇，download是下載的文件的名字
if (data) {
link.className = 'active'
link.href = 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData
link.download = name
}
}
擴展功能
- i18n - 自定義翻譯模塊
- properties-panel - 屬性面板
- custom-elements - 創(chuàng)建自定義元素
- custom-modeling-rules - 自定義建模規(guī)則
