fixed internal examples, made code more understandable

examples/react/src/App/routes.ts

@@ -49,7 +49,7 @@ import NodeToolbar from '../examples/NodeToolbar';
 import UseConnection from '../examples/UseConnection';
 import UseNodesInitialized from '../examples/UseNodesInit';
 import UseNodesData from '../examples/UseNodesData';
-import UseHandleConnections from '../examples/UseHandleConnections';
+import UseNodeConnections from '../examples/UseNodeConnections';
 import AddNodeOnEdgeDrop from '../examples/AddNodeOnEdgeDrop';
 import DevTools from '../examples/DevTools';
 import Redux from '../examples/Redux';
@@ -313,9 +313,9 @@ const routes: IRoute[] = [
     component: UseReactFlow,
   },
   {
-    name: 'useHandleConnections',
+    name: 'useNodeConnections',
-    path: 'usehandleconnections',
+    path: 'usenodeconnections',
-    component: UseHandleConnections,
+    component: UseNodeConnections,
   },
   {
     name: 'useNodesData',

examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx

@@ -1,5 +1,5 @@
 import { memo, FC, useEffect, useCallback } from 'react';
-import { Handle, Position, NodeProps, useHandleConnections, Connection, HandleProps } from '@xyflow/react';
+import { Handle, Position, NodeProps, useNodeConnections, Connection, HandleProps } from '@xyflow/react';
 
 function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string }) {
   const onConnect = useCallback(
@@ -11,9 +11,9 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string
     (connections: Connection[]) => console.log('onDisconnect handler, node id:', nodeId, connections),
     [nodeId]
   );
-  const connections = useHandleConnections({
+  const connections = useNodeConnections({
     type: handleProps.type,
-    id: handleProps.id,
+    handleId: handleProps.id,
     onConnect,
     onDisconnect,
   });

examples/react/src/examples/UseNodeConnections/SingleHandleNode.tsx

@@ -1,5 +1,5 @@
 import { memo, FC, useEffect, useCallback } from 'react';
-import { Handle, Position, NodeProps, useHandleConnections, Connection, HandleProps } from '@xyflow/react';
+import { Handle, Position, NodeProps, useNodeConnections, Connection, HandleProps } from '@xyflow/react';
 
 function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string }) {
   const onConnect = useCallback(
@@ -14,9 +14,9 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string
     },
     [nodeId]
   );
-  const connections = useHandleConnections({
+  const connections = useNodeConnections({
     type: handleProps.type,
-    id: handleProps.id,
+    handleId: handleProps.id,
     onConnect,
     onDisconnect,
   });

examples/react/src/examples/UseNodesData/ResultNode.tsx

@@ -1,9 +1,9 @@
 import { memo } from 'react';
-import { Handle, Position, useHandleConnections, useNodesData } from '@xyflow/react';
+import { Handle, Position, useNodeConnections, useNodesData } from '@xyflow/react';
 import { isTextNode, type MyNode } from '.';
 
 function ResultNode() {
-  const connections = useHandleConnections({
+  const connections = useNodeConnections({
     type: 'target',
   });
   const nodesData = useNodesData<MyNode>(connections.map((connection) => connection.source));

examples/react/src/examples/UseNodesData/UppercaseNode.tsx

@@ -1,10 +1,10 @@
 import { memo, useEffect } from 'react';
-import { Position, NodeProps, useReactFlow, Handle, useHandleConnections, useNodesData } from '@xyflow/react';
+import { Position, NodeProps, useReactFlow, Handle, useNodeConnections, useNodesData } from '@xyflow/react';
 import { isTextNode, type TextNode, type MyNode } from '.';
 
 function UppercaseNode({ id }: NodeProps) {
   const { updateNodeData } = useReactFlow();
-  const connections = useHandleConnections({
+  const connections = useNodeConnections({
     type: 'target',
   });
   const nodesData = useNodesData<MyNode>(connections[0]?.source);

examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte

@@ -2,7 +2,7 @@
 	import {
 		Handle,
 		Position,
-		useHandleConnections,
+		useNodeConnections,
 		useNodesData,
 		type NodeProps
 	} from '@xyflow/svelte';
@@ -13,7 +13,7 @@
 	export let id: $$Props['id'];
 	$$restProps;
 
-	const connections = useHandleConnections({
+	const connections = useNodeConnections({
 		nodeId: id,
 		type: 'target'
 	});

examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte

@@ -2,7 +2,7 @@
 	import {
 		Handle,
 		Position,
-		useHandleConnections,
+		useNodeConnections,
 		useNodesData,
 		useSvelteFlow,
 		type NodeProps
@@ -16,7 +16,7 @@
 	$$restProps;
 
 	const { updateNodeData } = useSvelteFlow();
-	const connections = useHandleConnections({
+	const connections = useNodeConnections({
 		nodeId: id,
 		type: 'target'
 	});

packages/system/src/utils/store.ts

@@ -457,18 +457,20 @@ function addConnectionToLookup(
   nodeId: string,
   handleId: string | null
 ) {
-  // create array of key fragments for easier iteration
+  // We add the connection to the connectionLookup at the following keys
-  const keyFragments = [nodeId, type, handleId];
+  // 1. nodeId, 2. nodeId-type, 3. nodeId-type-handleId
-  let key = '';
+  // If the key already exists, we add the connection to the existing map
-  for (const keyFragment of keyFragments) {
+  let key = nodeId;
-    // values for each iteration: nodeId, nodeId-type, nodeId-type-handleId
+  const nodeMap = connectionLookup.get(key) || new Map();
-    key += keyFragment;
+  connectionLookup.set(key, nodeMap.set(connectionKey, connection));
-    // create a new map if the key does not exist and add the connection
+
-    const prevMap = connectionLookup.get(key) || new Map();
+  key = `${nodeId}-${type}`;
-    connectionLookup.set(key, prevMap.set(connectionKey, connection));
+  const typeMap = connectionLookup.get(key) || new Map();
-    // add - as seperator for next iteration
+  connectionLookup.set(key, typeMap.set(connectionKey, connection));
-    key += '-';
+
-  }
+  key = `${nodeId}-${type}-${handleId}`;
+  const handleMap = connectionLookup.get(key) || new Map();
+  connectionLookup.set(key, handleMap.set(connectionKey, connection));
 }
 
 export function updateConnectionLookup(connectionLookup: ConnectionLookup, edgeLookup: EdgeLookup, edges: EdgeBase[]) {