bpmn.js 預覽流程圖禁用圖形菜單，禁止編輯等功能

1. package.json引入

2.引入

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

import MoveModule from 'diagram-js/lib/features/move'

import ModelingModule from 'bpmn-js/lib/features/modeling'

import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'

關鍵代碼：

this.bpmnViewer = new Viewer({

container: this.canvas,

additionalModules: [

MoveModule, // 可以調整元素

ModelingModule, // 基礎工具 MoveModule、SetColor 等依賴于此

MoveCanvasModule, // 移動整個畫布

{

paletteProvider: ["value", ''], //禁用/清空左側工具欄

labelEditingProvider: ["value", ''], //禁用節點編輯

contextPadProvider: ["value", ''], //禁用圖形菜單

bendpoints: ["value", {}], //禁用連線拖動

zoomScroll: ["value", ''], //禁用滾動

moveCanvas: ['value', ''], //禁用拖動整個流程圖

move: ['value', ''] //禁用單個圖形拖動

}

]

});

<div class="box-card_content">
    <div class="canvas" ref="canvas"></div>
</div>

import Viewer from 'bpmn-js/lib/Viewer'
import MoveModule from 'diagram-js/lib/features/move'
import ModelingModule from 'bpmn-js/lib/features/modeling'
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
export default {
    data(){
      return {
        bpmnViewer:null,
        zoom:null,
        canvas:null,
      }
    },
    mounted(){
      this.canvas = this.$refs.canvas;
      this.bpmnViewer = new Viewer({
        container: this.canvas,
        additionalModules: [
          MoveModule, // 可以調整元素
          ModelingModule, // 基礎工具 MoveModule、SetColor 等依賴于此
          MoveCanvasModule, // 移動整個畫布
          {
            paletteProvider: ["value", ''], //禁用/清空左側工具欄
            labelEditingProvider: ["value", ''], //禁用節點編輯
            contextPadProvider: ["value", ''], //禁用圖形菜單
            bendpoints: ["value", {}], //禁用連線拖動
            zoomScroll: ["value", ''], //禁用滾動
            moveCanvas: ['value', ''], //禁用拖動整個流程圖
            move: ['value', ''] //禁用單個圖形拖動
          }
        ]
      });
      let url = '/static/name_gu5yee5o.bpmn20.xml';
      let xmlDoc = this.checkXMLDocObj(url)
      this.createNewDiagram(xmlDoc);
    },
    methods:{
      async createNewDiagram(data) {
        // 将字元串轉換成圖顯示出來
        data = data.replace(/<!\[CDATA\[(.+?)]]>/g, function (match, str) {
          return str.replace(/</g, '<')
        });
        try {
          // 調用檢視器底層方法引入xml字元串 注意 xml檔案裡面的name屬性不能為中文 不然無法渲染會報錯
          await this.bpmnViewer.importXML(data)
          const _this = this;
          setTimeout(() => {
            // 将圖居中在内容區域
            this.zoom = this.bpmnViewer.get('canvas').zoom('fit-viewport');
            const bbox = document.querySelector('.wrapper .viewport').getBBox()
            const currentViewbox = _this.bpmnViewer.get('canvas').viewbox();
            const elementMid = {
              x: bbox.x + bbox.width / 2 - 65,
              y: bbox.y + bbox.height / 2,
            };
            _this.bpmnViewer.get('canvas').viewbox({
              x: elementMid.x - currentViewbox.width / 2 + 100,
              y: elementMid.y - currentViewbox.height / 2,
              width: currentViewbox.width,
              height: currentViewbox.height,
            });
            _this.zoom = (bbox.width / currentViewbox.width) * 1.8;
            const eventBus = _this.bpmnViewer.get('eventBus');
            // 注冊節點事件，eventTypes中可以寫多個事件
            const eventTypes = ['element.click']
            // 擷取節點執行個體
            const elementRegistry = this.bpmnViewer.get('elementRegistry')
            // 可以為節點設定顔色
            const modeling = this.bpmnViewer.get('modeling')
            eventTypes.forEach((eventType) => {
              eventBus.on(eventType, (e) => {
                const { element } = e
                if (!element.parent) return
                if (!e || element.type === 'bpmn:Process') {
                  return false
                } else {
                  // 判斷是否有點選事件并且不是開始和結束節點也不為線條
                  if (eventType === 'element.click' && /djs-shape/.test(e.gfx.className.animVal)) {
                    if (/hightshape/.test(e.gfx.className.animVal)) {
                      return
                    }
                    // 節點點選後想要做的處理
                    // 這裡可以進行方法調用  fn（）
                    // 這個方法可以為點選節點添加樣式 e.gfx.classList.add('hightshape')
                    // elementRegistry.get(e.id) 擷取到選中的節點執行個體
                    //設定點選顔色
                    modeling.setColor(elementRegistry.get('Flow_0ul2l7y_di'), {
                      // 背景色
                      fill: 'yellow',
                      //邊框線
                      stroke:'red'
                    })
                  }
                }
              })
            })
          })
        } catch (err) {
          console.log(err)
        }
      },
      checkXMLDocObj(xmlFile){
        let xmlDoc = this.loadXML(xmlFile);
        if (xmlDoc == null) {
          alert('您的浏覽器不支援xml檔案讀取,于是本頁面禁止您的操作,推薦使用IE5.0以上可以解決此問題!');
        }
        return xmlDoc
      },
      loadXML(xmlFile){
        var xmlDoc;
        if (window.ActiveXObject) {
          xmlDoc = new ActiveXObject('Microsoft.XMLDOM');//IE浏覽器
          xmlDoc.async = false;
          xmlDoc.load(xmlFile);
        }
        else if (navigator.userAgent.indexOf("Firefox")>0) { //火狐浏覽器
          //else if (document.implementation && document.implementation.createDocument) {
          //這裡主要是對谷歌浏覽器進行處理
          xmlDoc = document.implementation.createDocument('', '', null);
          xmlDoc.load(xmlFile);
        }
        else{ //谷歌浏覽器
          var xmlhttp = new window.XMLHttpRequest();
          xmlhttp.open("GET",xmlFile,false);
          xmlhttp.send(null);
          if(xmlhttp.readyState == 4){
            xmlDoc = xmlhttp.responseText;
          }
        }
        return xmlDoc;
      },
    }
  }