update useNodeConnections

.changeset/twelve-bottles-turn.md

@@ -0,0 +1,6 @@
+---
+'@xyflow/react': patch
+'@xyflow/system': patch
+---
+
+Optimize selections and take into account if edges connected to selected nodes are actually selectable.

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

@@ -12,7 +12,7 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string
     [nodeId]
   );
   const connections = useNodeConnections({
-    type: handleProps.type,
+    handleType: handleProps.type,
     handleId: handleProps.id,
     onConnect,
     onDisconnect,

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

@@ -15,7 +15,7 @@ function CustomHandle({ nodeId, ...handleProps }: HandleProps & { nodeId: string
     [nodeId]
   );
   const connections = useNodeConnections({
-    type: handleProps.type,
+    handleType: handleProps.type,
     handleId: handleProps.id,
     onConnect,
     onDisconnect,

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

@@ -4,7 +4,7 @@ import { isTextNode, type MyNode } from '.';
 
 function ResultNode() {
   const connections = useNodeConnections({
-    type: 'target',
+    handleType: 'target',
   });
   const nodesData = useNodesData<MyNode>(connections.map((connection) => connection.source));
   const textNodes = nodesData.filter(isTextNode);

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

@@ -5,7 +5,7 @@ import { isTextNode, type TextNode, type MyNode } from '.';
 function UppercaseNode({ id }: NodeProps) {
   const { updateNodeData } = useReactFlow();
   const connections = useNodeConnections({
-    type: 'target',
+    handleType: 'target',
   });
   const nodesData = useNodesData<MyNode>(connections[0]?.source);
   const textNode = isTextNode(nodesData) ? nodesData : null;

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

@@ -11,8 +11,8 @@
 	let { id }: NodeProps = $props();
 
 	const connections = useNodeConnections({
-		nodeId: id,
-		type: 'target'
+		id: id,
+		handleType: 'target'
 	});
 
 	let nodeData = $derived(

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

@@ -15,8 +15,8 @@
 
 	const { updateNodeData } = useSvelteFlow();
 	const connections = useNodeConnections({
-		nodeId: id,
-		type: 'target'
+		id: id,
+		handleType: 'target'
 	});
 
 	let nodeData = $derived(useNodesData<MyNode>(connections.current[0]?.source));

packages/react/src/container/Pane/index.tsx

@@ -10,7 +10,14 @@ import {
 } from 'react';
 import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
-import { getNodesInside, getEventPosition, SelectionMode, type NodeChange, type EdgeChange } from '@xyflow/system';
+import {
+  getNodesInside,
+  getEventPosition,
+  SelectionMode,
+  areSetsEqual,
+  type NodeChange,
+  type EdgeChange,
+} from '@xyflow/system';
 
 import { UserSelection } from '../../components/UserSelection';
 import { containerStyle } from '../../styles/utils';
@@ -73,27 +80,20 @@ export function Pane({
   onPaneMouseLeave,
   children,
 }: PaneProps) {
-  const container = useRef<HTMLDivElement | null>(null);
   const store = useStoreApi();
-  const prevSelectedNodesCount = useRef<number>(0);
-  const prevSelectedEdgesCount = useRef<number>(0);
-  const containerBounds = useRef<DOMRect>();
-  const edgeIdLookup = useRef<Map<string, Set<string>>>(new Map());
-
   const { userSelectionActive, elementsSelectable, dragging } = useStore(selector, shallow);
   const hasActiveSelection = elementsSelectable && (isSelecting || userSelectionActive);
 
+  const container = useRef<HTMLDivElement | null>(null);
+  const containerBounds = useRef<DOMRect>();
+
+  const selectedNodeIds = useRef<Set<string>>(new Set());
+  const selectedEdgeIds = useRef<Set<string>>(new Set());
+
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   const selectionInProgress = useRef<boolean>(false);
   const selectionStarted = useRef<boolean>(false);
 
-  const resetUserSelection = () => {
-    store.setState({ userSelectionActive: false, userSelectionRect: null });
-
-    prevSelectedNodesCount.current = 0;
-    prevSelectedEdgesCount.current = 0;
-  };
-
   const onClick = (event: ReactMouseEvent) => {
     // We prevent click events when the user let go of the selectionKey during a selection
     if (selectionInProgress.current) {
@@ -118,7 +118,7 @@ export function Pane({
   const onWheel = onPaneScroll ? (event: React.WheelEvent) => onPaneScroll(event) : undefined;
 
   const onPointerDown = (event: ReactPointerEvent): void => {
-    const { resetSelectedElements, domNode, edgeLookup } = store.getState();
+    const { resetSelectedElements, domNode } = store.getState();
     containerBounds.current = domNode?.getBoundingClientRect();
 
     if (
@@ -135,12 +135,6 @@ export function Pane({
 
     selectionStarted.current = true;
     selectionInProgress.current = false;
-    edgeIdLookup.current = new Map();
-
-    for (const [id, edge] of edgeLookup) {
-      edgeIdLookup.current.set(edge.source, edgeIdLookup.current.get(edge.source)?.add(id) || new Set([id]));
-      edgeIdLookup.current.set(edge.target, edgeIdLookup.current.get(edge.target)?.add(id) || new Set([id]));
-    }
 
     const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
 
@@ -161,8 +155,16 @@ export function Pane({
   };
 
   const onPointerMove = (event: ReactPointerEvent): void => {
-    const { userSelectionRect, edgeLookup, transform, nodeLookup, triggerNodeChanges, triggerEdgeChanges } =
-      store.getState();
+    const {
+      userSelectionRect,
+      transform,
+      nodeLookup,
+      edgeLookup,
+      connectionLookup,
+      triggerNodeChanges,
+      triggerEdgeChanges,
+      defaultEdgeOptions,
+    } = store.getState();
 
     if (!containerBounds.current || !userSelectionRect) {
       return;
@@ -182,38 +184,37 @@ export function Pane({
       height: Math.abs(mouseY - startY),
     };
 
-    const selectedNodes = getNodesInside(
-      nodeLookup,
-      nextUserSelectRect,
-      transform,
-      selectionMode === SelectionMode.Partial,
-      true
+    const prevSelectedNodeIds = selectedNodeIds.current;
+    const prevSelectedEdgeIds = selectedEdgeIds.current;
+
+    selectedNodeIds.current = new Set(
+      getNodesInside(nodeLookup, nextUserSelectRect, transform, selectionMode === SelectionMode.Partial, true).map(
+        (node) => node.id
+      )
     );
 
-    const selectedEdgeIds = new Set<string>();
-    const selectedNodeIds = new Set<string>();
+    selectedEdgeIds.current = new Set();
+    const edgesSelectable = defaultEdgeOptions?.selectable ?? true;
 
-    for (const selectedNode of selectedNodes) {
-      selectedNodeIds.add(selectedNode.id);
-
-      const edgeIds = edgeIdLookup.current.get(selectedNode.id);
-
-      if (edgeIds) {
-        for (const edgeId of edgeIds) {
-          selectedEdgeIds.add(edgeId);
+    // We look for all edges connected to the selected nodes
+    for (const nodeId of selectedNodeIds.current) {
+      const connections = connectionLookup.get(nodeId);
+      if (!connections) continue;
+      for (const { edgeId } of connections.values()) {
+        const edge = edgeLookup.get(edgeId);
+        if (edge && (edge.selectable ?? edgesSelectable)) {
+          selectedEdgeIds.current.add(edgeId);
         }
       }
     }
 
-    if (prevSelectedNodesCount.current !== selectedNodeIds.size) {
-      prevSelectedNodesCount.current = selectedNodeIds.size;
-      const changes = getSelectionChanges(nodeLookup, selectedNodeIds, true) as NodeChange[];
+    if (!areSetsEqual(prevSelectedNodeIds, selectedNodeIds.current)) {
+      const changes = getSelectionChanges(nodeLookup, selectedNodeIds.current, true) as NodeChange[];
       triggerNodeChanges(changes);
     }
 
-    if (prevSelectedEdgesCount.current !== selectedEdgeIds.size) {
-      prevSelectedEdgesCount.current = selectedEdgeIds.size;
-      const changes = getSelectionChanges(edgeLookup, selectedEdgeIds) as EdgeChange[];
+    if (!areSetsEqual(prevSelectedEdgeIds, selectedEdgeIds.current)) {
+      const changes = getSelectionChanges(edgeLookup, selectedEdgeIds.current) as EdgeChange[];
       triggerEdgeChanges(changes);
     }
 
@@ -231,17 +232,18 @@ export function Pane({
 
     (event.target as Element)?.releasePointerCapture?.(event.pointerId);
     const { userSelectionRect } = store.getState();
+
     // We only want to trigger click functions when in selection mode if
     // the user did not move the mouse.
     if (!userSelectionActive && userSelectionRect && event.target === container.current) {
       onClick?.(event);
     }
 
-    if (prevSelectedNodesCount.current > 0) {
-      store.setState({ nodesSelectionActive: true });
-    }
-
-    resetUserSelection();
+    store.setState({
+      userSelectionActive: false,
+      userSelectionRect: null,
+      nodesSelectionActive: selectedNodeIds.current.size > 0,
+    });
     onSelectionEnd?.(event);
 
     // If the user kept holding the selectionKey during the selection,

packages/react/src/hooks/useNodeConnections.ts

@@ -14,9 +14,9 @@ import { useNodeId } from '../contexts/NodeIdContext';
 const error014 = errorMessages['error014']();
 
 type UseNodeConnectionsParams = {
-  type?: HandleType;
+  id?: string;
+  handleType?: HandleType;
   handleId?: string;
-  nodeId?: string;
   onConnect?: (connections: Connection[]) => void;
   onDisconnect?: (connections: Connection[]) => void;
 };
@@ -25,22 +25,22 @@ type UseNodeConnectionsParams = {
  * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
  *
  * @public
- * @param param.nodeId - node id - optional if called inside a custom node
- * @param param.type - filter by handle type 'source' or 'target'
+ * @param param.id - node id - optional if called inside a custom node
+ * @param param.handleType - filter by handle type 'source' or 'target'
  * @param param.handleId - filter by handle id (this is only needed if the node has multiple handles of the same type)
  * @param param.onConnect - gets called when a connection is established
  * @param param.onDisconnect - gets called when a connection is removed
  * @returns an array with connections
  */
 export function useNodeConnections({
-  type,
+  id,
+  handleType,
   handleId,
-  nodeId,
   onConnect,
   onDisconnect,
 }: UseNodeConnectionsParams = {}): NodeConnection[] {
-  const _nodeId = useNodeId();
-  const currentNodeId = nodeId ?? _nodeId;
+  const nodeId = useNodeId();
+  const currentNodeId = id ?? nodeId;
 
   if (!currentNodeId) {
     throw new Error(error014);
@@ -50,7 +50,9 @@ export function useNodeConnections({
 
   const connections = useStore(
     (state) =>
-      state.connectionLookup.get(`${currentNodeId}${type ? (handleId ? `-${type}-${handleId}` : `-${type}`) : ''}`),
+      state.connectionLookup.get(
+        `${currentNodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}`
+      ),
     areConnectionMapsEqual
   );
 

packages/svelte/src/lib/hooks/useNodeConnections.svelte.ts

@@ -4,9 +4,9 @@ import { useStore } from '$lib/store';
 import { getContext } from 'svelte';
 
 type UseNodeConnectionsParams = {
-  type?: HandleType;
+  id?: string;
+  handleType?: HandleType;
   handleId?: string;
-  nodeId?: string;
   // TODO: Svelte 5
   //   onConnect?: (connections: Connection[]) => void;
   //   onDisconnect?: (connections: Connection[]) => void;
@@ -18,22 +18,18 @@ const initialConnections: NodeConnection[] = [];
  * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
  *
  * @public
- * @param param.nodeId - node id - optional if called inside a custom node
- * @param param.type - filter by handle type 'source' or 'target'
+ * @param param.id - node id - optional if called inside a custom node
+ * @param param.handleType - filter by handle type 'source' or 'target'
  * @param param.handleId - filter by handle id (this is only needed if the node has multiple handles of the same type)
  * @todo @param param.onConnect - gets called when a connection is established
  * @todo @param param.onDisconnect - gets called when a connection is removed
  * @returns an array with connections
  */
-export function useNodeConnections({
-  type,
-  nodeId: _nodeId,
-  handleId
-}: UseNodeConnectionsParams = {}) {
+export function useNodeConnections({ id, handleType, handleId }: UseNodeConnectionsParams = {}) {
   const { edges, connectionLookup } = $derived(useStore());
 
   const contextNodeId = getContext<string>('svelteflow__node_id');
-  const nodeId = _nodeId ?? contextNodeId;
+  const nodeId = id ?? contextNodeId;
 
   let prevConnections: Map<string, NodeConnection> | undefined = new Map();
   let connectionsArray: NodeConnection[] = initialConnections;
@@ -42,7 +38,7 @@ export function useNodeConnections({
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     edges;
     const nextConnections = connectionLookup.get(
-      `${nodeId}-${type}${handleId ? `-${handleId}` : ''}`
+      `${nodeId}${handleType ? (handleId ? `-${handleType}-${handleId}` : `-${handleType}`) : ''}`
     );
     if (!areConnectionMapsEqual(nextConnections, prevConnections)) {
       prevConnections = nextConnections;

packages/system/src/utils/general.ts

@@ -263,3 +263,17 @@ export function evaluateAbsolutePosition(
 
   return positionAbsolute;
 }
+
+export function areSetsEqual(a: Set<string>, b: Set<string>) {
+  if (a.size !== b.size) {
+    return false;
+  }
+
+  for (const item of a) {
+    if (!b.has(item)) {
+      return false;
+    }
+  }
+
+  return true;
+}