feat(core,composables): add useNodesData composable

Author: bcakmakoglu

packages/core/src/composables/useHandleConnections.ts

@@ -16,15 +16,16 @@ interface UseHandleConnectionsParams {
 }
 
 /**
- * Hook to check if a <Handle /> is connected to another <Handle /> and get the connections.
+ * Composable that returns existing connections of a handle
  *
  * @public
- * @param param.type - handle type 'source' or 'target'
- * @param param.nodeId - node id - if not provided, the node id from the NodeIdContext is used
- * @param param.id - the 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
+ * @param UseHandleConnectionsParams
+ * @param UseHandleConnectionsParams.type - handle type `source` or `target`
+ * @param UseHandleConnectionsParams.nodeId - node id - if not provided, the node id from the `useNodeId` (meaning, the context-based injection) is used
+ * @param UseHandleConnectionsParams.id - the handle id (this is required if the node has multiple handles of the same type)
+ * @param UseHandleConnectionsParams.onConnect - gets called when a connection is created
+ * @param UseHandleConnectionsParams.onDisconnect - gets called when a connection is removed
+ * @returns An array of connections
  */
 export function useHandleConnections({
   type,

packages/core/src/composables/useNodesData.ts

@@ -0,0 +1,44 @@
+import { computed } from 'vue'
+import type { GraphNode, Node } from '../types'
+import { useVueFlow } from './useVueFlow'
+
+/**
+ * Composable 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 of data objects
+ */
+export function useNodesData<NodeType extends Node = GraphNode>(nodeId: string): NodeType['data'] | null
+export function useNodesData<NodeType extends Node = GraphNode>(nodeIds: string[]): NodeType['data'][]
+export function useNodesData<NodeType extends Node = GraphNode>(
+  nodeIds: string[],
+  guard: (node: Node) => node is NodeType,
+): NodeType['data'][]
+export function useNodesData(nodeIds: any): any {
+  const { findNode } = useVueFlow()
+
+  return computed({
+    get() {
+      if (!Array.isArray(nodeIds)) {
+        return findNode(nodeIds)?.data || null
+      }
+
+      const data = []
+
+      for (const nodeId of nodeIds) {
+        const nodeData = findNode(nodeId)?.data
+
+        if (nodeData) {
+          data.push(nodeData)
+        }
+      }
+
+      return data
+    },
+    set() {
+      console.warn('You are trying to set node data via useNodesData. This is not supported.')
+    },
+  })
+}

packages/core/src/index.ts

@@ -71,6 +71,7 @@ export { useGetPointerPosition } from './composables/useGetPointerPosition'
 export { useNodeId } from './composables/useNodeId'
 export { useConnection } from './composables/useConnection'
 export { useHandleConnections } from './composables/useHandleConnections'
+export { useNodesData } from './composables/useNodesData'
 
 export { VueFlowError, ErrorCode } from './utils/errors'