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

🕗 发布于 2024-11-18 05:25 javascript react.js 前端

相关文章：
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. 功能验证

启动应用：npm start
进入浏览器，打开 http://localhost:3000。
你会看到工作流设计器的画布以及工具栏。

点击 Export Diagram 按钮可以导出 BPMN 文件。
使用文件选择框可以导入 BPMN 文件。
点击 Reset Diagram 按钮会重置到默认工作流。

4. 可扩展性

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

总结

通过 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 的天然兼容性。以下是关键步骤：

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

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

原文地址：https://blog.csdn.net/m0_55049655/article/details/143828075

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【网络】NDS协议 | ICMP协议 | NAT技术
下一篇：React中事件绑定和Vue有什么区别？

关于做完 C# 项目的问题总结 2
c#
阅读更多2024-11-21
Hello-Go
GOPATH 和 GOROOT ：不同于其他语言，go中没有项目的说法，只有包，其中有两个重要的路径，GOROOT 和 GOPATHGo 语言依赖几个关键的环境变量来管理开发环境、编译器、工具链和包管
阅读更多2024-11-21
深入探索Golang的GMP调度机制：源码解析与实现原理
Go语言的GMP调度模型是实现高效并发编程的关键所在。通过深入了解GMP调度机制的实现原理和源码细节，我们可以更好地理解和利用Go语言的并发特性。无论是对于Go语言的开发者还是对于系统性能优化感兴趣的
阅读更多2024-11-21
kafka是如何做到高效读写
消息持久化：Kafka 将消息存储在磁盘上，并且通过顺序写入的方式提高写入性能。消息被追加到日志文件的尾部，避免了随机写操作，从而提高了写入速度。零拷贝技术：利用操作系统的零拷贝特性，数据可以从
阅读更多2024-11-21
Kafka 2.8 源码导读
Kafka 是一个分布式流处理平台，广泛用于实时数据流的处理和传输。Kafka 2.8 版本引入了一些新特性和改进。以下是 Kafka 2.8 源码的导读，帮助你理解其核心组件和实现机制。
阅读更多2024-11-21
【蓝桥杯C/C++】C语言和C++的常量概念与区别分析
2024.11.16-✍53min
阅读更多2024-11-21
40分钟学 Go 语言高并发：开发环境搭建与工程化实践
Windows系统：Linux/Mac系统：2. Go Module依赖管理2.1 主要命令表格命令说明示例go mod init初始化模块go mod tidy整理依赖go mod download
阅读更多2024-11-21
QT如何共享文件+拷贝文件
在这里插入图片描述!
阅读更多2024-11-21
渗透测试导学
渗透测试是干什么？渗透测试的定义和目的：渗透测试是一种通过模拟恶意黑客的攻击方法，来评估计算机网络系统安全性能的评估方法。它的目的是通过识别安全问题，帮助了解当前的安全状况，从而帮助管理人员建立可靠的
阅读更多2024-11-21
45.坑王驾到第九期：Mac安装typescript后tsc命令无效的问题
Mac 安装 typescript 后 tsc 命令无效的问题
阅读更多2024-11-21