React|bpmn.js|react-bpmn使用示例详解

GISer_Jing2024-11-18 20:10

相关文章：
BPMN.JS中文教程学习_bpmnjs中文文档-CSDN博客工作流入门这篇就够了！-CSDN博客BPMN.JS中文教程学习_bpmnjs中文文档-CSDN博客

BPMN.JS及其常见API[算得上很全啦]_bpmn-js库中updatemoddleproperties和updateproperties方法-CSDN博客

BPMNJS设计器开发核心功能分析_python bpmn设计器-CSDN博客

React框架使用bpmn.js库

构建一个简单的工作流设计器（Workflow Designer）可以使用 react 和 bpmn.js 的组合。以下是逐步实现的完整流程：

1. 准备环境

安装 React 项目

【一网打尽】前端Vue和React项目的构建_vue编译react项目-CSDN博客

创建一个 React 项目：

npx create-react-app workflow-designer cd workflow-designer

安装依赖

BPMN.JS中文教程学习_bpmnjs中文文档-CSDN博客

BPMNJS设计器开发核心功能分析_python bpmn设计器-CSDN博客

安装 bpmn-js 和其他所需库：

npm install bpmn-js npm install --save-dev @types/bpmn-js # 如果使用 TypeScript，可选

2. 构建工作流设计器

2.1 创建设计器组件

我们需要一个组件来加载 bpmn-js 并在画布上显示工作流图。

基础结构

创建 WorkflowDesigner.js 文件：

import React, { useEffect, useRef } from 'react';
import BpmnModeler from 'bpmn-js/lib/Modeler'; // 引入 bpmn-js 的模型器

const WorkflowDesigner = () => {
  const modelerRef = useRef(null); // 画布 DOM 节点引用
  const bpmnModeler = useRef(null); // bpmn-js 实例

  useEffect(() => {
    // 初始化 bpmn-js 模型器
    bpmnModeler.current = new BpmnModeler({
      container: modelerRef.current, // 指定渲染目标容器
      width: '100%',
      height: '500px',
    });

    // 加载默认的空 BPMN XML 模板
    const initialDiagram = `<?xml version="1.0" encoding="UTF-8"?>
    <bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
        xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
        xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
        id="Definitions_1"
        targetNamespace="http://bpmn.io/schema/bpmn">
      <bpmn:process id="Process_1" isExecutable="false">
        <bpmn:startEvent id="StartEvent_1" />
      </bpmn:process>
      <bpmn:diagram id="BPMNDiagram_1">
        <bpmn:plane id="BPMNPlane_1" bpmnElement="Process_1">
          <bpmn:shape id="StartEvent_1_di" bpmnElement="StartEvent_1">
            <dc:Bounds x="173" y="102" width="36" height="36" />
          </bpmn:shape>
        </bpmn:plane>
      </bpmn:diagram>
    </bpmn:definitions>`;

    bpmnModeler.current.importXML(initialDiagram).catch((err) => {
      console.error('Failed to load diagram:', err);
    });

    // 清理函数
    return () => {
      bpmnModeler.current.destroy(); // 销毁实例
    };
  }, []);

  return <div ref={modelerRef} style={{ border: '1px solid #ccc' }} />;
};

export default WorkflowDesigner;

2.2 添加工具栏

设计器需要常见的功能，比如：

  • 导出 XML
  • 重置画布
  • 上传自定义工作流

修改 WorkflowDesigner.js：

import React, { useEffect, useRef } from 'react';
import BpmnModeler from 'bpmn-js/lib/Modeler';

const WorkflowDesigner = () => {
  const modelerRef = useRef(null);
  const bpmnModeler = useRef(null);

  useEffect(() => {
    bpmnModeler.current = new BpmnModeler({
      container: modelerRef.current,
      width: '100%',
      height: '500px',
    });

    const initialDiagram = `<?xml version="1.0" encoding="UTF-8"?>
    <bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
        xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
        xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
        id="Definitions_1"
        targetNamespace="http://bpmn.io/schema/bpmn">
      <bpmn:process id="Process_1" isExecutable="false">
        <bpmn:startEvent id="StartEvent_1" />
      </bpmn:process>
      <bpmn:diagram id="BPMNDiagram_1">
        <bpmn:plane id="BPMNPlane_1" bpmnElement="Process_1">
          <bpmn:shape id="StartEvent_1_di" bpmnElement="StartEvent_1">
            <dc:Bounds x="173" y="102" width="36" height="36" />
          </bpmn:shape>
        </bpmn:plane>
      </bpmn:diagram>
    </bpmn:definitions>`;

    bpmnModeler.current.importXML(initialDiagram).catch((err) => {
      console.error('Failed to load diagram:', err);
    });

    return () => {
      bpmnModeler.current.destroy();
    };
  }, []);

  const handleExport = async () => {
    try {
      const { xml } = await bpmnModeler.current.saveXML({ format: true });
      console.log(xml);
      const blob = new Blob([xml], { type: 'application/xml' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'diagram.bpmn';
      a.click();
      URL.revokeObjectURL(url);
    } catch (err) {
      console.error('Failed to export diagram:', err);
    }
  };

  const handleImport = async (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = async (e) => {
        const xml = e.target.result;
        try {
          await bpmnModeler.current.importXML(xml);
        } catch (err) {
          console.error('Failed to import diagram:', err);
        }
      };
      reader.readAsText(file);
    }
  };

  const handleReset = () => {
    const defaultDiagram = `... (your default BPMN XML here) ...`;
    bpmnModeler.current.importXML(defaultDiagram).catch((err) => {
      console.error('Failed to reset diagram:', err);
    });
  };

  return (
    <div>
      <div style={{ marginBottom: '10px' }}>
        <button onClick={handleExport}>Export Diagram</button>
        <button onClick={handleReset}>Reset Diagram</button>
        <input type="file" accept=".bpmn" onChange={handleImport} />
      </div>
      <div ref={modelerRef} style={{ border: '1px solid #ccc' }} />
    </div>
  );
};

export default WorkflowDesigner;

2.3 在 App.js 中使用

在 src/App.js 中引入并渲染 WorkflowDesigner：

import React from 'react';
import WorkflowDesigner from './WorkflowDesigner';

function App() {
  return (
    <div className="App">
      <h1>Workflow Designer</h1>
      <WorkflowDesigner />
    </div>
  );
}

export default App;

3. 功能验证

  1. 启动应用：npm start
  2. 进入浏览器，打开 http://localhost:3000。
  3. 你会看到工作流设计器的画布以及工具栏。
  • 点击 Export Diagram 按钮可以导出 BPMN 文件。
  • 使用文件选择框可以导入 BPMN 文件。
  • 点击 Reset Diagram 按钮会重置到默认工作流。

4. 可扩展性

  1. 定制工具栏：集成更多功能，比如撤销/重做、缩放控制等。
  2. 实时预览 ：结合 react-bpmn 实现实时查看编辑的工作流图。
  3. 后端存储：将用户创建的 BPMN 图形上传到服务器或数据库中。
  4. 权限控制：限制用户对特定节点的编辑权限。

总结

通过 bpmn-js 和 React，我们可以快速构建一个简单而强大的工作流设计器。bpmn-js 提供了强大的图形处理能力，而 React 让交互变得灵活且易于扩展。

React-bpmn库

react-bpmn.js 是一个用于在 React 应用中嵌入和使用 BPMN（Business Process Model and Notation）图形编辑器的库，基于 bpmn-js。以下是从安装到使用的完整详解：

1. 安装

在项目中使用 react-bpmn.js 之前，确保你有一个 React 项目。如果没有，可以先创建一个项目：

npx create-react-app my-app cd my-app

安装 react-bpmn

通过 npm 或 yarn 安装：

npm install react-bpmn # 或者 yarn add react-bpmn

2. 理解 react-bpmn 的核心功能

react-bpmn.js 提供了一种在 React 中使用 BPMN 图形模型的简单方法，核心功能包括：

  • 显示 BPMN 图：渲染 BPMN XML 文件。
  • 交互功能：允许用户缩放、拖动和编辑图形。
  • 事件监听：可以监听用户的操作事件，例如点击、修改节点等。

3. 准备 BPMN 图数据

BPMN 图形是以 XML 格式存储的。例如，一个简单的 BPMN 图的 XML 文件（diagram.bpmn）可能如下：

<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
    xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
    xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
    id="Definitions_1"
    targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn:process id="Process_1" isExecutable="false">
    <bpmn:startEvent id="StartEvent_1"/>
  </bpmn:process>
  <bpmn:diagram id="BPMNDiagram_1">
    <bpmn:plane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmn:shape id="StartEvent_1_di" bpmnElement="StartEvent_1">
        <dc:Bounds x="173" y="102" width="36" height="36"/>
      </bpmn:shape>
    </bpmn:plane>
  </bpmn:diagram>
</bpmn:definitions>

4. 使用 react-bpmn

4.1 基本渲染

在 React 项目中创建一个组件，并使用 react-bpmn 渲染 BPMN 图。

创建组件
<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL"
    xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
    xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
    id="Definitions_1"
    targetNamespace="http://bpmn.io/schema/bpmn">
  <bpmn:process id="Process_1" isExecutable="false">
    <bpmn:startEvent id="StartEvent_1"/>
  </bpmn:process>
  <bpmn:diagram id="BPMNDiagram_1">
    <bpmn:plane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmn:shape id="StartEvent_1_di" bpmnElement="StartEvent_1">
        <dc:Bounds x="173" y="102" width="36" height="36"/>
      </bpmn:shape>
    </bpmn:plane>
  </bpmn:diagram>
</bpmn:definitions>
渲染组件

在 App.js 中引入并渲染该组件：

import React from 'react';
import BPMNComponent from './BPMNComponent';

function App() {
  return (
    <div className="App">
      <h1>BPMN Viewer</h1>
      <BPMNComponent />
    </div>
  );
}

export default App;

运行项目后，将看到 BPMN 图的可视化显示。

4.2 从文件加载 BPMN 图

如果你需要从外部 XML 文件加载 BPMN 图，可以使用 fetch 或 axios：

import React, { useState, useEffect } from 'react';
import BpmnViewer from 'react-bpmn';

const BPMNComponent = () => {
  const [diagramXML, setDiagramXML] = useState('');

  useEffect(() => {
    // 从本地或远程加载 BPMN XML 文件
    fetch('/path/to/diagram.bpmn')
      .then(response => response.text())
      .then(data => setDiagramXML(data))
      .catch(error => console.error('Error loading BPMN diagram:', error));
  }, []);

  return diagramXML ? <BpmnViewer diagramXML={diagramXML} /> : <p>Loading...</p>;
};

export default BPMNComponent;

4.3 监听事件

react-bpmn 支持对用户的交互事件进行监听，例如点击某个节点。你可以使用 onShown 或 onError 等回调来处理事件。

复制代码 
<BpmnViewer
  diagramXML={diagramXML}
  onShown={() => console.log('BPMN diagram rendered successfully!')}
  onError={(err) => console.error('Error rendering BPMN diagram:', err)}
/>

5. 高级使用

如果需要更复杂的功能（如编辑 BPMN 图或动态更新图表），可以直接使用 bpmn-js（react-bpmn 是其封装）。

动态修改 BPMN 图

可以使用 bpmn-js 提供的方法动态操作图表，例如添加节点或修改属性。

自定义样式

通过自定义 CSS，改变 BPMN 图的样式，例如修改节点颜色或边框。

6. 常见问题

6.1 加载图表报错

如果 XML 文件格式不正确，可能会导致解析错误。确保 XML 文件符合 BPMN 标准。

6.2 性能问题

对于较大的 BPMN 图表，渲染性能可能受到影响。建议：

  • 优化 XML 文件的结构。
  • 减少初始加载的节点数量。

6.3 外部事件监听

如果需要与外部系统交互，可以使用 bpmn-js 提供的事件系统（如 element.click、shape.added）。

7. 总结

使用 react-bpmn.js 可以快速在 React 应用中集成 BPMN 图形显示和交互功能。其主要特点是易用性和与 React 的天然兼容性。以下是关键步骤：

  1. 安装库并加载 BPMN XML 数据。
  2. 使用 BpmnViewer 组件渲染图表。
  3. 根据需求添加事件监听、样式定制或从文件加载。

如果需要更高级的功能，可以直接使用 bpmn-js 的 API 进行深度定制。

相关推荐
雪碧聊技术6 分钟前
03-axios常用的请求方法、axios错误处理
前端·javascript·ajax·axios请求方法·restful风格·axios错误处理·axios请求配置
江河湖海27 分钟前
2. 用JavaScript和Node.js实现一个简单的聊天应用
开发语言·javascript·node.js
雾恋1 小时前
不要焦虑，在低迷的环境充实自己；在复苏的环境才能把握住机遇
前端·javascript
花花鱼2 小时前
vscode vite+vue3项目启动调试
前端·javascript·vue.js
sukalot2 小时前
windows C#-创建记录类型(下)
java·服务器·前端
秋迟言说2 小时前
webstorm中 ‘@/**‘报 未安装模块 无法Ctrl定位
前端·javascript·webstorm
方方怪2 小时前
HTML文本标签学习记录
前端·html
流沙QS2 小时前
时钟之CSS+JS版
前端·javascript·css
老码沉思录2 小时前
React Native 全栈开发实战班 - 图片加载与优化
javascript·react native·react.js
热门推荐
01PyTorch机器学习实现液态神经网络02聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04Unity中PICO实现 隔空取物 和 接触抓取物体05RAG 实践- Ollama+RagFlow 部署本地知识库06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07玄机平台应急响应—webshell查杀08文件或文件夹名称中有空格如何批量去除09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10将 HuggingFace 模型转换为 GGUF 及使用 ollama 运行 —— 以 Qwen2-0.5B 为例