胖蔡
我很懒,只会写点代码~
展开
-
bpmn-js推荐几款常用的插件
bpmn-js整体框架库的风格是以组件的方式进行实现的,这样的结构也更加便于我们更好的对其进行功能扩展,以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现,了解对应组件的功能更能便于我们区分是否需要自己实现,降低重复造轮子的行为,提高开发效率,本篇文章主要是介绍常见的bpmn-js中使用的组件库。原创 2024-04-30 16:57:21 · 296 阅读 · 0 评论 -
bpmn-js 多实例配置MultiInstanceLoopCharacteristics实现或签会签
使用bpmn-js流程图开发过程中会遇到会签和或签的问题,这个时候我们就需要使用多实例配置来实现BPMN 2.0的配置实现了,多实例任务,是从流程编辑概念之初也就是Activiti时期就存在的一个方式。所谓的多实例任务也就是字面意思,一个任务由多个人完成,常见于我们的审批流程的或签【一个审批完成即可】和会签【多个用户审批都通过才算结束】,由于存在多个成员的操作,引入了多实例的概念。原创 2024-04-30 14:06:12 · 255 阅读 · 0 评论 -
聊一聊bpmn-js中的contextpad
通过上述的了解,可以对contextpad有个大致的了解,想要自定义contextpad通过contextpad注册提供器实现方法(暂不考虑多选批量操作情况),返回操作元素根据didi插件机制的实现来分析,我们可以通过两种方式来实现我们的需求:追加contextPad和重写覆盖。原创 2024-03-12 15:06:43 · 196 阅读 · 0 评论 -
bpmn-js中实现shape的内置属性、节点的默认配置
若是深度定制可以通过在shape创建的时候配置shape属性实现,在开始添加内置属性之前,我们先来了解下shape在bpmn-js中直接创建的场景,以及内置属性创建的具体格式。两种方式均可实现内置属性节点的配置插入,第一种方式通过适配式的方式实现,尽可能少的影响建模其的独立性和完整性,后一种方式比较直接,一次性完成创建配置,减少shape的绘制次数,但代码侵入性较高,不利于不同场景的适配共用。具体可根据需求选择使用何种方式进行实现。原创 2024-03-14 15:43:06 · 310 阅读 · 0 评论 -
谈一谈bpmn-js中的moddleExtensions
稍微了解下就能知道支持BPMN 2.0的工作流模型并非只有一家,有最开始的activiti,以及后续分家后的camunda和flowable,他们都基于BPMN 2.0之后进行的后续功能的支持,为了实现flowable或者camunda元素模型的适配,又或者进行我们自己自定义元素的扩展,我们都需要引入一个三方的元素模型配置,而bpmn-js也给我们提供了自定义加载配置的方式。bpmn-js支持在创建模型的时候通过来配置自定义元素模型。原创 2024-03-05 14:09:05 · 200 阅读 · 0 评论 -
bpmn-js中实现xml数据转为json数据
开发bpmn-js建模器,希望将bpmn数据格式转为jsonbpmn-jsJSJSJSONjsonxmldomdomjson这里主要介绍上面两种方式,三方库转换如或详细使用查看官方使用教程。原创 2024-02-27 22:54:35 · 730 阅读 · 0 评论 -
聊一聊bpmn-js中的elementFactory模块
上一篇文章里我们了解了bpmn-js使用palette模块进行左侧小工具区域(也可以理解为调色板区域)的功能扩展,今天这个话题则是延续上期的palette进行开展的。从上篇文章《》我们知道,通过方法提供小工具Map这里action作为palette与主建模编辑的交互模块,palette中引用了和create模块进行绘制创建和管理。,其插件模块位于,在create。create主要是处理触发事件后的动作操作,用于创建当前元素,本篇文章主要来介绍diagram-js中的模块。原创 2024-02-26 11:13:18 · 158 阅读 · 0 评论 -
聊一聊bpmn-js中的Palette
Palette实现主要依托三个功能模块:Eventbus(详情参考bpmn-js 事件总线处理)、diagram-js的Palette插件(之后简称Palette)以及bpmn-js中的PaletteProvider(之后简称PaletteProvider)。原创 2024-02-22 15:31:40 · 232 阅读 · 0 评论 -
聊一聊bpmn-js中的依赖注入框架didi
最近在用bpmn-js来进行flowable流程图的开发工作,不可避免地希望对其运行机制做一个大致的了解,在使用bpmn-js的过程中,bpmn-js基于diagram-js实现的插件式开发方式引起了我的兴趣。diagram-js是基于一个叫didi的实现的依赖注入功能并贯穿全局,深度使用。接下来我们一起来了解下didi是如何实现依赖注入的。每一个贡献都值得尊敬,顺手给didi开源库一个Star。原创 2024-02-22 09:04:24 · 141 阅读 · 0 评论 -
聊一聊bpmn-js中的Viewer和Modeler
编辑器(或者叫建模器)的显示和简单绘制,若需要做更多工作还需加强对其的内部实现的了解。通过使用我们可以知道。中的模块做一个了解,后续会根据功能需要对其中的单个功能一一介绍使用以及如何扩展我们需要的定制功能。中的自带功能插件不一一介绍了,若有需要会另外提及。留给开发人员扩展插件的入口,原则上可以完全由开发者自定义实现。等等模块来组件成一个建模器,这也是。扩展了编辑建模功能,它扩展了。的学习,可以完成一个基础的。上述代码可以看出无论是。原创 2024-02-21 10:27:31 · 345 阅读 · 0 评论 -
Bpmn-js 属性控制
我们可以通过bpmn-js来访问对应的BPMN图例的属性信息。对应的流程图中的每个图例元素(如开始、结束、中间/边界事件等都通过属性存储对基础BPMN元素的引用。业务对象是从导入并在导出过程中序列化的实际元素。使用业务对象来读取和写入BPMN特定的属性。原创 2024-02-18 09:27:41 · 184 阅读 · 0 评论 -
bpmn-js 事件总线处理
bpmn-js中使用EventBusbpmn-js使用diagram-js实现流程图的web端绘制呈现工具)。原创 2024-02-15 12:12:13 · 463 阅读 · 0 评论 -
Bpmn-js自定义Palette元素
接下来我们就开始自定义一个Palette小工具,可以帮助我们业务快速识别需要的组件是哪个,当前组件使用已有类型shape图片绘制。原创 2024-02-07 23:11:46 · 334 阅读 · 0 评论 -
使用bpmn-js 配置颜色
本篇文章介绍如何使用bpmn-js给图例配置颜色。该示例展示了如何向BPMN图添加颜色的多种不同方法。原创 2024-02-15 17:47:27 · 392 阅读 · 0 评论 -
bpmn.js一个基于Bpmn 2.0的前端工作流展示和绘制工具
这里引用咖啡兔在《Activiti实战》一书中对于工作流的描述:工作流(Work Flow)引擎被广泛应用于各种信息化系统中,将原本散乱甚至混乱的业务梳理后制定成业务规范流程,进而约束业务的规范化处理和运转。需求人员、开发人员共同协作制定了符合BPMN 2.0规范的流程定义,之后将其部署到工作流引擎中,由它自动驱动业务流程的进行。定义:收集业务需求并转化为流程定义。发布:在系统管理(平台)中发布流程定义。执行:体的流程引擎按照事先定义的流程处理路线以任务驱动的方式执行业务流程。原创 2024-02-07 16:45:58 · 1858 阅读 · 0 评论