add node-control

web/app/components/workflow/context.tsx

@@ -18,6 +18,7 @@ export type WorkflowContextValue = {
   handleSelectedNodeIdChange: (nodeId: string) => void
   selectedNode?: Node
   handleAddNextNode: (prevNode: Node, nextNodeType: BlockEnum) => void
+  handleUpdateNodeData: (nodeId: string, data: Node['data']) => void
 }
 
 export const WorkflowContext = createContext<WorkflowContextValue>({
@@ -26,5 +27,6 @@ export const WorkflowContext = createContext<WorkflowContextValue>({
   edges: [],
   handleSelectedNodeIdChange: () => {},
   handleAddNextNode: () => {},
+  handleUpdateNodeData: () => {},
 })
 export const useWorkflowContext = () => useContext(WorkflowContext)

web/app/components/workflow/hooks.ts

@@ -60,10 +60,21 @@ export const useWorkflow = (
     })
   }, [setNodes, setEdges])
 
+  const handleUpdateNodeData = useCallback((nodeId: string, data: Node['data']) => {
+    setNodes((oldNodes) => {
+      return produce(oldNodes, (draft) => {
+        const node = draft.find(node => node.id === nodeId)
+        if (node)
+          node.data = data
+      })
+    })
+  }, [setNodes])
+
   return {
     selectedNodeId,
     selectedNode,
     handleSelectedNodeIdChange,
     handleAddNextNode,
+    handleUpdateNodeData,
   }
 }

web/app/components/workflow/index.tsx

@@ -73,6 +73,7 @@ const WorkflowWrap: FC<WorkflowWrapProps> = ({
     handleSelectedNodeIdChange,
     selectedNode,
     handleAddNextNode,
+    handleUpdateNodeData,
   } = useWorkflow(
     nodes,
     edges,
@@ -90,6 +91,7 @@ const WorkflowWrap: FC<WorkflowWrapProps> = ({
       nodes,
       edges,
       handleAddNextNode,
+      handleUpdateNodeData,
     }}>
       <Workflow />
     </WorkflowContext.Provider>

web/app/components/workflow/node-control.tsx

@@ -0,0 +1,42 @@
+import type { FC } from 'react'
+import { memo } from 'react'
+import {
+  DotsHorizontal,
+  Loading02,
+} from '@/app/components/base/icons/src/vender/line/general'
+import {
+  Play,
+  Stop,
+} from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+
+type NodeControlProps = {
+  isRunning?: boolean
+}
+const NodeControl: FC<NodeControlProps> = ({
+  isRunning,
+}) => {
+  return (
+    <div className='absolute left-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'>
+      {
+        isRunning && (
+          <div className='flex items-center px-1 h-5 rounded-md bg-primary-50 text-xs font-medium text-primary-600'>
+            <Loading02 className='mr-1 w-3 h-3 animate-spin' />
+            RUNNING
+          </div>
+        )
+      }
+      <div className='flex items-center justify-center w-5 h-5 cursor-pointer'>
+        {
+          isRunning
+            ? <Stop className='w-3 h-3' />
+            : <Play className='w-3 h-3' />
+        }
+      </div>
+      <div className='flex items-center justify-center w-5 h-5 cursor-pointer'>
+        <DotsHorizontal className='w-3 h-3' />
+      </div>
+    </div>
+  )
+}
+
+export default memo(NodeControl)

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

@@ -12,8 +12,9 @@ import type { NodeProps } from 'reactflow'
 import { getOutgoers } from 'reactflow'
 import { useWorkflowContext } from '../../context'
 import BlockSelector from '../../block-selector'
+import NodeControl from '../../node-control'
 import BlockIcon from '../../block-icon'
-import { Plus } from '@/app/components/base/icons/src/vender/line/general'
+import { Plus02 } from '@/app/components/base/icons/src/vender/line/general'
 
 type BaseNodeProps = {
   children: ReactElement
@@ -48,7 +49,7 @@ const BaseNode: FC<BaseNodeProps> = ({
             ${open && '!flex'}
           `}
         >
-          <Plus className='w-2.5 h-2.5 text-white' />
+          <Plus02 className='w-2.5 h-2.5 text-white' />
         </div>
       </div>
     )
@@ -63,6 +64,7 @@ const BaseNode: FC<BaseNodeProps> = ({
       `}
       onClick={() => handleSelectedNodeIdChange(nodeId || '')}
     >
+      <NodeControl />
       <div className='flex items-center px-3 pt-3 pb-2'>
         <BlockIcon
           className='mr-2'