简介

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`

`tsx // 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

{node.name}

;
};
const EndNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return 
{node.name}
;
};
const OtherNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return 
{node.name}
;
};
const ConditionNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return 
{node.name}
;
};
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([]);
  const handleChange = (nodes: INode[]) => {
    console.log('nodes change', nodes);
    setNodes(nodes);
  };
  return (
          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`

`$3`

#### 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\ | 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 |

`$3`

| 名称 | 说明 | 类型 | 版本 | | :---------- | :----------------- | :------------------------------------------------------------------------------ | :---- | | add | 增加节点 |(node: INode, newNodeType: string) => void \| (newNodeType: string) => void| | history | 撤销、重做 |(type: 'undo' \| 'redo') => void| | remove | 删除一个或多个节点 |(nodes: INode \| INode[] = useContext(NodeContext)) => void| | zoom | 缩放 |(type: 'out' \| 'in' \| number) => void| | closeDrawer | 关闭抽屉 |() => void| | context | BuilderContext | BuilderContext | 1.3.5 |

`$3`

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

`$3`

`$3`

| 参数 | 说明 | 类型 | 必须 | 默认值 | 版本 | | :----- | :----------------- | :------- | :--- | :----- | :---- | | 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[] |

`$3`

`$3`

V1 版本新增

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

#### BuilderContext

包含 props 和 state。以下为 state

#### NodeContext

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

`$3`

V1 版本新增

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

#### useAction

| 属性 | 说明 | 类型 | 版本 | | :------------ | :-------------------------------------------------------------------------- | :------------------------------------------------------------------------------ | :---- | | clickNode | 点击一个节点 |(node: INode = useContext(NodeContext)) => void| | addNode | 增加一个节点，不指定操作节点时，内部通过 NodeContext 获取到当前所在节点实现 |(node: INode, newNodeType: string) => void \| (newNodeType: string) => void| | addNodeInLoop | 循环节点内增加一个节点 |(newNodeType: string) => void| 1.4.6 | | removeNode | 删除一个/多个节点 |(targetNode: INode \| INode[] = useContext(NodeContext)) => void |

#### 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

| 属性 | 说明 | 类型 | | :---------- | :-------------------------------------------------------------------------------- | :-------------------------------------------------------------- | | maxLength | 最多保存的数量 |number| | pushHistory | 增加历史记录 |(record?: INode[] = useContext(BuilderContext).nodes) => void| | history | 撤销/重做（同 FlowBuilderInstance 中提供的 history 方法） |(type: 'undo' \| 'redo') => void |

#### 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 |

简介

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`

`tsx // 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

{node.name}

;
};
const EndNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return 
{node.name}
;
};
const OtherNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return 
{node.name}
;
};
const ConditionNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return 
{node.name}
;
};
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([]);
  const handleChange = (nodes: INode[]) => {
    console.log('nodes change', nodes);
    setNodes(nodes);
  };
  return (
          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`

`$3`

#### HistoryToolConfig

#### ZoomToolConfig

#### DragComponent

#### DropComponent

#### DrawerComponent

#### PopoverComponent

#### PopconfirmComponent

`$3`

#### DisplayComponent

#### ConfigComponent

#### AddableComponent

`$3`

V1 版本新增

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

#### BuilderContext

包含 props 和 state。以下为 state

#### NodeContext

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

`$3`

V1 版本新增

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

#### useAction

#### useDrawer

#### useZoom

#### useHistory

#### useSort

react-flow-builder

简介

试一试

Github

安装

Usage

API

$3

$3

$3

$3

$3

$3

$3

$3

react-flow-builder

简介

试一试

Github

安装

Usage

API

$3

$3

$3

$3

$3

$3

$3

$3

Dist Tags

`Usage`

`API`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`Usage`

`API`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`