如何自己实现一个丝滑的流程图绘制工具（一）vue如何使用

news2024/11/25 22:32:10

背景

项目需求突然叫我实现一个类似processOn一样的在线流程图绘制工具。
这可难倒我了，立马去做调研，在github上找了很多个开源的流程图绘制工具，
对比下来我还是选择了 bpmn-js

原因：
1、他的流程图是涉及到业务的，比如开始事件、结束事件等
2、扩展性很强（这个扩展性也太强了，很多api都是看源码找到,😭）
3、可以实现一个完整的流程事件，并进行模拟
在这里插入图片描述
接下来看看在vue项目中我们如何使用bpmn-js

第一步

引入npm 相关的包

npm install bpmn-js
npm install diagram-js

第二步

项目中使用

<template>
  <div class="containers" tabindex="0">
    <div
      id="canvas"
      ref="canvas"  
      tabindex="0"      
      @contextmenu.prevent
    ></div>
    <a ref="downloadLink" hidden></a>
  </div>
</template>
<script>
import CustomModeler from './config'
export default {
	methods:{
		init() {
		this.bpmnModeler = new CustomModeler({
          container: this.$refs.canvas,
          keyboard: {
            bindTo: this.$el
          },
          // 添加控制板
          propertiesPanel: {
            parent: '#js-properties-panel'
          },
          // 添加控制板
          overlays: {
            defaults: {
              show: { minZoom: 0.1 },
              scale: true
            }
          },
         additionalModules
        })
        this.createNewDiagram()
		},
		 /**
     * bpmn绘制操作
     */
    createNewDiagram() {
       // 将字符串转换成图显示出来
        this.bpmnModeler.importXML(this.xmlData).then(() => {
          this.bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
        })
       },
	}
}
</script>

config/index.js

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

import inherits from 'inherits'

import CustomModule from './custom'
import DisableModeling from './custom/disable-modeling'

export default function CustomModeler(options) {
  Modeler.call(this, options)

  this._customElements = []
}

inherits(CustomModeler, Modeler)

CustomModeler.prototype._modules = [].concat(CustomModeler.prototype._modules,
 [CustomModule, DisableModeling])