因工作需要，公司的项目中有个模块涉及到bpmn构建流程图。所以由此算是初识bpmn，在网上找到的教程很多都是在Vue中构建。加上刚开始接触bpmn和半路出家的React其过程可谓是痛苦...
1.在Modal框中构建Bpmn
我要完成的需求就是在页面点击新增按钮，然后弹出Modal框然后在上面进行构建Bpmn,但刚开始就遇到了问题，点击新增后弹出的Modal框中空白，原因是在Modal框打开前就进行了构建，最后使用useEffect监听Modal框的状态，在Modal框打开时再进行渲染
useEffect(() => {
if (visible) {
initBpmnModeler();
createNewDiagram();
addEventBusListener();
}
return () => {
destroyBpmnModeler();
};
}, [visible]);
2.右侧面板的隐藏
项目中涉及到对右侧面板的隐藏，所以定义了一个isPanelVisible变量来控制一个css类的是否添加从而控制右侧面板的隐藏，然后通过在addEventBusListener中对bpmn事件的监听中对这个变量进行一些处理，例如当bpmn元素的type为bpmn:ServiceTask、点击画布时面板出现，其他状态下均隐藏。
<div id="js-properties-panel"
className={`panel ${isPanelVisible ? "" : "panel-hidden"}`}></div>
eventTypes.forEach((eventType) => {
eventBus.on(eventType, (e) => {
setIsPanelVisible(true);
if (!e || e.element.type === "bpmn:Process") return;
if (eventType === "element.changed") {
// 处理元素改变事件
if (e.element.type === "bpmn:ServiceTask") {
setIsPanelVisible(true);
} else {
setIsPanelVisible(false);
}
} else if (eventType === "element.click") {
// 处理元素点击事件
if (e.element.type === "bpmn:ServiceTask") {
setIsPanelVisible(true);
} else {
setIsPanelVisible(false);
}
// 点击元素时隐藏面板
} else if (eventType === "element.updateLabel") {
console.log("element.updateLabel", e.element);
// 处理元素标签更新事件
} else if (eventType === "shape.added") {
console.log("添加一个元素", e.element.type);
// 处理元素标签添加事件
if (e.element.type === "bpmn:ServiceTask") {
setIsPanelVisible(true);
} else {
setIsPanelVisible(false);
}
}
});
});
}
}
.panel-hidden {
display: none;
}
其中还有涉及的如汉化、右侧面板的自定义网上的教程也有很多，在下面的demo中也有用到，就不在这里进行介绍了，感兴趣的话可以去查看。
