chore

web/app/components/workflow/custom-edge.tsx

@@ -7,17 +7,17 @@ import {
   getSimpleBezierPath,
 } from 'reactflow'
 import BlockSelector from './block-selector'
-import { useStore } from './store'
 
 const CustomEdge = ({
   id,
+  data,
   sourceX,
   sourceY,
   targetX,
   targetY,
   selected,
 }: EdgeProps) => {
-  const hoveringEdgeId = useStore(state => state.hoveringEdgeId)
+  console.log()
   const [
     edgePath,
     labelX,
@@ -43,7 +43,7 @@ const CustomEdge = ({
       />
       <EdgeLabelRenderer>
         {
-          hoveringEdgeId === id && (
+          data?.hovering && (
             <div
               className='nopan nodrag'
               style={{

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

@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
-import { useWorkflowContext } from '../context'
+import { useStore } from '../store'
 import RunAndHistory from './run-and-history'
 import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
 import { Grid01 } from '@/app/components/base/icons/src/vender/line/layout'
@@ -8,7 +8,7 @@ import Button from '@/app/components/base/button'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 
 const Header: FC = () => {
-  const { mode } = useWorkflowContext()
+  const mode = useStore(state => state.mode)
 
   return (
     <div

web/app/components/workflow/hooks.ts

@@ -6,6 +6,7 @@ import { useCallback } from 'react'
 import produce from 'immer'
 import type {
   Edge,
+  EdgeMouseHandler,
 } from 'reactflow'
 import type {
   BlockEnum,
@@ -55,9 +56,29 @@ export const useWorkflow = (
       })
     })
   }, [setNodes])
+  const handleEnterEdge = useCallback<EdgeMouseHandler>((_, edge) => {
+    setEdges((oldEdges) => {
+      return produce(oldEdges, (draft) => {
+        const currentEdge = draft.find(e => e.id === edge.id)
+        if (currentEdge)
+          currentEdge.data = { ...currentEdge.data, hovering: true }
+      })
+    })
+  }, [setEdges])
+  const handleLeaveEdge = useCallback<EdgeMouseHandler>((_, edge) => {
+    setEdges((oldEdges) => {
+      return produce(oldEdges, (draft) => {
+        const currentEdge = draft.find(e => e.id === edge.id)
+        if (currentEdge)
+          currentEdge.data = { ...currentEdge.data, hovering: false }
+      })
+    })
+  }, [setEdges])
 
   return {
     handleAddNextNode,
     handleUpdateNodeData,
+    handleEnterEdge,
+    handleLeaveEdge,
   }
 }

web/app/components/workflow/index.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { memo } from 'react'
+import { memo, useEffect } from 'react'
 import type { Edge } from 'reactflow'
 import ReactFlow, {
   Background,
@@ -71,17 +71,26 @@ const WorkflowWrap: FC<WorkflowWrapProps> = memo(({
   selectedNodeId: initialSelectedNodeId,
 }) => {
   const [nodes, setNodes] = useNodesState(initialNodes)
-  const [edges, setEdges] = useEdgesState(initialEdges)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
 
   const {
     handleAddNextNode,
     handleUpdateNodeData,
+    handleEnterEdge,
+    handleLeaveEdge,
   } = useWorkflow(
     nodes,
     edges,
     setNodes,
     setEdges,
   )
+  const handleSelectedNodeId = useStore(state => state.handleSelectedNodeId)
+  useEffect(() => {
+    if (initialSelectedNodeId)
+      handleSelectedNodeId(initialSelectedNodeId)
+  }, [initialSelectedNodeId, handleSelectedNodeId])
+  // const handleEnterEdge = useStore(state => state.handleEnterEdge)
+  // const handleLeaveEdge = useStore(state => state.handleLeaveEdge)
 
   return (
     <WorkflowContext.Provider value={{
@@ -91,7 +100,25 @@ const WorkflowWrap: FC<WorkflowWrapProps> = memo(({
       handleAddNextNode,
       handleUpdateNodeData,
     }}>
-      <Workflow />
+      <div className='relative w-full h-full'>
+        <Header />
+        <Panel />
+        <ZoomInOut />
+        <ReactFlow
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          nodes={nodes}
+          edges={edges}
+          onEdgesChange={onEdgesChange}
+          onEdgeMouseEnter={handleEnterEdge}
+          onEdgeMouseLeave={handleLeaveEdge}
+        >
+          <Background
+            gap={[14, 14]}
+            size={1}
+          />
+        </ReactFlow>
+      </div>
     </WorkflowContext.Provider>
   )
 })

web/app/components/workflow/nodes/_base/node.tsx

@@ -17,11 +17,12 @@ import NodeControl from './components/node-control'
 
 type BaseNodeProps = {
   children: ReactElement
-} & Pick<NodeProps, 'id' | 'data'>
+} & NodeProps
 
 const BaseNode: FC<BaseNodeProps> = ({
   id: nodeId,
   data,
+  selected,
   children,
 }) => {
   const nodes = useNodes<NodeData>()

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

@@ -14,11 +14,9 @@ import {
 import BaseNode from './_base/node'
 import BasePanel from './_base/panel'
 
-const CustomNode = ({
+const CustomNode = (props: NodeProps) => {
-  id,
+  const nodeData = props.data
-  data,
+  const NodeComponent = NodeComponentMap[nodeData.type]
-}: NodeProps) => {
-  const NodeComponent = NodeComponentMap[data.type]
 
   return (
     <>
@@ -28,14 +26,11 @@ const CustomNode = ({
         className={`
           !top-[17px] !left-0 !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none !translate-y-0 z-[1]
           after:absolute after:w-0.5 after:h-2 after:-left-0.5 after:top-1 after:bg-primary-500
-          ${data.type === BlockEnum.Start && 'opacity-0'}
+          ${nodeData.type === BlockEnum.Start && 'opacity-0'}
         `}
-        isConnectable={data.type !== BlockEnum.Start}
+        isConnectable={nodeData.type !== BlockEnum.Start}
       />
-      <BaseNode
+      <BaseNode { ...props }>
-        id={id}
-        data={data}
-      >
         <NodeComponent />
       </BaseNode>
       <Handle

web/app/components/workflow/store.ts

@@ -2,6 +2,7 @@ import { create } from 'zustand'
 import type { EdgeMouseHandler } from 'reactflow'
 
 type State = {
+  mode: string
   selectedNodeId: string
   hoveringEdgeId: string
 }
@@ -13,6 +14,7 @@ type Action = {
 }
 
 export const useStore = create<State & Action>(set => ({
+  mode: 'workflow',
   selectedNodeId: '',
   handleSelectedNodeId: selectedNodeId => set(() => ({ selectedNodeId })),
   hoveringEdgeId: '',