node handle

web/app/(commonLayout)/workflow/page.tsx

@@ -8,13 +8,45 @@ const initialNodes = [
   {
     id: '1',
     type: 'custom',
-    position: { x: 330, y: 30 },
+    position: { x: 130, y: 130 },
     data: { type: 'start' },
   },
+  {
+    id: '2',
+    type: 'custom',
+    position: { x: 434, y: 130 },
+    data: { type: 'code' },
+  },
+  {
+    id: '3',
+    type: 'custom',
+    position: { x: 738, y: 130 },
+    data: { type: 'llm' },
+  },
+  {
+    id: '4',
+    type: 'custom',
+    position: { x: 738, y: 330 },
+    data: { type: 'llm' },
+  },
 ]
 
 const initialEdges = [
-
+  {
+    id: '0',
+    source: '1',
+    target: '2',
+  },
+  {
+    id: '1',
+    source: '2',
+    target: '3',
+  },
+  {
+    id: '2',
+    source: '2',
+    target: '4',
+  },
 ]
 
 const Page: FC = () => {

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

@@ -28,7 +28,7 @@ const CustomEdge = ({
 
   return (
     <>
-      <BaseEdge id={id} path={edgePath} />
+      <BaseEdge id={id} path={edgePath} style={{ strokeWidth: 5 }} />
       <EdgeLabelRenderer>
         <div
           className={`

web/app/components/workflow/hooks.ts

@@ -31,15 +31,12 @@ export const useWorkflow = (
   }, [nodes, selectedNodeId])
 
   const handleAddNextNode = useCallback((prevNode: Node, nextNodeType: BlockEnum) => {
-    const prevNodeDom = document.querySelector(`.react-flow__node-custom[data-id="${prevNode.id}"]`)
-    const prevNodeDomHeight = prevNodeDom?.getBoundingClientRect().height || 0
-
     const nextNode = {
       id: `node-${Date.now()}`,
       type: 'custom',
       position: {
-        x: prevNode.position.x,
-        y: prevNode.position.y + prevNodeDomHeight + 64,
+        x: prevNode.position.x + 304,
+        y: prevNode.position.y,
       },
       data: NodeInitialData[nextNodeType],
     }

web/app/components/workflow/index.tsx

@@ -8,6 +8,7 @@ import ReactFlow, {
   useReactFlow,
 } from 'reactflow'
 import 'reactflow/dist/style.css'
+import './style.css'
 import {
   WorkflowContext,
   useWorkflowContext,

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

@@ -59,7 +59,7 @@ const BaseNode: FC<BaseNodeProps> = ({
   return (
     <div
       className={`
-        group relative pb-2 w-[296px] bg-[#fcfdff] rounded-2xl shadow-xs
+        group relative pb-2 w-[240px] bg-[#fcfdff] rounded-2xl shadow-xs
         hover:shadow-lg
         ${selectedNodeId === nodeId ? 'border-[2px] border-primary-600' : 'border border-white'}
       `}

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

@@ -5,6 +5,7 @@ import {
   Position,
 } from 'reactflow'
 import { useWorkflowContext } from '../context'
+import { BlockEnum } from '../types'
 import {
   NodeComponentMap,
   PanelComponentMap,
@@ -22,8 +23,13 @@ const CustomNode = ({
     <>
       <Handle
         type='target'
-        position={Position.Top}
-        className='!-top-0.5 !w-2 !h-0.5 !bg-primary-500 !rounded-none !border-none !min-h-[2px]'
+        position={Position.Left}
+        className={`
+          !top-4 !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'}
+        `}
+        isConnectable={data.type !== BlockEnum.Start}
       />
       <BaseNode
         id={id}
@@ -33,8 +39,11 @@ const CustomNode = ({
       </BaseNode>
       <Handle
         type='source'
-        position={Position.Bottom}
-        className='!-bottom-0.5 !w-2 !h-0.5 !bg-primary-500 !rounded-none !border-none !min-h-[2px]'
+        position={Position.Right}
+        className={`
+          !top-4 !right-0 !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none !translate-y-0
+          after:absolute after:w-0.5 after:h-2 after:-right-0.5 after:top-1 after:bg-primary-500
+        `}
       />
     </>
   )

web/app/components/workflow/style.css

@@ -0,0 +1,3 @@
+.react-flow__edge-path {
+  stroke-width: 2px !important;
+}

web/app/components/workflow/zoom-in-out.tsx

@@ -4,6 +4,7 @@ import {
   memo,
   useState,
 } from 'react'
+import { useWorkflowContext } from './context'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -42,8 +43,20 @@ const ZOOM_IN_OUT_OPTIONS = [
 ]
 
 const ZoomInOut: FC = () => {
+  const { reactFlow } = useWorkflowContext()
   const [open, setOpen] = useState(false)
 
+  const handleZoom = (type: string) => {
+    if (type === 'in')
+      reactFlow.zoomIn()
+
+    if (type === 'out')
+      reactFlow.zoomOut()
+
+    if (type === 'fit')
+      reactFlow.fitView()
+  }
+
   return (
     <PortalToFollowElem
       placement='top-start'
@@ -78,6 +91,7 @@ const ZoomInOut: FC = () => {
                       <div
                         key={option.key}
                         className='flex items-center px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer text-sm text-gray-700'
+                        onClick={() => handleZoom(option.key)}
                       >
                         {option.text}
                       </div>