html bpmn怎么使用

我不是码神2024-01-14前端开发17

BPMN（Business Process Model and Notation，业务流程模型和符号）是一种BPMN（Business Process Model and Notation，业务流程模型和符号）是一种用于描述业务流程的图形化方法，HTML BPMN则是将BPMN图嵌入到HTML页面中的一种方式，本文将详细介绍如何使用HTML BPMN。

（图片来源网络，侵删）

1、引入BPMN.js库

我们需要在HTML页面中引入BPMN.js库，可以通过以下方式引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>HTML BPMN</title>
    <script src="https://unpkg.com/bpmnjs/dist/bpmnnavigatedviewer.development.js"></script>
</head>
<body>
    <!在这里编写HTML代码 >
</body>
</html>

2、创建一个容器元素

接下来，我们需要在HTML页面中创建一个容器元素，用于放置BPMN图，可以使用div元素作为容器：

<div id="canvas" style="width: 100%; height: 100%;"></div>

3、初始化BPMN.js Viewer

现在，我们可以初始化BPMN.js Viewer了，需要获取到上一步创建的容器元素，然后调用BpmnJS对象的drawIO方法，传入一个包含BPMN图数据的URL：

const viewer = new BpmnJS({ container: '#canvas' });
viewer.importXML('https://raw.githubusercontent.com/bpmnio/bpmnjsexamples/master/dist/assets/bpmn/bpmn.io.examples.bpmn.xml', (err) => {
    if (err) {
        console.error('导入BPMN图失败', err);
    } else {
        console.log('导入BPMN图成功');
    }
});

4、自定义BPMN.js Viewer样式

默认情况下，BPMN.js Viewer的样式可能不符合我们的需求，可以通过修改CSS样式来自定义Viewer的外观，可以设置背景颜色、节点颜色等：

#canvas {
    backgroundcolor: #f0f0f0;
}
.nodeenter {
    fill: #9ecae1;
}
.nodeexit {
    fill: #ff7f0e;
}

5、添加事件监听器

我们可能需要在用户与BPMN图交互时执行一些操作，可以通过为Viewer添加事件监听器来实现这一点，可以监听element.click事件，当用户点击某个节点时，弹出一个提示框显示节点的名称：

viewer.on('element.click', (event) => {
    const element = event.element;
    if (element instanceof BpmnJS.Node) {
        alert(你点击了节点：${element.businessObject.name});
    } else if (element instanceof BpmnJS.Edge) {
        alert(你点击了边：${element.businessObject.name});
    } else if (element instanceof BpmnJS.Gateway) {
        alert(你点击了网关：${element.businessObject.name});
    } else if (element instanceof BpmnJS.Group) {
        alert(你点击了组：${element.businessObject.name});
    } else if (element instanceof BpmnJS.Label) {
        alert(你点击了标签：${element.businessObject.label});
    } else if (element instanceof BpmnJS.Event) {
        alert(你点击了事件：${element.businessObject.name});
    } else if (element instanceof BpmnJS.SequenceFlow) {
        alert(你点击了序列流：${element.businessObject.name});
    } else if (element instanceof BpmnJS.TextAnnotation) {
        alert(你点击了文本注释：${element.businessObject.text});
    } else if (element instanceof BpmnJS.CallActivity) {
        alert(你点击了调用活动：${element.businessObject.name});
    } else if (element instanceof BpmnJS.DataObjectReference) {
        alert(你点击了数据对象引用：${element.businessObject.dataObjectRef});
    } else if (element instanceof BpmnJS.IntermediateCatchEvent) {
        alert(你点击了中间捕获事件：${element.businessObject.name});
    } else if (element instanceof BpmnJS.BoundaryEvent) {
        alert(你点击了边界事件：${element.businessObject.name});
    } else if (element instanceof BpmnJS.ErrorEventDefinition) {
        alert(你点击了错误事件定义：${element.businessObject.name});
    } else if (element instanceof BpmnJS.EscalationEventDefinition) {
        alert(你点击了升级事件定义：${element.businessObject.name});
    } else if (element instanceof BpmnJS.LinkEventDefinition) {
        alert(你点击了链接事件定义：${element.businessObject.name});
    } else if (element instanceof BpmnJS.ManualTask) {
        alert(你点击了手动任务：${element.businessObject.name});
    } else if (element instanceof BpmnJS.ServiceTask) {
        alert(你点击了服务任务：${element.businessObject.name});
    } else if (element instanceof BpmnJS.SendTask) {
        alert(你点击了发送任务：${element.businessObject.name});
    } else if (element instanceof BpmnJS.UserTask) {
        alert(你点击了用户任务：${element.businessObject.name});
    } else if (element instanceof BpmnJS.ScriptTask) {
        alert(你点击了脚本任务：${element.businessObject.name});
    } else if (element instanceof BpmnJS.AdHocSubProcess) {
        alert(你点击了即席子流程：${element.businessObject.name});
    } else if (element instanceof BpmnJS.ParallelGateway) {
        alert(你点击了并行网关：${element.businessObject.name});
    } else if (element instanceof BpmnJS.ExclusiveGateway) {
        alert(你点击了互斥网关：${element.businessObject.name});
    } else if (element instanceof BpmnJS.InclusiveGateway) {
        alert(你点击了包容网关：${element.businessObject.name});
    } else if (element instanceof BpmnJS.SequenceFlow) {
        alert(你点击了序列流：${element.businessObject.name});
    } else if (element instanceof BpmnJS.TextAnnotation) {
        alert(你点击了文本注释：${element.businessObject.text});
    } else if (element instanceof BpmnJS.MarkerStartEvent) {
        alert(你点击了标记开始事件：${element.businessObject.name});
    } else if (element instanceof BpmnJS.MarkerEndEvent) {
        alert(你点击了标记结束事件：${element.businessObject.name});
    } else if (element instanceof BpmnJS.BoundaryEvent) {
        alert(你点击了边界事件：${element.businessObject.name});
    } else if (element instanceof BpmnJS.ErrorEventDefinition) {
        alert(你点击了错误事件定义：${element.businessObject.name});
    } else if (element instanceof BpmnJS.EscalationEventDefinition) {
        alert(你点击了升级事件定义：${element.businessObject.name});
    } else if (element instanceof BpmnJS.LinkEventDefinition) {
        alert(你点击了链接事件定义：${element.businessObject.name});
    } else if (element instanceof BpmnJS[key]) { // key为元素的类型名称，如'startEvent'、'endEvent'等。