开源了一个 React 流程编辑器

shitiandmw

已于 2024-07-19 15:17:48 修改

阅读量449

点赞数 6

文章标签： react.js 编辑器前端

于 2024-07-19 15:15:00 首次发布

本文链接：https://blog.csdn.net/qq_23917481/article/details/140550244

版权

最近用react+golang开发的一个后管项目中需要用到流程图编辑器，实现一个审批流配置的功能，找了react生态下的一些开源库，最终决定使用xflow，这个库非常强大，但是还不能完全满足我的需求。

我的需求：
1、布局使用左中右的三列布局，从左到右分别是可用节点、编辑器画布、属性面板
2、节点（审批节点、抄送节点等）需要可以自定义UI样式
3、节点的属性（如：审批人、超时是否提醒等）、连接线的属性（主要是流转条件）、流程图的属性（是否可以撤回、是否允许评论等）都要可以自定义
4、编辑完流程后，需要保存流程的结构数据，并能根据这个结构再次渲染出原来的流程图

因此我在xflow的基础上拓展开发了一个流程编辑器 xflow-extend （已经开源），在满足本项目需求的同时也希望能够帮助到其他需要类似功能的小伙伴

结合我的需求，我在 xflow-extend 开放了几个关键的API

1、节点注册API

2、属性设置器注册API （属性设置器是用于节点、连接线和流程图属性设置与获取的组件。例如，简单的属性（如流程名称）只需要一个输入框（Input）即可处理。而复杂属性（如节点的审核人）可能需要包含更多交互逻辑的组件，甚至可能涉及弹窗设置。因此，属性设置器可以是自定义的。）

3、配置流程所需要的属性

4、配置连接线所需要的属性

5、配置连接线的颜色

6、获取编辑器数据

7、设置/初始化编辑器数据

实现效果如下：

项目已经开源并且发布到npm，简单的使用教程：

### 安装

npm install xflow-extend

### 使用

import XFlowExtend from 'xflow-extend';
import 'xflow-extend/dist/style.css'

const App = () => {
  const flowRef = React.useRef();

  // 获取流程图数据
  const getFlowData = () => {
    const flowData = flowRef.current?.getFlowData();
    localStorage.setItem('flowData', JSON.stringify(flowData));
  };

  // 设置流程图数据
  const setFlowData = () => {
    const flowData = JSON.parse(localStorage.getItem('flowData') || '{}');
    flowRef.current?.setFlowData(flowData);
  };

  return <XFlowExtend ref={flowRef} />;
};

export default App;

具体的使用教程和源代码可以访问 https://github.com/shitiandmw/xflow-extend ，如果有用，记得点个star