node handle

web/app/components/workflow/constants.ts

@@ -57,7 +57,6 @@ export const NODES_INITIAL_DATA = {
     type: BlockEnum.IfElse,
     title: '',
     desc: '',
-
     ...IfElseDefault.defaultValue,
   },
   [BlockEnum.Code]: {

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
-
-      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 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 newNodes = produce(nodes, (draft) => {
       const currentNode = draft.find(n => n.id === node.id)!
@@ -166,17 +167,9 @@ export const useWorkflow = () => {
 
   const handleNodeEnter = useCallback<NodeMouseHandler>((_, 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<NodeMouseHandler>((_, node) => {
+  const handleNodeLeave = useCallback<NodeMouseHandler>(() => {
     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}`,

web/app/components/workflow/nodes/_base/components/next-step/index.tsx

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

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'}
               `}
             />

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<BaseNodeProps> = ({
   data,
   children,
 }) => {
-  const type = data.type
-
   return (
     <div
       className={`
@@ -28,6 +31,26 @@ const BaseNode: FC<BaseNodeProps> = ({
         ${data._selected ? 'border-[2px] border-primary-600' : 'border border-white'}
       `}
     >
+      {
+        data.type !== BlockEnum.VariableAssigner && (
+          <NodeTargetHandle
+            id={id}
+            data={data}
+            handleClassName='!top-[17px] !-left-2'
+            handleId='target'
+          />
+        )
+      }
+      {
+        data.type !== BlockEnum.IfElse && data.type !== BlockEnum.QuestionClassifier && (
+          <NodeSourceHandle
+            id={id}
+            data={data}
+            handleClassName='!top-[17px] !-right-2'
+            handleId='source'
+          />
+        )
+      }
       <div className='flex items-center px-3 pt-3 pb-2'>
         <BlockIcon
           className='shrink-0 mr-2'

web/app/components/workflow/nodes/index.tsx

 import { memo } from 'react'
 import type { NodeProps } from 'reactflow'
 import type { Node } from '../types'
-import { BlockEnum } from '../types'
 import { canRunBySingle } from '../utils'
 import {
   NodeComponentMap,
@@ -9,10 +8,6 @@ import {
 } from './constants'
 import BaseNode from './_base/node'
 import BasePanel from './_base/panel'
-import {
-  NodeSourceHandle,
-  NodeTargetHandle,
-} from './_base/components/node-handle'
 import NodeControl from './_base/components/node-control'
 
 const CustomNode = memo((props: NodeProps) => {
@@ -22,27 +17,9 @@ const CustomNode = memo((props: NodeProps) => {
 
   return (
     <>
-      {
-        nodeData.type !== BlockEnum.VariableAssigner && (
-          <NodeTargetHandle
-            { ...props }
-            handleClassName='!top-[17px] !-left-2'
-            handleId='target'
-          />
-        )
-      }
       <BaseNode { ...props }>
         <NodeComponent />
       </BaseNode>
-      {
-        nodeData.type !== BlockEnum.IfElse && nodeData.type !== BlockEnum.QuestionClassifier && (
-          <NodeSourceHandle
-            { ...props }
-            handleClassName='!top-[17px] !-right-2'
-            handleId='source'
-          />
-        )
-      }
       {
         nodeData._selected
         && canRunBySingle(nodeData.type)

web/app/components/workflow/nodes/question-classifier/node.tsx

@@ -42,7 +42,7 @@ const Node: FC<NodeProps<QuestionClassifierNodeType>> = (props) => {
             <NodeSourceHandle
               {...props}
               handleId={topic.name}
-              handleClassName='!top-[11px] !-right-[21px]'
+              handleClassName='!top-1/2 !-translate-y-1/2 !-right-[21px]'
             />
           </div>
         ))}