edges change

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

@@ -42,7 +42,7 @@ const CustomEdge = ({
       />
       <EdgeLabelRenderer>
         {
-          data?.hovering && (
+          data?._hovering && (
             <div
               className='nopan nodrag'
               style={{

web/app/components/workflow/features.tsx

@@ -10,7 +10,7 @@ const Features = () => {
   const setShowFeaturesPanel = useStore(state => state.setShowFeaturesPanel)
 
   return (
-    <div className='absolute top-2 left-2 bottom-2 w-[600px] rounded-2xl border-[0.5px] border-gray-200 bg-white shadow-xl z-10'>
+    <div className='fixed top-16 left-2 bottom-2 w-[600px] rounded-2xl border-[0.5px] border-gray-200 bg-white shadow-xl z-10'>
       <div className='flex items-center justify-between px-4 pt-3'>
         Features
         <div className='flex items-center'>

web/app/components/workflow/hooks.ts

@@ -5,6 +5,7 @@ import type {
   NodeDragHandler,
   NodeMouseHandler,
   OnConnect,
+  OnEdgesChange,
 } from 'reactflow'
 import {
   getConnectedEdges,
@@ -258,7 +259,10 @@ export const useWorkflow = () => {
     const newCurrentNode: Node = {
       id: `${Date.now()}`,
       type: 'custom',
-      data: NodeInitialData[nodeType],
+      data: {
+        ...NodeInitialData[nodeType],
+        _selected: currentNode.data._selected,
+      },
       position: {
         x: currentNode.position.x,
         y: currentNode.position.y,
@@ -332,6 +336,21 @@ export const useWorkflow = () => {
     setEdges(newEdges)
   }, [store])
 
+  const handleEdgesChange = useCallback<OnEdgesChange>((changes) => {
+    const {
+      edges,
+      setEdges,
+    } = store.getState()
+
+    const newEdges = produce(edges, (draft) => {
+      changes.forEach((change) => {
+        if (change.type === 'select')
+          draft.find(edge => edge.id === change.id)!.selected = change.selected
+      })
+    })
+    setEdges(newEdges)
+  }, [store])
+
   return {
     handleLayout,
 
@@ -351,5 +370,6 @@ export const useWorkflow = () => {
     handleEdgeEnter,
     handleEdgeLeave,
     handleEdgeDelete,
+    handleEdgesChange,
   }
 }

web/app/components/workflow/index.tsx

@@ -50,7 +50,7 @@ const Workflow: FC<WorkflowProps> = memo(({
 }) => {
   const showFeaturesPanel = useStore(state => state.showFeaturesPanel)
   const [nodes] = useNodesState(initialNodes)
-  const [edges, _, onEdgesChange] = useEdgesState(initialEdges)
+  const [edges] = useEdgesState(initialEdges)
 
   const {
     handleNodeDragStart,
@@ -64,6 +64,7 @@ const Workflow: FC<WorkflowProps> = memo(({
     handleEdgeEnter,
     handleEdgeLeave,
     handleEdgeDelete,
+    handleEdgesChange,
   } = useWorkflow()
 
   useKeyPress('Backspace', handleEdgeDelete)
@@ -90,7 +91,7 @@ const Workflow: FC<WorkflowProps> = memo(({
         onConnect={handleNodeConnect}
         onEdgeMouseEnter={handleEdgeEnter}
         onEdgeMouseLeave={handleEdgeLeave}
-        onEdgesChange={onEdgesChange}
+        onEdgesChange={handleEdgesChange}
         multiSelectionKeyCode={null}
         connectionLineComponent={CustomConnectionLine}
         deleteKeyCode={null}

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

@@ -69,7 +69,7 @@ export const NodeTargetHandle = ({
               triggerClassName={open => `
                 hidden absolute left-0 top-0 pointer-events-none
                 ${nodeSelectorClassName}
-                ${data.hovering && '!flex'}
+                ${data._hovering && '!flex'}
                 ${open && '!flex'}
               `}
             />
@@ -128,7 +128,7 @@ export const NodeSourceHandle = ({
               triggerClassName={open => `
                 hidden absolute top-0 left-0 pointer-events-none
                 ${nodeSelectorClassName}
-                ${data.hovering && '!flex'}
+                ${data._hovering && '!flex'}
                 ${open && '!flex'}
               `}
             />

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

@@ -7,7 +7,8 @@ import {
   memo,
   useCallback,
 } from 'react'
-import type { Node } from '../../types'
+import { type Node } from '../../types'
+import { BlockEnum } from '../../types'
 import BlockIcon from '../../block-icon'
 import { useWorkflow } from '../../hooks'
 import { canRunBySingle } from '../../utils'
@@ -86,19 +87,23 @@ const BasePanel: FC<BasePanelProps> = ({
           />
         </div>
       </div>
-      <div className='py-2 border-b-[0.5px] border-black/5'>
+      <div className='py-2'>
         {cloneElement(children, { id, data })}
       </div>
-      <div className='p-4'>
-        <div className='flex items-center mb-1 text-gray-700 text-[13px] font-semibold'>
-          <GitBranch01 className='mr-1 w-4 h-4' />
-          NEXT STEP
-        </div>
-        <div className='mb-2 text-xs text-gray-400'>
-          Add the next block in this workflow
-        </div>
-        <NextStep selectedNode={{ id, data } as Node} />
-      </div>
+      {
+        data.type !== BlockEnum.End && (
+          <div className='p-4 border-t-[0.5px] border-t-black/5'>
+            <div className='flex items-center mb-1 text-gray-700 text-[13px] font-semibold'>
+              <GitBranch01 className='mr-1 w-4 h-4' />
+              NEXT STEP
+            </div>
+            <div className='mb-2 text-xs text-gray-400'>
+              Add the next block in this workflow
+            </div>
+            <NextStep selectedNode={{ id, data } as Node} />
+          </div>
+        )
+      }
     </div>
   )
 }