From c24e8b35fa4a4f649ce920b1a71f0d27ca725fe9 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 8 Jun 2024 20:50:34 +0200
Subject: [PATCH 1/5] feat(core): add `useNodeConnections` composable

---
 .../src/composables/useNodeConnections.ts     | 119 ++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 packages/core/src/composables/useNodeConnections.ts

diff --git a/packages/core/src/composables/useNodeConnections.ts b/packages/core/src/composables/useNodeConnections.ts
new file mode 100644
index 000000000..496cc4858
--- /dev/null
+++ b/packages/core/src/composables/useNodeConnections.ts
@@ -0,0 +1,119 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+import { computed, ref, toRef, toValue, watch } from 'vue'
+import type { HandleConnection, HandleElement, HandleType } from '../types'
+import { useNodeId } from './useNodeId'
+import { useVueFlow } from './useVueFlow'
+
+export interface UseNodeConnectionsParams {
+  type: MaybeRefOrGetter<HandleType>
+  nodeId?: MaybeRefOrGetter<string | null>
+  onConnect?: (connections: HandleConnection[]) => void
+  onDisconnect?: (connections: HandleConnection[]) => void
+}
+
+/**
+ * Composable that returns existing connections of a node.
+ *
+ * @public
+ * @param params
+ * @param params.type - handle type `source` or `target`
+ * @param params.nodeId - node id - if not provided, the node id from the `useNodeId` (meaning, the context-based injection) is used
+ * @param params.onConnect - gets called when a connection is created
+ * @param params.onDisconnect - gets called when a connection is removed
+ *
+ * @returns An array of connections
+ */
+export function useNodeConnections(params: UseNodeConnectionsParams): ComputedRef<HandleConnection[]> {
+  const { type, nodeId, onConnect, onDisconnect } = params
+
+  const { connectionLookup, findNode } = useVueFlow()
+
+  const _nodeId = useNodeId()
+
+  const currentNodeId = toRef(() => toValue(nodeId) ?? _nodeId)
+
+  const handleType = toRef(() => toValue(type))
+
+  const node = computed(() => findNode(currentNodeId.value))
+
+  const handleIds = computed(() => {
+    if (!node.value) {
+      return []
+    }
+
+    const handles: HandleElement['id'][] = []
+    for (const handle of node.value?.handleBounds?.[handleType.value] ?? []) {
+      handles.push(handle.id)
+    }
+
+    return handles
+  })
+
+  const prevConnections = ref<Map<string, HandleConnection> | null>(null)
+
+  const connectionsFromLookup = computed(() => {
+    const nodeConnections = [] as Map<string, HandleConnection>[]
+
+    for (const handleId of handleIds.value) {
+      const connectionMap = connectionLookup.value.get(`${currentNodeId.value}-${handleType.value}-${handleId}`)
+      if (connectionMap) {
+        nodeConnections.push(connectionMap)
+      }
+    }
+
+    return nodeConnections
+  })
+
+  watch(
+    [connectionsFromLookup, () => typeof onConnect !== 'undefined', () => typeof onDisconnect !== 'undefined'],
+    ([currentConnections]) => {
+      if (!currentConnections) {
+        return
+      }
+
+      const newConnections = new Map<string, HandleConnection>()
+
+      for (const connectionMap of currentConnections) {
+        for (const [key, connection] of connectionMap) {
+          newConnections.set(key, connection)
+        }
+      }
+
+      if (!prevConnections.value) {
+        prevConnections.value = new Map(newConnections)
+        return
+      }
+
+      const prevConnectionsValue = prevConnections.value
+
+      const addedConnections = Array.from(newConnections.keys()).filter((key) => !prevConnectionsValue.has(key))
+
+      const removedConnections = Array.from(prevConnectionsValue.keys()).filter((key) => !newConnections.has(key))
+
+      if (addedConnections.length && onConnect) {
+        const added = addedConnections.map((key) => newConnections.get(key)!)
+        onConnect(added)
+      }
+
+      if (removedConnections.length && onDisconnect) {
+        const removed = removedConnections.map((key) => prevConnectionsValue.get(key)!)
+        onDisconnect(removed)
+      }
+
+      prevConnections.value = new Map(newConnections)
+    },
+    { immediate: true },
+  )
+
+  return computed(() => {
+    const connections = [] as HandleConnection[]
+
+    for (const connectionMap of connectionsFromLookup.value) {
+      for (const connection of connectionMap.values()) {
+        connections.push(connection)
+      }
+    }
+
+    return connections
+  })
+}

From d8416842b14776b2d88493bf71c0a7c4106dea86 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 9 Jun 2024 08:50:40 +0200
Subject: [PATCH 2/5] chore(core): export `useNodeConnections`

---
 packages/core/src/composables/useNodeConnections.ts | 3 ++-
 packages/core/src/index.ts                          | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/composables/useNodeConnections.ts b/packages/core/src/composables/useNodeConnections.ts
index 496cc4858..9ef53ab23 100644
--- a/packages/core/src/composables/useNodeConnections.ts
+++ b/packages/core/src/composables/useNodeConnections.ts
@@ -12,7 +12,8 @@ export interface UseNodeConnectionsParams {
 }
 
 /**
- * Composable that returns existing connections of a node.
+ * Composable that returns existing connections of a node by handle type.
+ * This is useful when you want to get all connections of a node by a specific handle type.
  *
  * @public
  * @param params
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 371c4dfa9..782f2ed2b 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -70,6 +70,7 @@ export { useGetPointerPosition } from './composables/useGetPointerPosition'
 export { useNodeId } from './composables/useNodeId'
 export { useConnection } from './composables/useConnection'
 export { useHandleConnections } from './composables/useHandleConnections'
+export { useNodeConnections } from './composables/useNodeConnections'
 export { useNodesData } from './composables/useNodesData'
 export { useEdgesData } from './composables/useEdgesData'
 export { useNodesInitialized } from './composables/useNodesInitialized'

From 91eca2333cdea3a489a332e3ce1b83e580a8ff43 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 9 Jun 2024 09:06:41 +0200
Subject: [PATCH 3/5] chore(docs): update math example

---
 docs/examples/math/ResultNode.vue     | 12 ++++++------
 examples/vite/src/Math/ResultNode.vue | 11 +++++------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/docs/examples/math/ResultNode.vue b/docs/examples/math/ResultNode.vue
index 2e15a807d..999f1ab82 100644
--- a/docs/examples/math/ResultNode.vue
+++ b/docs/examples/math/ResultNode.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed } from 'vue'
-import { Handle, Position, useHandleConnections, useNodesData, useVueFlow } from '@vue-flow/core'
+import { Handle, Position, useHandleConnections, useNodeConnections, useNodesData } from '@vue-flow/core'
 
 defineProps(['id'])
 
@@ -11,8 +11,6 @@ const mathFunctions = {
   '/': (a, b) => a / b,
 }
 
-const { getConnectedEdges } = useVueFlow()
-
 // Get the source connections of the result node. In this example it's only one operator node.
 const sourceConnections = useHandleConnections({
   // type target means all connections where *this* node is the target
@@ -21,9 +19,10 @@ const sourceConnections = useHandleConnections({
 })
 
 // Get the source connections of the operator node
-const operatorSourceConnections = computed(() =>
-  getConnectedEdges(sourceConnections.value[0].source).filter((e) => e.source !== sourceConnections.value[0].source),
-)
+const operatorSourceConnections = useNodeConnections({
+  type: 'target',
+  nodeId: () => sourceConnections.value[0]?.source,
+})
 
 const operatorData = useNodesData(() => sourceConnections.value.map((connection) => connection.source))
 
@@ -50,6 +49,7 @@ const result = computed(() => {
 </script>
 
 <template>
+  {{ operatorSourceConnections }}
   <div class="calculation">
     <template v-for="(value, i) in valueData" :key="`${value.id}-${value.data}`">
       <span>
diff --git a/examples/vite/src/Math/ResultNode.vue b/examples/vite/src/Math/ResultNode.vue
index 495e44fe9..b9c9fea94 100644
--- a/examples/vite/src/Math/ResultNode.vue
+++ b/examples/vite/src/Math/ResultNode.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import type { GraphNode } from '@vue-flow/core'
-import { Handle, Position, useHandleConnections, useNodesData, useVueFlow } from '@vue-flow/core'
+import { Handle, Position, useHandleConnections, useNodeConnections, useNodesData } from '@vue-flow/core'
 import type { OperatorNodeData, ValueNodeData } from './types'
 import { mathFunctions } from './utils'
 
 defineProps<{ id: string }>()
 
-const { getConnectedEdges } = useVueFlow()
-
 // Get the source connections of the result node. In this example it's only one operator node.
 const sourceConnections = useHandleConnections({
   // type target means all connections where *this* node is the target
@@ -16,9 +14,10 @@ const sourceConnections = useHandleConnections({
 })
 
 // Get the source connections of the operator node
-const operatorSourceConnections = computed(() =>
-  getConnectedEdges(sourceConnections.value[0].source).filter((e) => e.source !== sourceConnections.value[0].source),
-)
+const operatorSourceConnections = useNodeConnections({
+  type: 'target',
+  nodeId: () => sourceConnections.value[0]?.source,
+})
 
 const operatorData = useNodesData<GraphNode<OperatorNodeData>>(() =>
   sourceConnections.value.map((connection) => connection.source),

From c0b0d143613de105f1b318c56b2468325c4a4c74 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 9 Jun 2024 09:22:03 +0200
Subject: [PATCH 4/5] docs: add guide for `useNodeConnections`

---
 docs/src/guide/composables.md | 41 +++++++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/docs/src/guide/composables.md b/docs/src/guide/composables.md
index 63d02df28..1714575cd 100644
--- a/docs/src/guide/composables.md
+++ b/docs/src/guide/composables.md
@@ -70,13 +70,14 @@ onInit((instance) => {
 
 ## [useHandleConnections](/typedocs/functions/useHandleConnections)
 
-`useHandleConnections` provides you with an array of connections that are connected to the node you pass to it.
+`useHandleConnections` provides you with an array of connections that are connected to specific `<Handle>`.
 
 ```ts
-import { useHandleConnections } from '@vue-flow/core'
+import { type HandleConnection, useHandleConnections } from '@vue-flow/core'
 
 // get all connections where this node is the target (incoming connections)
 const targetConnections = useHandleConnections({
+  // type is required
   type: 'target',
 })
 
@@ -89,10 +90,42 @@ const connections = useHandleConnections({
   id: 'handle-1', // you can explicitly pass a handle id if there are multiple handles of the same type
   nodeId: '1', // you can explicitly pass a node id, otherwise it's used from the `NodeId  injection
   type: 'target',
-  onConnect: (connections: Connection[]) => {
+  onConnect: (connections: HandleConnection[]) => {
     // do something with the connections
   },
-  onDisconnect: (connections: Connection[]) => {
+  onDisconnect: (connections: HandleConnection[]) => {
+    // do something with the connections
+  },
+})
+```
+
+## [useNodeConnections](/typedocs/functions/useNodeConnections)
+
+`useNodeConnections` provides you with an array of connections that are connected to a specific node.
+This composable is especially useful when you want to get all connections (of either type `source` or `target`) of a node 
+instead of just the connections of a specific `<Handle>`.
+
+```ts
+import { type HandleConnection, useNodeConnections } from '@vue-flow/core'
+
+// get all connections where this node is the target (incoming connections)
+const targetConnections = useNodeConnections({
+  // type is required
+  type: 'target',
+})
+
+// get all connections where this node is the source (outgoing connections)
+const sourceConnections = useNodeConnections({
+  type: 'source',
+})
+
+const connections = useNodeConnections({
+  nodeId: '1', // you can explicitly pass a node id, otherwise it's used from the `NodeId  injection
+  type: 'target',
+  onConnect: (connections: HandleConnection[]) => {
+    // do something with the connections
+  },
+  onDisconnect: (connections: HandleConnection[]) => {
     // do something with the connections
   },
 })

From b6d46ebe5dd374f595d2fa5db79f37bdd789f684 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 9 Jun 2024 09:48:52 +0200
Subject: [PATCH 5/5] chore(changeset): add

---
 .changeset/gentle-owls-grin.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/gentle-owls-grin.md

diff --git a/.changeset/gentle-owls-grin.md b/.changeset/gentle-owls-grin.md
new file mode 100644
index 000000000..d4a7d5ccd
--- /dev/null
+++ b/.changeset/gentle-owls-grin.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Add `useNodeConnections` composable