feat(svelte): add useHandleConnections, useNodesData and useUpdateNodeData

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

@@ -6,7 +6,9 @@
     XYHandle,
     isMouseEvent,
     type Connection,
-    type HandleType
+    type HandleType,
+    areConnectionMapsEqual,
+    handleConnectionChange
   } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
@@ -20,6 +22,8 @@
   export let position: $$Props['position'] = Position.Top;
   export let style: $$Props['style'] = undefined;
   export let isConnectable: $$Props['isConnectable'] = undefined;
+  export let onconnect: $$Props['onconnect'] = undefined;
+  export let ondisconnect: $$Props['ondisconnect'] = undefined;
   // export let isConnectableStart: $$Props['isConnectableStart'] = undefined;
   // export let isConnectableEnd: $$Props['isConnectableEnd'] = undefined;
 
@@ -59,7 +63,9 @@
     panBy,
     cancelConnection,
     updateConnection,
-    autoPanOnConnect
+    autoPanOnConnect,
+    edges,
+    connectionLookup
   } = store;
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -108,6 +114,26 @@
     }
   }
 
+  let prevConnections: Map<string, Connection> | null = null;
+  let connections: Map<string, Connection> | undefined;
+
+  $: if (onconnect || ondisconnect) {
+    // connectionLookup is not reactive, so we use edges to get notified about updates
+    $edges;
+    connections = $connectionLookup.get(`${nodeId}-${type}-${id || null}`);
+  }
+
+  $: {
+    if (prevConnections && !areConnectionMapsEqual(connections, prevConnections)) {
+      const _connections = connections ?? new Map();
+
+      handleConnectionChange(prevConnections, _connections, ondisconnect);
+      handleConnectionChange(_connections, prevConnections, onconnect);
+    }
+
+    prevConnections = connections ?? new Map();
+  }
+
   // @todo implement connectablestart, connectableend
 </script>
 

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -107,7 +107,7 @@
     trigger: [
       {
         ...deleteKeyDefinition,
-        callback: () => deleteKeyDefinition.key && deleteKeyPressed.set(true)
+        callback: (event) => deleteKeyDefinition.key && deleteKeyPressed.set(true)
       }
     ],
     type: 'keydown'

packages/svelte/src/lib/hooks/useHandleConnections.ts

@@ -0,0 +1,30 @@
+import { derived } from 'svelte/store';
+import { areConnectionMapsEqual, type Connection, type HandleType } from '@xyflow/system';
+
+import { useStore } from '$lib/store';
+
+export type useHandleConnectionsParams = {
+  nodeId: string;
+  type: HandleType;
+  id?: string | null;
+};
+
+const initialConnections: Connection[] = [];
+
+export function useHandleConnections({ nodeId, type, id = null }: useHandleConnectionsParams) {
+  const { edges, connectionLookup } = useStore();
+  let prevConnections: Map<string, Connection> | undefined = undefined;
+
+  return derived(
+    [edges, connectionLookup],
+    ([, connectionLookup], set) => {
+      const nextConnections = connectionLookup.get(`${nodeId}-${type}-${id || null}`);
+
+      if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
+        prevConnections = nextConnections;
+        set(Array.from(prevConnections?.values() || []));
+      }
+    },
+    initialConnections
+  );
+}

packages/svelte/src/lib/hooks/useNodesData.ts

@@ -0,0 +1,64 @@
+import { derived, type Readable } from 'svelte/store';
+
+import type { Node } from '$lib/types';
+import { useStore } from '$lib/store';
+
+function areNodesDataEqual(a: Node['data'][] | null, b: Node['data'][] | null) {
+  if ((!a && !b) || (!a?.length && !b?.length)) {
+    true;
+  }
+
+  if (!a || !b || a.length !== b.length) {
+    return false;
+  }
+
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function useNodesData<NodeType extends Node = Node>(
+  nodeId: string
+): Readable<NodeType['data'] | null>;
+export function useNodesData<NodeType extends Node = Node>(
+  nodeIds: string[]
+): Readable<NodeType['data'][]>;
+export function useNodesData<NodeType extends Node = Node>(
+  nodeIds: string[],
+  guard: (node: Node) => node is NodeType
+): Readable<NodeType['data'][]>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useNodesData(nodeIds: any): any {
+  const { nodes, nodeLookup } = useStore();
+  let prevNodesData: (Node['data'] | null)[] | null = null;
+
+  return derived([nodes, nodeLookup], ([, nodeLookup], set) => {
+    let nextNodesData: (Node['data'] | null)[] | null = null;
+    const nodeIdArray = Array.isArray(nodeIds);
+
+    if (!nodeIdArray) {
+      nextNodesData = [nodeLookup.get(nodeIds)?.data || null];
+    } else {
+      const data = [];
+
+      for (const nodeId of nodeIds) {
+        const nodeData = nodeLookup.get(nodeId)?.data;
+
+        if (nodeData) {
+          data.push(nodeData);
+        }
+      }
+
+      nextNodesData = data;
+    }
+
+    if (!areNodesDataEqual(nextNodesData, prevNodesData)) {
+      prevNodesData = nextNodesData;
+      set(nodeIdArray ? nextNodesData : nextNodesData[0]);
+    }
+  });
+}

packages/svelte/src/lib/hooks/useUpdateNodeData.ts

@@ -0,0 +1,22 @@
+import { useStore } from '$lib/store';
+
+export function useUpdateNodeData(): (id: string, data: unknown) => void {
+  const { nodes } = useStore();
+
+  const updateNodeData = (id: string, data: unknown) => {
+    nodes.update((nds) =>
+      nds.map((node) => {
+        if (node.id === id) {
+          return {
+            ...node,
+            data
+          };
+        }
+
+        return node;
+      })
+    );
+  };
+
+  return updateNodeData;
+}

packages/svelte/src/lib/index.ts

@@ -27,6 +27,9 @@ export * from '$lib/hooks/useSvelteFlow';
 export * from '$lib/hooks/useUpdateNodeInternals';
 export * from '$lib/hooks/useConnection';
 export * from '$lib/hooks/useNodesEdges';
+export * from '$lib/hooks/useHandleConnections';
+export * from '$lib/hooks/useNodesData';
+export * from '$lib/hooks/useUpdateNodeData';
 
 // types
 export type {

packages/svelte/src/lib/store/initial-store.ts

@@ -17,7 +17,9 @@ import {
   type Viewport,
   updateNodes,
   getNodesBounds,
-  getViewportForBounds
+  getViewportForBounds,
+  updateConnectionLookup,
+  type ConnectionLookup
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -72,11 +74,12 @@ export const getInitialStore = ({
   height?: number;
   fitView?: boolean;
 }) => {
-  const nodeLookup = new Map<string, Node>();
+  const nodeLookup = new Map();
   const nextNodes = updateNodes(nodes, nodeLookup, {
     nodeOrigin: [0, 0],
     elevateNodesOnSelect: false
   });
+  const connectionLookup = updateConnectionLookup(new Map(), edges);
 
   let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
 
@@ -91,8 +94,9 @@ export const getInitialStore = ({
     nodes: createNodesStore(nextNodes, nodeLookup),
     nodeLookup: readable<Map<string, Node>>(nodeLookup),
     visibleNodes: readable<Node[]>([]),
-    edges: createEdgesStore(edges),
+    edges: createEdgesStore(edges, connectionLookup),
     edgeTree: readable<GroupedEdges<EdgeLayouted>[]>([]),
+    connectionLookup: readable<ConnectionLookup>(connectionLookup),
     height: writable<number>(500),
     width: writable<number>(500),
     minZoom: writable<number>(0.5),

packages/svelte/src/lib/store/utils.ts

@@ -6,7 +6,13 @@ import {
   type Writable,
   get
 } from 'svelte/store';
-import { updateNodes, type Viewport, type PanZoomInstance } from '@xyflow/system';
+import {
+  updateNodes,
+  type Viewport,
+  type PanZoomInstance,
+  type ConnectionLookup,
+  updateConnectionLookup
+} from '@xyflow/system';
 
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, Node } from '$lib/types';
 
@@ -168,6 +174,7 @@ export const createNodesStore = (
 
 export const createEdgesStore = (
   edges: Edge[],
+  connectionLookup: ConnectionLookup,
   defaultOptions?: DefaultEdgeOptions
 ): Writable<Edge[]> & { setDefaultOptions: (opts: DefaultEdgeOptions) => void } => {
   const { subscribe, set, update } = writable<Edge[]>([]);
@@ -176,6 +183,9 @@ export const createEdgesStore = (
 
   const _set: typeof set = (eds: Edge[]) => {
     const nextEdges = defaults ? eds.map((edge) => ({ ...defaults, ...edge })) : eds;
+
+    updateConnectionLookup(connectionLookup, nextEdges);
+
     value = nextEdges;
     set(value);
   };

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

@@ -31,6 +31,8 @@ export type HandleComponentProps = {
   isConnectable?: boolean;
   isConnectableStart?: boolean;
   isConnectableEnd?: boolean;
+  onconnect?: (connections: Connection[]) => void;
+  ondisconnect?: (connections: Connection[]) => void;
 };
 
 export type FitViewOptions = FitViewOptionsBase<Node>;