bpmn.js設置節點顏色高亮和工作流圖的大小和位置

記錄一下最近做camunda工作流時候整合VUE bpmn.js時候遇到的坑吧

1、VUE中引入bpmn.js，在package.json在原有的基礎下加入以下內容後npm install

  "devDependencies": {
    "vue-template-compiler": "2.6.10",
    "bpmn-js-properties-panel": "^0.33.2",
    "camunda-bpmn-moddle": "^4.0.1"
  },
  "dependencies": {
    "bpmn-js": "^6.4.2"
  },

2、VUE頁面引入的時候有兩種方式（可能不止兩種方式，我只試了這兩種）

方式一：這種方式引入的是編輯模式的，有左邊的編輯面板

import BpmnModeler from 'bpmn-js/lib/Modeler'

方式二： 這種方式引入的是查看模式，僅可以看，不可以編輯

import BpmnViewer from 'bpmn-js/lib/Viewer'

3、接下來以Viewer模式來介紹下如何使用

（1）在<template>裏面加個div，樣式可以不設置，不設置默認頁面居中

<div style="left: 0px;width:800px;height: 400px;" ref="bpnmDiv"></div>

（2）在<script>裏面添加：

a.要注意importXml後面的寫法是

this.bpmnViewer.importXML(bpmnXmlStr, (err) => {})

千萬不要寫成這樣，就是因爲寫成下面這個樣子，所以會報錯Cannot read property 'canvas' of undefined（bpmn.js裏面給的例子是寫成下面這個丫子，但是寫道vue裏面不要這麼寫，可自行查看箭頭函數=>的意思）

this.bpmnModeler.importXML(bpmnXmlStr, function(err) {})

b.如果想要設置這張圖在頁面的位置，一定要加入下面這句，具體的含義還沒找到，關於bpmn.js的文檔好難找

bpmnCanvas.zoom('fit-viewport')

c.方法中的參數bpmnXmlStr就是後端傳給前端的.bpmn文件的內容，是個xml的字符串

import BpmnViewer from 'bpmn-js/lib/Viewer'
data() {
    return {
      bpmnViewer: null,
    }
},
methods: {
  drawBpmn(bpmnXmlStr) {
    this.bpmnViewer && this.bpmnViewer.destroy()
    this.bpmnViewer = new BpmnViewer({
      container: this.$refs.bpnmDiv
    })
    this.bpmnViewer.importXML(bpmnXmlStr, (err) => {
      if (err) { console.error(err) }
      const bpmnCanvas = this.bpmnViewer.get('canvas')
      bpmnCanvas.zoom('fit-viewport')
      bpmnCanvas.addMarker('fifthTask_ANONYMOUS', 'highlight');
    })
  }
}

（3）<style>中添加（有些樣式可以不用添加，一級import的路徑也不一定是這個，根據你們項目的實際路徑來引入，我這個是自己的目錄結構改的比較多，主要是寫個highlight的樣式，這個樣式就是節點高亮的樣式）：

<style lang="scss">
  @import '../../../node_modules/bpmn-js/dist/assets/diagram-js.css';
  @import '../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
  @import '../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
  @import '../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
  @import '../../../node_modules/bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
  .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
    fill: green !important; /* color elements as green */
  }
</style>