feat: make node only one connect

Author: hi02102002

client/package-lock.json

@@ -0,0 +1,5 @@
+import { Edge } from './edge'
+
+export const edgeTypes = {
+  custom: Edge,
+}

client/src/components/pages/chatbot-detail/ede-types.tsx

@@ -1,12 +1,8 @@
 import { Button } from '@/components/ui'
 import { X } from 'lucide-react'
-import {
-  BaseEdge,
-  EdgeLabelRenderer,
-  EdgeProps,
-  getSmoothStepPath,
-  useReactFlow,
-} from 'reactflow'
+import { BaseEdge, EdgeProps, useReactFlow, getBezierPath } from 'reactflow'
+
+const foreignObjectSize = 16
 
 export const Edge = ({
   id,
@@ -20,7 +16,7 @@ export const Edge = ({
   markerEnd,
 }: EdgeProps) => {
   const { setEdges } = useReactFlow()
-  const [edgePath, labelX, labelY] = getSmoothStepPath({
+  const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -36,21 +32,30 @@ export const Edge = ({
   return (
     <>
       <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
-      <EdgeLabelRenderer>
-        <div
-          style={{
-            position: 'absolute',
-            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-            fontSize: 12,
-            pointerEvents: 'all',
-          }}
-          className='nodrag nopan'
+      <path
+        id={id}
+        style={style}
+        className='react-flow__edge-path edge-outline opacity-0'
+        d={edgePath}
+        markerEnd={markerEnd}
+      />
+      <foreignObject
+        width={foreignObjectSize}
+        height={foreignObjectSize}
+        x={labelX - foreignObjectSize / 2}
+        y={labelY - foreignObjectSize / 2}
+        className='edgebutton flex items-center justify-center  '
+        requiredExtensions='http://www.w3.org/1999/xhtml'
+      >
+        <Button
+          size='icon'
+          className='w-4 h-4 opacity-0 scale-50 invisible btn'
+          variant='destructive'
+          onClick={onEdgeClick}
         >
-          <Button variant='outline' size='icon' className=' w-4 h-4 '>
-            <X className='h-3 w-3 text-destructive' />
-          </Button>
-        </div>
-      </EdgeLabelRenderer>
+          <X className='w-2 h-2' />
+        </Button>
+      </foreignObject>
     </>
   )
 }

client/src/components/pages/chatbot-detail/edge.tsx

@@ -1,15 +1,58 @@
 import { cn } from '@/lib/utils'
-import { Bolt } from 'lucide-react'
-import { Handle, HandleProps, Position } from 'reactflow'
+import { Bolt, MessageSquareMore } from 'lucide-react'
+import { useMemo } from 'react'
+import {
+  Handle,
+  HandleProps,
+  Node,
+  Position,
+  getConnectedEdges,
+  useNodeId,
+  useStore,
+} from 'reactflow'
 
 const HandleCustom = ({
   className,
   ...props
-}: HandleProps & {
+}: Omit<HandleProps, 'isConnectable'> & {
   className?: string
+  isConnectable?: any
 }) => {
+  const { nodeInternals, edges } = useStore((s) => ({
+    nodeInternals: s.nodeInternals,
+    edges: s.edges,
+  }))
+
+  const nodeId = useNodeId()
+
+  const isHandleConnectable = useMemo(() => {
+    if (!nodeId) return false
+
+    if (typeof props.isConnectable === 'function') {
+      const node = nodeInternals.get(nodeId)
+      const connectedEdges = getConnectedEdges([node as Node], edges)
+
+      const isConnectable = props.isConnectable as any
+
+      return isConnectable({ node, connectedEdges })
+    }
+
+    if (typeof props.isConnectable === 'number') {
+      const node = nodeInternals.get(nodeId)
+      const connectedEdges = getConnectedEdges([node as Node], edges)
+
+      return connectedEdges.length < props.isConnectable
+    }
+
+    return props.isConnectable
+  }, [props, nodeInternals, nodeId, edges])
+
   return (
-    <Handle {...props} className={cn(' !bg-stone-600 !w-2 !h-2', className)} />
+    <Handle
+      {...props}
+      className={cn(' !bg-stone-600 !w-2 !h-2', className)}
+      isConnectable={isHandleConnectable}
+    />
   )
 }
 
@@ -27,9 +70,9 @@ export const StartNode = () => {
 
 export const NodeWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className='bg-card shadow rounded-md p-4 border-card'>
+    <div className='bg-card shadow rounded-md p-2 border-card'>
       {children}
-      <HandleCustom type='target' position={Position.Left} />
+      <HandleCustom type='target' position={Position.Left} isConnectable={1} />
       <HandleCustom type='source' position={Position.Right} />
     </div>
   )
@@ -39,7 +82,7 @@ export const MessageNode = () => {
   return (
     <NodeWrapper>
       <div className='flex items-center gap-2'>
-        <Bolt className='w-4 h-4' />
+        <MessageSquareMore className='w-4 h-4' />
         <span className='leading-none'>Message</span>
       </div>
     </NodeWrapper>

client/src/components/pages/chatbot-detail/nodes.tsx

@@ -13,8 +13,6 @@ import { Dialog } from '@radix-ui/react-dialog'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import GeneralSetting from './general-setting'
-import { TFlowInput } from '@/lib/schema/flow-input'
-import { useFlowCtx } from '.'
 
 const useSettingOptions = () => {
   const { t } = useTranslation()

client/src/components/pages/chatbot-detail/setting.tsx

@@ -19,6 +19,12 @@ export const useUpdateFlow = () => {
       queryClient.invalidateQueries({
         queryKey: ['flows'],
       })
+      queryClient.invalidateQueries({
+        queryKey: ['channels-for-select'],
+      })
+      queryClient.invalidateQueries({
+        queryKey: ['flow-detail', data.data.id],
+      })
 
       toast.success(data.message)
     },

client/src/hooks/flow/use-update-flow.ts

@@ -2,7 +2,7 @@ import { SToaster } from '@/components/ui'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { createRoot } from 'react-dom/client'
 import i18n from './i18n'
-import './index.css'
+import '@/styles/index.css'
 import { queryClient } from './lib/query-client'
 import { RouterProvider } from 'react-router-dom'
 import { router } from './app'

client/src/main.tsx

@@ -3,7 +3,6 @@ import {
   FlowProvider,
   nodeTypes,
 } from '@/components/pages/chatbot-detail'
-import { Edge } from '@/components/pages/chatbot-detail/edge'
 import { Toolbar } from '@/components/pages/chatbot-detail/toolbar'
 import { queryFlowDetailOption } from '@/lib/query-options/flow'
 import { EActionTypes } from '@/types/flow'
@@ -13,13 +12,14 @@ import { useParams } from 'react-router-dom'
 import ReactFlow, {
   Background,
   BackgroundVariant,
-  ConnectionLineType,
   OnConnect,
   addEdge,
   useEdgesState,
   useNodesState,
 } from 'reactflow'
 import 'reactflow/dist/style.css'
+import '@/styles/react-flow.css'
+import { edgeTypes } from '@/components/pages/chatbot-detail/ede-types'
 
 const ChatBotDetail = () => {
   const { id: flowId } = useParams()
@@ -28,10 +28,16 @@ const ChatBotDetail = () => {
   )
   const [nodes, _setNodes, onNodesChange] = useNodesState([
     {
-      id: '1',
+      id: EActionTypes.START,
       type: EActionTypes.START,
       position: { x: 100, y: 100 },
-      data: { label: 'Start' },
+      data: {
+        label: 'Start',
+        type: EActionTypes.START,
+        id: EActionTypes.START,
+        name: 'Start',
+      },
+      deletable: false,
     },
     {
       id: '2',
@@ -46,26 +52,34 @@ const ChatBotDetail = () => {
       data: { label: 'Message' },
     },
   ])
-  const [edges, setEdges, onEdgesChange] = useEdgesState([
-    {
-      id: 'e1-2',
-      source: '1',
-      target: '2',
-      type: 'smoothstep',
-    },
-  ])
+  const [edges, setEdges, onEdgesChange] = useEdgesState([])
 
   const onConnect: OnConnect = useCallback(
-    (params) =>
-      setEdges((eds) =>
-        addEdge(
+    (params) => {
+      setEdges((eds) => {
+        if (eds.length > 0) {
+          console.log({
+            params,
+            eds,
+          })
+
+          if (
+            params.source === EActionTypes.START &&
+            eds.some((edge) => edge.source === EActionTypes.START)
+          ) {
+            return eds
+          }
+        }
+
+        return addEdge(
           {
             ...params,
-            type: 'smoothstep',
+            type: 'custom',
           },
           eds,
-        ),
-      ),
+        )
+      })
+    },
     [setEdges],
   )
 
@@ -79,10 +93,7 @@ const ChatBotDetail = () => {
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           onConnect={onConnect}
-          edgeTypes={{
-            smoothstep: Edge,
-          }}
-          connectionLineType={ConnectionLineType.SmoothStep}
+          edgeTypes={edgeTypes}
         >
           <Background
             gap={24}

client/src/pages/chatbot-detail.tsx

@@ -0,0 +1,20 @@
+.react-flow__edge.selected .react-flow__edge-path,
+.react-flow__edge:focus .react-flow__edge-path,
+.react-flow__edge:focus-visible .react-flow__edge-path,
+.react-flow__edge:hover .react-flow__edge-path {
+  @apply stroke-primary transition-all;
+}
+
+.react-flow__edge.selected .edge-outline,
+.react-flow__edge:focus .edge-outline,
+.react-flow__edge:focus-visible .edge-outline,
+.react-flow__edge:hover .edge-outline {
+  @apply stroke-[5px] transition-all stroke-primary/10 opacity-100;
+}
+
+.react-flow__edge.selected .edgebutton .btn,
+.react-flow__edge:focus .edgebutton .btn,
+.react-flow__edge:focus-visible .edgebutton .btn,
+.react-flow__edge:hover .edgebutton .btn {
+  @apply opacity-100 scale-100 visible transition-all;
+}