alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix connectionLookup keys, to prevent overlaps

Browse Source
This commit is contained in:
peterkogo
2025-01-16 10:36:13 +01:00
parent 56a3d886cd
commit d43a1716e5
3 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/UseNodeConnections/MultiHandleNode.tsx
+4 -3
View File
@@ -28,10 +28,11 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string
const CustomNode: FC<NodeProps> = ({ id }) => { const CustomNode: FC<NodeProps> = ({ id }) => {
return ( return (
<div style={{ background: '#333', color: '#fff', padding: 10, fontSize: 12, borderRadius: 10 }}> <div style={{ background: '#333', color: '#fff', padding: 10, fontSize: 12, borderRadius: 10 }}>
<CustomHandle nodeId={id} type="target" position={Position.Left} /> <CustomHandle nodeId={id} type="target" position={Position.Left} id="t1" style={{ top: 10 }} />
<CustomHandle nodeId={id} type="target" position={Position.Left} id="t2" style={{ top: 20 }} />
<div>node {id}</div> <div>node {id}</div>
<CustomHandle nodeId={id} type="source" position={Position.Right} id="a" style={{ top: 10 }} /> <CustomHandle nodeId={id} type="source" position={Position.Right} id="s1" style={{ top: 10 }} />
<CustomHandle nodeId={id} type="source" position={Position.Right} id="b" style={{ top: 20 }} /> <CustomHandle nodeId={id} type="source" position={Position.Right} id="s2" style={{ top: 20 }} />
</div> </div>
); );
}; };
examples/react/src/examples/UseNodeConnections/index.tsx
+4 -3
View File
@@ -69,17 +69,16 @@ const initEdges = [
source: '1', source: '1',
target: '3', target: '3',
}, },
{ {
id: 'e4a-5', id: 'e4a-5',
source: '4', source: '4',
sourceHandle: 'a', sourceHandle: 's1',
target: '5', target: '5',
}, },
{ {
id: 'e4b-5', id: 'e4b-5',
source: '4', source: '4',
sourceHandle: 'b', sourceHandle: 's2',
target: '6', target: '6',
}, },
]; ];
@@ -92,6 +91,8 @@ const CustomNodeFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initNodes); const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges); const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
console.log(edges);
const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]); const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
return ( return (
packages/system/src/utils/store.ts
+2 -2
View File
@@ -483,8 +483,8 @@ export function updateConnectionLookup(connectionLookup: ConnectionLookup, edgeL
const { source: sourceNode, target: targetNode, sourceHandle = null, targetHandle = null } = edge; const { source: sourceNode, target: targetNode, sourceHandle = null, targetHandle = null } = edge;
const connection = { edgeId: edge.id, source: sourceNode, target: targetNode, sourceHandle, targetHandle }; const connection = { edgeId: edge.id, source: sourceNode, target: targetNode, sourceHandle, targetHandle };
const sourceKey = `${sourceNode}-${sourceHandle}`; const sourceKey = `${sourceNode}-${sourceHandle}--${targetNode}-${targetHandle}`;
const targetKey = `${targetNode}-${targetHandle}`; const targetKey = `${targetNode}-${targetHandle}--${sourceNode}-${sourceHandle}`;
addConnectionToLookup('source', connection, targetKey, connectionLookup, sourceNode, sourceHandle); addConnectionToLookup('source', connection, targetKey, connectionLookup, sourceNode, sourceHandle);
addConnectionToLookup('target', connection, sourceKey, connectionLookup, targetNode, targetHandle); addConnectionToLookup('target', connection, sourceKey, connectionLookup, targetNode, targetHandle);