Merge branch 'main' into perf/noderenderer-minimap

packages/react/src/hooks/useHandleConnections.ts

@@ -0,0 +1,54 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Connection, HandleType, areConnectionMapsEqual, handleConnectionChange } from '@xyflow/system';
+
+import { useStore } from './useStore';
+import { useNodeId } from '../contexts/NodeIdContext';
+
+type useHandleConnectionsParams = {
+  type: HandleType;
+  id?: string | null;
+  nodeId?: string;
+  onConnect?: (connections: Connection[]) => void;
+  onDisconnect?: (connections: Connection[]) => void;
+};
+
+/**
+ *  Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ *
+ * @public
+ * @param param.type - handle type 'source' or 'target'
+ * @param param.id - the handle id (this is only needed if the node has multiple handles of the same type)
+ * @param param.nodeId - node id - if not provided, the node id from the NodeIdContext is used
+ * @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 useHandleConnections({
+  type,
+  id = null,
+  nodeId,
+  onConnect,
+  onDisconnect,
+}: useHandleConnectionsParams): Connection[] {
+  const _nodeId = useNodeId();
+  const prevConnections = useRef<Map<string, Connection> | null>(null);
+  const currentNodeId = nodeId || _nodeId;
+
+  const connections = useStore(
+    (state) => state.connectionLookup.get(`${currentNodeId}-${type}-${id}`),
+    areConnectionMapsEqual
+  );
+
+  useEffect(() => {
+    // @todo dicuss if onConnect/onDisconnect should be called when the component mounts/unmounts
+    if (prevConnections.current && prevConnections.current !== connections) {
+      const _connections = connections ?? new Map();
+      handleConnectionChange(prevConnections.current, _connections, onDisconnect);
+      handleConnectionChange(_connections, prevConnections.current, onConnect);
+    }
+
+    prevConnections.current = connections ?? new Map();
+  }, [connections, onConnect, onDisconnect]);
+
+  return useMemo(() => Array.from(connections?.values() ?? []), [connections]);
+}

packages/react/src/hooks/useNodesData.ts

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useStore } from '../hooks/useStore';
+import type { Node } from '../types';
+
+export function useNodesData<NodeType extends Node = Node>(nodeId: string): NodeType['data'] | null;
+export function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): NodeType['data'][];
+export function useNodesData<NodeType extends Node = Node>(
+  nodeIds: string[],
+  guard: (node: Node) => node is NodeType
+): NodeType['data'][];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useNodesData(nodeIds: any): any {
+  const nodesData = useStore(
+    useCallback(
+      (s) => {
+        if (!Array.isArray(nodeIds)) {
+          return s.nodeLookup.get(nodeIds)?.data || null;
+        }
+
+        const data = [];
+
+        for (const nodeId of nodeIds) {
+          const nodeData = s.nodeLookup.get(nodeId)?.data;
+
+          if (nodeData) {
+            data.push(nodeData);
+          }
+        }
+
+        return data;
+      },
+      [nodeIds]
+    ),
+    shallow
+  );
+
+  return nodesData;
+}

packages/react/src/hooks/useReactFlow.ts

@@ -10,7 +10,7 @@ import {
 } from '@xyflow/system';
 
 import useViewportHelper from './useViewportHelper';
-import { useStoreApi } from '../hooks/useStore';
+import { useStoreApi } from './useStore';
 import type {
   ReactFlowInstance,
   Instance,
@@ -24,6 +24,7 @@ import type {
   Node,
   Edge,
 } from '../types';
+import { isNode } from '../utils';
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {
@@ -271,6 +272,36 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     return getOutgoersBase(node, nodes, edges);
   }, []);
 
+  const updateNode = useCallback<Instance.UpdateNode>(
+    (id, nodeUpdate, options = { replace: true }) => {
+      setNodes((prevNodes) =>
+        prevNodes.map((node) => {
+          if (node.id === id) {
+            const nextNode = typeof nodeUpdate === 'function' ? nodeUpdate(node as Node) : nodeUpdate;
+            return options.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
+          }
+
+          return node;
+        })
+      );
+    },
+    [setNodes]
+  );
+
+  const updateNodeData = useCallback<Instance.UpdateNodeData>(
+    (id, dataUpdate, options = { replace: false }) => {
+      updateNode(
+        id,
+        (node) => {
+          const nextData = typeof dataUpdate === 'function' ? dataUpdate(node) : dataUpdate;
+          return options.replace ? { ...node, data: nextData } : { ...node, data: { ...node.data, ...nextData } };
+        },
+        options
+      );
+    },
+    [updateNode]
+  );
+
   return useMemo(() => {
     return {
       ...viewportHelper,
@@ -289,6 +320,8 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       getConnectedEdges,
       getIncomers,
       getOutgoers,
+      updateNode,
+      updateNodeData,
     };
   }, [
     viewportHelper,