feat(connection-line): add status class (valid or invalid) while in connection radius

packages/core/src/components/Handle/handler.ts

@@ -2,11 +2,12 @@ import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } fro
 import { StoreApi } from 'zustand';
 
 import { getHostForElement, calcAutoPan, getEventPosition } from '../../utils';
-import type { OnConnect, HandleType, ReactFlowState, Connection } from '../../types';
+import type { OnConnect, HandleType, ReactFlowState, Connection, ConnectionStatus } from '../../types';
 import { pointToRendererPoint, rendererPointToPoint } from '../../utils/graph';
 import {
   ConnectionHandle,
   getClosestHandle,
+  getConnectionStatus,
   getHandleLookup,
   getHandleType,
   isValidHandle,
@@ -91,6 +92,7 @@ export function handlePointerDown({
     connectionNodeId: nodeId,
     connectionHandleId: handleId,
     connectionHandleType: handleType,
+    connectionStatus: null,
   });
 
   onConnectStart?.(event, { nodeId, handleId, handleType });
@@ -123,7 +125,7 @@ export function handlePointerDown({
 
     setState({
       connectionPosition:
-        prevClosestHandle && isValid
+        prevClosestHandle && result.isValid
           ? rendererPointToPoint(
               {
                 x: prevClosestHandle.x,
@@ -132,6 +134,7 @@ export function handlePointerDown({
               transform
             )
           : connectionPosition,
+      connectionStatus: getConnectionStatus(!!prevClosestHandle, result.isValid),
     });
 
     if (!prevClosestHandle) {

packages/core/src/components/Handle/utils.ts

@@ -1,6 +1,6 @@
 import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
 
-import { ConnectionMode } from '../../types';
+import { ConnectionMode, ConnectionStatus } from '../../types';
 import { getEventPosition, internalsSymbol } from '../../utils';
 import type { Connection, HandleType, XYPosition, Node, NodeHandleBounds } from '../../types';
 
@@ -167,3 +167,15 @@ export function getHandleType(
 export function resetRecentHandle(handleDomNode: Element): void {
   handleDomNode?.classList.remove('valid', 'connecting', 'react-flow__handle-valid', 'react-flow__handle-connecting');
 }
+
+export function getConnectionStatus(isInsideConnectionRadius: boolean, isHandleValid: boolean) {
+  let connectionStatus = null;
+
+  if (isHandleValid) {
+    connectionStatus = 'valid';
+  } else if (isInsideConnectionRadius && !isHandleValid) {
+    connectionStatus = 'invalid';
+  }
+
+  return connectionStatus as ConnectionStatus;
+}