From 4fc8e081287828857e0620ee8473a6e553e3b0da Mon Sep 17 00:00:00 2001 From: peterkogo Date: Tue, 7 Jan 2025 11:57:33 +0100 Subject: [PATCH] fixed internal examples, made code more understandable --- examples/react/src/App/routes.ts | 8 +++--- .../MultiHandleNode.tsx | 6 ++--- .../SingleHandleNode.tsx | 6 ++--- .../index.tsx | 0 .../src/examples/UseNodesData/ResultNode.tsx | 4 +-- .../examples/UseNodesData/UppercaseNode.tsx | 4 +-- .../examples/usenodesdata/ResultNode.svelte | 4 +-- .../usenodesdata/UppercaseNode.svelte | 4 +-- packages/system/src/utils/store.ts | 26 ++++++++++--------- 9 files changed, 32 insertions(+), 30 deletions(-) rename examples/react/src/examples/{UseHandleConnections => UseNodeConnections}/MultiHandleNode.tsx (87%) rename examples/react/src/examples/{UseHandleConnections => UseNodeConnections}/SingleHandleNode.tsx (86%) rename examples/react/src/examples/{UseHandleConnections => UseNodeConnections}/index.tsx (100%) diff --git a/examples/react/src/App/routes.ts b/examples/react/src/App/routes.ts index 28c9e8cc..cb184b4a 100644 --- a/examples/react/src/App/routes.ts +++ b/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', - path: 'usehandleconnections', - component: UseHandleConnections, + name: 'useNodeConnections', + path: 'usenodeconnections', + component: UseNodeConnections, }, { name: 'useNodesData', diff --git a/examples/react/src/examples/UseHandleConnections/MultiHandleNode.tsx b/examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx similarity index 87% rename from examples/react/src/examples/UseHandleConnections/MultiHandleNode.tsx rename to examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx index 4b8fd2c1..3397242a 100644 --- a/examples/react/src/examples/UseHandleConnections/MultiHandleNode.tsx +++ b/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, }); diff --git a/examples/react/src/examples/UseHandleConnections/SingleHandleNode.tsx b/examples/react/src/examples/UseNodeConnections/SingleHandleNode.tsx similarity index 86% rename from examples/react/src/examples/UseHandleConnections/SingleHandleNode.tsx rename to examples/react/src/examples/UseNodeConnections/SingleHandleNode.tsx index 1c13dcb0..070bbf2a 100644 --- a/examples/react/src/examples/UseHandleConnections/SingleHandleNode.tsx +++ b/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, }); diff --git a/examples/react/src/examples/UseHandleConnections/index.tsx b/examples/react/src/examples/UseNodeConnections/index.tsx similarity index 100% rename from examples/react/src/examples/UseHandleConnections/index.tsx rename to examples/react/src/examples/UseNodeConnections/index.tsx diff --git a/examples/react/src/examples/UseNodesData/ResultNode.tsx b/examples/react/src/examples/UseNodesData/ResultNode.tsx index bf8f7a35..45ec4087 100644 --- a/examples/react/src/examples/UseNodesData/ResultNode.tsx +++ b/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(connections.map((connection) => connection.source)); diff --git a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx b/examples/react/src/examples/UseNodesData/UppercaseNode.tsx index 70c6079d..a6f0b67b 100644 --- a/examples/react/src/examples/UseNodesData/UppercaseNode.tsx +++ b/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(connections[0]?.source); diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte index 436d2109..9aa05fc2 100644 --- a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte +++ b/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' }); diff --git a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte index 55960cb5..5ca38032 100644 --- a/examples/svelte/src/routes/examples/usenodesdata/UppercaseNode.svelte +++ b/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' }); diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts index 4ac93c96..223772ea 100644 --- a/packages/system/src/utils/store.ts +++ b/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 - const keyFragments = [nodeId, type, handleId]; - let key = ''; - for (const keyFragment of keyFragments) { - // values for each iteration: nodeId, nodeId-type, nodeId-type-handleId - key += keyFragment; - // create a new map if the key does not exist and add the connection - const prevMap = connectionLookup.get(key) || new Map(); - connectionLookup.set(key, prevMap.set(connectionKey, connection)); - // add - as seperator for next iteration - key += '-'; - } + // We add the connection to the connectionLookup at the following keys + // 1. nodeId, 2. nodeId-type, 3. nodeId-type-handleId + // If the key already exists, we add the connection to the existing map + let key = nodeId; + const nodeMap = connectionLookup.get(key) || new Map(); + connectionLookup.set(key, nodeMap.set(connectionKey, connection)); + + key = `${nodeId}-${type}`; + const typeMap = connectionLookup.get(key) || new Map(); + connectionLookup.set(key, typeMap.set(connectionKey, connection)); + + 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[]) {