feat(core): implement connection radius

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -43,7 +43,7 @@ const EdgeWrapper = defineComponent({
 
     const type = ref<HandleType>('source')
 
-    const elementEdgeUpdaterType = ref<HandleType>('source')
+    const edgeUpdaterType = ref<HandleType>('source')
 
     const mouseEvent = ref<MouseEvent>()
 
@@ -70,12 +70,12 @@ const EdgeWrapper = defineComponent({
       updating = false
     }
 
-    const { onMouseDown } = useHandle({
+    const { handlePointerDown } = useHandle({
       nodeId,
       handleId,
       type,
       isValidConnection: undefined,
-      elementEdgeUpdaterType,
+      edgeUpdaterType,
       onEdgeUpdate,
       onEdgeUpdateEnd,
     })
@@ -84,12 +84,12 @@ const EdgeWrapper = defineComponent({
       nodeId.value = isSourceHandle ? edge.target : edge.source
       handleId.value = (isSourceHandle ? edge.targetHandle : edge.sourceHandle) ?? ''
       type.value = isSourceHandle ? 'target' : 'source'
-      elementEdgeUpdaterType.value = type.value
+      edgeUpdaterType.value = type.value
       mouseEvent.value = event
 
       hooks.emit.updateStart({ event, edge })
 
-      onMouseDown(event)
+      handlePointerDown(event)
     }
 
     const onEdgeClick = (event: MouseEvent) => {

packages/core/src/components/Handle/Handle.vue

@@ -15,7 +15,7 @@ const handle = ref<HTMLDivElement>()
 
 const handleId = $computed(() => id ?? `${nodeId}__handle-${position}`)
 
-const { onMouseDown, onTouchStart, onClick } = useHandle({
+const { handlePointerDown, handleClick } = useHandle({
   nodeId,
   handleId,
   isValidConnection,
@@ -80,6 +80,7 @@ export default {
 <template>
   <div
     ref="handle"
+    :data-id="`${nodeId}-${handleId}-${type}`"
     :data-handleid="handleId"
     :data-nodeid="nodeId"
     :data-handlepos="position"
@@ -98,9 +99,9 @@ export default {
           connectionStartHandle.type === type,
       },
     ]"
-    @mousedown="onMouseDown"
-    @touchstart="onTouchStart"
-    @click="onClick"
+    @mousedown="handlePointerDown"
+    @touchstart="handlePointerDown"
+    @click="handleClick"
   >
     <slot :id="id" />
   </div>