Merge pull request #4144 from xyflow/svelte-handle-valid-connection

Svelte: isValidConnection on <Handle />

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -22,6 +22,7 @@
   export let position: $$Props['position'] = Position.Top;
   export let style: $$Props['style'] = undefined;
   export let isConnectable: $$Props['isConnectable'] = undefined;
+  export let isValidConnection: $$Props['isValidConnection'] = undefined;
   export let onconnect: $$Props['onconnect'] = undefined;
   export let ondisconnect: $$Props['ondisconnect'] = undefined;
   // @todo implement connectablestart, connectableend
@@ -45,7 +46,7 @@
     nodeLookup,
     connectionRadius,
     viewport,
-    isValidConnection,
+    isValidConnection: isValidConnectionStore,
     lib,
     addEdge,
     onedgecreate,
@@ -77,7 +78,7 @@
         lib: $lib,
         autoPanOnConnect: $autoPanOnConnect,
         flowId: $flowId,
-        isValidConnection: $isValidConnection,
+        isValidConnection: isValidConnection ?? $isValidConnectionStore,
         updateConnection,
         cancelConnection,
         panBy,

packages/svelte/src/lib/types/general.ts

@@ -45,6 +45,10 @@ export type HandleComponentProps = {
   isConnectableStart?: boolean;
   /** Should you be able to connect to this handle */
   isConnectableEnd?: boolean;
+  /** Function that is called when checking if connection is valid.
+   * Overrides the isValidConnection on the Flow component.
+   */
+  isValidConnection?: IsValidConnection;
   onconnect?: (connections: Connection[]) => void;
   ondisconnect?: (connections: Connection[]) => void;
 };