From bc88e18f22eae4c641e3ab8a7a214016cbf911e7 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 6 Apr 2022 20:10:43 +0200
Subject: [PATCH] update(edges): Use proper handle bounds

---
 package/src/components/Edges/EdgeWrapper.vue | 19 ++++++++-----------
 package/src/components/Handle/Handle.vue     | 10 ++++++----
 package/src/utils/edge.ts                    |  4 +---
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/package/src/components/Edges/EdgeWrapper.vue b/package/src/components/Edges/EdgeWrapper.vue
index 71f99e57..f9a569b0 100644
--- a/package/src/components/Edges/EdgeWrapper.vue
+++ b/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 sourceBounds = edge.value.targetNode.handleBounds.source || []
-  return [...sourceBounds, ...targetBounds]
+  const targetBounds = edge.value.targetNode.handleBounds.target
+  const sourceBounds = edge.value.targetNode.handleBounds.source
+  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 sourceBounds = edge.value.sourceNode.handleBounds.source || []
-  return [...sourceBounds, ...targetBounds]
+  const targetBounds = edge.value.sourceNode.handleBounds.target
+  const sourceBounds = edge.value.sourceNode.handleBounds.source
+  return sourceBounds ?? targetBounds
 })
 
-const sourceHandle = controlledComputed(
-  () => edge.value.sourceNode.handleBounds,
-  () => getHandle(sourceNodeHandles.value, edge.value.sourceHandle),
-)
-
+const sourceHandle = computed(() => 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))
 
diff --git a/package/src/components/Handle/Handle.vue b/package/src/components/Handle/Handle.vue
index f973816e..68e25146 100644
--- a/package/src/components/Handle/Handle.vue
+++ b/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">
diff --git a/package/src/utils/edge.ts b/package/src/utils/edge.ts
index 4d51cf08..40a59be0 100644
--- a/package/src/utils/edge.ts
+++ b/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 = (