From 16abcf082c8ba0b75ef0480f37b7713c8578f1dc Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Thu, 7 Mar 2024 17:09:04 +0800
Subject: [PATCH] node control

---
 web/app/components/workflow/hooks.ts          |   1 +
 web/app/components/workflow/index.tsx         |   8 +-
 .../nodes/_base/components/node-control.tsx   |   2 +-
 .../components/workflow/nodes/_base/node.tsx  | 110 +++++++++++-------
 web/app/components/workflow/nodes/index.tsx   |  21 +---
 web/app/components/workflow/types.ts          |   1 -
 6 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/web/app/components/workflow/hooks.ts b/web/app/components/workflow/hooks.ts
index acc1bbba3a..508e043dfe 100644
--- a/web/app/components/workflow/hooks.ts
+++ b/web/app/components/workflow/hooks.ts
@@ -368,6 +368,7 @@ export const useWorkflow = () => {
         x: currentNode.position.x,
         y: currentNode.position.y,
       },
+      targetPosition: Position.Left,
     }
     const newNodes = produce(nodes, (draft) => {
       const index = draft.findIndex(node => node.id === currentNodeId)
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 25628c93f2..24dd42172e 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -9,8 +9,6 @@ import { useKeyPress } from 'ahooks'
 import ReactFlow, {
   Background,
   ReactFlowProvider,
-  useEdgesState,
-  useNodesState,
   useOnViewportChange,
 } from 'reactflow'
 import type { Viewport } from 'reactflow'
@@ -56,13 +54,11 @@ type WorkflowProps = {
   viewport?: Viewport
 }
 const Workflow: FC<WorkflowProps> = memo(({
-  nodes: initialNodes,
-  edges: initialEdges,
+  nodes,
+  edges,
   viewport,
 }) => {
   const showFeaturesPanel = useStore(state => state.showFeaturesPanel)
-  const [nodes] = useNodesState(initialNodes)
-  const [edges] = useEdgesState(initialEdges)
 
   const {
     handleSyncWorkflowDraft,
diff --git a/web/app/components/workflow/nodes/_base/components/node-control.tsx b/web/app/components/workflow/nodes/_base/components/node-control.tsx
index 3e482388b2..2cbbc76231 100644
--- a/web/app/components/workflow/nodes/_base/components/node-control.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-control.tsx
@@ -21,7 +21,7 @@ const NodeControl: FC<NodeControlProps> = ({
   const { handleNodeDataUpdate } = useWorkflow()
 
   return (
-    <div className='absolute right-0 -top-7 flex items-center px-0.5 h-6 bg-white rounded-lg border-[0.5px] border-gray-100 shadow-xs text-gray-500'>
+    <div className='flex items-center px-0.5 h-6 bg-white rounded-lg border-[0.5px] border-gray-100 shadow-xs text-gray-500'>
       {
         isRunning && (
           <div className='flex items-center px-1 h-5 rounded-md bg-primary-50 text-xs font-medium text-primary-600'>
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index a1767a7f57..2f1391c8d8 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -8,10 +8,12 @@ import {
 } from 'react'
 import type { NodeProps } from '../../types'
 import { BlockEnum } from '../../types'
+import { canRunBySingle } from '../../utils'
 import {
   NodeSourceHandle,
   NodeTargetHandle,
 } from './components/node-handle'
+import NodeControl from './components/node-control'
 import BlockIcon from '@/app/components/workflow/block-icon'
 
 type BaseNodeProps = {
@@ -26,55 +28,73 @@ const BaseNode: FC<BaseNodeProps> = ({
   return (
     <div
       className={`
-        group relative w-[240px] bg-[#fcfdff] rounded-2xl shadow-xs
-        hover:shadow-lg
-        ${data._selected ? 'border-[2px] border-primary-600' : 'border border-white'}
+        flex border-[2px] rounded-2xl
+        ${data._selected ? 'border-primary-600' : 'border-transparent'}
       `}
     >
-      {
-        data.type !== BlockEnum.VariableAssigner && (
-          <NodeTargetHandle
-            id={id}
-            data={data}
-            handleClassName='!top-[17px] !-left-2'
-            handleId='target'
+      <div
+        className={`
+          group relative w-[240px] bg-[#fcfdff] shadow-xs
+          border border-transparent rounded-[15px]
+          hover:shadow-lg
+        `}
+      >
+        {
+          data.type !== BlockEnum.VariableAssigner && (
+            <NodeTargetHandle
+              id={id}
+              data={data}
+              handleClassName='!top-4 !-left-[9px]'
+              handleId='target'
+            />
+          )
+        }
+        {
+          data.type !== BlockEnum.IfElse && data.type !== BlockEnum.QuestionClassifier && (
+            <NodeSourceHandle
+              id={id}
+              data={data}
+              handleClassName='!top-4 !-right-[9px]'
+              handleId='source'
+            />
+          )
+        }
+        {
+          canRunBySingle(data.type)
+          && (
+            <div className='hidden group-hover:flex pb-1 absolute right-0 -top-7 h-7'>
+              <NodeControl
+                nodeId={id}
+                isRunning={data._isSingleRun}
+              />
+            </div>
+          )
+        }
+        <div className='flex items-center px-3 pt-3 pb-2'>
+          <BlockIcon
+            className='shrink-0 mr-2'
+            type={data.type}
+            size='md'
+            icon={data._icon}
           />
-        )
-      }
-      {
-        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'
-          type={data.type}
-          size='md'
-          icon={data._icon}
-        />
-        <div
-          title={data.title}
-          className='grow text-[13px] font-semibold text-gray-700 truncate'
-        >
-          {data.title}
-        </div>
-      </div>
-      <div className='mb-1'>
-        {cloneElement(children, { id, data })}
-      </div>
-      {
-        data.desc && (
-          <div className='px-3 pt-s1 pb-2 text-xs leading-[18px] text-gray-500 whitespace-pre-line break-words'>
-            {data.desc}
+          <div
+            title={data.title}
+            className='grow text-[13px] font-semibold text-gray-700 truncate'
+          >
+            {data.title}
           </div>
-        )
-      }
+        </div>
+        <div className='mb-1'>
+          {cloneElement(children, { id, data })}
+        </div>
+        {
+          data.desc && (
+            <div className='px-3 pt-s1 pb-2 text-xs leading-[18px] text-gray-500 whitespace-pre-line break-words'>
+              {data.desc}
+            </div>
+          )
+        }
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/index.tsx b/web/app/components/workflow/nodes/index.tsx
index e4ee0ffbd6..c123750fb0 100644
--- a/web/app/components/workflow/nodes/index.tsx
+++ b/web/app/components/workflow/nodes/index.tsx
@@ -1,36 +1,21 @@
 import { memo } from 'react'
 import type { NodeProps } from 'reactflow'
 import type { Node } from '../types'
-import { canRunBySingle } from '../utils'
 import {
   NodeComponentMap,
   PanelComponentMap,
 } from './constants'
 import BaseNode from './_base/node'
 import BasePanel from './_base/panel'
-import NodeControl from './_base/components/node-control'
 
 const CustomNode = memo((props: NodeProps) => {
-  const nodeId = props.id
   const nodeData = props.data
   const NodeComponent = NodeComponentMap[nodeData.type]
 
   return (
-    <>
-      <BaseNode { ...props }>
-        <NodeComponent />
-      </BaseNode>
-      {
-        nodeData._selected
-        && canRunBySingle(nodeData.type)
-        && (
-          <NodeControl
-            nodeId={nodeId}
-            isRunning={nodeData._isSingleRun}
-          />
-        )
-      }
-    </>
+    <BaseNode { ...props }>
+      <NodeComponent />
+    </BaseNode>
   )
 })
 CustomNode.displayName = 'CustomNode'
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index ea853070dd..c6d0613d85 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -27,7 +27,6 @@ export type Branch = {
 
 export type CommonNodeType<T = {}> = {
   _selected?: boolean
-  _hovering?: boolean
   _targetBranches?: Branch[]
   _isSingleRun?: boolean
   _icon?: Collection['icon']