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

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

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


网络异常,图片无法展示
|


主要留意属性/内容


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:节点唯一标识,新增节点自动生成,自动生成节点有固定单词开头


  1. Shape.type: 节点类型


  1. Shape.businessObject: 节点的绑定属性,常用于业务流转;原生支持属性会同步更新到xml的节点内部;不具有get/set方法,vue2.x好像不能直接监听变化


  1. Shape.order: 暂时还不了解


  1. 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输入输出


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


  1. 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>


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


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


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


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


  1. 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。


目录
相关文章
|
6月前
带有上下级关系的数据改为树形菜单的数据
带有上下级关系的数据改为树形菜单的数据
24 0
|
7月前
31activiti - 连线
31activiti - 连线
21 0
|
7月前
27zTree - 拖拽节点基本控制
27zTree - 拖拽节点基本控制
18 0
|
12月前
|
C语言
labview节点公式节点反馈节点表达节点属性节点
labview节点公式节点反馈节点表达节点属性节点
155 0
|
JavaScript API 开发者
10、DOM基础(元素节点、属性节点、文本节点、轮播图、改变颜色、选中取消)
10、DOM基础(元素节点、属性节点、文本节点、轮播图、改变颜色、选中取消)
87 0
10、DOM基础(元素节点、属性节点、文本节点、轮播图、改变颜色、选中取消)
|
Java Scala 开发者
类的层级关系和作业布置|学习笔记
快速学习类的层级关系和作业布置。
112 0
类的层级关系和作业布置|学习笔记
|
缓存 算法 前端开发
关联线探究,如何连接流程图的两个节点
如果你用过流程图绘制工具,那么可能会好奇节点之间的连接线是如何计算出来的,跟随本文一起来探究一下吧。
368 0
☆打卡算法☆LeetCode 117、 填充每个节点的下一个右侧节点指针 II 算法解析
给定一个二叉树,填充它的每个next指针,让这个指针指向其下一个右侧节点。”