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

背景

项目需求突然叫我实现一个类似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"><divid="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])