From 173336f2569b7bcfa51e017292d57688c84a2633 Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Thu, 7 Mar 2024 15:58:22 +0800 Subject: [PATCH] node handle --- web/app/components/workflow/constants.ts | 1 - web/app/components/workflow/hooks.ts | 60 +++++++------------ .../_base/components/next-step/index.tsx | 20 +++++-- .../nodes/_base/components/node-handle.tsx | 5 +- .../components/workflow/nodes/_base/node.tsx | 27 ++++++++- web/app/components/workflow/nodes/index.tsx | 23 ------- .../nodes/question-classifier/node.tsx | 2 +- 7 files changed, 67 insertions(+), 71 deletions(-) diff --git a/web/app/components/workflow/constants.ts b/web/app/components/workflow/constants.ts index f1a16cca49..fc94c3003c 100644 --- a/web/app/components/workflow/constants.ts +++ b/web/app/components/workflow/constants.ts @@ -57,7 +57,6 @@ export const NODES_INITIAL_DATA = { type: BlockEnum.IfElse, title: '', desc: '', - ...IfElseDefault.defaultValue, }, [BlockEnum.Code]: { diff --git a/web/app/components/workflow/hooks.ts b/web/app/components/workflow/hooks.ts index d3dc77db6b..acc1bbba3a 100644 --- a/web/app/components/workflow/hooks.ts +++ b/web/app/components/workflow/hooks.ts @@ -10,6 +10,7 @@ import type { Viewport, } from 'reactflow' import { + Position, getConnectedEdges, getIncomers, useReactFlow, @@ -118,32 +119,32 @@ export const useWorkflow = () => { getNodes, setNodes, } = store.getState() - const { setHelpLine } = useStore.getState() + // const { setHelpLine } = useStore.getState() e.stopPropagation() const nodes = getNodes() - const showVerticalHelpLineNodes = nodes.filter((n) => { - if ( - n.position.x === node.position.x - || n.position.x + n.width! === node.position.x - || n.position.x === node.position.x + node.width! - ) - return true + // const showVerticalHelpLineNodes = nodes.filter((n) => { + // if ( + // n.position.x === node.position.x + // || n.position.x + n.width! === node.position.x + // || n.position.x === node.position.x + node.width! + // ) + // return true - return false - }) - const showHorizontalHelpLineNodes = nodes.filter((n) => { - if ( - n.position.y === node.position.y - || n.position.y === node.position.y + node.height! - || n.position.y + n.height! === node.position.y - || n.position.y + n.height! === node.position.y + node.height! - ) - return true + // return false + // }) + // const showHorizontalHelpLineNodes = nodes.filter((n) => { + // if ( + // n.position.y === node.position.y + // || n.position.y === node.position.y + node.height! + // || n.position.y + n.height! === node.position.y + // || n.position.y + n.height! === node.position.y + node.height! + // ) + // return true - return false - }) + // return false + // }) const newNodes = produce(nodes, (draft) => { const currentNode = draft.find(n => n.id === node.id)! @@ -166,17 +167,9 @@ export const useWorkflow = () => { const handleNodeEnter = useCallback((_, node) => { const { - getNodes, - setNodes, edges, setEdges, } = store.getState() - const newNodes = produce(getNodes(), (draft) => { - const currentNode = draft.find(n => n.id === node.id)! - - currentNode.data._hovering = true - }) - setNodes(newNodes) const newEdges = produce(edges, (draft) => { const connectedEdges = getConnectedEdges([node], edges) @@ -189,19 +182,11 @@ export const useWorkflow = () => { setEdges(newEdges) }, [store]) - const handleNodeLeave = useCallback((_, node) => { + const handleNodeLeave = useCallback(() => { const { - getNodes, - setNodes, edges, setEdges, } = store.getState() - const newNodes = produce(getNodes(), (draft) => { - const currentNode = draft.find(n => n.id === node.id)! - - currentNode.data._hovering = false - }) - setNodes(newNodes) const newEdges = produce(edges, (draft) => { draft.forEach((edge) => { edge.data = { ...edge.data, _connectedNodeIsHovering: false } @@ -331,6 +316,7 @@ export const useWorkflow = () => { x: currentNode.position.x + 304, y: currentNode.position.y, }, + targetPosition: Position.Left, } const newEdge = { id: `${currentNode.id}-${nextNode.id}`, diff --git a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx index 34c3e68587..28abc616f3 100644 --- a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx +++ b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx @@ -1,4 +1,4 @@ -import { memo } from 'react' +import { memo, useMemo } from 'react' import { getConnectedEdges, getOutgoers, @@ -6,10 +6,14 @@ import { useStoreApi, } from 'reactflow' import BlockIcon from '../../../../block-icon' -import type { Node } from '../../../../types' +import type { + Branch, + Node, +} from '../../../../types' import Add from './add' import Item from './item' import Line from './line' +import { BlockEnum } from '@/app/components/workflow/types' type NextStepProps = { selectedNode: Node @@ -18,7 +22,15 @@ const NextStep = ({ selectedNode, }: NextStepProps) => { const store = useStoreApi() - const branches = selectedNode?.data._targetBranches + const branches = useMemo(() => { + const nodeData = selectedNode.data + + if (nodeData.type === BlockEnum.IfElse) + return nodeData._targetBranches + + if (nodeData.type === BlockEnum.QuestionClassifier) + return (nodeData as any).classes + }, [selectedNode]) const edges = useEdges() const outgoers = getOutgoers(selectedNode as Node, store.getState().getNodes(), edges) const connectedEdges = getConnectedEdges([selectedNode] as Node[], edges).filter(edge => edge.source === selectedNode!.id) @@ -52,7 +64,7 @@ const NextStep = ({ } { branches?.length && ( - branches.map((branch) => { + branches.map((branch: Branch) => { const connected = connectedEdges.find(edge => edge.sourceHandle === branch.id) const target = outgoers.find(outgoer => outgoer.id === connected?.target) diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx index 1c02e6bedd..aaec3fdcb5 100644 --- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx +++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx @@ -70,7 +70,7 @@ export const NodeTargetHandle = ({ triggerClassName={open => ` hidden absolute left-0 top-0 pointer-events-none ${nodeSelectorClassName} - ${data._hovering && '!flex'} + group-hover:flex ${open && '!flex'} `} /> @@ -83,7 +83,6 @@ export const NodeTargetHandle = ({ export const NodeSourceHandle = ({ id, - data, handleId, handleClassName, nodeSelectorClassName, @@ -129,7 +128,7 @@ export const NodeSourceHandle = ({ triggerClassName={open => ` hidden absolute top-0 left-0 pointer-events-none ${nodeSelectorClassName} - ${data._hovering && '!flex'} + group-hover:flex ${open && '!flex'} `} /> diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx index 2d1725c424..a1767a7f57 100644 --- a/web/app/components/workflow/nodes/_base/node.tsx +++ b/web/app/components/workflow/nodes/_base/node.tsx @@ -7,6 +7,11 @@ import { memo, } from 'react' import type { NodeProps } from '../../types' +import { BlockEnum } from '../../types' +import { + NodeSourceHandle, + NodeTargetHandle, +} from './components/node-handle' import BlockIcon from '@/app/components/workflow/block-icon' type BaseNodeProps = { @@ -18,8 +23,6 @@ const BaseNode: FC = ({ data, children, }) => { - const type = data.type - return (
= ({ ${data._selected ? 'border-[2px] border-primary-600' : 'border border-white'} `} > + { + data.type !== BlockEnum.VariableAssigner && ( + + ) + } + { + data.type !== BlockEnum.IfElse && data.type !== BlockEnum.QuestionClassifier && ( + + ) + }
{ @@ -22,27 +17,9 @@ const CustomNode = memo((props: NodeProps) => { return ( <> - { - nodeData.type !== BlockEnum.VariableAssigner && ( - - ) - } - { - nodeData.type !== BlockEnum.IfElse && nodeData.type !== BlockEnum.QuestionClassifier && ( - - ) - } { nodeData._selected && canRunBySingle(nodeData.type) diff --git a/web/app/components/workflow/nodes/question-classifier/node.tsx b/web/app/components/workflow/nodes/question-classifier/node.tsx index 7eebfde898..431c1ba810 100644 --- a/web/app/components/workflow/nodes/question-classifier/node.tsx +++ b/web/app/components/workflow/nodes/question-classifier/node.tsx @@ -42,7 +42,7 @@ const Node: FC> = (props) => {
))}