node handle

2024-03-07 15:58:22 +08:00 · 2024-03-07 15:58:22 +08:00 · 173336f256
parent f37316f2a0
commit 173336f256
7 changed files with 67 additions and 71 deletions
--- 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]: {
--- 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<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}`,
--- 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)

--- 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'}
              `}
            />
--- 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<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'
--- a/web/app/components/workflow/nodes/index.tsx
+++ b/web/app/components/workflow/nodes/index.tsx
@ -1,7 +1,6 @@
 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)
--- 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<NodeProps<QuestionClassifierNodeType>> = (props) => {
            <NodeSourceHandle
              {...props}
              handleId={topic.name}
-              handleClassName='!top-[11px] !-right-[21px]'
+              handleClassName='!top-1/2 !-translate-y-1/2 !-right-[21px]'
            />
          </div>
        ))}