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。


目录
相关文章
|
前端开发 JavaScript API
Bpmn.js 进阶指南之右键菜单
Bpmn.js 进阶指南之右键菜单
1399 0
深入探究Camunda监听器
执行监听器与任务监听器
2007 1
深入探究Camunda监听器
深入探究Camunda加签问题
camunda加签的两种方式
2747 0
|
前端开发
Bpmn.js 进阶指南之Renderer详解
Bpmn.js 进阶指南之Renderer详解
1182 2
|
数据可视化 前端开发 Java
SpringBoot 集成 Flowable + Flowable Modeler 流程配置可视化(图解)(一)
SpringBoot 集成 Flowable + Flowable Modeler 流程配置可视化(图解)
4196 0
|
XML JSON 前端开发
bpmn.js 使用常见问题(不定时持续更新)
bpmn.js 使用常见问题(不定时持续更新)
6670 2
|
11月前
|
存储 Java API
SpringBoot整合Flowable【02】- 整合初体验
本文介绍了如何基于Flowable 6.8.1版本搭建工作流项目。首先,根据JDK和Spring Boot版本选择合适的Flowable版本(7.0以下)。接着,通过创建Spring Boot项目并配置依赖,包括Flowable核心依赖、数据库连接等。然后,建立数据库并配置数据源,确保Flowable能自动生成所需的表结构。最后,启动项目测试,确认Flowable成功创建了79张表。文中还简要介绍了这些表的分类和常用表的作用,帮助初学者理解Flowable的工作原理。
2137 0
SpringBoot整合Flowable【02】- 整合初体验
|
XML JSON 前端开发
Bpmn.js 进阶指南之原理分析与模块改造(下)
Bpmn.js 进阶指南之原理分析与模块改造
2258 2
|
JavaScript
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
这篇文章介绍了如何在Vue 2.X和Vue 3.X项目中封装和使用Monaco Editor在线代码编辑器,包括安装所需依赖、创建封装组件、在父组件中调用以及处理Vue 3中可能遇到的问题。
3048 1
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
|
XML 缓存 JSON
Bpmn.js 进阶指南之原理分析与模块改造(上)
Bpmn.js 进阶指南之原理分析与模块改造
2716 1