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 进行深度定制。

相关推荐
sg_knight7 分钟前
VSCode如何修改默认扩展路径和用户文件夹目录到D盘
前端·ide·vscode·编辑器·web
一个处女座的程序猿O(∩_∩)O16 分钟前
完成第一个 Vue3.2 项目后，这是我的技术总结
前端·vue.js
mubeibeinv17 分钟前
项目搭建+图片(添加+图片)
java·服务器·前端
逆旅行天涯23 分钟前
【Threejs】从零开始（六）--GUI调试开发3D效果
前端·javascript·3d
m0_748255261 小时前
easyExcel导出大数据量EXCEL文件，前端实现进度条或者遮罩层
前端·excel
长风清留扬1 小时前
小程序毕业设计-音乐播放器+源码（可播放）下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
web147862107231 小时前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247801 小时前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04解决java读取EXCEL数据变成科学计数法的问题05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明106个主流的工业3D管道设计软件