Merge pull request #3929 from xyflow/extend-use-nodes-data

Extend useNodesData by {id, type, data}

packages/react/src/hooks/useNodesData.ts

@@ -4,40 +4,45 @@ import { shallow } from 'zustand/shallow';
 import { useStore } from '../hooks/useStore';
 import type { Node } from '../types';
 
+export interface NodeDataReturn<NodeType extends Node> {
+  id: string;
+  type: NodeType['type'];
+  data: NodeType['data'];
+}
+
 /**
  * Hook for receiving data of one or multiple nodes
  *
  * @public
  * @param nodeId - The id (or ids) of the node to get the data from
  * @param guard - Optional guard function to narrow down the node type
- * @returns An array od data objects
+ * @returns An object (or array of object) with {id, type, data} representing each node
  */
-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'][];
+  nodeId: string
+): Pick<NodeType, 'id' | 'type' | 'data'> | null;
+export function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): Pick<NodeType, 'id' | 'type' | '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 = [];
+        const isArrayOfIds = Array.isArray(nodeIds);
+        const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
 
-        for (const nodeId of nodeIds) {
-          const nodeData = s.nodeLookup.get(nodeId)?.data;
-
-          if (nodeData) {
-            data.push(nodeData);
+        for (const nodeId of _nodeIds) {
+          const node = s.nodeLookup.get(nodeId);
+          if (node) {
+            data.push({
+              id: node.id,
+              type: node.type,
+              data: node.data,
+            });
           }
         }
 
-        return data;
+        return isArrayOfIds ? data : data[0] ?? null;
       },
       [nodeIds]
     ),

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

@@ -3,17 +3,13 @@ import { derived, type Readable } from 'svelte/store';
 import type { Node } from '$lib/types';
 import { useStore } from '$lib/store';
 
-function areNodesDataEqual(a: (Node['data'] | null)[] | null, b: (Node['data'] | null)[] | null) {
-  if ((!a && !b) || (!a?.length && !b?.length)) {
-    true;
-  }
-
-  if (!a || !b || a.length !== b.length) {
+function areNodesDataEqual(a: any[], b: any[]) {
+  if (a.length !== b.length) {
     return false;
   }
 
   for (let i = 0; i < a.length; i++) {
-    if (a[i] !== b[i]) {
+    if (a[i].data !== b[i].data) {
       return false;
     }
   }
@@ -26,47 +22,38 @@ function areNodesDataEqual(a: (Node['data'] | null)[] | null, b: (Node['data'] |
  *
  * @public
  * @param nodeId - The id (or ids) of the node to get the data from
- * @param guard - Optional guard function to narrow down the node type
  * @returns A readable store with an array of data objects
  */
 export function useNodesData<NodeType extends Node = Node>(
   nodeId: string
-): Readable<NodeType['data'] | null>;
+): Readable<Pick<NodeType, 'id' | 'data' | 'type'> | null>;
 export function useNodesData<NodeType extends Node = Node>(
   nodeIds: string[]
-): Readable<NodeType['data'][]>;
-export function useNodesData<NodeType extends Node = Node>(
-  nodeIds: string[],
-  guard: (node: Node) => node is NodeType
-): Readable<NodeType['data'][]>;
+): Readable<Pick<NodeType, 'id' | 'data' | 'type'>[]>;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useNodesData(nodeIds: any): any {
   const { nodes, nodeLookup } = useStore();
-  let prevNodesData: (Node['data'] | null)[] | null = null;
+  let prevNodesData: any = [];
 
   return derived([nodes, nodeLookup], ([, nodeLookup], set) => {
-    let nextNodesData: (Node['data'] | null)[] | null = null;
-    const nodeIdArray = Array.isArray(nodeIds);
+    const nextNodesData = [];
+    const isArrayOfIds = Array.isArray(nodeIds);
+    const _nodeIds = isArrayOfIds ? nodeIds : [nodeIds];
 
-    if (!nodeIdArray) {
-      nextNodesData = [nodeLookup.get(nodeIds)?.data || null];
-    } else {
-      const data = [];
-
-      for (const nodeId of nodeIds) {
-        const nodeData = nodeLookup.get(nodeId)?.data;
-
-        if (nodeData) {
-          data.push(nodeData);
-        }
+    for (const nodeId of _nodeIds) {
+      const node = nodeLookup.get(nodeId);
+      if (node) {
+        nextNodesData.push({
+          id: node.id,
+          type: node.type,
+          data: node.data
+        });
       }
-
-      nextNodesData = data;
     }
 
     if (!areNodesDataEqual(nextNodesData, prevNodesData)) {
       prevNodesData = nextNodesData;
-      set(nodeIdArray ? nextNodesData : nextNodesData[0]);
+      set(isArrayOfIds ? nextNodesData : nextNodesData[0] ?? null);
     }
   });
 }