update(edges): Use proper handle bounds

package/src/components/Edges/EdgeWrapper.vue

@@ -64,9 +64,9 @@ const targetNodeHandles = computed(() => {
     return edge.value.targetNode.handleBounds.target
   }
 
-  const targetBounds = edge.value.targetNode.handleBounds.target || []
+  const targetBounds = edge.value.targetNode.handleBounds.target
-  const sourceBounds = edge.value.targetNode.handleBounds.source || []
+  const sourceBounds = edge.value.targetNode.handleBounds.source
-  return [...sourceBounds, ...targetBounds]
+  return targetBounds ?? sourceBounds
 })
 
 const sourceNodeHandles = computed(() => {
@@ -74,17 +74,14 @@ const sourceNodeHandles = computed(() => {
     return edge.value.sourceNode.handleBounds.source
   }
 
-  const targetBounds = edge.value.sourceNode.handleBounds.target || []
+  const targetBounds = edge.value.sourceNode.handleBounds.target
-  const sourceBounds = edge.value.sourceNode.handleBounds.source || []
+  const sourceBounds = edge.value.sourceNode.handleBounds.source
-  return [...sourceBounds, ...targetBounds]
+  return sourceBounds ?? targetBounds
 })
 
-const sourceHandle = controlledComputed(
+const sourceHandle = computed(() => getHandle(sourceNodeHandles.value, edge.value.sourceHandle))
-  () => edge.value.sourceNode.handleBounds,
-  () => getHandle(sourceNodeHandles.value, edge.value.sourceHandle),
-)
-
 const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.value.targetHandle))
+
 const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
 const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
 

package/src/components/Handle/Handle.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { useHandle, useVueFlow } from '../../composables'
-import { Position } from '../../types'
+import { ConnectionMode, Position } from '../../types'
 import { NodeId } from '../../context'
 import type { HandleProps } from '../../types/handle'
 
-const { id, hooks, connectionStartHandle } = useVueFlow()
+const { id, hooks, connectionStartHandle, connectionMode } = useVueFlow()
 const props = withDefaults(defineProps<HandleProps>(), {
   type: 'source',
   position: 'top' as Position,
@@ -13,11 +13,13 @@ const props = withDefaults(defineProps<HandleProps>(), {
 
 const nodeId = inject(NodeId, '')
 
-const handleId = props.id ?? `${nodeId}__handle-${props.position}`
+const handleId = computed(() =>
+  props.id ?? connectionMode.value === ConnectionMode.Strict ? null : `${nodeId}__handle-${props.position}`,
+)
 
 const { onMouseDown, onClick } = useHandle()
 const onMouseDownHandler = (event: MouseEvent) =>
-  onMouseDown(event, handleId, nodeId, props.type === 'target', props.isValidConnection, undefined)
+  onMouseDown(event, handleId.value, nodeId, props.type === 'target', props.isValidConnection, undefined)
 const onClickHandler = (event: MouseEvent) => onClick(event, props.id ?? null, nodeId, props.type, props.isValidConnection)
 </script>
 <script lang="ts">

package/src/utils/edge.ts

@@ -34,13 +34,11 @@ export const getHandlePosition = (position: Position, rect: Rect, handle?: Handl
 export const getHandle = (bounds: HandleElement[] = [], handleId?: string | null): HandleElement | undefined => {
   if (!bounds.length) return undefined
 
-  // there is no handleId when there are no multiple handles/ handles with ids
-  // so we just pick the first one
   let handle
   if (!handleId && bounds.length === 1) handle = bounds[0]
   else if (handleId) handle = bounds.find((d) => d.id === handleId)
 
-  return handle
+  return handle || bounds[0]
 }
 
 export const getEdgePositions = (