1、定义Modeler：
2、流程设计器编辑好的流程图形如何获取xml、svg？
const {xml} = this.modeler.saveXML({format: true})
const {svg} = this.modeler.saveSVG()
3、拿到xml如何渲染成流程图？
this.modeler.importXML(xml)
4、如何让流程图自动居中、流程图缩放？
this.modeler.get('canvas').zoom('fit-viewport', 'auto')//画布自适应居中
this.modeler.get('canvas').zoom(2.0)//放大至2倍
5、获取流程所有图形shape对象
this.elementRegistry.getAll()[0].children
6、新建流程时初始化的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)
7、设置图形shape节点的颜色
this.modeling = this.modeler.get('modeling')
this.modeling.setColor(shapes, { stroke: 'green' })
//shapes可以是单个shape对象，也可以是shape对象数组
8、通过图形id获取图形shape节点对象
this.elementRegistry = this.modeler.get("elementRegistry")
let shape = this.elementRegistry.get(shapeId)
9、改变图形shape节点的某些属性
this.modeling.updateProperties(shape,{
name: '用户任务',
loopCharacteristics: loopCharacteristics，//多实例
extensionElements: extensions,//扩展属性
'flowable:assignee': 'userId_123'//flowable前缀属性
});
10、获取根节点 bpmn:process
this.modeler.getDefinitions().rootElements[0]
11、鼠标选中节点图形事件
this.modeler.on('selection.changed', e => {
const tempElement =e && e.newSelection && e.newSelection[0]
if(tempElement && tempElement.type !="bpmn:Process"){
this.currentElement = tempElement
}
})
12、节点图形属性改变事件
this.modeler.on('element.changed', e => {
if(e.element && e.element.type!="bpmn:Process"){
this.currentElement = e.element
}
})
13、自动选中/取消选中图形事件
//选中
this.modeler.get('selection').select(shapes)
//shapes参数为某个图形shape对象，也可以是图形数组[shape1,shape2,...]，代表选中多个图形节点
//注意：此方法会触发this.modeler.on('selection.changed', callback)事件
//取消选中
this.modeler.get('selection').deselect(shape)
//注意：取消选中只能传单个element对象，不支持数组
14、自定义palette、paletteProvider 左侧工具栏，更换容器
15、创建/修改扩展属性bpmn:ExtensionElements 与多实例 bpmn:MultiInstanceLoopCharacteristics 的方法
bpmnjs如何创建ExtensionElements扩展属性与多实例MultiInstanceLoopCharacteristics
16、自定义右侧属性面板properties-panel
17、bpmnjs全局连线如何实现不间断一直连的效果
18、bpmnjs如何在xml存储表单数据json（扩展属性ExtensionElements）
19、bpmnjs+vue自定义修改图形默认颜色篇之BpmnRenderer
20、bpmnjs怎么禁止节点拖动和编辑等功能变成只读模式？
21、bpmnjs自定义之flowable扩展属性自定义标签描述文件descriptor
22、bpmnjs自定义之初始化流程设计器[新建、编辑、保存、发布的使用例子]
23、bpmnjs自定义之connect连线模块
24、bpmnjs自定义之规则BpmnRules模块
25、bpmnjs自定义规则之同方向防止重复连线设置BpmnRules
