bpmn.js教程2

1.bpmn,js的事件

在 bpmn.js 中，节点事件绑定主要用于监听和响应流程图中 BPMN 元素（如任务、事件、网关等）的交互行为。你可以通过事件绑定实现点击高亮、属性展示、自定义右键菜单、节点拖动等交互逻辑。

🧩 1.常见事件类型

🎯 二、绑定事件的方式

✅ 方法一：使用 modeler.on() 或 viewer.on()

modeler.on('element.click', (event) => { 
const { element } = event; 
console.log('点击的元素:', element);
 });

✅ 方法二：注册插件方式（适用于复杂逻辑）

你可以在插件中监听事件：

export default function CustomEventPlugin(eventBus) {
 eventBus.on('element.click', (event) => {
 const { element } = event; alert(`你点击了 ${element.type} 类型的节点`); 
}); } 
CustomEventPlugin.$inject = ['eventBus'];

然后在初始化时引入该插件：

const modeler = new BpmnModeler({ container: '#canvas', 
additionalModules: [CustomEventPlugin] });

📌 三、常用事件详解

1️⃣ element.click —— 点击节点事件

modeler.on('element.click', (event) => {
 const { element } = event; if (element.type === 'bpmn:Task') { 
alert(`你点击了一个任务节点：${element.id}`); } });

2️⃣ selection.changed —— 选中变化事件

modeler.on('selection.changed', ({ newSelection }) => { 
if (newSelection.length > 0) { 
const selectedElement = newSelection[0]; 
console.log('当前选中节点:', selectedElement); 
} 
});

3️⃣ element.hover / element.out —— 悬停事件

可用于实现鼠标悬停高亮、显示工具提示等效果：

modeler.on('element.hover', (event) => { 
{ element } = event; 
console.log('鼠标悬停在:', element.id);
 });
 modeler.on('element.out', (event) => { 
const { element } = event;
 console.log('鼠标离开:', element.id); 
});

4️⃣ commandStack.changed —— 流程图修改事件

当用户编辑流程图后，可以自动保存最新 XML 内容：

modeler.on('commandStack.changed', async () => { 
const { xml } = await modeler.saveXML({ format: true });
 console.log('流程图已更新:', xml); 
});

5️⃣ shape.added —— 新增节点事件

modeler.on('shape.added', (event) => { 
const { shape } = event; console.log('新增了一个节点:', shape); 
});

🎨 四、示例：点击节点高亮 + 展示属性

import React, { useEffect, useRef } from 'react'; 
import BpmnModeler from 'bpmn-js/lib/Modeler'; 
const BpmnEditor = ({ xmlString }) => { c
onst ref = useRef(null);
 useEffect(() => { 
if (!ref.current || !xmlString) return;
 const modeler = new BpmnModeler({ container: ref.current, }); modeler.importXML(xmlString).catch((err) => {
 console.error('Failed to load BPMN', err); }); 
// 监听节点点击事件 
modeler.on('element.click', (event) => { 
const { element } = event; 
if (element.type !== 'bpmn:Process') { 
alert(`你点击了节点：${element.id} (${element.type})`); 
} 
}); 
// 监听选中变化事件 modeler.on('selection.changed', ({ newSelection }) => {
 if (newSelection.length > 0) { 
const selected = newSelection[0]; 
console.log('当前选中:', selected.businessObject); 
} 
}); 
}, 
[xmlString]); 
return <div ref={ref} style={
  
  { width: '100%', height: '600px' }} />;
 }; 
export default BpmnEditor;

🧱 五、进阶：绑定右键菜单事件（Context Pad）

你可以监听 contextPad.open 来扩展右键菜单功能：

modeler.on('contextPad.open', (event) => { 
const { element } = event; 
console.log('右键菜单打开于节点:', element.id); 
});

也可以通过插件方式自定义右键菜单项，例如添加“复制”、“删除”等功能。

✅ 总结

2.ElementFactory Diagram元素工厂

1.ElementFactory 的核心功能‌

1. ‌元素实例化‌

   • 作为底层工厂类，负责创建 BPMN 元素实例，用于创建符合 BPMN 2.0 规范的流程元素（如任务、网关、事件等），返回包含业务对象（businessObject）和图形定义（di）的完整元素模型  ，并自动生成唯一 ID（格式为 类型_序号，