Merge branch 'main' into nodesbounds

packages/react/src/hooks/useConnection.ts

@@ -4,17 +4,34 @@ import { ConnectionState, pointToRendererPoint } from '@xyflow/system';
 import { useStore } from './useStore';
 import type { InternalNode, Node, ReactFlowStore } from '../types';
 
-const selector = (s: ReactFlowStore) => {
+function storeSelector(s: ReactFlowStore) {
   return s.connection.inProgress
     ? { ...s.connection, to: pointToRendererPoint(s.connection.to, s.transform) }
     : { ...s.connection };
-};
+}
+
+function getSelector<NodeType extends Node = Node, SelectorReturn = ConnectionState<InternalNode<NodeType>>>(
+  connectionSelector?: (connection: ConnectionState<InternalNode<NodeType>>) => SelectorReturn
+): (s: ReactFlowStore) => SelectorReturn | ConnectionState<InternalNode> {
+  if (connectionSelector) {
+    const combinedSelector = (s: ReactFlowStore) => {
+      const connection = storeSelector(s) as ConnectionState<InternalNode<NodeType>>;
+      return connectionSelector(connection);
+    };
+    return combinedSelector;
+  }
+
+  return storeSelector;
+}
 /**
  * Hook for accessing the connection state.
  *
  * @public
  * @returns ConnectionState
  */
-export function useConnection<NodeType extends Node = Node>(): ConnectionState<InternalNode<NodeType>> {
-  return useStore(selector, shallow) as ConnectionState<InternalNode<NodeType>>;
+export function useConnection<NodeType extends Node = Node, SelectorReturn = ConnectionState<InternalNode<NodeType>>>(
+  connectionSelector?: (connection: ConnectionState<InternalNode<NodeType>>) => SelectorReturn
+): SelectorReturn {
+  const combinedSelector = getSelector<NodeType, SelectorReturn>(connectionSelector);
+  return useStore(combinedSelector, shallow) as SelectorReturn;
 }

packages/react/src/hooks/useReactFlow.ts

@@ -258,6 +258,13 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
 
         return boxToRect(box);
       },
+      getHandleConnections: ({ type, id, nodeId }) =>
+        Array.from(
+          store
+            .getState()
+            .connectionLookup.get(`${nodeId}-${type}-${id ?? null}`)
+            ?.values() ?? []
+        ),
     };
   }, []);
 

packages/react/src/hooks/useUpdateNodeInternals.ts

@@ -25,6 +25,6 @@ export function useUpdateNodeInternals(): UpdateNodeInternals {
       }
     });
 
-    requestAnimationFrame(() => updateNodeInternals(updates));
+    requestAnimationFrame(() => updateNodeInternals(updates, { triggerFitView: false }));
   }, []);
 }