feat(svelte): add isValidConnection prop, cleanup handle classes

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

@@ -13,14 +13,14 @@
   export let id: $$Props['id'] = undefined;
   export let type: $$Props['type'] = 'source';
   export let position: $$Props['position'] = Position.Top;
-  export let isConnectable: $$Props['isConnectable'] = true;
   export let style: $$Props['style'] = undefined;
-  export let isValidConnection: $$Props['isValidConnection'] = (_: Connection) => true;
   let className: $$Props['class'] = undefined;
   export { className as class };
 
   const isTarget = type === 'target';
-  const nodeId = getContext<string>('rf_nodeid');
+  const nodeId = getContext<string>('svelteflow__node_id');
+  const connectable = getContext<string>('svelteflow__node_connectable');
+
   const handleId = id || null;
   const dispatch = createEventDispatcher();
 
@@ -30,10 +30,11 @@
     nodes,
     connectionRadius,
     transform,
+    isValidConnection,
     addEdge,
     panBy,
     cancelConnection,
-    updateConnection
+    updateConnection,
   } = useStore();
 
   function dispatchEvent(eventName: string, params?: Connection) {
@@ -56,10 +57,10 @@
         isTarget,
         connectionRadius: $connectionRadius,
         domNode: $domNode,
-        nodes: $nodes,
+        nodes,
         connectionMode: $connectionMode,
         transform,
-        isValidConnection: isValidConnection!,
+        isValidConnection: $isValidConnection,
         onConnect: onConnectExtended,
         updateConnection,
         cancelConnection,
@@ -86,7 +87,7 @@
   ])}
   class:source={!isTarget}
   class:target={isTarget}
-  class:connectable={isConnectable}
+  class:connectable
   on:mousedown={onPointerDown}
   on:touchstart={onPointerDown}
   {style}

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

@@ -22,10 +22,9 @@ import {
   getHandleType,
   isValidHandle,
   resetRecentHandle,
-  type ConnectionHandle,
-  type ValidConnectionFunc
+  type ConnectionHandle
 } from './utils';
-import type { ConnectionData, Node } from '$lib/types';
+import type { ConnectionData, IsValidConnection, Node } from '$lib/types';
 
 export function handlePointerDown({
   event,
@@ -54,9 +53,9 @@ export function handlePointerDown({
   isTarget: boolean;
   connectionMode: ConnectionMode;
   domNode: HTMLDivElement | null;
-  nodes: Node[];
+  nodes: Writable<Node[]>;
   connectionRadius: number;
-  isValidConnection: ValidConnectionFunc;
+  isValidConnection: IsValidConnection;
   transform: Writable<Transform>;
   updateConnection: (connection: Partial<ConnectionData>) => void;
   cancelConnection: () => void;
@@ -90,7 +89,7 @@ export function handlePointerDown({
   const autoPanOnConnect = true;
 
   const handleLookup = getHandleLookup({
-    nodes,
+    nodes: get(nodes),
     nodeId,
     handleId,
     handleType
@@ -116,8 +115,6 @@ export function handlePointerDown({
     status: null
   });
 
-  // @todo add prop
-
   // onConnectStart?.(event, { nodeId, handleId, handleType });
   onConnectStart();
 
@@ -144,7 +141,8 @@ export function handlePointerDown({
       handleId,
       isTarget ? 'target' : 'source',
       isValidConnection,
-      doc
+      doc,
+      get(nodes)
     );
 
     handleDomNode = result.handleDomNode;

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

@@ -2,7 +2,7 @@ import { internalsSymbol, ConnectionMode, type ConnectionStatus } from '@reactfl
 import type { Connection, HandleType, XYPosition, NodeHandleBounds } from '@reactflow/system';
 import { getEventPosition } from '@reactflow/utils';
 
-import type { Node } from '$lib/types';
+import type { IsValidConnection, Node } from '$lib/types';
 
 export type ConnectionHandle = {
   id: string | null;
@@ -76,8 +76,9 @@ export function isValidHandle(
   fromNodeId: string,
   fromHandleId: string | null,
   fromType: string,
-  isValidConnection: ValidConnectionFunc,
-  doc: Document | ShadowRoot
+  isValidConnection: IsValidConnection,
+  doc: Document | ShadowRoot,
+  nodes: Node[]
 ) {
   const isTarget = fromType === 'target';
   const handleDomNode = doc.querySelector(
@@ -116,7 +117,10 @@ export function isValidHandle(
         : handleNodeId !== fromNodeId || handleId !== fromHandleId;
 
     if (isValid) {
-      result.isValid = isValidConnection(connection);
+      const fromNode: Node | undefined = nodes.find((n) => n.id === connection.source);
+      const toNode: Node | undefined = nodes.find((n) => n.id === connection.target);
+
+      if (fromNode && toNode) result.isValid = isValidConnection(connection, { fromNode, toNode });
     }
   }