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;
      },
    }
  }