From b6c683a1b8522b046d6e9b1282b5cf42ee27b120 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Fri, 23 Feb 2024 17:19:35 +0800
Subject: [PATCH] next step

---
 web/app/(commonLayout)/workflow/page.tsx      |  2 +-
 web/app/components/workflow/custom-edge.tsx   |  3 +-
 web/app/components/workflow/hooks.ts          | 44 +++++++++-
 web/app/components/workflow/index.tsx         |  4 +
 .../nodes/_base/components/next-step.tsx      | 87 +++++++++++++++++--
 5 files changed, 130 insertions(+), 10 deletions(-)

diff --git a/web/app/(commonLayout)/workflow/page.tsx b/web/app/(commonLayout)/workflow/page.tsx
index 06fd21b02d..b9f19457f7 100644
--- a/web/app/(commonLayout)/workflow/page.tsx
+++ b/web/app/(commonLayout)/workflow/page.tsx
@@ -15,7 +15,7 @@ const initialNodes = [
     id: '2',
     type: 'custom',
     position: { x: 434, y: 130 },
-    data: { type: 'code' },
+    data: { type: 'if-else' },
   },
   {
     id: '3',
diff --git a/web/app/components/workflow/custom-edge.tsx b/web/app/components/workflow/custom-edge.tsx
index 9fb652e2ac..f656fb43c4 100644
--- a/web/app/components/workflow/custom-edge.tsx
+++ b/web/app/components/workflow/custom-edge.tsx
@@ -17,7 +17,6 @@ const CustomEdge = ({
   targetY,
   selected,
 }: EdgeProps) => {
-  console.log()
   const [
     edgePath,
     labelX,
@@ -37,7 +36,7 @@ const CustomEdge = ({
         id={id}
         path={edgePath}
         style={{
-          stroke: selected ? '#2970FF' : '#D0D5DD',
+          stroke: (selected || data?.connectedNodeIsHovering) ? '#2970FF' : '#D0D5DD',
           strokeWidth: 2,
         }}
       />
diff --git a/web/app/components/workflow/hooks.ts b/web/app/components/workflow/hooks.ts
index 5aa0e06a93..5449ba2a8d 100644
--- a/web/app/components/workflow/hooks.ts
+++ b/web/app/components/workflow/hooks.ts
@@ -1,7 +1,13 @@
 import { useCallback } from 'react'
 import produce from 'immer'
-import type { EdgeMouseHandler } from 'reactflow'
-import { useStoreApi } from 'reactflow'
+import type {
+  EdgeMouseHandler,
+  NodeMouseHandler,
+} from 'reactflow'
+import {
+  getConnectedEdges,
+  useStoreApi,
+} from 'reactflow'
 import type { SelectedNode } from './types'
 import { useStore } from './store'
 
@@ -9,6 +15,38 @@ export const useWorkflow = () => {
   const store = useStoreApi()
   const setSelectedNode = useStore(state => state.setSelectedNode)
 
+  const handleEnterNode = useCallback<NodeMouseHandler>((_, node) => {
+    const {
+      edges,
+      setEdges,
+    } = store.getState()
+    const newEdges = produce(edges, (draft) => {
+      const connectedEdges = getConnectedEdges([node], edges)
+
+      connectedEdges.forEach((edge) => {
+        const currentEdge = draft.find(e => e.id === edge.id)
+        if (currentEdge)
+          currentEdge.data = { ...currentEdge.data, connectedNodeIsHovering: true }
+      })
+    })
+    setEdges(newEdges)
+  }, [store])
+  const handleLeaveNode = useCallback<NodeMouseHandler>((_, node) => {
+    const {
+      edges,
+      setEdges,
+    } = store.getState()
+    const newEdges = produce(edges, (draft) => {
+      const connectedEdges = getConnectedEdges([node], edges)
+
+      connectedEdges.forEach((edge) => {
+        const currentEdge = draft.find(e => e.id === edge.id)
+        if (currentEdge)
+          currentEdge.data = { ...currentEdge.data, connectedNodeIsHovering: false }
+      })
+    })
+    setEdges(newEdges)
+  }, [store])
   const handleEnterEdge = useCallback<EdgeMouseHandler>((_, edge) => {
     const {
       edges,
@@ -61,6 +99,8 @@ export const useWorkflow = () => {
   }, [setSelectedNode, store])
 
   return {
+    handleEnterNode,
+    handleLeaveNode,
     handleEnterEdge,
     handleLeaveEdge,
     handleSelectNode,
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 4abe22a56b..fe5a6199a9 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -37,6 +37,8 @@ const Workflow: FC<WorkflowProps> = memo(({
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
 
   const {
+    handleEnterNode,
+    handleLeaveNode,
     handleEnterEdge,
     handleLeaveEdge,
     handleSelectNode,
@@ -61,6 +63,8 @@ const Workflow: FC<WorkflowProps> = memo(({
         edgeTypes={edgeTypes}
         nodes={nodes}
         edges={edges}
+        onNodeMouseEnter={handleEnterNode}
+        onNodeMouseLeave={handleLeaveNode}
         onEdgesChange={onEdgesChange}
         onEdgeMouseEnter={handleEnterEdge}
         onEdgeMouseLeave={handleLeaveEdge}
diff --git a/web/app/components/workflow/nodes/_base/components/next-step.tsx b/web/app/components/workflow/nodes/_base/components/next-step.tsx
index 8b59f0e979..4d8626863f 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step.tsx
@@ -2,23 +2,27 @@ import {
   memo,
   useCallback,
 } from 'react'
+import {
+  getOutgoers,
+  useStoreApi,
+} from 'reactflow'
 import BlockIcon from '../../../block-icon'
 import type { Node } from '../../../types'
-import { BlockEnum } from '../../../types'
 import { useStore } from '../../../store'
 import BlockSelector from '../../../block-selector'
 import { Plus } from '@/app/components/base/icons/src/vender/line/general'
 import Button from '@/app/components/base/button'
 
 const NextStep = () => {
+  const store = useStoreApi()
   const selectedNode = useStore(state => state.selectedNode)
-  const outgoers: Node[] = []
+  const outgoers: Node[] = getOutgoers(selectedNode as Node, store.getState().getNodes(), store.getState().edges)
 
   const renderAddNextNodeTrigger = useCallback((open: boolean) => {
     return (
       <div
         className={`
-          flex items-center px-2 w-[328px] h-9 rounded-lg border border-dashed border-gray-200 bg-gray-50 
+          relative flex items-center px-2 w-[328px] h-9 rounded-lg border border-dashed border-gray-200 bg-gray-50 
           hover:bg-gray-100 text-xs text-gray-500 cursor-pointer
           ${open && '!bg-gray-100'}
         `}
@@ -49,7 +53,80 @@ const NextStep = () => {
       <div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-xs'>
         <BlockIcon type={selectedNode!.data.type} />
       </div>
-      <div className='shrink-0 w-6'></div>
+      <svg className='shrink-0 w-6'>
+        {
+          (!outgoers.length || outgoers.length === 1) && (
+            <g>
+              <path
+                d='M0,18 L24,18'
+                strokeWidth={1}
+                stroke='#D0D5DD'
+                fill='none'
+              />
+              <rect
+                x={0}
+                y={16}
+                width={1}
+                height={4}
+                fill='#98A2B3'
+              />
+              <rect
+                x={23}
+                y={16}
+                width={1}
+                height={4}
+                fill='#98A2B3'
+              />
+            </g>
+          )
+        }
+        {
+          outgoers.length > 1 && (
+            <g>
+              {
+                Array(outgoers.length + 1).fill(0).map((_, index) => (
+                  <g key={index}>
+                    {
+                      index === 0 && (
+                        <path
+                          d='M0,18 L24,18'
+                          strokeWidth={1}
+                          stroke='#D0D5DD'
+                          fill='none'
+                        />
+                      )
+                    }
+                    {
+                      index > 0 && (
+                        <path
+                          d={`M0,18 Q12,18 12,28 L12,${index * 48 + 18 - 10} Q12,${index * 48 + 18} 24,${index * 48 + 18}`}
+                          strokeWidth={1}
+                          stroke='#D0D5DD'
+                          fill='none'
+                        />
+                      )
+                    }
+                    <rect
+                      x={23}
+                      y={index * 48 + 18 - 2}
+                      width={1}
+                      height={4}
+                      fill='#98A2B3'
+                    />
+                  </g>
+                ))
+              }
+              <rect
+                x={0}
+                y={16}
+                width={1}
+                height={4}
+                fill='#98A2B3'
+              />
+            </g>
+          )
+        }
+      </svg>
       <div className='grow'>
         {
           !!outgoers.length && outgoers.map(outgoer => (
@@ -76,7 +153,7 @@ const NextStep = () => {
           ))
         }
         {
-          (!outgoers.length || selectedNode!.data.type === BlockEnum.IfElse) && (
+          (!outgoers.length || outgoers.length > 1) && (
             <BlockSelector
               onSelect={() => {}}
               placement='top'