From 9c1f04426eaf6b76b5e128762946ed28b3dfd998 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 10 Dec 2021 11:20:46 +0100
Subject: [PATCH] feat(nodes): add store id as class to handles

* for better identification, add a class to handle according to the current store id

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 src/components/Handle/Handle.vue |  4 +++-
 src/utils/node.ts                | 10 ++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Handle/Handle.vue b/src/components/Handle/Handle.vue
index a328e2dc..4ecab000 100644
--- a/src/components/Handle/Handle.vue
+++ b/src/components/Handle/Handle.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useHandle } from '../../composables'
+import { useHandle, useStore } from '../../composables'
 import { Position, ValidConnectionFunc } from '../../types'
 import { NodeId } from '../../context'
 
@@ -11,6 +11,7 @@ interface HandleProps {
   connectable?: boolean
 }
 
+const store = useStore()
 const props = withDefaults(defineProps<HandleProps>(), {
   id: '',
   type: 'source',
@@ -37,6 +38,7 @@ export default {
     :class="[
       'vue-flow__handle',
       `vue-flow__handle-${props.position}`,
+      `vue-flow__handle-${store.id}`,
       'nodrag',
       {
         source: props.type !== 'target',
diff --git a/src/utils/node.ts b/src/utils/node.ts
index 9e397942..1ff6053f 100644
--- a/src/utils/node.ts
+++ b/src/utils/node.ts
@@ -9,9 +9,7 @@ export const getHandleBoundsByHandleType = (
 ): HandleElement[] | null => {
   const handles = nodeElement.querySelectorAll(selector)
 
-  if (!handles || !handles.length) {
-    return null
-  }
+  if (!handles || !handles.length) return null
 
   const handlesArray = Array.from(handles) as HTMLDivElement[]
 
@@ -31,11 +29,11 @@ export const getHandleBoundsByHandleType = (
   })
 }
 
-export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
+export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number, id?: string) => {
   const bounds = nodeElement.getBoundingClientRect()
 
   return {
-    source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale) ?? undefined,
-    target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale) ?? undefined,
+    source: getHandleBoundsByHandleType(`.source${id ? `.vue-flow__handle-${id}` : ''}`, nodeElement, bounds, scale) ?? undefined,
+    target: getHandleBoundsByHandleType(`.target${id ? `.vue-flow__handle-${id}` : ''}`, nodeElement, bounds, scale) ?? undefined,
   }
 }