{"_id":"@all-things/flow","name":"@all-things/flow","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@all-things/flow","version":"1.0.0","keywords":["flow","builder","process","react"],"scripts":{"start":"dumi dev","docs:build":"dumi build","docs:deploy":"gh-pages -d docs-dist","build":"father-build","deploy":"npm run docs:build && npm run docs:deploy","release":"npm run build && npm publish","release-alpha":"npm run build && npm publish --tag alpha","prettier":"prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"","test":"umi-test","test:coverage":"umi-test --coverage"},"main":"dist/index.js","module":"dist/index.esm.js","typings":"dist/index.d.ts","bugs":{"url":"https://github.com/ingensystems/flow-builder/issues"},"repository":{"type":"git","url":"git+https://github.com/ingensystems/flow-builder.git"},"gitHooks":{"pre-commit":"lint-staged"},"lint-staged":{"*.{js,jsx,less,md,json}":["prettier --write"],"*.ts?(x)":["prettier --parser=typescript --write"]},"peerDependencies":{"react":">=16","react-dom":">=16"},"devDependencies":{"@arco-design/web-react":"^2.46.2","@types/lodash.clonedeep":"^4.5.7","@types/lodash.get":"^4.4.6","@types/react-beautiful-dnd":"^13.1.8","@types/uuid":"^8.3.1","@umijs/test":"^3.0.5","antd":"^3 || ^4","babel-plugin-import":"^1.13.3","dumi":"^1.1.23","dumi-theme-default":"^1.1.24","father-build":"^1.22.5","gh-pages":"^3.0.0","lint-staged":"^10.0.7","prettier":"^2.2.1","react":">=16","react-dom":">=16","react-flow-builder":"2.8.0","yorkie":"^2.0.0"},"dependencies":{"lodash.clonedeep":"^4.5.0","lodash.get":"^4.4.2","react-beautiful-dnd":"^13.1.1","systemjs":"^6.12.1","uuid":"^8.3.2"},"_id":"@all-things/flow@1.0.0","gitHead":"e5c65a211f6a6d03f80e29ddd81554efe3f067a6","description":"A highly customizable streaming flow builder. The registration ability can flexibly customize your nodes, different types of node display and form, etc.\r Bassed on https://github.com/bytedance/flow-builder","homepage":"https://github.com/ingensystems/flow-builder#readme","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-SBiHzgSrxLTnfVYv/9VgGb3kUSonI7MpxniF3f268IRVkkBAzXZibDQcdH+TzZU/AM0RZgagQ2VE75lhoZQe+w==","shasum":"bcb2170cb62fede4ee72b2f72334c7244689eb59","tarball":"https://registry.npmjs.org/@all-things/flow/-/flow-1.0.0.tgz","fileCount":39,"unpackedSize":281241,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc9KaDQcboZOs+D41RAa79RHak6KlxnGKRDoWkY8snLQIhAIP/p/GJC5azn1Lf9u3yYucCAg0bzZUt7kFoOLZ+oHJs"}]},"_npmUser":{"name":"jkergosi","email":"jasonk@ingensystems.com"},"directories":{},"maintainers":[{"name":"jkergosi","email":"jasonk@ingensystems.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/flow_1.0.0_1728486450498_0.7574064800069804"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-09T15:07:30.342Z","1.0.0":"2024-10-09T15:07:30.747Z","modified":"2024-10-09T15:07:31.003Z"},"maintainers":[{"name":"jkergosi","email":"jasonk@ingensystems.com"}],"description":"A highly customizable streaming flow builder. The registration ability can flexibly customize your nodes, different types of node display and form, etc.\r Bassed on https://github.com/bytedance/flow-builder","homepage":"https://github.com/ingensystems/flow-builder#readme","keywords":["flow","builder","process","react"],"repository":{"type":"git","url":"git+https://github.com/ingensystems/flow-builder.git"},"bugs":{"url":"https://github.com/ingensystems/flow-builder/issues"},"readme":"# Introduction\r\n\r\n\r\n\r\nA highly customizable streaming flow builder. The registration ability can flexibly customize your nodes, different types of node display and form, etc.\r\nBassed on https://github.com/bytedance/flow-builder\r\n\r\n| ![demo1](./public/demo1-en.png) | ![demo2](./public/demo2-en.png) |\r\n| ------------------------------- | ------------------------------- |\r\n\r\n## Try it out\r\n\r\nhttps://bytedance.github.io/flow-builder\r\n\r\n## Github\r\n\r\nhttps://github.com/bytedance/flow-builder\r\n\r\n## Installation\r\n\r\n```\r\nyarn add react-flow-builder\r\n\r\nor\r\n\r\nnpm install react-flow-builder\r\n```\r\n\r\n## Usage\r\n\r\n```tsx\r\n// index.tsx\r\nimport React, { useState, useContext } from 'react';\r\nimport FlowBuilder, {\r\n NodeContext,\r\n INode,\r\n IRegisterNode,\r\n} from 'react-flow-builder';\r\n\r\nimport './index.css';\r\n\r\nconst StartNodeDisplay: React.FC = () => {\r\n const node = useContext(NodeContext);\r\n return
{node.name}
;\r\n};\r\n\r\nconst EndNodeDisplay: React.FC = () => {\r\n const node = useContext(NodeContext);\r\n return
{node.name}
;\r\n};\r\n\r\nconst OtherNodeDisplay: React.FC = () => {\r\n const node = useContext(NodeContext);\r\n return
{node.name}
;\r\n};\r\n\r\nconst ConditionNodeDisplay: React.FC = () => {\r\n const node = useContext(NodeContext);\r\n return
{node.name}
;\r\n};\r\n\r\nconst registerNodes: IRegisterNode[] = [\r\n {\r\n type: 'start',\r\n name: 'start node',\r\n displayComponent: StartNodeDisplay,\r\n isStart: true,\r\n },\r\n {\r\n type: 'end',\r\n name: 'end node',\r\n displayComponent: EndNodeDisplay,\r\n isEnd: true,\r\n },\r\n {\r\n type: 'node',\r\n name: 'other node',\r\n displayComponent: OtherNodeDisplay,\r\n },\r\n {\r\n type: 'condition',\r\n name: 'condition node',\r\n displayComponent: ConditionNodeDisplay,\r\n },\r\n {\r\n type: 'branch',\r\n name: 'branch node',\r\n conditionNodeType: 'condition',\r\n },\r\n];\r\n\r\nconst Demo = () => {\r\n const [nodes, setNodes] = useState([]);\r\n\r\n const handleChange = (nodes: INode[]) => {\r\n console.log('nodes change', nodes);\r\n setNodes(nodes);\r\n };\r\n\r\n return (\r\n \r\n );\r\n};\r\n\r\nexport default Demo;\r\n\r\n// index.css\r\n.start-node, .end-node {\r\n height: 64px;\r\n width: 64px;\r\n border-radius: 50%;\r\n line-height: 64px;\r\n color: #fff;\r\n text-align: center;\r\n}\r\n\r\n.start-node {\r\n background-color: #338aff;\r\n}\r\n\r\n.end-node {\r\n background-color: #666;\r\n}\r\n\r\n.other-node, .condition-node {\r\n width: 224px;\r\n border-radius: 4px;\r\n color: #666;\r\n background: #fff;\r\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.other-node {\r\n height: 118px;\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n.condition-node {\r\n height: 44px;\r\n padding: 12px 16px;\r\n}\r\n```\r\n\r\n## API\r\n\r\n### FlowBuilder\r\n\r\n| Property | Description | Type | Required | Default | Version |\r\n| :------------------------ | :-------------------------------------------------- | :--------------------------------------------------------------------------- | :------- | :--------- | :------ |\r\n| backgroundColor | The color of background | `string` | | #F7F7F7 | |\r\n| className | The class name of the container | `string` | | - |\r\n| draggable | drag and drop | `boolean` | | false | 1.0.0 |\r\n| DragComponent | custom drag component | `React.FC`\\<[DragComponent](#dragcomponent)\\> | | - | 1.0.0 |\r\n| DropComponent | custom drop component | `React.FC`\\<[DropComponent](#dropcomponent)\\> | | - | 1.0.0 |\r\n| createUuid | custom node uuid | `(type?: string) => string` | | - | 2.0.0 |\r\n| DrawerComponent | Drawer component | `React.FC`\\<[DrawerComponent](#drawercomponent)\\> | | - | 2.0.0 |\r\n| PopoverComponent | Popover component | `React.FC`\\<[PopoverComponent](#popovercomponent)\\> | | - | 2.0.0 |\r\n| PopconfirmComponent | Popconfirm component | `React.FC`\\<[PopconfirmComponent](#popconfirmcomponent)\\> | | - | 2.0.0 |\r\n| drawerProps | Extra props of DrawerComponent | `any` | | - | |\r\n| drawerVisibleWhenAddNode | Drawer visible when add node | `boolean` | | false | |\r\n| historyTool | undo and redo | `boolean` \\| [HistoryToolConfig](#historytoolconfig) | | false |\r\n| layout | Use vertical or horizontal layout | `vertical` \\| `horizontal` | | `vertical` | |\r\n| lineColor | The color of line | `string` | | #999999 | |\r\n| nodes | The nodes of FlowBuilder | [Node](#node)[] | ✓ | - | |\r\n| readonly | Readonly mode, cannot add, remove, configure. | `boolean` | | false | |\r\n| registerNodes | The registered nodes | [RegisterNode](#registernode)[] | ✓ | - | |\r\n| registerRemoteNodes | The registered remote nodes | [RegisterRemoteNode](#registerremotenode)[] | | - | 1.3.0 |\r\n| showPracticalBranchNode | - | `boolean` | | false | 1.1.0 |\r\n| showPracticalBranchRemove | - | `boolean` | | false | 1.1.0 |\r\n| sortable | Condition nodes can be dragged and sorted in branch | `boolean` | | false | 1.4.0 |\r\n| sortableAnchor | Anchor for start dragging 序 | `ReactNode` | | - | 1.4.0 |\r\n| spaceX | Horizontal spacing between nodes | `number` | | `16` | |\r\n| spaceY | Vertical spacing between nodes | `number` | | `16` |\r\n| zoomTool | zoom | `boolean` \\| [ZoomToolConfig](#zoomtoolconfig) | | false | |\r\n| onChange | Callback function for when the data change | (nodes: [Node](#node)[], changeEvent: `string`, nodeChanged?: INode) => void | ✓ | - | |\r\n| onHistoryChange | | `(undoDisabled: boolean, redoDisabled: boolean) => void` | | - | |\r\n| onZoomChange | | `(outDisabled: boolean, value: number, inDisabled: boolean) => void` | | - | |\r\n| showArrow | Show arrow | `boolean` | | false | 1.4.5 |\r\n| arrowIcon | The icon of the arrow | `ReactNode` | | - | 1.4.5 |\r\n| onAddNodeSuccess | Called when add node success | `(type: string, node: INode) => void` | | - | 1.4.9 |\r\n| onDropNodeSuccess | Called when drop node success | `(type: string, node: INode) => void` | | - | 1.4.9 |\r\n| onRemoveNodeSuccess | Called when remove node success | `(node: INode) => void` | | - | 2.2.0 |\r\n| allowStartConfig | Allow start node config | `boolean` | | - | 2.1.0 |\r\n| allowEndConfig | Allow end node config | `boolean` | | - | 2.1.0 |\r\n| scrollByDrag | Scroll by mouse dragging | `boolean` | | - | 2.6.0 |\r\n\r\n#### HistoryToolConfig\r\n\r\n| Property | Description | Type | Default |\r\n| :------- | :---------- | :-------- | :------ |\r\n| hidden | | `boolean` | false |\r\n| max | | `number` | 10 |\r\n\r\n#### ZoomToolConfig\r\n\r\n| Property | Description | Type | Default |\r\n| :----------- | :---------- | :-------- | :------ |\r\n| hidden | | `boolean` | false |\r\n| initialValue | | `number` | 100 |\r\n| min | | `number` | 10 |\r\n| max | | `number` | 200 |\r\n| step | | `number` | 10 |\r\n\r\n#### DragComponent\r\n\r\n| Property | Description | Type | Version |\r\n| :---------- | :--------------------------------------------------------------------------------------------------------------------------------- | :--------------------------- | :------ |\r\n| onDragStart | The dragStart event of the custom drag component needs to call this method to set the dragged type（ dragType in BuilderContext ） | `(nodeType: string) => void` | 1.0.0 |\r\n| onDragEnd | The dragEnd event of the custom drag component needs to call this method to clear the dragged type（ dragType in BuilderContext ） | `() => void` | 1.0.0 |\r\n\r\n#### DropComponent\r\n\r\n| Property | Description | Type | Version |\r\n| :------- | :--------------------------------------------------------------------------------------------- | :----------- | :------ |\r\n| onDrop | The drop event of the custom drop component needs to call this method to add the new node type | `() => void` | 1.0.0 |\r\n\r\n#### DrawerComponent\r\n\r\n| Property | Description | Type | Version |\r\n| :----------------- | :--------------------------------------------------------------- | :------------------------------ | :------ |\r\n| visible | You can judge the boolean value of **selectedNode** by yourself. | `any` | 2.0.0 |\r\n| onClose | You can also call **closeDrawer** by yourself. | `any` | 2.0.0 |\r\n| children | | `any` | 2.0.0 |\r\n| title | | `any` | 2.0.0 |\r\n| width | | `any` | 2.0.0 |\r\n| destroyOnClose | | `any` | 2.0.0 |\r\n| maskClosable | | `any` | 2.0.0 |\r\n| configComponentRef | | `React.MutableRefObject`\\ | 2.5.0 |\r\n\r\n#### PopoverComponent\r\n\r\n| Property | Description | Type | Version |\r\n| :---------------- | :---------- | :---- | :------ |\r\n| visible | | `any` | 2.0.0 |\r\n| onVisibleChange | | `any` | 2.0.0 |\r\n| children | | `any` | 2.0.0 |\r\n| overlayClassName | | `any` | 2.0.0 |\r\n| placement | | `any` | 2.0.0 |\r\n| trigger | | `any` | 2.0.0 |\r\n| content | | `any` | 2.0.0 |\r\n| getPopupContainer | | `any` | 2.0.0 |\r\n\r\n#### PopconfirmComponent\r\n\r\n| Property | Description | Type | Version |\r\n| :---------------- | :----------------------------------------- | :---- | :------ |\r\n| title | | `any` | 2.0.0 |\r\n| onConfirm | You can also call **removeNode** yourself. | `any` | 2.0.0 |\r\n| children | | `any` | 2.0.0 |\r\n| getPopupContainer | | `any` | 2.0.0 |\r\n\r\n### FlowBuilderInstance\r\n\r\n| Name | Description | Type | Version |\r\n| :---------- | :------------- | :------------------------------------------------------------------------------ | :------ |\r\n| add | add node | `(node: INode, newNodeType: string) => void` \\| `(newNodeType: string) => void` |\r\n| history | undo, redo | `(type: 'undo' \\| 'redo') => void` |\r\n| remove | remove noded | `(nodes: INode \\| INode[] = useContext(NodeContext)) => void` |\r\n| zoom | zoom | `(type: 'out' \\| 'in' \\| number) => void` |\r\n| closeDrawer | close drawer | `() => void` |\r\n| context | BuilderContext | [BuilderContext](#buildercontext) | 1.3.5 |\r\n\r\n### Formatter\r\n\r\n| Name | Description | Type |\r\n| :------------- | :---------------------- | :---------------------------------------------------------------------- |\r\n| buildFlatNodes | Translate to flat nodes | `(params: {registerNodes: IRegisterNode[], nodes: INode[]}) => INode[]` |\r\n| buildTreeNodes | Translate to tree nodes | `(params: {nodes: INode[]}) => INode[]` |\r\n| createUuid | Create uuid | `(prefix?: string) => string` |\r\n\r\n### RegisterNode\r\n\r\n| Property | Description | Type | Required | Default | Version |\r\n| :------------------------ | :------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- | :-------------------------------- | :------ |\r\n| addableComponent | | `React.FC`\\<[AddableComponent](#addablecomponent)\\> | | - |\r\n| addableNodeTypes | The list of nodes that can be added below the node | `string[]` | | - |\r\n| addIcon | The icon in addable node list (There are already some default icons) | `ReactNode` | | - |\r\n| addConditionIcon | The icon of the branch node when adding a condition (The default icon already exists) | `ReactNode` | | - | 1.3.3 |\r\n| className | The class name of node | `string` | | - | 1.3.4 |\r\n| conditionMaxNum | The max number of condition node | `number` | | - |\r\n| conditionNodeType | The type of condition node | `string` | | - |\r\n| configComponent | The Component of configuring node form | `React.FC`\\<[ConfigComponent](#configcomponent)\\> \\| `React.ForwardRefExoticComponent`\\<[ConfigComponent](#configcomponent) & `React.RefAttributes`\\\\> | | - |\r\n| configTitle | The drawer title of configuring node | `string \\| ((node: INode, nodes: INode[]) => string)` | | - |\r\n| customRemove | Custom remove button | `boolean` | | false |\r\n| displayComponent | The Component of displaying node | `React.FC`\\<[DisplayComponent](#displaycomponent)\\> | | - |\r\n| initialNodeData | the initial data when add new node | `Record` | | - |\r\n| isStart | Is start node | `boolean` | | false |\r\n| isEnd | Is end node | `boolean` | | false |\r\n| isLoop | Is loop node | `boolean` | | false | 1.4.6 |\r\n| name | The name of node | `string` | ✓ | - |\r\n| removeConfirmTitle | The confirmation information before deleting the node. The [title](https://ant.design/components/popconfirm/#API) of Popconfirm | `string` \\| `ReactNode` | | Are you sure to remove this node? |\r\n| showPracticalBranchNode | - | `boolean` | | false | 1.1.0 |\r\n| showPracticalBranchRemove | - | `boolean` | | false | 1.1.0 |\r\n| type | The type of node, promise `start` is start node type and `end` is end node type | `string` | ✓ | - |\r\n\r\n### RegisterRemoteNode\r\n\r\n| Property | Description | Type | Required | Default | Version |\r\n| :------- | :------------- | :------- | :------- | :------ | :------ |\r\n| url | remote url | `string` | ✓ | - | 1.3.0 |\r\n| cssUrl | remote css url | `string` | | - | 1.3.0 |\r\n\r\n#### DisplayComponent\r\n\r\n| Property | Description | Type |\r\n| :------- | :---------------------------------------------------------------- | :----------------------------------- |\r\n| node | The all information of node (NodeContext is recommended since V1) | [Node](#node) |\r\n| nodes | (BuilderContext is recommended since V1) | [Node](#node)[] |\r\n| readonly | (BuilderContext is recommended since V1) | `boolean` |\r\n| remove | Remove node (useAction is recommended since V1) | `(nodes?: INode \\| INode[]) => void` |\r\n\r\n#### ConfigComponent\r\n\r\n| Property | Description | Type |\r\n| :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------- |\r\n| cancel | Called on cancel, used to close the drawer (useDrawer is recommended since V1) | `() => void` |\r\n| node | The all information of node (NodeContext is recommended since V1) | [Node](#node) |\r\n| nodes | (BuilderContext is recommended since V1) | [Node](#node)[] |\r\n| save | Called on save node data (automatically close the drawer, no need to call cancel). FlowBuilder will set the `validateStatusError` property according to the second param (useDrawer is recommended since V1) | `(values: any, validateStatusError?: boolean) => void` |\r\n\r\n#### AddableComponent\r\n\r\n| Property | Description | Type |\r\n| :------- | :---------------------------------------------------------------- | :----------------------- |\r\n| add | | `(type: string) => void` |\r\n| node | The all information of node (NodeContext is recommended since V1) | [Node](#node) |\r\n| nodes | (BuilderContext is recommended since V1) | [Node](#node)[] |\r\n\r\n### Node\r\n\r\n| Property | Description | Type |\r\n| :------------------ | :------------------------------------------------------------------------------------------------------------------------------ | :-------------- |\r\n| children | The condition nodes array of branch node, or the next flow of condition node | [Node](#node)[] |\r\n| configuring | Whether configuring of node. The display Component can highlight the node according to this property | `boolean` |\r\n| data | The data of node | `any` |\r\n| id | The unique id of node | `string` |\r\n| name | The name of node. Same as the `name` of the registered node | `string` |\r\n| path | The full path in FlowBuilder | `string[]` |\r\n| type | The type of node. Same as the `type` of the registered node | `string` |\r\n| validateStatusError | The Component of configuring node form validate failed. The display Component can highlight the node according to this property | `boolean` |\r\n\r\n### Context\r\n\r\n**Added since V1**\r\n\r\nIn the context of FlowBuilder the following contexts can be used\r\n\r\n#### BuilderContext\r\n\r\nContains [props](#flowbuilder) and state. The following is the state:\r\n\r\n| Property | Description | Type |\r\n| :-------------------------- | :------------------------------------- | :----------------------------------- |\r\n| zoomValue | current zoom value | `number` |\r\n| setZoomValue | set zoomValue | `(zoomValue: number) => void` |\r\n| historyRecords | history nodes records | `INode[][]` |\r\n| setHistoryRecords | set historyRecords | `(records: INode[][]) => void` |\r\n| activeHistoryRecordIndex | current index in history nodes records | `number` |\r\n| setActiveHistoryRecordIndex | set activeHistoryRecordIndex | `(index: number) => void` |\r\n| selectedNode | current selecred node | `INode \\| undefined` |\r\n| setSelectedNode | set selectedNode | `(node: INode \\| undefined) => void` |\r\n| drawerTitle | the title of Drawer | `string` |\r\n| setDrawerTitle | set drawerTitle | `(title: string) => void` |\r\n| dragType | dragged node type | `string` |\r\n| setDragType | set dragType | `(type: string) => void` |\r\n\r\n#### NodeContext\r\n\r\nGet the data of the node where it is used. For details [Node](#node)\r\n\r\n### Hooks\r\n\r\n**Added since V1**\r\n\r\nIn the context of FlowBuilder the following hooks can be used\r\n\r\n#### useAction\r\n\r\n| Property | Description | Type | Version |\r\n| :------------ | :-------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------ | :------ |\r\n| clickNode | click node | `(node: INode = useContext(NodeContext)) => void` |\r\n| addNode | add one node. (Get the current node through NodeContext when there is no node property) | `(node: INode, newNodeType: string) => void` \\| `(newNodeType: string) => void` |\r\n| addNodeInLoop | add one node in loop node. | `(newNodeType: string) => void` | 1.4.6 |\r\n| removeNode | remove one node or more nodes. | `(targetNode: INode \\| INode[] = useContext(NodeContext)) => void` |\r\n\r\n#### useDrawer\r\n\r\n| Property | Description | Type |\r\n| :---------- | :------------------------------------------------------------------------------------------ | :----------------------------------------------------- |\r\n| closeDrawer | close Drawer and clear selectedNode | `() => void` |\r\n| saveDrawer | save the content in Drawer (same as the save method in [ConfigComponent](#configcomponent)) | `(values: any, validateStatusError?: boolean) => void` |\r\n\r\n#### useZoom\r\n\r\n| Property | Description | Type |\r\n| :------- | :----------------------------------------------------------------------------------------- | :---------------------------------------- |\r\n| minZoom | minimum zoom value | `number` |\r\n| maxZoom | maximum zoom value | `number` |\r\n| zoom | change zoom value (same as the zoom method in [FlowBuilderInstance](#flowbuilderinstance)) | `(type: 'out' \\| 'in' \\| number) => void` |\r\n\r\n#### useHistory\r\n\r\n| Property | Description | Type |\r\n| :---------- | :------------------------------------------------------------------------------------- | :-------------------------------------------------------------- |\r\n| maxLength | Maximum length of history nodes records | `number` |\r\n| pushHistory | add history nodes record | `(record?: INode[] = useContext(BuilderContext).nodes) => void` |\r\n| history | undo, redo (same as the history method in [FlowBuilderInstance](#flowbuilderinstance)) | `(type: 'undo' \\| 'redo') => void` |\r\n\r\n#### useSort\r\n\r\n| Property | Description | Type | Version |\r\n| :------- | :--------------- | :------------------------------------------------ | :------ |\r\n| backward | sort to backward | `(node: INode = useContext(NodeContext)) => void` | 1.4.3 |\r\n| forward | sort to forward | `(node: INode = useContext(NodeContext)) => void` | 1.4.3 |\r\n| end | sort to end | `(node: INode = useContext(NodeContext)) => void` | 1.4.3 |\r\n| start | sort to start | `(node: INode = useContext(NodeContext)) => void` | 1.4.3 |\r\n","readmeFilename":"README.md"}