feat(reactflow): add isValidConnection prop closes #2876

packages/core/src/components/Edges/wrapEdge.tsx

@@ -11,6 +11,8 @@ import { getMouseHandler } from './utils';
 import { elementSelectionKeys } from '../../utils';
 import type { EdgeProps, WrapEdgeProps, Connection } from '../../types';
 
+const alwaysValidConnection = () => true;
+
 export default (EdgeComponent: ComponentType<EdgeProps>) => {
   const EdgeWrapper = ({
     id,
@@ -94,12 +96,14 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
         return;
       }
 
+      const { edges, isValidConnection: isValidConnectionStore } = store.getState();
       const nodeId = isSourceHandle ? target : source;
       const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
       const handleType = isSourceHandle ? 'target' : 'source';
-      const isValidConnection = () => true;
+      const isValidConnection = isValidConnectionStore || alwaysValidConnection;
+
       const isTarget = isSourceHandle;
-      const edge = store.getState().edges.find((e) => e.id === id)!;
+      const edge = edges.find((e) => e.id === id)!;
 
       setUpdating(true);
       onEdgeUpdateStart?.(event, edge, handleType);

packages/core/src/components/Handle/index.tsx

@@ -27,7 +27,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     {
       type = 'source',
       position = Position.Top,
-      isValidConnection = alwaysValid,
+      isValidConnection,
       isConnectable = true,
       id,
       onConnect,
@@ -61,8 +61,8 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
         ...params,
       };
       if (hasDefaultEdges) {
-        const { edges } = store.getState();
-        store.setState({ edges: addEdge(edgeParams, edges) });
+        const { edges, setEdges } = store.getState();
+        setEdges(addEdge(edgeParams, edges));
       }
 
       onConnectAction?.(edgeParams);
@@ -81,7 +81,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
           isTarget,
           getState: store.getState,
           setState: store.setState,
-          isValidConnection,
+          isValidConnection: isValidConnection || store.getState().isValidConnection || alwaysValid,
         });
       }
 
@@ -93,7 +93,12 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
     };
 
     const onClick = (event: ReactMouseEvent) => {
-      const { onClickConnectStart, onClickConnectEnd, connectionMode } = store.getState();
+      const {
+        onClickConnectStart,
+        onClickConnectEnd,
+        connectionMode,
+        isValidConnection: isValidConnectionStore,
+      } = store.getState();
       if (!connectionStartHandle) {
         onClickConnectStart?.(event, { nodeId, handleId, handleType: type });
         store.setState({ connectionStartHandle: { nodeId, type, handleId } });
@@ -101,6 +106,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       }
 
       const doc = getHostForElement(event.target as HTMLElement);
+      const isValidConnectionHandler = isValidConnection || isValidConnectionStore || alwaysValid;
       const { connection, isValid } = isValidHandle(
         event,
         {
@@ -112,7 +118,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
         connectionStartHandle.nodeId,
         connectionStartHandle.handleId || null,
         connectionStartHandle.type,
-        isValidConnection,
+        isValidConnectionHandler,
         doc
       );
 

packages/core/src/components/StoreUpdater/index.tsx

@@ -49,6 +49,7 @@ type StoreUpdaterProps = Pick<
   | 'autoPanOnNodeDrag'
   | 'onError'
   | 'connectionRadius'
+  | 'isValidConnection'
 > & { rfId: string };
 
 const selector = (s: ReactFlowState) => ({
@@ -127,6 +128,7 @@ const StoreUpdater = ({
   autoPanOnNodeDrag,
   onError,
   connectionRadius,
+  isValidConnection,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -184,6 +186,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('autoPanOnNodeDrag', autoPanOnNodeDrag, store.setState);
   useDirectStoreUpdater('onError', onError, store.setState);
   useDirectStoreUpdater('connectionRadius', connectionRadius, store.setState);
+  useDirectStoreUpdater('isValidConnection', isValidConnection, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);