feat(react): connection lookup draft

examples/react/src/App/routes.ts

@@ -45,6 +45,7 @@ import InteractiveMinimap from '../examples/InteractiveMinimap';
 import UseOnSelectionChange from '../examples/UseOnSelectionChange';
 import NodeToolbar from '../examples/NodeToolbar';
 import useNodesInitialized from '../examples/UseNodesInit';
+import useHandleConnectionStatus from '../examples/UseHandleConnectionStatus';
 
 export interface IRoute {
   name: string;
@@ -273,6 +274,11 @@ const routes: IRoute[] = [
     path: 'usereactflow',
     component: UseReactFlow,
   },
+  {
+    name: 'useHandleConnectionStatus',
+    path: 'usehandleconnectionstatus',
+    component: useHandleConnectionStatus,
+  },
   {
     name: 'useUpdateNodeInternals',
     path: 'useupdatenodeinternals',

examples/react/src/examples/CustomNode/ColorSelectorNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo, FC, CSSProperties, useCallback } from 'react';
+import React, { memo, FC, CSSProperties, useCallback, useEffect } from 'react';
 import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from '@xyflow/react';
 
 const targetHandleStyle: CSSProperties = { background: '#555' };

examples/react/src/examples/UseHandleConnectionStatus/MultiHandleNode.tsx

@@ -0,0 +1,40 @@
+import { memo, FC, useEffect, useCallback } from 'react';
+import { Handle, Position, NodeProps, useHandleConnectionStatus, Connection } from '@xyflow/react';
+import { HandleComponentProps } from '@xyflow/react/dist/esm/components/Handle';
+
+function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeId: string }) {
+  const onConnect = useCallback(
+    (connections: Connection[]) => console.log('onConnect handler, node id:', nodeId, connections),
+    [nodeId]
+  );
+
+  const onDisconnect = useCallback(
+    (connections: Connection[]) => console.log('onDisconnect handler, node id:', nodeId, connections),
+    [nodeId]
+  );
+  const status = useHandleConnectionStatus({
+    handleType: handleProps.type,
+    handleId: handleProps.id,
+    onConnect,
+    onDisconnect,
+  });
+
+  useEffect(() => {
+    console.log('useEffect, node id:', nodeId, handleProps.type, status);
+  }, [status]);
+
+  return <Handle {...handleProps} />;
+}
+
+const CustomNode: FC<NodeProps> = ({ id }) => {
+  return (
+    <div style={{ background: '#333', color: '#fff', padding: 10, fontSize: 12, borderRadius: 10 }}>
+      <CustomHandle nodeId={id} type="target" position={Position.Left} />
+      <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="b" style={{ top: 20 }} />
+    </div>
+  );
+};
+
+export default memo(CustomNode);

examples/react/src/examples/UseHandleConnectionStatus/SingleHandleNode.tsx

@@ -0,0 +1,42 @@
+import { memo, FC, useEffect, useCallback } from 'react';
+import { Handle, Position, NodeProps, useHandleConnectionStatus, Connection } from '@xyflow/react';
+import { HandleComponentProps } from '@xyflow/react/dist/esm/components/Handle';
+
+function CustomHandle({ nodeId, ...handleProps }: HandleComponentProps & { nodeId: string }) {
+  const onConnect = useCallback(
+    (connections: Connection[]) => {
+      console.log('onConnect handler, node id:', nodeId, connections);
+    },
+    [nodeId]
+  );
+  const onDisconnect = useCallback(
+    (connections: Connection[]) => {
+      console.log('onDisconnect handler, node id:', nodeId, connections);
+    },
+    [nodeId]
+  );
+  const status = useHandleConnectionStatus({
+    handleType: handleProps.type,
+    handleId: handleProps.id,
+    onConnect,
+    onDisconnect,
+  });
+
+  useEffect(() => {
+    //  console.log('useEffect, node id:', nodeId, handleProps.type, status);
+  }, [status]);
+
+  return <Handle {...handleProps} />;
+}
+
+const CustomNode: FC<NodeProps> = ({ id }) => {
+  return (
+    <div style={{ background: '#333', color: '#fff', padding: 10, fontSize: 12, borderRadius: 10 }}>
+      <CustomHandle nodeId={id} type="target" position={Position.Left} />
+      <div>node {id}</div>
+      <CustomHandle nodeId={id} type="source" position={Position.Right} />
+    </div>
+  );
+};
+
+export default memo(CustomNode);

examples/react/src/examples/UseHandleConnectionStatus/index.tsx

@@ -0,0 +1,118 @@
+import { useCallback } from 'react';
+import {
+  ReactFlow,
+  MiniMap,
+  Controls,
+  addEdge,
+  Connection,
+  useNodesState,
+  useEdgesState,
+  Background,
+} from '@xyflow/react';
+
+import MultiHandleNode from './MultiHandleNode';
+import SingleHandleNode from './SingleHandleNode';
+
+const nodeTypes = {
+  multi: MultiHandleNode,
+  single: SingleHandleNode,
+};
+
+const initNodes = [
+  {
+    id: '1',
+    type: 'single',
+    data: {},
+    position: { x: 0, y: 0 },
+  },
+  {
+    id: '2',
+    type: 'single',
+    data: {},
+    position: { x: 200, y: -100 },
+  },
+  {
+    id: '3',
+    type: 'single',
+    data: {},
+    position: { x: 200, y: 100 },
+  },
+
+  {
+    id: '4',
+    type: 'multi',
+    data: {},
+    position: { x: 400, y: 0 },
+  },
+  {
+    id: '5',
+    type: 'multi',
+    data: {},
+    position: { x: 600, y: -100 },
+  },
+  {
+    id: '6',
+    type: 'multi',
+    data: {},
+    position: { x: 600, y: 100 },
+  },
+];
+
+const initEdges = [
+  {
+    id: 'e1-2',
+    source: '1',
+    target: '2',
+  },
+  {
+    id: 'e1-3',
+    source: '1',
+    target: '3',
+  },
+
+  {
+    id: 'e4a-5',
+    source: '4',
+    sourceHandle: 'a',
+    target: '5',
+  },
+  {
+    id: 'e4b-5',
+    source: '4',
+    sourceHandle: 'b',
+    target: '6',
+  },
+];
+
+const defaultEdgeOptions = {
+  animated: true,
+};
+
+const CustomNodeFlow = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState(initNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges);
+
+  const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      nodeTypes={nodeTypes}
+      fitView
+      minZoom={0.3}
+      maxZoom={2}
+      colorMode="dark"
+      defaultEdgeOptions={defaultEdgeOptions}
+    >
+      <MiniMap />
+      <Controls />
+      <Background />
+    </ReactFlow>
+  );
+};
+
+export default CustomNodeFlow;