added isValidConnection on Handle component

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

@@ -22,12 +22,15 @@
   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
   // export let isConnectableStart: $$Props['isConnectableStart'] = undefined;
   // export let isConnectableEnd: $$Props['isConnectableEnd'] = undefined;
 
+  $: console.log(isValidConnection);
+
   let className: $$Props['class'] = undefined;
   export { className as class };
 
@@ -45,7 +48,7 @@
     nodeLookup,
     connectionRadius,
     viewport,
-    isValidConnection,
+    isValidConnection: isValidConnectionStore,
     lib,
     addEdge,
     onedgecreate,
@@ -77,7 +80,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;
 };