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 });
     }
   }
 

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -15,6 +15,7 @@
   export let data: NodeWrapperProps['data'] = {};
   export let selected: NodeWrapperProps['selected'] = false;
   export let draggable: NodeWrapperProps['draggable'] = undefined;
+  export let connectable: NodeWrapperProps['connectable'] = true;
   export let dragging: boolean = false;
   export let resizeObserver: NodeWrapperProps['resizeObserver'] = null;
   export let style: NodeWrapperProps['style'] = undefined;
@@ -45,7 +46,8 @@
   const selectNodesOnDrag = false;
   const dispatch = createEventDispatcher();
 
-  setContext('rf_nodeid', id);
+  setContext('svelteflow__node_id', id);
+  setContext('svelteflow__node_connectable', connectable);
 
   onMount(() => {
     resizeObserver?.observe(nodeRef);
@@ -79,6 +81,7 @@
   class:dragging
   class:selected
   class:draggable
+  class:connectable
   style:transform={`translate(${positionOrigin?.x ?? 0}px, ${positionOrigin?.y ?? 0}px)`}
   {style}
   on:click={onSelectNodeHandler}
@@ -93,7 +96,6 @@
     {selected}
     {sourcePosition}
     {targetPosition}
-    isConnectable={true}
     xPos={positionAbsolute?.x ?? 0}
     yPos={positionAbsolute?.y ?? 0}
     on:connect:start

packages/svelte/src/lib/components/NodeWrapper/types.ts

@@ -5,6 +5,7 @@ export type NodeWrapperProps = Pick<
   Node,
   | 'id'
   | 'class'
+  | 'connectable'
   | 'data'
   | 'draggable'
   | 'dragging'