From af93fd201fbb9fab5c851805913bead829e2f542 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 19 Jun 2024 11:49:30 +0200
Subject: [PATCH 1/9] refactor(core): replace `until` watcher with `onMounted`
 in handle cmp (#1488)

---
 .../core/src/components/Handle/Handle.vue     | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/packages/core/src/components/Handle/Handle.vue b/packages/core/src/components/Handle/Handle.vue
index c80b1ec2c..aa67fac0e 100644
--- a/packages/core/src/components/Handle/Handle.vue
+++ b/packages/core/src/components/Handle/Handle.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { until } from '@vueuse/core'
-import { computed, onUnmounted, ref, toRef } from 'vue'
+import { computed, onMounted, onUnmounted, ref, toRef } from 'vue'
 import type { HandleProps } from '../../types'
 import { Position } from '../../types'
 import { useHandle, useNode, useVueFlow } from '../../composables'
@@ -97,38 +96,42 @@ const isConnectable = computed(() => {
 
 // todo: remove this and have users handle this themselves using `updateNodeInternals`
 // set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted)
-until(() => !!node.dimensions.width && !!node.dimensions.height)
-  .toBe(true, { flush: 'post' })
-  .then(() => {
-    const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId)
+onMounted(() => {
+  // if the node isn't initialized yet, we can't set up the handle bounds
+  // the handle bounds will be automatically set up when the node is initialized (`updateNodeDimensions`)
+  if (!node.dimensions.width || !node.dimensions.height) {
+    return
+  }
 
-    if (!vueFlowRef.value || existingBounds) {
-      return
-    }
+  const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId)
 
-    const viewportNode = vueFlowRef.value.querySelector('.vue-flow__transformationpane')
+  if (!vueFlowRef.value || existingBounds) {
+    return
+  }
 
-    if (!nodeEl.value || !handle.value || !viewportNode || !handleId) {
-      return
-    }
+  const viewportNode = vueFlowRef.value.querySelector('.vue-flow__transformationpane')
 
-    const nodeBounds = nodeEl.value.getBoundingClientRect()
+  if (!nodeEl.value || !handle.value || !viewportNode || !handleId) {
+    return
+  }
+
+  const nodeBounds = nodeEl.value.getBoundingClientRect()
 
-    const handleBounds = handle.value.getBoundingClientRect()
+  const handleBounds = handle.value.getBoundingClientRect()
 
-    const style = window.getComputedStyle(viewportNode)
-    const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
+  const style = window.getComputedStyle(viewportNode)
+  const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform)
 
-    const nextBounds = {
-      id: handleId,
-      position,
-      x: (handleBounds.left - nodeBounds.left) / zoom,
-      y: (handleBounds.top - nodeBounds.top) / zoom,
-      ...getDimensions(handle.value),
-    }
+  const nextBounds = {
+    id: handleId,
+    position,
+    x: (handleBounds.left - nodeBounds.left) / zoom,
+    y: (handleBounds.top - nodeBounds.top) / zoom,
+    ...getDimensions(handle.value),
+  }
 
-    node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds]
-  })
+  node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds]
+})
 
 onUnmounted(() => {
   // clean up node internals

From 6d98b4100deaf974f3e7d9c42c1ead14c4c5628c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 19 Jun 2024 18:17:15 +0200
Subject: [PATCH 2/9] refactor(core): allow passing target to `useKeyPress`

---
 packages/core/src/composables/useKeyPress.ts | 36 +++++++-------------
 packages/core/src/composables/useWindow.ts   | 14 ++++----
 2 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/packages/core/src/composables/useKeyPress.ts b/packages/core/src/composables/useKeyPress.ts
index 1c194cb39..0a55c75f0 100644
--- a/packages/core/src/composables/useKeyPress.ts
+++ b/packages/core/src/composables/useKeyPress.ts
@@ -1,11 +1,12 @@
 import type { MaybeRefOrGetter } from 'vue'
-import { ref, toValue, watch } from 'vue'
+import { onMounted, ref, toValue, watch } from 'vue'
 import type { KeyFilter, KeyPredicate } from '@vueuse/core'
 import { onKeyStroke, useEventListener } from '@vueuse/core'
 import { useWindow } from './useWindow'
 
 export interface UseKeyPressOptions {
   actInsideInputWithModifier?: MaybeRefOrGetter<boolean>
+  target?: MaybeRefOrGetter<EventTarget>
 }
 
 export function isInputDOMNode(event: KeyboardEvent): boolean {
@@ -68,22 +69,19 @@ function useKeyOrCode(code: string, keysToWatch: string | string[]) {
   return keysToWatch.includes(code) ? 'code' : 'key'
 }
 
+const window = useWindow()
+
 /**
- * Reactive key press state
+ * Composable that returns a boolean value if a key is pressed
  *
- * todo: make this public?
  * @internal
- * @param keyFilter - Can be a boolean, a string or an array of strings. If it's a boolean, it will always return that value. If it's a string, it will return true if the key is pressed. If it's an array of strings, it will return true if any of the keys are pressed, or a combination is pressed (e.g. ['ctrl+a', 'ctrl+b'])
- * @param onChange - Callback function that will be called when the key state changes
+ * @param keyFilter - Can be a boolean, a string, an array of strings or a function that returns a boolean. If it's a boolean, it will act as if the key is always pressed. If it's a string, it will return true if a key matching that string is pressed. If it's an array of strings, it will return true if any of the strings match a key being pressed, or a combination (e.g. ['ctrl+a', 'ctrl+b'])
  * @param options - Options object
  */
 export function useKeyPress(
   keyFilter: MaybeRefOrGetter<KeyFilter | null>,
-  onChange?: (keyPressed: boolean) => void,
-  options: UseKeyPressOptions = { actInsideInputWithModifier: true },
+  options: UseKeyPressOptions = { actInsideInputWithModifier: true, target: window },
 ) {
-  const window = useWindow()
-
   const isPressed = ref(toValue(keyFilter) === true)
 
   let modifierPressed = false
@@ -92,12 +90,6 @@ export function useKeyPress(
 
   let currentFilter = createKeyFilterFn(toValue(keyFilter))
 
-  watch(isPressed, (isKeyPressed, wasPressed) => {
-    if (isKeyPressed !== wasPressed) {
-      onChange?.(isKeyPressed)
-    }
-  })
-
   watch(
     () => toValue(keyFilter),
     (nextKeyFilter, previousKeyFilter) => {
@@ -113,10 +105,8 @@ export function useKeyPress(
     },
   )
 
-  useEventListener(window, 'blur', () => {
-    if (toValue(keyFilter) !== true) {
-      isPressed.value = false
-    }
+  onMounted(() => {
+    useEventListener(window, ['blur', 'contextmenu'], reset)
   })
 
   onKeyStroke(
@@ -134,7 +124,7 @@ export function useKeyPress(
 
       isPressed.value = true
     },
-    { eventName: 'keydown' },
+    { eventName: 'keydown', target: options.target },
   )
 
   onKeyStroke(
@@ -150,11 +140,9 @@ export function useKeyPress(
         reset()
       }
     },
-    { eventName: 'keyup' },
+    { eventName: 'keyup', target: options.target },
   )
 
-  return isPressed
-
   function reset() {
     modifierPressed = false
 
@@ -184,4 +172,6 @@ export function useKeyPress(
 
     return keyFilter
   }
+
+  return isPressed
 }
diff --git a/packages/core/src/composables/useWindow.ts b/packages/core/src/composables/useWindow.ts
index 812e140ba..8c2a3fc12 100644
--- a/packages/core/src/composables/useWindow.ts
+++ b/packages/core/src/composables/useWindow.ts
@@ -8,12 +8,12 @@ type UseWindow = Window & typeof globalThis & { chrome?: any }
 export function useWindow(): UseWindow {
   if (typeof window !== 'undefined') {
     return window as UseWindow
-  } else {
-    return {
-      chrome: false,
-      addEventListener(..._: Parameters<Window['addEventListener']>) {
-        // do nothing
-      },
-    } as UseWindow
   }
+
+  return {
+    chrome: false,
+    addEventListener(..._: Parameters<Window['addEventListener']>) {
+      // do nothing
+    },
+  } as UseWindow
 }

From f5bdb39f61f5641f5c7b2537a6062e13b1a7ce79 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 19 Jun 2024 18:17:57 +0200
Subject: [PATCH 3/9] refactor(core): use pointer evts in pane and prevent
 cancel of selection

---
 packages/core/src/container/Pane/Pane.vue     | 124 ++++++++----------
 .../core/src/container/Viewport/Viewport.vue  |   1 +
 2 files changed, 57 insertions(+), 68 deletions(-)

diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue
index aae5f9b1a..e4bf28b38 100644
--- a/packages/core/src/container/Pane/Pane.vue
+++ b/packages/core/src/container/Pane/Pane.vue
@@ -1,14 +1,13 @@
 <script lang="ts" setup>
-import { ref, toRef } from 'vue'
+import { ref, toRef, watch } from 'vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
-import type { GraphNode } from '../../types'
-import { SelectionMode } from '../../types'
+import { type GraphNode, SelectionMode } from '../../types'
 import { useKeyPress, useVueFlow } from '../../composables'
 import { getConnectedEdges, getNodesInside } from '../../utils'
 import { getMousePosition } from './utils'
 
-const { isSelecting } = defineProps<{ isSelecting: boolean }>()
+const { isSelecting, selectionKeyPressed } = defineProps<{ isSelecting: boolean; selectionKeyPressed: boolean }>()
 
 const {
   vueFlowRef,
@@ -43,41 +42,44 @@ const containerBounds = ref<DOMRect>()
 
 const hasActiveSelection = toRef(() => elementsSelectable.value && (isSelecting || userSelectionActive.value))
 
-useKeyPress(
-  deleteKeyCode,
-  (keyPressed) => {
-    if (!keyPressed) {
-      return
-    }
+// Used to prevent click events when the user lets go of the selectionKey during a selection
+const selectionInProgress = ref(false)
 
-    const nodesToRemove: GraphNode[] = []
-    for (const node of getNodes.value) {
-      if (!node.selected && node.parentNode && nodesToRemove.some((n) => n.id === node.parentNode)) {
-        nodesToRemove.push(node)
-      } else if (node.selected) {
-        nodesToRemove.push(node)
-      }
-    }
+const deleteKeyPressed = useKeyPress(deleteKeyCode, { actInsideInputWithModifier: false })
 
-    if (nodesToRemove || getSelectedEdges.value) {
-      if (getSelectedEdges.value.length > 0) {
-        removeEdges(getSelectedEdges.value)
-      }
+const multiSelectKeyPressed = useKeyPress(multiSelectionKeyCode)
 
-      if (nodesToRemove.length > 0) {
-        removeNodes(nodesToRemove)
-      }
+watch(deleteKeyPressed, (isKeyPressed) => {
+  if (!isKeyPressed) {
+    return
+  }
+
+  const nodesToRemove: GraphNode[] = []
+  for (const node of getNodes.value) {
+    if (!node.selected && node.parentNode && nodesToRemove.some((n) => n.id === node.parentNode)) {
+      nodesToRemove.push(node)
+    } else if (node.selected) {
+      nodesToRemove.push(node)
+    }
+  }
 
-      nodesSelectionActive.value = false
+  if (nodesToRemove || getSelectedEdges.value) {
+    if (getSelectedEdges.value.length > 0) {
+      removeEdges(getSelectedEdges.value)
+    }
 
-      removeSelectedElements()
+    if (nodesToRemove.length > 0) {
+      removeNodes(nodesToRemove)
     }
-  },
-  { actInsideInputWithModifier: false },
-)
 
-useKeyPress(multiSelectionKeyCode, (keyPressed) => {
-  multiSelectionActive.value = keyPressed
+    nodesSelectionActive.value = false
+
+    removeSelectedElements()
+  }
+})
+
+watch(multiSelectKeyPressed, (isKeyPressed) => {
+  multiSelectionActive.value = isKeyPressed
 })
 
 function resetUserSelection() {
@@ -89,7 +91,8 @@ function resetUserSelection() {
 }
 
 function onClick(event: MouseEvent) {
-  if (event.target !== container.value || hasActiveSelection.value) {
+  if (selectionInProgress.value || event.target !== container.value || hasActiveSelection.value) {
+    selectionInProgress.value = false
     return
   }
 
@@ -121,8 +124,9 @@ function onWheel(event: WheelEvent) {
   emits.paneScroll(event)
 }
 
-function onMouseDown(event: MouseEvent) {
-  containerBounds.value = vueFlowRef.value!.getBoundingClientRect()
+function onPointerDown(event: PointerEvent) {
+  containerBounds.value = vueFlowRef.value?.getBoundingClientRect()
+  container.value?.setPointerCapture(event.pointerId)
 
   if (
     !hasActiveSelection.value ||
@@ -153,26 +157,19 @@ function onMouseDown(event: MouseEvent) {
   emits.selectionStart(event)
 }
 
-function onMouseMove(event: MouseEvent) {
+function onPointerMove(event: PointerEvent) {
   if (!hasActiveSelection.value) {
     return emits.paneMouseMove(event)
   }
 
-  if (!isSelecting || !containerBounds.value || !userSelectionRect.value) {
+  if (!containerBounds.value || !userSelectionRect.value) {
     return
   }
 
-  if (!userSelectionActive.value) {
-    userSelectionActive.value = true
-  }
-
-  if (nodesSelectionActive.value) {
-    nodesSelectionActive.value = false
-  }
+  selectionInProgress.value = true
 
   const mousePos = getMousePosition(event, containerBounds.value)
-  const startX = userSelectionRect.value.startX ?? 0
-  const startY = userSelectionRect.value.startY ?? 0
+  const { startX = 0, startY = 0 } = userSelectionRect.value
 
   const nextUserSelectRect = {
     ...userSelectionRect.value,
@@ -187,6 +184,7 @@ function onMouseMove(event: MouseEvent) {
     userSelectionRect.value,
     viewport.value,
     selectionMode.value === SelectionMode.Partial,
+    true,
   )
 
   const selectedEdges = getConnectedEdges(selectedNodes, getEdges.value)
@@ -199,14 +197,12 @@ function onMouseMove(event: MouseEvent) {
   addSelectedElements([...selectedNodes, ...selectedEdges])
 }
 
-function onMouseUp(event: MouseEvent) {
-  if (!hasActiveSelection.value) {
+function onPointerUp(event: PointerEvent) {
+  if (!hasActiveSelection.value || event.button !== 0) {
     return
   }
 
-  if (event.button !== 0) {
-    return
-  }
+  container.value?.releasePointerCapture(event.pointerId)
 
   // We only want to trigger click functions when in selection mode if
   // the user did not move the mouse.
@@ -219,22 +215,15 @@ function onMouseUp(event: MouseEvent) {
   resetUserSelection()
 
   emits.selectionEnd(event)
-}
-
-function onMouseLeave(event: MouseEvent) {
-  if (!hasActiveSelection.value) {
-    return emits.paneMouseLeave(event)
-  }
 
-  if (userSelectionActive.value) {
-    nodesSelectionActive.value = prevSelectedNodesCount.value > 0
-    emits.selectionEnd?.(event)
+  // If the user kept holding the selectionKey during the selection,
+  // we need to reset the selectionInProgress, so the next click event is not prevented
+  if (selectionKeyPressed) {
+    selectionInProgress.value = false
   }
-
-  resetUserSelection()
 }
 
-function onMouseEnter(event: MouseEvent) {
+function onPointerEnter(event: PointerEvent) {
   if (hasActiveSelection.value) {
     return
   }
@@ -258,11 +247,10 @@ export default {
     @click="onClick"
     @contextmenu="onContextMenu"
     @wheel.passive="onWheel"
-    @mouseenter="onMouseEnter"
-    @mousedown="onMouseDown"
-    @mousemove="onMouseMove"
-    @mouseup="onMouseUp"
-    @mouseleave="onMouseLeave"
+    @pointerenter="onPointerEnter"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
   >
     <slot />
     <UserSelection v-if="userSelectionActive && userSelectionRect" :user-selection-rect="userSelectionRect" />
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index bf03dc650..b993402c3 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -403,6 +403,7 @@ export default {
   <div ref="viewportRef" class="vue-flow__viewport vue-flow__container">
     <Pane
       :is-selecting="isSelecting"
+      :selection-key-pressed="selectionKeyPressed"
       :class="{ connecting: !!connectionStartHandle, dragging: paneDragging, draggable: shouldPanOnDrag }"
     >
       <Transform>

From f85ea42d591f75d714e864f9114ce3e22cd0cd99 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 19 Jun 2024 18:18:58 +0200
Subject: [PATCH 4/9] chore(changeset): add

---
 .changeset/breezy-chefs-add.md     | 5 +++++
 .changeset/clever-cougars-guess.md | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/breezy-chefs-add.md
 create mode 100644 .changeset/clever-cougars-guess.md

diff --git a/.changeset/breezy-chefs-add.md b/.changeset/breezy-chefs-add.md
new file mode 100644
index 000000000..81f206367
--- /dev/null
+++ b/.changeset/breezy-chefs-add.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Allow passing event target to `useKeyPress`
diff --git a/.changeset/clever-cougars-guess.md b/.changeset/clever-cougars-guess.md
new file mode 100644
index 000000000..a156c12a2
--- /dev/null
+++ b/.changeset/clever-cougars-guess.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Use pointer events to capture interactions on `Pane` cmp and prevent selections from being cancelled when moving outside of the `Pane` while holding selection key

From 2dff0dd85d2cb26f563c23a22a08b3d430309e74 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 19 Jun 2024 18:21:10 +0200
Subject: [PATCH 5/9] feat(core): make `useKeyPress` public and export it

---
 .changeset/weak-timers-think.md              | 5 +++++
 packages/core/src/composables/useKeyPress.ts | 2 +-
 packages/core/src/index.ts                   | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/weak-timers-think.md

diff --git a/.changeset/weak-timers-think.md b/.changeset/weak-timers-think.md
new file mode 100644
index 000000000..c9fd56a78
--- /dev/null
+++ b/.changeset/weak-timers-think.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Make `useKeyPress` public and export it
diff --git a/packages/core/src/composables/useKeyPress.ts b/packages/core/src/composables/useKeyPress.ts
index 0a55c75f0..c1051a7d6 100644
--- a/packages/core/src/composables/useKeyPress.ts
+++ b/packages/core/src/composables/useKeyPress.ts
@@ -74,7 +74,7 @@ const window = useWindow()
 /**
  * Composable that returns a boolean value if a key is pressed
  *
- * @internal
+ * @public
  * @param keyFilter - Can be a boolean, a string, an array of strings or a function that returns a boolean. If it's a boolean, it will act as if the key is always pressed. If it's a string, it will return true if a key matching that string is pressed. If it's an array of strings, it will return true if any of the strings match a key being pressed, or a combination (e.g. ['ctrl+a', 'ctrl+b'])
  * @param options - Options object
  */
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 25cb57e81..371c4dfa9 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -73,6 +73,7 @@ export { useHandleConnections } from './composables/useHandleConnections'
 export { useNodesData } from './composables/useNodesData'
 export { useEdgesData } from './composables/useEdgesData'
 export { useNodesInitialized } from './composables/useNodesInitialized'
+export { useKeyPress } from './composables/useKeyPress'
 
 export { VueFlowError, ErrorCode, isErrorOfType } from './utils/errors'
 

From 09c32c51b13d3188b3339dcb3eb985474fd770a1 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 19 Jun 2024 21:25:33 +0200
Subject: [PATCH 6/9] refactor(core): calculate correct handle pos in handle
 lookup (#1494)

* refactor(core): use `getHandlePosition` to calculate handle pos

* chore(changeset): add
---
 .changeset/giant-mayflies-study.md            |  5 +++
 .../src/components/ConnectionLine/index.ts    |  6 +--
 packages/core/src/utils/edge.ts               | 38 ++++++-------------
 packages/core/src/utils/general.ts            |  9 +++++
 packages/core/src/utils/handle.ts             |  8 ++--
 5 files changed, 32 insertions(+), 34 deletions(-)
 create mode 100644 .changeset/giant-mayflies-study.md

diff --git a/.changeset/giant-mayflies-study.md b/.changeset/giant-mayflies-study.md
new file mode 100644
index 000000000..6238df66c
--- /dev/null
+++ b/.changeset/giant-mayflies-study.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Calculate correct handle position in handle lookup
diff --git a/packages/core/src/components/ConnectionLine/index.ts b/packages/core/src/components/ConnectionLine/index.ts
index 0287444df..038cafffa 100644
--- a/packages/core/src/components/ConnectionLine/index.ts
+++ b/packages/core/src/components/ConnectionLine/index.ts
@@ -74,11 +74,7 @@ const ConnectionLine = defineComponent({
 
       const fromHandle = (startHandleId ? handleBounds.find((d) => d.id === startHandleId) : handleBounds[0]) ?? null
       const fromPosition = fromHandle?.position || Position.Top
-      const { x: fromX, y: fromY } = getHandlePosition(
-        fromPosition,
-        { ...fromNode.value.dimensions, ...fromNode.value.computedPosition },
-        fromHandle,
-      )
+      const { x: fromX, y: fromY } = getHandlePosition(fromPosition, fromNode.value, fromHandle)
 
       let toHandle: HandleElement | null = null
       if (toNode.value && connectionEndHandle.value?.handleId) {
diff --git a/packages/core/src/utils/edge.ts b/packages/core/src/utils/edge.ts
index 812849d0f..f80f50caf 100644
--- a/packages/core/src/utils/edge.ts
+++ b/packages/core/src/utils/edge.ts
@@ -1,12 +1,12 @@
-import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, Rect, ViewportTransform, XYPosition } from '../types'
+import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, ViewportTransform, XYPosition } from '../types'
 import { Position } from '../types'
 import { rectToBox } from '.'
 
-export function getHandlePosition(position: Position, rect: Rect, handle: HandleElement | null): XYPosition {
-  const x = (handle?.x ?? 0) + rect.x
-  const y = (handle?.y ?? 0) + rect.y
-  const width = handle?.width ?? rect.width
-  const height = handle?.height ?? rect.height
+export function getHandlePosition(position: Position, node: GraphNode, handle: HandleElement | null): XYPosition {
+  const x = (handle?.x ?? 0) + node.computedPosition.x
+  const y = (handle?.y ?? 0) + node.computedPosition.y
+  const width = handle?.width ?? node.dimensions.width
+  const height = handle?.height ?? node.dimensions.height
 
   switch (position) {
     case Position.Top:
@@ -48,28 +48,14 @@ export function getEdgePositions(
   targetHandle: HandleElement | null,
   targetPosition: Position,
 ): EdgePositions {
-  const sourceHandlePos = getHandlePosition(
-    sourcePosition,
-    {
-      ...sourceNode.dimensions,
-      ...sourceNode.computedPosition,
-    },
-    sourceHandle,
-  )
-  const targetHandlePos = getHandlePosition(
-    targetPosition,
-    {
-      ...targetNode.dimensions,
-      ...targetNode.computedPosition,
-    },
-    targetHandle,
-  )
+  const { x: sourceX, y: sourceY } = getHandlePosition(sourcePosition, sourceNode, sourceHandle)
+  const { x: targetX, y: targetY } = getHandlePosition(targetPosition, targetNode, targetHandle)
 
   return {
-    sourceX: sourceHandlePos.x,
-    sourceY: sourceHandlePos.y,
-    targetX: targetHandlePos.x,
-    targetY: targetHandlePos.y,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
   }
 }
 
diff --git a/packages/core/src/utils/general.ts b/packages/core/src/utils/general.ts
index 77c11e669..53eb4b842 100644
--- a/packages/core/src/utils/general.ts
+++ b/packages/core/src/utils/general.ts
@@ -1,3 +1,5 @@
+import type { GraphNode } from '../types'
+
 export function isMouseEvent(event: MouseEvent | TouchEvent): event is MouseEvent {
   return 'clientX' in event
 }
@@ -14,3 +16,10 @@ export function getEventPosition(event: MouseEvent | TouchEvent, bounds?: DOMRec
 }
 
 export const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0
+
+export function getNodeDimensions(node: GraphNode): { width: number; height: number } {
+  return {
+    width: node.dimensions?.width ?? node.width ?? 0,
+    height: node.dimensions?.height ?? node.height ?? 0,
+  }
+}
diff --git a/packages/core/src/utils/handle.ts b/packages/core/src/utils/handle.ts
index 1b1af4501..2082e1ebc 100644
--- a/packages/core/src/utils/handle.ts
+++ b/packages/core/src/utils/handle.ts
@@ -12,7 +12,7 @@ import type {
   ValidHandleResult,
   XYPosition,
 } from '../types'
-import { getEventPosition } from '.'
+import { getEventPosition, getHandlePosition } from '.'
 
 export interface ConnectionHandle extends XYPosition, Dimensions {
   id: string | null
@@ -43,12 +43,14 @@ export function getHandles(
 ): ConnectionHandle[] {
   return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
     if (`${node.id}-${h.id}-${type}` !== currentHandle) {
+      const handlePosition = getHandlePosition(h.position, node, h)
+
       res.push({
         id: h.id || null,
         type,
         nodeId: node.id,
-        x: (node.computedPosition?.x ?? 0) + h.x + h.width / 2,
-        y: (node.computedPosition?.y ?? 0) + h.y + h.height / 2,
+        x: handlePosition.x,
+        y: handlePosition.y,
         width: h.width,
         height: h.height,
       })

From 7e61ac1f2799e35bb0de785bb444dfa3239817a4 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 20 Jun 2024 10:48:35 +0200
Subject: [PATCH 7/9] chore(core): cleanup handle utils (#1497)

---
 .../src/components/ConnectionLine/index.ts    |  2 +-
 .../core/src/components/Edges/EdgeWrapper.ts  | 17 ++++------
 packages/core/src/types/handle.ts             |  4 +--
 packages/core/src/utils/edge.ts               | 33 +++++--------------
 packages/core/src/utils/handle.ts             | 31 ++++++++---------
 5 files changed, 30 insertions(+), 57 deletions(-)

diff --git a/packages/core/src/components/ConnectionLine/index.ts b/packages/core/src/components/ConnectionLine/index.ts
index 038cafffa..2565b49d3 100644
--- a/packages/core/src/components/ConnectionLine/index.ts
+++ b/packages/core/src/components/ConnectionLine/index.ts
@@ -74,7 +74,7 @@ const ConnectionLine = defineComponent({
 
       const fromHandle = (startHandleId ? handleBounds.find((d) => d.id === startHandleId) : handleBounds[0]) ?? null
       const fromPosition = fromHandle?.position || Position.Top
-      const { x: fromX, y: fromY } = getHandlePosition(fromPosition, fromNode.value, fromHandle)
+      const { x: fromX, y: fromY } = getHandlePosition(fromNode.value, fromHandle, fromPosition)
 
       let toHandle: HandleElement | null = null
       if (toNode.value && connectionEndHandle.value?.handleId) {
diff --git a/packages/core/src/components/Edges/EdgeWrapper.ts b/packages/core/src/components/Edges/EdgeWrapper.ts
index d4007c1b7..d8c61e9a5 100644
--- a/packages/core/src/components/Edges/EdgeWrapper.ts
+++ b/packages/core/src/components/Edges/EdgeWrapper.ts
@@ -8,8 +8,8 @@ import {
   ErrorCode,
   VueFlowError,
   elementSelectionKeys,
-  getEdgePositions,
   getHandle,
+  getHandlePosition,
   getMarkerId,
 } from '../../utils'
 import EdgeAnchor from './EdgeAnchor'
@@ -160,19 +160,14 @@ const EdgeWrapper = defineComponent({
 
       const targetHandle = getHandle(targetNodeHandles, edge.value.targetHandle)
 
-      const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom
+      const sourcePosition = sourceHandle?.position || Position.Bottom
 
-      const targetPosition = targetHandle ? targetHandle.position : Position.Top
+      const targetPosition = targetHandle?.position || Position.Top
 
-      const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
-        sourceNode,
-        sourceHandle,
-        sourcePosition,
-        targetNode,
-        targetHandle,
-        targetPosition,
-      )
+      const { x: sourceX, y: sourceY } = getHandlePosition(sourceNode, sourceHandle, sourcePosition)
+      const { x: targetX, y: targetY } = getHandlePosition(targetNode, targetHandle, targetPosition)
 
+      // todo: let's avoid writing these here (in v2 we want to remove all of these self-managed refs)
       edge.value.sourceX = sourceX
       edge.value.sourceY = sourceY
       edge.value.targetX = targetX
diff --git a/packages/core/src/types/handle.ts b/packages/core/src/types/handle.ts
index ad41682de..9c0de3de2 100644
--- a/packages/core/src/types/handle.ts
+++ b/packages/core/src/types/handle.ts
@@ -10,12 +10,10 @@ export interface HandleElement extends XYPosition, Dimensions {
   position: Position
 }
 
-export interface ConnectionHandle {
+export interface ConnectionHandle extends XYPosition {
   id: string | null
   type: HandleType | null
   nodeId: string
-  x: number
-  y: number
 }
 
 export interface ValidHandleResult {
diff --git a/packages/core/src/utils/edge.ts b/packages/core/src/utils/edge.ts
index f80f50caf..b95e53d97 100644
--- a/packages/core/src/utils/edge.ts
+++ b/packages/core/src/utils/edge.ts
@@ -1,12 +1,16 @@
-import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, ViewportTransform, XYPosition } from '../types'
+import type { Actions, GraphEdge, GraphNode, HandleElement, ViewportTransform, XYPosition } from '../types'
 import { Position } from '../types'
-import { rectToBox } from '.'
+import { getNodeDimensions, rectToBox } from '.'
 
-export function getHandlePosition(position: Position, node: GraphNode, handle: HandleElement | null): XYPosition {
+export function getHandlePosition(
+  node: GraphNode,
+  handle: HandleElement | null,
+  fallbackPosition: Position = Position.Left,
+): XYPosition {
   const x = (handle?.x ?? 0) + node.computedPosition.x
   const y = (handle?.y ?? 0) + node.computedPosition.y
-  const width = handle?.width ?? node.dimensions.width
-  const height = handle?.height ?? node.dimensions.height
+  const { width, height } = handle ?? getNodeDimensions(node)
+  const position = handle?.position ?? fallbackPosition
 
   switch (position) {
     case Position.Top:
@@ -40,25 +44,6 @@ export function getHandle(bounds: HandleElement[] = [], handleId?: string | null
   return (!handleId ? bounds[0] : bounds.find((d) => d.id === handleId)) || null
 }
 
-export function getEdgePositions(
-  sourceNode: GraphNode,
-  sourceHandle: HandleElement | null,
-  sourcePosition: Position,
-  targetNode: GraphNode,
-  targetHandle: HandleElement | null,
-  targetPosition: Position,
-): EdgePositions {
-  const { x: sourceX, y: sourceY } = getHandlePosition(sourcePosition, sourceNode, sourceHandle)
-  const { x: targetX, y: targetY } = getHandlePosition(targetPosition, targetNode, targetHandle)
-
-  return {
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-  }
-}
-
 interface IsEdgeVisibleParams {
   sourcePos: XYPosition
   targetPos: XYPosition
diff --git a/packages/core/src/utils/handle.ts b/packages/core/src/utils/handle.ts
index 2082e1ebc..c77c85b31 100644
--- a/packages/core/src/utils/handle.ts
+++ b/packages/core/src/utils/handle.ts
@@ -2,8 +2,8 @@ import { ConnectionMode } from '../types'
 import type {
   Actions,
   Connection,
+  ConnectionHandle,
   ConnectionStatus,
-  Dimensions,
   GraphEdge,
   GraphNode,
   HandleType,
@@ -14,12 +14,6 @@ import type {
 } from '../types'
 import { getEventPosition, getHandlePosition } from '.'
 
-export interface ConnectionHandle extends XYPosition, Dimensions {
-  id: string | null
-  type: HandleType | null
-  nodeId: string
-}
-
 function defaultValidHandleResult(): ValidHandleResult {
   return {
     handleDomNode: null,
@@ -41,22 +35,23 @@ export function getHandles(
   type: HandleType,
   currentHandle: string,
 ): ConnectionHandle[] {
-  return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
-    if (`${node.id}-${h.id}-${type}` !== currentHandle) {
-      const handlePosition = getHandlePosition(h.position, node, h)
+  const connectionHandles: ConnectionHandle[] = []
 
-      res.push({
-        id: h.id || null,
+  for (const handle of handleBounds[type] || []) {
+    if (`${node.id}-${handle.id}-${type}` !== currentHandle) {
+      const { x, y } = getHandlePosition(node, handle)
+
+      connectionHandles.push({
+        id: handle.id || null,
         type,
         nodeId: node.id,
-        x: handlePosition.x,
-        y: handlePosition.y,
-        width: h.width,
-        height: h.height,
+        x,
+        y,
       })
     }
-    return res
-  }, [])
+  }
+
+  return connectionHandles
 }
 
 export function getClosestHandle(

From aa2b47c7048358e5d78f761fa1ccdf0c375f2d6a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 17 Jun 2024 14:18:09 +0200
Subject: [PATCH 8/9] feat(core): add `VueFlowProvider`

---
 packages/core/src/composables/useVueFlow.ts   |  2 +-
 packages/core/src/context/VueFlowProvider.vue | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/src/context/VueFlowProvider.vue

diff --git a/packages/core/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts
index c4f7427a0..0996e2048 100644
--- a/packages/core/src/composables/useVueFlow.ts
+++ b/packages/core/src/composables/useVueFlow.ts
@@ -19,7 +19,7 @@ type Scope = (EffectScope & { vueFlowId: string }) | undefined
  *
  * @public
  * @returns a vue flow store instance
- * @param idOrOpts - id of the store instance or options to create a new store instance
+ * @param idOrOpts - id of the store instance or options to pass to the store instance (options are deprecated!)
  */
 export function useVueFlow(id?: string): VueFlowStore
 export function useVueFlow(options?: FlowOptions): VueFlowStore
diff --git a/packages/core/src/context/VueFlowProvider.vue b/packages/core/src/context/VueFlowProvider.vue
new file mode 100644
index 000000000..9ad844372
--- /dev/null
+++ b/packages/core/src/context/VueFlowProvider.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { useVueFlow } from '../composables'
+import { VueFlow } from './'
+
+const hasInjection = inject(VueFlow, null)
+
+if (!hasInjection) {
+  useVueFlow()
+}
+</script>
+
+<template>
+  <slot />
+</template>

From 8d4976e6e6888bab15dcc810d033c74db62f322d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 17 Jun 2024 14:25:03 +0200
Subject: [PATCH 9/9] chore(core): cleanup

---
 .../VueFlowProvider/VueFlowProvider.vue       | 23 +++++++++++++++++++
 packages/core/src/context/VueFlowProvider.vue | 15 ------------
 packages/core/src/types/flow.ts               |  6 +++++
 3 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 packages/core/src/components/VueFlowProvider/VueFlowProvider.vue
 delete mode 100644 packages/core/src/context/VueFlowProvider.vue

diff --git a/packages/core/src/components/VueFlowProvider/VueFlowProvider.vue b/packages/core/src/components/VueFlowProvider/VueFlowProvider.vue
new file mode 100644
index 000000000..acda6d86f
--- /dev/null
+++ b/packages/core/src/components/VueFlowProvider/VueFlowProvider.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { useVueFlow } from '../../composables'
+import { VueFlow } from '../../context'
+import type { VueFlowProviderProps } from '../../types'
+
+const props = defineProps<VueFlowProviderProps>()
+
+const hasInjection = inject(VueFlow, null)
+
+if (!hasInjection) {
+  // createVueFlow() or setupVueFlow()
+  useVueFlow({
+    nodes: props.initialNodes,
+    edges: props.initialEdges,
+    fitViewOnInit: props.fitViewOnInit,
+  })
+}
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/packages/core/src/context/VueFlowProvider.vue b/packages/core/src/context/VueFlowProvider.vue
deleted file mode 100644
index 9ad844372..000000000
--- a/packages/core/src/context/VueFlowProvider.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import { inject } from 'vue'
-import { useVueFlow } from '../composables'
-import { VueFlow } from './'
-
-const hasInjection = inject(VueFlow, null)
-
-if (!hasInjection) {
-  useVueFlow()
-}
-</script>
-
-<template>
-  <slot />
-</template>
diff --git a/packages/core/src/types/flow.ts b/packages/core/src/types/flow.ts
index 08439b491..ac9c7e7c9 100644
--- a/packages/core/src/types/flow.ts
+++ b/packages/core/src/types/flow.ts
@@ -300,3 +300,9 @@ export interface FlowSlots extends NodeSlots, EdgeSlots {
   'zoom-pane': () => any
   'default': () => any
 }
+
+export interface VueFlowProviderProps {
+  initialNodes?: Node[]
+  initialEdges?: Edge[]
+  fitViewOnInit?: boolean
+}