项目环境:
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对象,不支持数组