网上开源的流程引擎和表单引擎基本都只提供基础功能博主有个项目涉及到这块内容本来想简单引用一下网上开源的毕竟这块功能在博主的项目里不是核心但是找了多个开源项目后发现表单和流程引擎虽然已经烂大街了但真正做的好的又开源的其实不多而且往深的做其实也有很高的门槛前端、后端尤其是抽象能力都有一定要求。一时心血来潮准备深入研究下这块东西顺带把学习的过程记录下来所以才有了这个系列文章。所有文章doc目录下和官网的样例代码都放在了这个仓库https://gitee.com/fish982000/bpmn-js-examples-main.git后续会持续更新。在bpmn-js里overlays、canvas、elementRegistry、modeling是最核心、最常用的 4 个模块几乎所有二次开发标注、移动、修改、获取元素都离不开它们。一、统一获取方式所有模块都这么拿在 bpmn-js 实例化后通过inject或get()获取constmodelernewBpmnModeler({container:#canvas});// 获取四大核心对象constoverlaysmodeler.get(overlays);constcanvasmodeler.get(canvas);constelementRegistrymodeler.get(elementRegistry);constmodelingmodeler.get(modeling);二、四大对象详细说明1. overlays ——元素标注/悬浮层作用给流程节点任务、网关、事件添加额外HTML标注比如错误提示、状态图标、统计数字、按钮。作用想在节点旁边/上面显示东西 → 用 overlays常用 API// 添加标注overlays.add(element,position类,{html:div我是标注/div,// 自定义HTMLshow:{minZoom:0.5}// 缩放控制显示});// 清空某个元素的标注overlays.remove(element);// 清空所有标注overlays.clear();官方提供的pizza案例中给CalmCustomerTask节点增加一层绿色遮障var shape elementRegistry.get(CalmCustomerTask); var $overlayHtml $(div classhighlight-overlay) .css({ width: shape.width, height: shape.height } overlays.add(CalmCustomerTask, { position: { top: 0, left: 0 }, html: $overlayHtml });显示如下官方案例中其他几种改变节点背景颜色的方法// Option 2: Color via BPMN 2.0 Extension var elementToColor elementRegistry.get(SelectAPizzaTask); modeling.setColor([ elementToColor ], { stroke: green, fill: rgb(152, 203, 152) }); // Option 3: Color via Marker CSS Styling canvas.addMarker(OrderReceivedEvent, highlight);典型用途节点错误/警告小红点审批状态图标节点执行次数/耗时自定义按钮如删除、编辑2. canvas ——画布控制器作用控制整个画布视图和流程数据无关只控制显示、缩放、居中、背景、画布容器。一句话想操作画布视野 → 用 canvas常用 API// 缩放并居中所有元素canvas.zoom(fit-viewport,auto);// 手动设置缩放比例canvas.zoom(0.8);// 获取画布根元素constrootElementcanvas.getRootElement();// 平移画布canvas.pan({x:100,y:100});// 清空画布删除所有元素canvas.clear();典型用途打开流程图后自动居中实现“适应画布”“放大”“缩小”获取画布视口信息3. elementRegistry ——元素注册表作用查询、获取所有流程节点任务、连线、网关、事件等只读为主。一句话想找某个节点 → 用 elementRegistry常用 API// 根据 ID 获取元素最常用constelementelementRegistry.get(Activity_123);// 获取所有元素constallElementselementRegistry.getAll();// 过滤获取所有任务节点consttaskselementRegistry.filter(elel.typebpmn:Task);典型用途根据业务 ID 找到对应节点遍历所有流程元素获取元素的形状、位置、类型4. modeling ——流程模型编辑器作用修改流程数据增删改节点、连线、属性、颜色、名称。这是唯一能真正修改 BPMN 模型的对象。常用 API// 更新元素名称modeling.updateLabel(element,新名称);// 设置元素颜色填充色 边框色modeling.setColor(element,{fill:#ff0000,stroke:#000000});// 移动元素modeling.moveElements([element],{x:50,y:50});// 删除元素modeling.removeElements([element]);// 创建连线modeling.connect(sourceEl,targetEl);典型用途动态修改节点名称高亮节点流程跟踪动态增删任务自动布局三、总结overlays画标注、显示小红点/图标canvas控制画布视野、缩放、居中elementRegistry查找、获取元素modeling修改元素、颜色、名称、连线四、最经典组合使用示例流程跟踪高亮标注// 1. 获取元素consttaskelementRegistry.get(Activity_1);// 2. 修改颜色高亮modeling.setColor(task,{fill:#4aa3f7,stroke:#000});// 3. 添加标注overlays.add(task,{html:div stylecolor:white执行中/div});// 4. 画布居中canvas.zoom(fit-viewport);