bpmnjs+vue中文文档API常见方法使用总结

项目环境：

bpmn.js: 7.5.x
vue: 2.x

1、定义Modeler

bpmn-js自定义之Modeler以及相关引用

2、modeler实例如何获取Modeler各模块？

this.eventBus = this.modeler.get("eventBus")
this.modeling = this.modeler.get("modeling")
this.moddle = this.modeler.get("moddle") 
this.bpmnFactory = this.modeler.get("bpmnFactory")
this.elementRegistry = this.modeler.get("elementRegistry") 
this.canvas = this.modeler.get("canvas") 
this.selection = this.modeler.get("selection")

3、流程设计器编辑好的流程图形如何获取xml、svg？

const {xml} = this.modeler.saveXML({format: true})
const {svg} = this.modeler.saveSVG()

4、拿到xml如何渲染成流程图？

this.modeler.importXML(xml)

5、如何让流程图自动居中、流程图缩放？

this.modeler.get('canvas').zoom('fit-viewport', 'auto')//画布自适应居中
this.modeler.get('canvas').zoom(2.0)//放大至2倍

6、获取流程所有图形shape对象

this.elementRegistry.getAll()[0].children

7、新建流程时初始化的xml（flowable）
newDiagram.js

export default function (processId, processName, category, description) {
    return `<?xml xml=string version="2.0" encoding="UTF-8"?>
    <bpmn:definitions xmlns:flowable="http://flowable.org/bpmn" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" targetNamespace="${category}">
      <bpmn:process id="${processId}" name="${processName}" isExecutable="true">
          <bpmn:documentation>${description}</bpmn:documentation>
      </bpmn:process>
      <bpmndi:BPMNDiagram id="BPMNDiagram_1">
        <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
          <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
            <dc:Bounds height="36.0" width="36.0" x="160.0" y="160.0"/>
          </bpmndi:BPMNShape>
        </bpmndi:BPMNPlane>
      </bpmndi:BPMNDiagram>
    </bpmn:definitions>`

//用法：let newDiagramXml = await (require('./newDiagram').default)(processId, processName, category, description)

8、设置图形shape节点的颜色

this.modeling = this.modeler.get('modeling')
this.modeling.setColor(shapes, { stroke: 'green' })
//shapes可以是单个shape对象，也可以是shape对象数组

9、通过图形id获取图形shape节点对象

this.elementRegistry = this.modeler.get("elementRegistry")
let shape = this.elementRegistry.get(shapeId)

10、改变图形shape节点的某些属性

this.modeling.updateProperties(shape,{ 
    name: '用户任务',
    loopCharacteristics: loopCharacteristics，//多实例
    extensionElements: extensions,//扩展属性
    'flowable:assignee': 'userId_123'//flowable前缀属性
});

11、获取根节点 bpmn:process

this.modeler.getDefinitions().rootElements[0]

12、鼠标选中节点图形事件

this.modeler.on('selection.changed',  e => {
    const tempElement = e &&  e.newSelection &&  e.newSelection[0]
    if(tempElement && tempElement.type !="bpmn:Process"){
        this.currentElement = tempElement
    }
})

13、节点图形属性改变事件

this.modeler.on('element.changed', e => {
    if(e.element && e.element.type!="bpmn:Process"){
        this.currentElement = e.element
    }
})

14、自动选中/取消选中图形事件

//选中
this.modeler.get('selection').select(shapes)
//shapes参数为某个图形shape对象，也可以是图形数组[shape1,shape2,...]，代表选中多个图形节点
//注意：此方法会触发this.modeler.on('selection.changed', callback)事件

//取消选中
this.modeler.get('selection').deselect(shape)
//注意：取消选中只能传单个element对象，不支持数组