refactor(web): 优化流程节点的定义和实现
This commit is contained in:
v-zhangjc9
@@ -1,33 +1,78 @@
|
||||
import {CopyFilled, DeleteFilled, EditFilled} from '@ant-design/icons'
|
||||
import {Handle, type HandleProps, type Node, type NodeProps, Position, useNodeConnections} from '@xyflow/react'
|
||||
import {type Edge, getIncomers, Handle, type Node, type NodeProps, Position} from '@xyflow/react'
|
||||
import type {Schema} from 'amis'
|
||||
import {Button, Card} from 'antd'
|
||||
import {has, isEmpty, isEqual, isNil} from 'licia'
|
||||
import {type JSX} from 'react'
|
||||
import {Button, Card, Drawer} from 'antd'
|
||||
import {find, has, isEmpty, isEqual, unique} from 'licia'
|
||||
import {type JSX, useCallback, useState} from 'react'
|
||||
import styled from 'styled-components'
|
||||
import {horizontalFormOptions} from '../../../util/amis.tsx'
|
||||
import {useContextStore} from '../store/ContextStore.ts'
|
||||
import Queue from 'yocto-queue'
|
||||
import {amisRender, commonInfo, horizontalFormOptions} from '../../../util/amis.tsx'
|
||||
import {useDataStore} from '../store/DataStore.ts'
|
||||
import {useFlowStore} from '../store/FlowStore.ts'
|
||||
|
||||
export type AmisNodeType = 'normal' | 'start' | 'end'
|
||||
export type InputFormOptions = {
|
||||
label: string
|
||||
value: string
|
||||
}
|
||||
|
||||
export function inputsFormColumns(props: ColumnsSchemaProps): Schema[] {
|
||||
let incomers = props.getAllIncomerNodeById(props.nodeId)
|
||||
let groups = []
|
||||
for (const incomer of incomers) {
|
||||
let data = props.getNodeDataById(incomer.id)
|
||||
if (has(data, 'outputs')) {
|
||||
let outputs = data?.outputs ?? []
|
||||
groups.push({
|
||||
label: incomer.id,
|
||||
children: Object.keys(outputs).map(key => ({
|
||||
value: `${incomer.id}.${key}`,
|
||||
export type InputFormOptionsGroup = {
|
||||
group: string,
|
||||
variables: InputFormOptions[],
|
||||
}
|
||||
|
||||
const getAllIncomerNodeById: (id: string, nodes: Node[], edges: Edge[]) => string[] = (id, nodes, edges) => {
|
||||
let queue = new Queue<Node>()
|
||||
queue.enqueue(find(nodes, node => isEqual(node.id, id))!)
|
||||
let result: string[] = []
|
||||
while (queue.size !== 0) {
|
||||
let currentNode = queue.dequeue()!
|
||||
for (const incomer of getIncomers(currentNode, nodes, edges)) {
|
||||
result.push(incomer.id)
|
||||
queue.enqueue(incomer)
|
||||
}
|
||||
}
|
||||
return unique(result, (a, b) => isEqual(a, b))
|
||||
}
|
||||
|
||||
export function inputsFormColumns(
|
||||
nodeId: string,
|
||||
inputSchema: Record<string, Record<string, any>>,
|
||||
nodes: Node[],
|
||||
edges: Edge[],
|
||||
data: any,
|
||||
): Schema[] {
|
||||
let inputSchemaVariables: InputFormOptions[] = Object.keys(inputSchema).map(key => ({
|
||||
label: inputSchema[key]?.label ?? '',
|
||||
value: key,
|
||||
}))
|
||||
|
||||
let incomerIds = getAllIncomerNodeById(nodeId, nodes, edges)
|
||||
console.log(incomerIds, nodes, edges)
|
||||
let incomerVariables: InputFormOptionsGroup[] = []
|
||||
for (const incomerId of incomerIds) {
|
||||
let nodeData = data[incomerId] ?? {}
|
||||
if (has(nodeData, 'outputs')) {
|
||||
let outputs = nodeData?.outputs ?? []
|
||||
incomerVariables.push({
|
||||
group: incomerId,
|
||||
variables: Object.keys(outputs).map(key => ({
|
||||
value: `${incomerId}.${key}`,
|
||||
label: key,
|
||||
})),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let inputVariables = [
|
||||
...(isEmpty(inputSchemaVariables) ? [] : [
|
||||
{
|
||||
group: '流程入参',
|
||||
variables: inputSchemaVariables,
|
||||
},
|
||||
]),
|
||||
...incomerVariables,
|
||||
]
|
||||
|
||||
return [
|
||||
{
|
||||
type: 'input-kvs',
|
||||
@@ -48,14 +93,10 @@ export function inputsFormColumns(props: ColumnsSchemaProps): Schema[] {
|
||||
required: true,
|
||||
selectMode: 'group',
|
||||
options: [
|
||||
{
|
||||
label: '流程参数',
|
||||
children: Object.keys(props.inputSchema).map(key => ({
|
||||
label: props.inputSchema[key]?.label ?? '',
|
||||
value: key,
|
||||
})),
|
||||
},
|
||||
...groups,
|
||||
...inputVariables.map(item => ({
|
||||
label: item.group,
|
||||
children: item.variables,
|
||||
})),
|
||||
],
|
||||
},
|
||||
],
|
||||
@@ -110,35 +151,13 @@ export function outputsFormColumns(editable: boolean = false, required: boolean
|
||||
]
|
||||
}
|
||||
|
||||
export const LimitHandler = (props: HandleProps & { limit: number }) => {
|
||||
const connections = useNodeConnections({
|
||||
handleType: props.type,
|
||||
})
|
||||
return (
|
||||
<Handle
|
||||
{...props}
|
||||
isConnectable={connections.length < props.limit}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
type ColumnsSchemaProps = {
|
||||
// getInputSchema: () => Record<string, Record<string, any>>,
|
||||
inputSchema: Record<string, Record<string, any>>,
|
||||
nodeId: string,
|
||||
nodeData: any,
|
||||
getNodeDataById: (id: string) => any,
|
||||
getAllIncomerNodeById: (id: string) => Node[],
|
||||
}
|
||||
|
||||
type AmisNodeProps = {
|
||||
nodeProps: NodeProps
|
||||
type: AmisNodeType
|
||||
defaultNodeName: String
|
||||
defaultNodeDescription?: String
|
||||
extraNodeDescription?: (nodeData: any) => JSX.Element
|
||||
handlers?: (nodeData: any) => JSX.Element
|
||||
columnSchema?: (props: ColumnsSchemaProps) => Schema[]
|
||||
handler: JSX.Element
|
||||
columnSchema?: () => Schema[]
|
||||
}
|
||||
|
||||
const AmisNodeContainerDiv = styled.div`
|
||||
@@ -151,30 +170,140 @@ const AmisNodeContainerDiv = styled.div`
|
||||
}
|
||||
`
|
||||
|
||||
export const StartNodeHandler = () => {
|
||||
return <Handle type="source" position={Position.Right} id="source"/>
|
||||
}
|
||||
|
||||
export const EndNodeHandler = () => {
|
||||
return <Handle type="target" position={Position.Left} id="target"/>
|
||||
}
|
||||
|
||||
export const NormalNodeHandler = () => {
|
||||
return (
|
||||
<>
|
||||
<StartNodeHandler/>
|
||||
<EndNodeHandler/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
|
||||
nodeProps,
|
||||
type,
|
||||
defaultNodeName,
|
||||
defaultNodeDescription,
|
||||
extraNodeDescription,
|
||||
handlers,
|
||||
handler,
|
||||
columnSchema,
|
||||
}) => {
|
||||
const {
|
||||
removeNode,
|
||||
getAllIncomerNodeById,
|
||||
} = useFlowStore()
|
||||
const {getDataById} = useDataStore()
|
||||
const {inputSchema} = useContextStore()
|
||||
|
||||
const {id, data} = nodeProps
|
||||
const {editNode} = data
|
||||
const {removeNode} = useFlowStore()
|
||||
const {getDataById, setDataById} = useDataStore()
|
||||
const {id} = nodeProps
|
||||
// @ts-ignore
|
||||
const nodeData = getDataById(id)
|
||||
const nodeName = isEmpty(nodeData?.node?.name) ? defaultNodeName : nodeData.node.name
|
||||
const nodeDescription = isEmpty(nodeData?.node?.description) ? defaultNodeDescription : nodeData.node?.description
|
||||
|
||||
const [editDrawerOpen, setEditDrawerOpen] = useState(false)
|
||||
const [editDrawerForm, setEditDrawerForm] = useState<JSX.Element>(<></>)
|
||||
const openEditDrawer = useCallback(() => {
|
||||
setEditDrawerForm(
|
||||
amisRender(
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'none',
|
||||
body: [
|
||||
{
|
||||
debug: commonInfo.debug,
|
||||
type: 'form',
|
||||
...horizontalFormOptions(),
|
||||
wrapWithPanel: false,
|
||||
onEvent: {
|
||||
submitSucc: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'custom',
|
||||
// @ts-ignore
|
||||
script: (context, action, event) => {
|
||||
setDataById(
|
||||
id,
|
||||
{
|
||||
...context.props.data,
|
||||
finished: true,
|
||||
},
|
||||
)
|
||||
setEditDrawerOpen(false)
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'node.name',
|
||||
label: '节点名称',
|
||||
placeholder: nodeName,
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'node.description',
|
||||
label: '节点描述',
|
||||
placeholder: nodeDescription,
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
...(columnSchema?.() ?? []),
|
||||
{
|
||||
type: 'wrapper',
|
||||
size: 'none',
|
||||
className: 'space-x-2 text-right',
|
||||
body: [
|
||||
{
|
||||
type: 'action',
|
||||
label: '取消',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'custom',
|
||||
// @ts-ignore
|
||||
script: (context, action, event) => {
|
||||
setEditDrawerOpen(false)
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'submit',
|
||||
label: '保存',
|
||||
level: 'primary',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
getDataById(id),
|
||||
),
|
||||
)
|
||||
setEditDrawerOpen(true)
|
||||
}, [nodeData])
|
||||
return (
|
||||
<AmisNodeContainerDiv className="w-64">
|
||||
<Drawer
|
||||
title="节点编辑"
|
||||
open={editDrawerOpen}
|
||||
closeIcon={false}
|
||||
maskClosable={false}
|
||||
destroyOnHidden
|
||||
size="large"
|
||||
>
|
||||
{editDrawerForm}
|
||||
</Drawer>
|
||||
<Card
|
||||
className="node-card"
|
||||
title={nodeName}
|
||||
@@ -195,36 +324,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
|
||||
size="small"
|
||||
icon={<EditFilled/>}
|
||||
block
|
||||
// @ts-ignore
|
||||
onClick={() => editNode(
|
||||
id,
|
||||
[
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'node.name',
|
||||
label: '节点名称',
|
||||
placeholder: nodeName,
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'node.description',
|
||||
label: '节点描述',
|
||||
placeholder: nodeDescription,
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
...(
|
||||
columnSchema?.({
|
||||
inputSchema,
|
||||
nodeId: id,
|
||||
nodeData,
|
||||
getNodeDataById: getDataById,
|
||||
getAllIncomerNodeById,
|
||||
}) ?? []
|
||||
),
|
||||
],
|
||||
)}
|
||||
onClick={() => openEditDrawer()}
|
||||
/>,
|
||||
<Button
|
||||
className="text-secondary"
|
||||
@@ -241,14 +341,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
|
||||
{extraNodeDescription?.(nodeData)}
|
||||
</div>
|
||||
</Card>
|
||||
{isNil(handlers)
|
||||
? <>
|
||||
{isEqual(type, 'start') || isEqual(type, 'normal')
|
||||
? <Handle type="source" position={Position.Right} id="source"/> : undefined}
|
||||
{isEqual(type, 'end') || isEqual(type, 'normal')
|
||||
? <Handle type="target" position={Position.Left} id="target"/> : undefined}
|
||||
</>
|
||||
: handlers?.(nodeData)}
|
||||
{handler}
|
||||
</AmisNodeContainerDiv>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user