@ingensystems/flow-builder

v1.0.0

Published

a month ago

[English](https://github.com/bytedance/flow-builder/blob/main/README.md) | 简体中文

Downloads

0High
0Medium
0Low

jkergosi

flow builder process react

简介

English | 简体中文

高度可定制的流式流程引擎。注册能力可以灵活定制你的节点类型以及不同类型的节点展示和节点表单等。

| demo1 | demo2 | | ---------------------------- | ---------------------------- |

试一试

https://bytedance.github.io/flow-builder

Github

https://github.com/bytedance/flow-builder

安装

yarn add react-flow-builder

或

npm install react-flow-builder

Usage

// index.tsx
import React, { useState, useContext } from 'react';
import FlowBuilder, {
  NodeContext,
  INode,
  IRegisterNode,
} from 'react-flow-builder';

import './index.css';

const StartNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return <div className="start-node">{node.name}</div>;
};

const EndNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return <div className="end-node">{node.name}</div>;
};

const OtherNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return <div className="other-node">{node.name}</div>;
};

const ConditionNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return <div className="condition-node">{node.name}</div>;
};

const registerNodes: IRegisterNode[] = [
  {
    type: 'start',
    name: '开始节点',
    displayComponent: StartNodeDisplay,
    isStart: true,
  },
  {
    type: 'end',
    name: '结束节点',
    displayComponent: EndNodeDisplay,
    isEnd: true,
  },
  {
    type: 'node',
    name: '普通节点',
    displayComponent: OtherNodeDisplay,
  },
  {
    type: 'condition',
    name: '条件节点',
    displayComponent: ConditionNodeDisplay,
  },
  {
    type: 'branch',
    name: '分支节点',
    conditionNodeType: 'condition',
  },
];

const Demo = () => {
  const [nodes, setNodes] = useState<INode[]>([]);

  const handleChange = (nodes: INode[]) => {
    console.log('nodes change', nodes);
    setNodes(nodes);
  };

  return (
    <FlowBuilder
      nodes={nodes}
      onChange={handleChange}
      registerNodes={registerNodes}
    />
  );
};

export default Demo;

// index.css
.start-node, .end-node {
  height: 64px;
  width: 64px;
  border-radius: 50%;
  line-height: 64px;
  color: #fff;
  text-align: center;
}

.start-node {
  background-color: #338aff;
}

.end-node {
  background-color: #666;
}

.other-node, .condition-node {
  width: 224px;
  border-radius: 4px;
  color: #666;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

.other-node {
  height: 118px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.condition-node {
  height: 44px;
  padding: 12px 16px;
}

API

FlowBuilder

HistoryToolConfig

| 参数 | 说明 | 类型 | 默认值 | | :----- | :----------------------- | :-------- | :----- | | hidden | 是否隐藏默认的历史工具栏 | boolean | false | | max | 最多保存的数量 | number | 10 |

ZoomToolConfig

| 参数 | 说明 | 类型 | 默认值 | | :----------- | :----------------------- | :-------- | :----- | | hidden | 是否隐藏默认的缩放工具栏 | boolean | false | | initialValue | 初始值 | number | 100 | | min | 最小值 | number | 10 | | max | 最大值 | number | 200 | | step | 每次缩放比例的变化大小 | number | 10 |

DragComponent

| 参数 | 说明 | 类型 | 版本 | | :---------- | :------------------------------------------------------------------------------------------------------ | :--------------------------- | :---- | | onDragStart | 自定义拖拽组件的 dragStart 事件需要调用此方法，设置正在拖拽的节点类型（ BuilderContext 中的 dragType ） | (nodeType: string) => void | 1.0.0 | | onDragEnd | 自定义拖拽组件的 dragEnd 事件需要调用此方法，清空正在拖拽的节点类型（ BuilderContext 中的 dragType ） | () => void | 1.0.0 |

DropComponent

| 参数 | 说明 | 类型 | 版本 | | :----- | :------------------------------------------------------------------- | :----------- | :---- | | onDrop | 自定义放置组件的 drop 事件需要调用此方法，完成放置动作增加对应的节点 | () => void | 1.0.0 |

DrawerComponent

| 参数 | 说明 | 类型 | 版本 | | :----------------- | :----------------------------------- | :------------------------------ | :---- | | visible | 也可以自行判断 selectedNode 的布尔值 | any | 2.0.0 | | onClose | 也可以自行调用 closeDrawer | any | 2.0.0 | | children | | any | 2.0.0 | | title | | any | 2.0.0 | | width | | any | 2.0.0 | | destroyOnClose | | any | 2.0.0 | | maskClosable | | any | 2.0.0 | | configComponentRef | | React.MutableRefObject<any> | 2.5.0 |

PopoverComponent

| 参数 | 说明 | 类型 | 版本 | | :---------------- | :--- | :---- | :---- | | visible | | any | 2.0.0 | | onVisibleChange | | any | 2.0.0 | | children | | any | 2.0.0 | | overlayClassName | | any | 2.0.0 | | placement | | any | 2.0.0 | | trigger | | any | 2.0.0 | | content | | any | 2.0.0 | | getPopupContainer | | any | 2.0.0 |

PopconfirmComponent

| 参数 | 说明 | 类型 | 版本 | | :---------------- | :------------------------ | :---- | :---- | | title | | any | 2.0.0 | | onConfirm | 也可以自行调用 removeNode | any | 2.0.0 | | children | | any | 2.0.0 | | getPopupContainer | | any | 2.0.0 |

FlowBuilderInstance

Formatter

| 名称 | 说明 | 类型 | | :------------- | :------------- | :---------------------------------------------------------------------- | | buildFlatNodes | 转换成扁平结构 | (params: {registerNodes: IRegisterNode[], nodes: INode[]}) => INode[] | | buildTreeNodes | 转换成树形结构 | (params: {nodes: INode[]}) => INode[] | | createUuid | 创建 uuid | (prefix?: string) => string |

RegisterNode

RegisterRemoteNode

| 参数 | 说明 | 类型 | 必须 | 默认值 | 版本 | | :----- | :----------------- | :------- | :--- | :----- | :---- | | url | 节点的远程地址 | string | ✓ | - | 1.3.0 | | cssUrl | 节点样式的远程地址 | string | | - | 1.3.0 |

DisplayComponent

ConfigComponent

AddableComponent

| 参数 | 说明 | 类型 | | :---- | :----------------------------------------------- | :----------------------- | | add | 增加节点时调用，会自动关闭 popover | (type: string) => void | | node | 节点信息（V1 版本开始推荐使用 NodeContext 获取） | Node | | nodes | （V1 版本开始推荐使用 BuilderContext 获取） | Node[] |

Node

Context

V1 版本新增

在 FlowBuilder 的上下文环境中，可以使用以下 context

BuilderContext

包含 props 和 state。以下为 state

NodeContext

在调用的地方，获取到所在节点的数据。具体内容见 Node

Hooks

V1 版本新增

在 FlowBuilder 的上下文环境中，可以使用以下 hooks

useAction

useDrawer

| 属性 | 说明 | 类型 | | :---------- | :-------------------------------------------------------------------------- | :----------------------------------------------------- | | closeDrawer | 关闭抽屉，并将 selectedNode 置空 | () => void | | saveDrawer | 保存抽屉的内容（同 ConfigComponent 中提供的 save 方法） | (values: any, validateStatusError?: boolean) => void |

useZoom

| 属性 | 说明 | 类型 | | :------ | :--------------------------------------------------------------------------------- | :---------------------------------------- | | minZoom | 最小缩放比例 | number | | maxZoom | 最大缩放比例 | number | | zoom | 改变缩放比例（同 FlowBuilderInstance 中提供的 zoom 方法） | (type: 'out' \| 'in' \| number) => void |

useHistory

useSort

| 属性 | 说明 | 类型 | 版本 | | :------- | :----------- | :------------------------------------------------ | :---- | | backward | 向后排序 | (node: INode = useContext(NodeContext)) => void | 1.4.3 | | forward | 向前排序 | (node: INode = useContext(NodeContext)) => void | 1.4.3 | | end | 排序到最末尾 | (node: INode = useContext(NodeContext)) => void | 1.4.3 | | start | 排序到最前面 | (node: INode = useContext(NodeContext)) => void | 1.4.3 |