全網最詳bpmn.js教材-基礎篇
前言
Q: bpmn.js是什麼? 🤔️javascript
bpmn.js是一個BPMN2.0渲染工具包和web建模器, 使得畫流程圖的功能在前端來完成.css
Q: 我爲何要寫該系列的教材? 🤔️html
由於公司業務的須要於是要在項目中使用到bpmn.js,可是因爲bpmn.js的開發者是國外友人, 所以國內對這方面的教材不多, 也沒有詳細的文檔. 因此不少使用方式不少坑都得本身去找.在將其琢磨完以後, 決定寫一系列關於它的教材來幫助更多bpmn.js的使用者或者是期於找到一種好的繪製流程圖的開發者. 同時也是本身對其的一種鞏固.前端
因爲是系列的文章, 因此更新的可能會比較頻繁, 您要是無心間刷到了且不是您所須要的還請諒解😊.vue
不求贊👍不求心❤️. 只但願能對你有一點小小的幫助.java
bpmn.js基本的使用
這一章節主要是介紹了bpmn.js最基本的幾種實用方式, 適合徹底沒有接觸過bpmn.js的新手或者想要在vue項目中使用它的開發者.git
經過這一章節的講解你能夠學習到:github
-
使用npm安裝bpmn.jsvue-router
爲了方便你們對後面的講解有一個大概認識, 咱們先來看一下使用bpmn.js畫圖都有哪些內容:
bpmn.js最簡單的一種使用
咱們能夠直接使用CDN將bpmn.js引入到代碼中使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BPMNJS</title>
<!--CDN加速-->
<script src="https://unpkg.com/bpmn-js@6.0.2/dist/bpmn-viewer.development.js"></script> <!--引入一個簡單的xml字符串-->
<script src="./xmlStr.js"></script>
<style> #canvas { height: 400px; } </style>
</head>
<body>
<div id="canvas"></div>
<script> var bpmnJS = new BpmnJS({ container: '#canvas' }); bpmnJS.importXML(xmlStr, function(err) { if (!err) { console.log('success!'); // 讓圖能自適應屏幕 var canvas = bpmnJS.get('canvas') canvas.zoom('fit-viewport') } else { console.log('something went wrong:', err); } }); </script>
</body>
</html>
複製代碼
(上面的xmlStr.js以及案例代碼在這裏LinDaiDai-bpmn-basic-demo)
如上面的案例所示, 咱們使用DNS加速直接引入bpmn.js, 而後本地指定一個容器(也就是id爲canvas的那個div), 接着用bpmn.js提供的方法importXML就能夠解析xml字符串生成對應的工做流圖了.
打開頁面能夠看到
使用npm安裝bpmn.js
上面提供的使用方式是一種最基本的方式,僅僅是將圖展現出來,不能本身繪畫也不能操做. 因此在工做中使用更多的仍是採用npm安裝到項目中使用. 咱們可使用如下命令進行安裝:
npm install --save bpmn-js
複製代碼
在應用程序中使用:
import BpmnViewer from 'bpmn-js';
import testDiagram from './test-diagram.bpmn';
var viewer = new BpmnViewer({
container: '#canvas'
});
viewer.importXML(testDiagram, function(err) {
if (!err) {
console.log('success!');
viewer.get('canvas').zoom('fit-viewport');
} else {
console.log('something went wrong:', err);
}
});
複製代碼
上面的testDiagram指的是某個bpmn 文件了,而不是第一個案例中的xml字符串.
官方這邊也提供了一個例子, 能夠看一下: bpmn-js-example-bunding
vue中使用bpmn.js
在vue 中的使用能夠分爲如下幾個部分:
爲了方便講解, 我先建立一個空的vue項目(只安裝了路由):
vue create vue-bpmn-basic
cd vue-bpmn-basic
npm i vue-router --save-D
複製代碼
注⚠️️
你能夠不用本地建立, 此項目地址
vue中使用bpmn.js-基礎篇
我在項目的components文件夾下建立一個名爲basic.vue的文件, 且配置好路由:
const routes = [
{
path: '/basic',
component: () => import('./../components/basic')
}
]
複製代碼
項目結構如圖所示:
- 安裝相關依賴
npm i bpmn-js --save-D
複製代碼
- 編寫
HTML代碼
// basic.vue
<template>
<div class="containers">
<div class="canvas" ref="canvas"></div>
</div>
</template>
複製代碼
- 編寫
JS代碼
// basic.vue
<script>
// 引入相關的依賴
import BpmnModeler from 'bpmn-js/lib/Modeler'
import {
xmlStr
} from '../mock/xmlStr' // 這裏是直接引用了xml字符串
export default {
name: '',
components: {},
// 生命週期 - 建立完成（能夠訪問當前this實例）
created() { },
// 生命週期 - 載入後, Vue 實例掛載到實際的 DOM 操做完成，通常在該過程進行 Ajax 交互
mounted() {
this.init()
},
data() {
return {
// bpmn建模器
bpmnModeler: null,
container: null,
canvas: null
}
},
methods: {
init() {
// 獲取到屬性ref爲「canvas」的dom節點
const canvas1 = this.$refs.canvas1
// 建模
this.bpmnModeler = new BpmnModeler({
container: canvas
})
this.createNewDiagram()
},
createNewDiagram() {
// 將字符串轉換成圖顯示出來
this.bpmnModeler.importXML(xmlStr, (err) => {
if (err) {
// console.error(err)
} else {
// 這裏是成功以後的回調, 能夠在這裏作一系列事情
this.success()
}
})
},
success() {
// console.log('建立成功!')
}
}
}
</script>
複製代碼
- 編寫
CSS
// basic.vue
<style scoped>
.containers{
position: absolute;
background-color: #ffffff;
width: 100%;
height: 100%;
}
.canvas{
width: 100%;
height: 100%;
}
.panel{
position: absolute;
right: 0;
top: 0;
width: 300px;
}
</style>
複製代碼
使用命令npm run start啓動項目, 打開能夠看到:
vue中使用bpmn.js-左側工具欄
左側工具欄做用: 給圖形添加新的節點
如圖所示:
要想使用左側工具欄, 須要在項目中引用相應的樣式:
- 在
main.js中引用css:
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
// 如下爲bpmn工做流繪圖工具的樣式
import 'bpmn-js/dist/assets/diagram-js.css' // 左邊工具欄以及編輯節點的樣式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
複製代碼
- 頁面上引入
propertiesProviderModule:
// provider.vue
<script>
...
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
...
methods: {
init () {
// 獲取到屬性ref爲「canvas」的dom節點
const canvas = this.$refs.canvas
// 建模
this.bpmnModeler = new BpmnModeler({
container: canvas,
//添加控制板
propertiesPanel: {
parent: '#js-properties-panel'
},
additionalModules: [
// 左邊工具欄以及節點
propertiesProviderModule
]
})
this.createNewDiagram()
},
...
}
</script>
複製代碼
provider.vue的其餘代碼片斷都和basic.vue 相同.
此時打開頁面就發現多了左側的工具欄, 且能夠添加節點.
vue中使用bpmn.js-右側屬性欄
屬性欄的做用: 用戶在點擊圖上的節點的時候, 能獲取到該節點的屬性信息
如圖所示:
想要使用右側的屬性欄就得安裝上一個名爲bpmn-js-properties-panel的插件了.
- 安裝插件
npm i bpmn-js-properties-panel --save-D
複製代碼
- 在
main.js中引入相應樣式:
// main.js
import Vue from 'vue'
...
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右邊工具欄樣式
...
複製代碼
- 在頁面中引入
propertiesProviderModule:
// panel.vue
<script>
...
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
...
methods: {
init() {
// 獲取到屬性ref爲「canvas」的dom節點
const canvas = this.$refs.canvas
// 建模
this.bpmnModeler = new BpmnModeler({
container: canvas,
//添加控制板
propertiesPanel: {
parent: '#js-properties-panel'
},
additionalModules: [
// 左邊工具欄以及節點
propertiesProviderModule,
// 右邊的工具欄
propertiesPanelModule
]
})
this.createNewDiagram()
}
}
複製代碼
後語
上述案例項目Git地址 : github.com/LinDaiDai/b…
系列相關推薦
- 1. 全網最詳bpmn.js教材
- 2. 全網最詳bpmn.js教材-Color篇
- 3. 全網最詳bpmn.js教材-事件篇
- 4. 全網最詳bpmn.js教材-編輯、刪除節點篇
- 5. 全網最詳bpmn.js教材-properties-panel篇(下)
- 6. 全網最詳bpmn.js教材-properties-panel篇(上)
- 7. 全網最詳bpmn.js教材-http請求篇
- 8. 全網最詳bpmn.js教材-封裝組件篇
- 9. 全網最詳bpmn.js教材-自定義contextPad篇
- 10. 全網最詳bpmn.js教材-羣友問題彙總(一)
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Flink 數據傳輸及反壓詳解
-
每一个你不满意的现在，都有一个你没有努力的曾经。