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

@@ -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',

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,
   }
 }