node control

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)

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,

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

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,9 +28,15 @@ const BaseNode: FC<BaseNodeProps> = ({
   return (
     <div
       className={`
-        group relative w-[240px] bg-[#fcfdff] rounded-2xl shadow-xs
+        flex border-[2px] rounded-2xl
+        ${data._selected ? 'border-primary-600' : 'border-transparent'}
+      `}
+    >
+      <div
+        className={`
+          group relative w-[240px] bg-[#fcfdff] shadow-xs
+          border border-transparent rounded-[15px]
           hover:shadow-lg
-        ${data._selected ? 'border-[2px] border-primary-600' : 'border border-white'}
         `}
       >
         {
@@ -36,7 +44,7 @@ const BaseNode: FC<BaseNodeProps> = ({
             <NodeTargetHandle
               id={id}
               data={data}
-            handleClassName='!top-[17px] !-left-2'
+              handleClassName='!top-4 !-left-[9px]'
               handleId='target'
             />
           )
@@ -46,11 +54,22 @@ const BaseNode: FC<BaseNodeProps> = ({
             <NodeSourceHandle
               id={id}
               data={data}
-            handleClassName='!top-[17px] !-right-2'
+              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'
@@ -76,6 +95,7 @@ const BaseNode: FC<BaseNodeProps> = ({
           )
         }
       </div>
+    </div>
   )
 }
 

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

 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}
-          />
-        )
-      }
-    </>
   )
 })
 CustomNode.displayName = 'CustomNode'

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']