|
| 1 | +import React, { useContext } from 'react'; |
| 2 | +import { Dropdown, Menu, Button } from 'antd'; |
| 3 | +import { PlusOutlined } from '@ant-design/icons'; |
| 4 | +import { cx } from '@emotion/css'; |
| 5 | +import { addButtonClass, branchBlockClass, branchClass, nodeBlockClass, nodeCardClass, nodeHeaderClass, nodeTitleClass } from './style'; |
| 6 | + |
| 7 | +import { |
| 8 | + useCollection, |
| 9 | + useResourceActionContext |
| 10 | +} from '..'; |
| 11 | +import { Instruction, instructions, Node } from './nodes'; |
| 12 | + |
| 13 | + |
| 14 | + |
| 15 | + |
| 16 | +function makeNodes(nodes): void { |
| 17 | + const nodesMap = new Map(); |
| 18 | + nodes.forEach(item => nodesMap.set(item.id, item)); |
| 19 | + for (let node of nodesMap.values()) { |
| 20 | + if (node.upstreamId) { |
| 21 | + node.upstream = nodesMap.get(node.upstreamId); |
| 22 | + } |
| 23 | + |
| 24 | + if (node.downstreamId) { |
| 25 | + node.downstream = nodesMap.get(node.downstreamId); |
| 26 | + } |
| 27 | + } |
| 28 | +} |
| 29 | + |
| 30 | +const FlowContext = React.createContext(null); |
| 31 | + |
| 32 | +export function useFlowContext() { |
| 33 | + return useContext(FlowContext); |
| 34 | +} |
| 35 | + |
| 36 | +export function WorkflowCanvas() { |
| 37 | + const { data, refresh, loading } = useResourceActionContext(); |
| 38 | + |
| 39 | + if (!data?.data && !loading) { |
| 40 | + return <div>加载失败</div>; |
| 41 | + } |
| 42 | + |
| 43 | + const { nodes = [] } = data?.data ?? {}; |
| 44 | + |
| 45 | + makeNodes(nodes); |
| 46 | + |
| 47 | + const entry = nodes.find(item => !item.upstream); |
| 48 | + |
| 49 | + return ( |
| 50 | + <FlowContext.Provider value={{ |
| 51 | + nodes, |
| 52 | + onNodeAdded: refresh, |
| 53 | + onNodeRemoved: refresh |
| 54 | + }}> |
| 55 | + <div className={branchBlockClass}> |
| 56 | + <Branch entry={entry} /> |
| 57 | + </div> |
| 58 | + <div className={cx(nodeCardClass)}>结束</div> |
| 59 | + </FlowContext.Provider> |
| 60 | + ); |
| 61 | +} |
| 62 | + |
| 63 | +export function Branch({ |
| 64 | + from = null, |
| 65 | + entry = null, |
| 66 | + branchIndex = null, |
| 67 | + controller = null |
| 68 | +}) { |
| 69 | + const list = []; |
| 70 | + for (let node = entry; node; node = node.downstream) { |
| 71 | + list.push(node); |
| 72 | + } |
| 73 | + |
| 74 | + return ( |
| 75 | + <div className={cx(branchClass)}> |
| 76 | + <div className="workflow-branch-lines" /> |
| 77 | + {controller} |
| 78 | + <AddButton upstream={from} branchIndex={branchIndex} /> |
| 79 | + <div className="workflow-node-list"> |
| 80 | + {list.map(item => { |
| 81 | + return ( |
| 82 | + <div key={item.id} className={cx(nodeBlockClass)}> |
| 83 | + <Node data={item} /> |
| 84 | + <AddButton upstream={item} /> |
| 85 | + </div> |
| 86 | + ); |
| 87 | + })} |
| 88 | + </div> |
| 89 | + </div> |
| 90 | + ); |
| 91 | +} |
| 92 | + |
| 93 | +// TODO(bug): useless observable |
| 94 | +// const instructionsList = observable(Array.from(instructions.getValues())); |
| 95 | + |
| 96 | +interface AddButtonProps { |
| 97 | + upstream; |
| 98 | + branchIndex?: number; |
| 99 | +}; |
| 100 | + |
| 101 | +function AddButton({ upstream, branchIndex = null }: AddButtonProps) { |
| 102 | + const { resource } = useCollection(); |
| 103 | + const { data } = useResourceActionContext(); |
| 104 | + const { onNodeAdded } = useFlowContext(); |
| 105 | + |
| 106 | + async function onCreate({ keyPath }) { |
| 107 | + const type = keyPath.pop(); |
| 108 | + const config = {}; |
| 109 | + const [optionKey] = keyPath; |
| 110 | + if (optionKey) { |
| 111 | + const { value } = instructions.get(type).options.find(item => item.key === optionKey); |
| 112 | + Object.assign(config, value); |
| 113 | + } |
| 114 | + |
| 115 | + const { data: { data: node } } = await resource.create({ |
| 116 | + values: { |
| 117 | + type, |
| 118 | + workflowId: data.data.id, |
| 119 | + upstreamId: upstream?.id ?? null, |
| 120 | + branchIndex, |
| 121 | + config |
| 122 | + } |
| 123 | + }); |
| 124 | + |
| 125 | + onNodeAdded(node); |
| 126 | + } |
| 127 | + |
| 128 | + return ( |
| 129 | + <div className={cx(addButtonClass)}> |
| 130 | + <Dropdown trigger={['click']} overlay={ |
| 131 | + <Menu onClick={ev => onCreate(ev)}> |
| 132 | + {(Array.from(instructions.getValues()) as Instruction[]).map(item => item.options |
| 133 | + ? ( |
| 134 | + <Menu.SubMenu key={item.type} title={item.title}> |
| 135 | + {item.options.map(option => ( |
| 136 | + <Menu.Item key={option.key}>{option.label}</Menu.Item> |
| 137 | + ))} |
| 138 | + </Menu.SubMenu> |
| 139 | + ) |
| 140 | + : ( |
| 141 | + <Menu.Item key={item.type}>{item.title}</Menu.Item> |
| 142 | + ))} |
| 143 | + </Menu> |
| 144 | + }> |
| 145 | + <Button shape="circle" icon={<PlusOutlined />} /> |
| 146 | + </Dropdown> |
| 147 | + </div> |
| 148 | + ); |
| 149 | +}; |
0 commit comments