input highlights

src/components/graph/NodeHandles.tsx

@@ -1,17 +1,35 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Handle, Position } from '@xyflow/react'
 import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
+import FlowContext from '@/lib/flowContext'
+import { cn } from '@/lib/utils'
 
 type NodeHandleProps = {
     id: string
+    /** Pass when this handle is a connection target so valid highlight can show as soon as connection starts */
+    nodeId?: string
 }
 
-export function InputHandle({ id }: NodeHandleProps) {
+export function InputHandle({ id, nodeId }: NodeHandleProps) {
+    const ctx = useContext(FlowContext)
+    const connectionFrom = ctx?.connectionFrom ?? null
+    const isValidConnection = ctx?.isValidConnection
+    const isConnecting = Boolean(nodeId && connectionFrom && connectionFrom.nodeId !== nodeId)
+    const isValidTarget =
+        isConnecting &&
+        isValidConnection?.({
+            source: connectionFrom!.nodeId,
+            sourceHandle: connectionFrom!.sourceHandle ?? undefined,
+            target: nodeId!,
+            targetHandle: id,
+        })
+
     return (
         <Handle
             type="target"
             position={Position.Left}
             id={id}
+            className={cn(isValidTarget && 'connection-valid-target', isConnecting && !isValidTarget && 'connection-invalid-target')}
             style={{
                 top: 20,
                 width: 20,