Bpmn 节点与连线部分属性整理

其实Bpmn的配置信息与更新方式很多可以通过控制台来查看，结合源码基本上可以完成80%的自定义内容，这篇文章主要用来记录笔者最近在开发过程中遇到的部分属性和api。

一个多种属性配置的用户任务节点

主要留意属性/内容

shape: {
		id: "节点id",
        type: "节点类型",
    	x: "x轴坐标",
        y: "y轴坐标",
        width: "宽度",
        height: "高度",
        businessObject: {
            	$type: "与上级 type 一致",
                documentation: "元素文档"，
                extensionElements: "包含监听器、输入输出、扩展属性等",
                formKey: "绑定表单key",
                id: "与上级 id 一致",
                name: "节点名称",
                $attrs: {}, // 自定义属性
                $parent: {} // 父级元素
        }，
        outgoing: refs[], // 直连的出口元素（通常为连接线）
        incoming: refs[] //  直连的来源元素（通常为连接线）
}

属性分析

// 原始实例和工具类实例
this.modeler = new BpmnModeler(options);
const eventBus = this.modeler.get("eventBus");
const modeling = this.modeler.get("modeling");
const elementRegistry = this.modeler.get("elementRegistry");
const bpmnFactory = this.modeler.get("bpmnFactory");
const moddle = this.modeler.get("moddle");
// 获取选中元素（这里监听鼠标单击事件）
eventBus.on("element.click", (e) => {
         if (!e || !e.element) return;
 		this.element = e.element;
       });
// 保证元素有效
const shape = this.modeler.get("elementRegistry").get(this.element.id);

1. 基础信息

1. Shape.id：节点唯一标识，新增节点自动生成，自动生成节点有固定单词开头
2. Shape.type: 节点类型
3. Shape.businessObject: 节点的绑定属性，常用于业务流转；原生支持属性会同步更新到xml的节点内部；不具有get/set方法，vue2.x好像不能直接监听变化
4. Shape.order: 暂时还不了解
5. Shape.parent: 父级元素，与businessObject内的$parent一致

2. BusinessObject

包含节点的大部分配置信息与自定义属性，属性更新可使用updateProperties方法

modeling.updateProperties(shape, {
   name: "节点1"，
   myConfig: { nodeName: "nodeName1" }
});

原生支持属性会同步更新到Shape.businessObject内，并更新到xml节点内；用户自定义属性，会更新到Shape.businessObject.$attrs内，并转换为{ [key: string]: string }的形式更新为xml节点标签的属性。

比如上面的myConfig会更新为...

2.1 documentation元素文档

BusinessObject.documentation: ModdleElement[]

// 变量和工具类的声明方式在上面
// 创建元素文档
const DOC  = bpmnFactory.create("bpmn:Documentation", { text: "测试元素文档" })
// 更新到节点
modeling.updateProperties(shape, {
	documentation: [ DOC ]
})

2.2 extensionElements扩展配置

包含两个属性： $type: "bpmn:ExtensionElements" 和values: ModdleElement[]

values内部包含的常用类型有[ "camunda:InputOutput", "camunda:Properties", "camunda:ExecutionListener", "camunda:TaskListener", "camunda:FormData" ]

1. camunda:InputOutput输入输出

待试验，流程与创建扩展属性类似

2. camunda:Properties扩展属性

// 1. 创建一个扩展属性
const exCamProperty = bpmnFactory.create("camunda:Property", {
    name: "clickAdd", 
    value: "definedWithJS"
});
console.log("exCamProperty", exCamProperty);
// 2. 创建一组扩展属性分组（默认panel只有一个， 包含若干个 扩展属性）
const exProperties = bpmnFactory.create("camunda:Properties", { values: [] });
console.log("exProperties", exProperties);
// 3. 创建节点的扩展配置项
const extensions = bpmnFactory.create("bpmn:ExtensionElements", { values: [] });
console.log("extensions", extensions);
// 组装数据
exProperties.values.push(exCamProperty);
extensions.values.push(exProperties);
// 更新到节点
this.modeling.updateProperties(element, {
	extensionElements: extensions
});

// 更新后的结果（xml）
// <userTask id="Activity_1owrwsz">
//    <extensionElements>
//    <camunda:properties>
//        <camunda:property name="clickAdd" value="definedWithJS" />
//        </camunda:properties>
// 	 </extensionElements>
// </userTask>

3. camunda:ExecutionListener 监听器 -- 执行监听

待试验，流程与创建扩展属性类似

4. camunda:TaskListener监听器 -- 任务监听

待试验，流程与创建扩展属性类似

5. camunda:FormData表单

待试验，流程与创建扩展属性类似

两个条件配置的连接线

基础信息与节点差不多

属性分析

BusinessObject

1. BusinessObject.ConditionExpression

连线对应条件表达式/脚本配置

// 变量和工具类的声明方式在上面
// 创建条件
const conditionExpression  = moddle.create("bpmn:FormalExpression", { body: "${ handle == 'pass' }" })
// 更新到节点
modeling.updateProperties(shape, {
	conditionExpression: conditionExpression
})

2. BusinessObject.sourceRef

连接线来源元素

3. BusinessObject.targetRef

连接线目标元素

后记

由于工作需要（其实不是很需要），在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process Designer, 预览地址 MiyueFE blog, 欢迎 fork 和 star。