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。


目录
相关文章
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(13)连线(Link)连线的绑定与展开
本文介绍了Twaver HTML5中连线(Link)的绑定与展开功能,包括分组绑定、自环绑定、绑定与展开以及展开间隙等属性的设置。通过示例代码展示了如何在React组件中创建Link并设置其绑定属性,实现连线的分组管理。
20 3
Twaver-HTML5基础学习(13)连线(Link)连线的绑定与展开
导航节点的关系
导航节点的关系
导航节点的关系
导航节点的关系
|
4月前
|
前端开发 JavaScript
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
273 0
|
6月前
|
存储 Web App开发 缓存
详细解读 Fiber 节点的每一个属性含义
详细解读 Fiber 节点的每一个属性含义
|
JavaScript 前端开发 Java
69jqGrid -层级加载时展开所有行
69jqGrid -层级加载时展开所有行
36 0
|
C#
C#之四十一 在Winform中从外部拖动节点到树形结构
C#之四十一 在Winform中从外部拖动节点到树形结构
71 0
|
JavaScript API 开发者
10、DOM基础(元素节点、属性节点、文本节点、轮播图、改变颜色、选中取消)
10、DOM基础(元素节点、属性节点、文本节点、轮播图、改变颜色、选中取消)
114 0
10、DOM基础(元素节点、属性节点、文本节点、轮播图、改变颜色、选中取消)