vue+bpmn-js 示例/基础入门/动态创建流程节点

先附一个完整的示例，下面做具体介绍

该示例完成的是动态添加流程节点。最终效果如下

如果到这里不是大家想要的结果，那就不用在向下看了。

示例需安装如下依赖

npm i bpmn-js

如里需要用到右侧属性栏，需安装

npm i bpmn-js-properties-panel

默认情况下是不显示左侧工具栏和右侧属性栏的。

显示左侧工具栏只需引入css

import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'

 显示右侧属性栏则需先安装依赖，然后引入以下部分

import {BpmnPropertiesPanelModule,BpmnPropertiesProviderModdule} from 'bpmn-js-properties-panel'
import 'bpmn-js-properties-panel/dist/assets/properties-panel.css'

同时在实例化BpmnModeler时，配置如下内容

this.bpmnModeler = new BpmnModeler({
                .....
                propertiesPanel:{
                    parent:'#properties'
                },
                additionalModules:[
                    BpmnPropertiesPanelModule,
                    BpmnPropertiesProviderModdule
                ]
            })

"#properties"为显示右侧属性栏的容器 

动态添加流程节点主要通过以下对象

//模型对象

this.modeling = this.bpmnModeler.get("modeling")

//元素对象
this.elementFactory = this.bpmnModeler.get("elementFactory")

//图形注册对象
this.elementRegistry = this.bpmnModeler.get("elementRegistry")

创建节点

this.elementFactory.createShape(option) 

将节点添加到模型中 

this.modeling.createShape(startEvent,{x:200,y:200},this.processElement) 

为两个节点创建连线

this.modeling.connect(startEvent,userTask) 

整体内容介绍就结束了，以下是注意事项:

事项一：

this.processElement  对象需要在importXML或createDiagram方法后获取，之前获取者为undefined，导致节点添加报错

 事项二：

引用右侧属性栏部分代码后报错，确认是否是由于未引入指定loader无法解析。

如【?.】可选链操作符【??】

解决办法思路，vue或react项目引入对应loader。或者修改依赖包文件，去掉该种写法。