input highlights

src/App.tsx

@@ -68,6 +68,7 @@ export default function App() {
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
   const [rfInstance, setRfInstance] = React.useState<any | null>(null)
   const [renamingNodeId, setRenamingNodeId] = React.useState<string | null>(null)
+  const [connectionFrom, setConnectionFrom] = React.useState<{ nodeId: string; sourceHandle?: string } | null>(null)
 
   const wrapperRef = React.useRef<HTMLDivElement | null>(null)
   const lastClickRef = React.useRef<{ clientX: number; clientY: number } | null>(null)
@@ -85,6 +86,37 @@ export default function App() {
     [setEdges]
   )
 
+  const isValidConnection = React.useCallback(
+    (connection: Connection) => {
+      const sourceNode = nodes.find((n) => n.id === connection.source)
+      const targetNode = nodes.find((n) => n.id === connection.target)
+      const sourceType = sourceNode?.type
+      const targetType = targetNode?.type
+      if (!sourceType || !targetType) return false
+      if (connection.source === connection.target) return false
+      if (targetType === 'variable') return false
+      if (targetType === 'render' && (sourceType === 'variable' || sourceType === 'function')) return false
+      if (sourceType === 'render') return false
+      return true
+    },
+    [nodes]
+  )
+
+  const onConnectStart = React.useCallback(
+    (_: React.MouseEvent | React.TouchEvent, params: { nodeId?: string | null; handleId?: string | null; handleType?: string | null }) => {
+      if (params.handleType !== 'source' || !params.nodeId) {
+        setConnectionFrom(null)
+        return
+      }
+      setConnectionFrom({ nodeId: params.nodeId, sourceHandle: params.handleId ?? undefined })
+    },
+    []
+  )
+
+  const onConnectEnd = React.useCallback(() => {
+    setConnectionFrom(null)
+  }, [])
+
   const onInit = React.useCallback((instance: any) => {
     setRfInstance(instance)
   }, [])
@@ -204,7 +236,7 @@ export default function App() {
       >
         {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
       </Button>
-      <FlowContext.Provider value={{ nodes, setNodes, edges, setEdges, renamingNodeId, setRenamingNodeId }}>
+      <FlowContext.Provider value={{ nodes, setNodes, edges, setEdges, renamingNodeId, setRenamingNodeId, connectionFrom, setConnectionFrom, isValidConnection }}>
         <ContextMenu>
           <ContextMenuTrigger asChild>
             <div style={{ width: '100%', height: '100%' }}>
@@ -215,6 +247,9 @@ export default function App() {
                   onNodesChange={onNodesChange}
                   onEdgesChange={onEdgesChange}
                   onConnect={onConnect}
+                  onConnectStart={onConnectStart}
+                  onConnectEnd={onConnectEnd}
+                  isValidConnection={isValidConnection}
                   nodeTypes={nodeTypes}
                   edgeTypes={edgeTypes}
                   defaultEdgeOptions={{ type: 'animated' }}