From 474a17173121038ad5744c233121ce68a200c47c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 23:57:09 +0200
Subject: [PATCH 01/17] refactor(core): replace `clamp`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/container/Viewport/Viewport.vue | 3 ++-
 packages/core/src/index.ts                        | 4 +++-
 packages/core/src/store/actions.ts                | 2 +-
 packages/core/src/utils/autopan.ts                | 2 +-
 packages/core/src/utils/graph.ts                  | 5 +----
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index 98e3b3996..b6eec2164 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -3,12 +3,13 @@ import type { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
 import { zoom, zoomIdentity } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
 import { onMounted, ref, toRef, watch } from 'vue'
+import { clamp } from '@xyflow/system'
 import type { CoordinateExtent, D3ZoomHandler, ViewportTransform } from '../../types'
 import { PanOnScrollMode } from '../../types'
 import { useKeyPress } from '../../composables/useKeyPress'
 import { useVueFlow } from '../../composables/useVueFlow'
 import { useResizeHandler } from '../../composables/useResizeHandler'
-import { clamp, isMacOs, warn } from '../../utils'
+import { isMacOs, warn } from '../../utils'
 import Pane from '../Pane/Pane.vue'
 import Transform from './Transform.vue'
 
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 501f6cd54..a6bdfd42a 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -22,6 +22,9 @@ export { default as EdgeLabelRenderer } from './components/Edges/EdgeLabelRender
 export { getBezierPath, getSmoothStepPath, getStraightPath, getBezierEdgeCenter } from '@xyflow/system'
 export { getSimpleBezierPath } from './components/Edges/SimpleBezierEdge'
 
+// re-export graph utils
+export { clamp } from '@xyflow/system'
+
 export {
   isNode,
   isEdge,
@@ -38,7 +41,6 @@ export {
   getMarkerId,
   getBoundsofRects,
   connectionExists,
-  clamp,
 } from './utils/graph'
 
 /**
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index 89564847d..fc7cac903 100644
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -1,6 +1,7 @@
 import { zoomIdentity } from 'd3-zoom'
 import type { ComputedRef } from 'vue'
 import { until } from '@vueuse/core'
+import { clamp } from '@xyflow/system'
 import type {
   Actions,
   CoordinateExtent,
@@ -26,7 +27,6 @@ import type {
 import { useViewportHelper } from '../composables'
 import {
   applyChanges,
-  clamp,
   createAdditionChange,
   createEdgeRemoveChange,
   createGraphEdges,
diff --git a/packages/core/src/utils/autopan.ts b/packages/core/src/utils/autopan.ts
index 140d698b1..d2489bbb4 100644
--- a/packages/core/src/utils/autopan.ts
+++ b/packages/core/src/utils/autopan.ts
@@ -1,5 +1,5 @@
+import { clamp } from '@xyflow/system'
 import type { Dimensions, XYPosition } from '../types'
-import { clamp } from './graph'
 
 // returns a number between 0 and 1 that represents the velocity of the movement
 // when the mouse is close to the edge of the canvas
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index a3512374e..97347843b 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -1,4 +1,5 @@
 import { markRaw } from 'vue'
+import { clamp } from '@xyflow/system'
 import type {
   Actions,
   Box,
@@ -45,10 +46,6 @@ export function getDimensions(node: HTMLElement): Dimensions {
   }
 }
 
-export function clamp(val: number, min = 0, max = 1) {
-  return Math.min(Math.max(val, min), max)
-}
-
 export function clampPosition(position: XYPosition, extent: CoordinateExtent): XYPosition {
   return {
     x: clamp(position.x, extent[0][0], extent[1][0]),

From 637c78b7ad179072ae5c8dff4f7e3f7f416142f7 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:00:05 +0200
Subject: [PATCH 02/17] refactor(core): replace `clampPosition`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/composables/useViewportHelper.ts | 3 ++-
 packages/core/src/utils/drag.ts                    | 3 ++-
 packages/core/src/utils/graph.ts                   | 8 --------
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/composables/useViewportHelper.ts b/packages/core/src/composables/useViewportHelper.ts
index 586984172..7cf124da4 100644
--- a/packages/core/src/composables/useViewportHelper.ts
+++ b/packages/core/src/composables/useViewportHelper.ts
@@ -1,7 +1,8 @@
 import { zoomIdentity } from 'd3-zoom'
 import { computed } from 'vue'
+import { clampPosition } from '@xyflow/system'
 import type { D3Selection, GraphNode, Project, State, ViewportFunctions } from '../types'
-import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint, rendererPointToPoint, warn } from '../utils'
+import { getRectOfNodes, getTransformForBounds, pointToRendererPoint, rendererPointToPoint, warn } from '../utils'
 
 export interface ViewportHelper extends ViewportFunctions {
   viewportInitialized: boolean
diff --git a/packages/core/src/utils/drag.ts b/packages/core/src/utils/drag.ts
index ccc107f2f..ecc0bf452 100644
--- a/packages/core/src/utils/drag.ts
+++ b/packages/core/src/utils/drag.ts
@@ -1,4 +1,5 @@
 import { markRaw } from 'vue'
+import { clampPosition } from '@xyflow/system'
 import type {
   Actions,
   CoordinateExtent,
@@ -9,7 +10,7 @@ import type {
   State,
   XYPosition,
 } from '../types'
-import { ErrorCode, VueFlowError, clampPosition, isParentSelected } from '.'
+import { ErrorCode, VueFlowError, isParentSelected } from '.'
 
 export function hasSelector(target: Element, selector: string, node: Element): boolean {
   let current = target
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 97347843b..330d5a784 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -4,7 +4,6 @@ import type {
   Actions,
   Box,
   Connection,
-  CoordinateExtent,
   DefaultEdgeOptions,
   Dimensions,
   Edge,
@@ -46,13 +45,6 @@ export function getDimensions(node: HTMLElement): Dimensions {
   }
 }
 
-export function clampPosition(position: XYPosition, extent: CoordinateExtent): XYPosition {
-  return {
-    x: clamp(position.x, extent[0][0], extent[1][0]),
-    y: clamp(position.y, extent[0][1], extent[1][1]),
-  }
-}
-
 export function getHostForElement(element: HTMLElement): Document {
   const doc = element.getRootNode() as Document
 

From 605164e7460cb2151031a93b808e7f33b7ec3eb2 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:04:29 +0200
Subject: [PATCH 03/17] refactor(core): replace `getDimensions`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/components/Handle/Handle.vue    | 3 ++-
 packages/core/src/composables/useResizeHandler.ts | 3 ++-
 packages/core/src/store/actions.ts                | 3 +--
 packages/core/src/utils/graph.ts                  | 8 --------
 packages/core/src/utils/node.ts                   | 2 +-
 5 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/components/Handle/Handle.vue b/packages/core/src/components/Handle/Handle.vue
index aa67fac0e..4d1181b9d 100644
--- a/packages/core/src/components/Handle/Handle.vue
+++ b/packages/core/src/components/Handle/Handle.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref, toRef } from 'vue'
+import { getDimensions } from '@xyflow/system'
 import type { HandleProps } from '../../types'
 import { Position } from '../../types'
 import { useHandle, useNode, useVueFlow } from '../../composables'
-import { getDimensions, isDef, isMouseEvent } from '../../utils'
+import { isDef, isMouseEvent } from '../../utils'
 
 const {
   position = Position.Top,
diff --git a/packages/core/src/composables/useResizeHandler.ts b/packages/core/src/composables/useResizeHandler.ts
index b6c6fc0d3..9e0e4a621 100644
--- a/packages/core/src/composables/useResizeHandler.ts
+++ b/packages/core/src/composables/useResizeHandler.ts
@@ -1,6 +1,7 @@
 import type { Ref } from 'vue'
 import { onBeforeUnmount, onMounted } from 'vue'
-import { ErrorCode, VueFlowError, getDimensions } from '../utils'
+import { getDimensions } from '@xyflow/system'
+import { ErrorCode, VueFlowError } from '../utils'
 import { useVueFlow } from './useVueFlow'
 
 /**
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index fc7cac903..32791713d 100644
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -1,7 +1,7 @@
 import { zoomIdentity } from 'd3-zoom'
 import type { ComputedRef } from 'vue'
 import { until } from '@vueuse/core'
-import { clamp } from '@xyflow/system'
+import { clamp, getDimensions } from '@xyflow/system'
 import type {
   Actions,
   CoordinateExtent,
@@ -34,7 +34,6 @@ import {
   createNodeRemoveChange,
   createSelectionChange,
   getConnectedEdges as getConnectedEdgesBase,
-  getDimensions,
   getHandleBounds,
   getIncomers as getIncomersBase,
   getOutgoers as getOutgoersBase,
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 330d5a784..d1ac34c24 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -5,7 +5,6 @@ import type {
   Box,
   Connection,
   DefaultEdgeOptions,
-  Dimensions,
   Edge,
   EdgeMarkerType,
   Element,
@@ -38,13 +37,6 @@ export function getOverlappingArea(rectA: Rect, rectB: Rect) {
   return Math.ceil(xOverlap * yOverlap)
 }
 
-export function getDimensions(node: HTMLElement): Dimensions {
-  return {
-    width: node.offsetWidth,
-    height: node.offsetHeight,
-  }
-}
-
 export function getHostForElement(element: HTMLElement): Document {
   const doc = element.getRootNode() as Document
 
diff --git a/packages/core/src/utils/node.ts b/packages/core/src/utils/node.ts
index 698460250..673a3dd0a 100644
--- a/packages/core/src/utils/node.ts
+++ b/packages/core/src/utils/node.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import { nextTick } from 'vue'
+import { getDimensions } from '@xyflow/system'
 import type { Actions, GraphNode, HandleElement, Position } from '../types'
-import { getDimensions } from '.'
 
 export function getHandleBounds(
   selector: string,

From 125331e991b14687b70d3576a862f68e543e76d4 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:06:57 +0200
Subject: [PATCH 04/17] refactor(core): replace `getHostForElement`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/composables/useHandle.ts |  8 +++++---
 packages/core/src/utils/graph.ts           | 10 ----------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index e20f1ad44..aecdcae05 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -1,5 +1,6 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
+import { getHostForElement } from '@xyflow/system'
 import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc, ValidHandleResult } from '../types'
 import {
   calcAutoPan,
@@ -8,7 +9,6 @@ import {
   getEventPosition,
   getHandleLookup,
   getHandleType,
-  getHostForElement,
   isMouseEvent,
   isValidHandle,
   pointToRendererPoint,
@@ -142,7 +142,8 @@ export function useHandle({
 
       emits.connectStart({ event, nodeId: toValue(nodeId), handleId: toValue(handleId), handleType })
 
-      function onPointerMove(event: MouseTouchEvent) {
+      function onPointerMove(_event: Event) {
+        const event = _event as MouseTouchEvent
         connectionPosition = getEventPosition(event, containerBounds)
 
         const { handle, validHandleResult } = getClosestHandle(
@@ -225,7 +226,8 @@ export function useHandle({
         }
       }
 
-      function onPointerUp(event: MouseTouchEvent) {
+      function onPointerUp(_event: Event) {
+        const event = _event as MouseTouchEvent
         if ((closestHandle || handleDomNode) && connection && isValid) {
           if (!onEdgeUpdate) {
             emits.connect(connection)
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index d1ac34c24..b18994acb 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -37,16 +37,6 @@ export function getOverlappingArea(rectA: Rect, rectB: Rect) {
   return Math.ceil(xOverlap * yOverlap)
 }
 
-export function getHostForElement(element: HTMLElement): Document {
-  const doc = element.getRootNode() as Document
-
-  if ('elementFromPoint' in doc) {
-    return doc
-  }
-
-  return window.document
-}
-
 export function isEdge<Data = ElementData>(element: MaybeElement): element is Edge<Data> {
   return element && typeof element === 'object' && 'id' in element && 'source' in element && 'target' in element
 }

From 6e382c2385ac93c41ff0e82109c2ee6dd1d6d4c3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:08:11 +0200
Subject: [PATCH 05/17] refactor(core): replace `getOverlappingArea`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/store/actions.ts | 3 +--
 packages/core/src/utils/graph.ts   | 9 +--------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index 32791713d..a3374320e 100644
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -1,7 +1,7 @@
 import { zoomIdentity } from 'd3-zoom'
 import type { ComputedRef } from 'vue'
 import { until } from '@vueuse/core'
-import { clamp, getDimensions } from '@xyflow/system'
+import { clamp, getDimensions, getOverlappingArea } from '@xyflow/system'
 import type {
   Actions,
   CoordinateExtent,
@@ -37,7 +37,6 @@ import {
   getHandleBounds,
   getIncomers as getIncomersBase,
   getOutgoers as getOutgoersBase,
-  getOverlappingArea,
   getSelectionChanges,
   isDef,
   isEdge,
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index b18994acb..e401bc3d4 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -1,5 +1,5 @@
 import { markRaw } from 'vue'
-import { clamp } from '@xyflow/system'
+import { clamp, getOverlappingArea } from '@xyflow/system'
 import type {
   Actions,
   Box,
@@ -30,13 +30,6 @@ export function nodeToRect(node: GraphNode): Rect {
   }
 }
 
-export function getOverlappingArea(rectA: Rect, rectB: Rect) {
-  const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x))
-  const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y))
-
-  return Math.ceil(xOverlap * yOverlap)
-}
-
 export function isEdge<Data = ElementData>(element: MaybeElement): element is Edge<Data> {
   return element && typeof element === 'object' && 'id' in element && 'source' in element && 'target' in element
 }

From 846e21034f20c626e723c0c82910a678d3ff5158 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:09:35 +0200
Subject: [PATCH 06/17] refactor(core): replace `boxToRect` & `rectToBox`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/utils/edge.ts  |  3 ++-
 packages/core/src/utils/graph.ts | 20 +-------------------
 2 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/packages/core/src/utils/edge.ts b/packages/core/src/utils/edge.ts
index b95e53d97..99c2021c9 100644
--- a/packages/core/src/utils/edge.ts
+++ b/packages/core/src/utils/edge.ts
@@ -1,6 +1,7 @@
+import { rectToBox } from '@xyflow/system'
 import type { Actions, GraphEdge, GraphNode, HandleElement, ViewportTransform, XYPosition } from '../types'
 import { Position } from '../types'
-import { getNodeDimensions, rectToBox } from '.'
+import { getNodeDimensions } from '.'
 
 export function getHandlePosition(
   node: GraphNode,
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index e401bc3d4..99f984868 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -1,5 +1,5 @@
 import { markRaw } from 'vue'
-import { clamp, getOverlappingArea } from '@xyflow/system'
+import { boxToRect, clamp, getOverlappingArea, rectToBox } from '@xyflow/system'
 import type {
   Actions,
   Box,
@@ -222,24 +222,6 @@ function getBoundsOfBoxes(box1: Box, box2: Box): Box {
   }
 }
 
-export function rectToBox({ x, y, width, height }: Rect): Box {
-  return {
-    x,
-    y,
-    x2: x + width,
-    y2: y + height,
-  }
-}
-
-export function boxToRect({ x, y, x2, y2 }: Box): Rect {
-  return {
-    x,
-    y,
-    width: x2 - x,
-    height: y2 - y,
-  }
-}
-
 // todo: fix typo
 export function getBoundsofRects(rect1: Rect, rect2: Rect) {
   return boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)))

From 12bb90e7266b2c12ca7873ea4e14c393785aba22 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:12:47 +0200
Subject: [PATCH 07/17] refactor(core): replace `getBoundsOfRects` &
 `getBoundsOfBoxe` & `rendererPointToPoint`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/composables/useHandle.ts    |  5 ++---
 .../core/src/composables/useViewportHelper.ts |  6 ++---
 packages/core/src/index.ts                    |  4 +---
 packages/core/src/utils/graph.ts              | 22 +------------------
 4 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index aecdcae05..79b1f4a0d 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -1,6 +1,6 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
-import { getHostForElement } from '@xyflow/system'
+import { getHostForElement, rendererPointToPoint } from '@xyflow/system'
 import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc, ValidHandleResult } from '../types'
 import {
   calcAutoPan,
@@ -12,7 +12,6 @@ import {
   isMouseEvent,
   isValidHandle,
   pointToRendererPoint,
-  rendererPointToPoint,
   resetRecentHandle,
 } from '../utils'
 import { Position } from '../types'
@@ -200,7 +199,7 @@ export function useHandle({
                   x: closestHandle.x,
                   y: closestHandle.y,
                 },
-                viewport.value,
+                [viewport.value.x, viewport.value.y, viewport.value.zoom],
               )
             : connectionPosition,
           validHandleResult.endHandle,
diff --git a/packages/core/src/composables/useViewportHelper.ts b/packages/core/src/composables/useViewportHelper.ts
index 7cf124da4..6bd00413c 100644
--- a/packages/core/src/composables/useViewportHelper.ts
+++ b/packages/core/src/composables/useViewportHelper.ts
@@ -1,8 +1,8 @@
 import { zoomIdentity } from 'd3-zoom'
 import { computed } from 'vue'
-import { clampPosition } from '@xyflow/system'
+import { clampPosition, rendererPointToPoint } from '@xyflow/system'
 import type { D3Selection, GraphNode, Project, State, ViewportFunctions } from '../types'
-import { getRectOfNodes, getTransformForBounds, pointToRendererPoint, rendererPointToPoint, warn } from '../utils'
+import { getRectOfNodes, getTransformForBounds, pointToRendererPoint, warn } from '../utils'
 
 export interface ViewportHelper extends ViewportFunctions {
   viewportInitialized: boolean
@@ -204,7 +204,7 @@ export function useViewportHelper(state: State) {
             y: position.y + domY,
           }
 
-          return rendererPointToPoint(correctedPosition, state.viewport)
+          return rendererPointToPoint(correctedPosition, [state.viewport.x, state.viewport.y, state.viewport.zoom])
         }
 
         return { x: 0, y: 0 }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index a6bdfd42a..59c251b76 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -23,7 +23,7 @@ export { getBezierPath, getSmoothStepPath, getStraightPath, getBezierEdgeCenter
 export { getSimpleBezierPath } from './components/Edges/SimpleBezierEdge'
 
 // re-export graph utils
-export { clamp } from '@xyflow/system'
+export { clamp, getBoundsOfRects, getBoundsOfBoxes, rendererPointToPoint } from '@xyflow/system'
 
 export {
   isNode,
@@ -36,10 +36,8 @@ export {
   getTransformForBounds,
   getRectOfNodes,
   pointToRendererPoint,
-  rendererPointToPoint,
   getNodesInside,
   getMarkerId,
-  getBoundsofRects,
   connectionExists,
 } from './utils/graph'
 
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 99f984868..246aea5e4 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -1,5 +1,5 @@
 import { markRaw } from 'vue'
-import { boxToRect, clamp, getOverlappingArea, rectToBox } from '@xyflow/system'
+import { boxToRect, clamp, getBoundsOfBoxes, getOverlappingArea, rectToBox } from '@xyflow/system'
 import type {
   Actions,
   Box,
@@ -186,12 +186,6 @@ export function connectionExists(edge: Edge | Connection, elements: Elements) {
   )
 }
 
-export function rendererPointToPoint({ x, y }: XYPosition, { x: tx, y: ty, zoom: tScale }: ViewportTransform): XYPosition {
-  return {
-    x: x * tScale + tx,
-    y: y * tScale + ty,
-  }
-}
 export function pointToRendererPoint(
   { x, y }: XYPosition,
   { x: tx, y: ty, zoom: tScale }: ViewportTransform,
@@ -213,20 +207,6 @@ export function pointToRendererPoint(
   return position
 }
 
-function getBoundsOfBoxes(box1: Box, box2: Box): Box {
-  return {
-    x: Math.min(box1.x, box2.x),
-    y: Math.min(box1.y, box2.y),
-    x2: Math.max(box1.x2, box2.x2),
-    y2: Math.max(box1.y2, box2.y2),
-  }
-}
-
-// todo: fix typo
-export function getBoundsofRects(rect1: Rect, rect2: Rect) {
-  return boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)))
-}
-
 export function getRectOfNodes(nodes: GraphNode[]) {
   let box: Box = {
     x: Number.POSITIVE_INFINITY,

From 208a6f9a8d10900f5e69637c83aa4b583ebe444f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:20:30 +0200
Subject: [PATCH 08/17] refactor(minimap): update import of `getBoundsOfRects`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/minimap/src/MiniMap.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/minimap/src/MiniMap.vue b/packages/minimap/src/MiniMap.vue
index 110cf359e..e745f60b9 100644
--- a/packages/minimap/src/MiniMap.vue
+++ b/packages/minimap/src/MiniMap.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CoordinateExtent, GraphNode, PanelPosition } from '@vue-flow/core'
-import { Panel, getBoundsofRects, getConnectedEdges, getRectOfNodes, useVueFlow } from '@vue-flow/core'
+import { Panel, getBoundsOfRects, getConnectedEdges, getRectOfNodes, useVueFlow } from '@vue-flow/core'
 import { zoom, zoomIdentity } from 'd3-zoom'
 import type { D3ZoomEvent } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
@@ -71,7 +71,7 @@ const viewBB = computed(() => ({
 }))
 
 const boundingRect = computed(() =>
-  getNodesInitialized.value && getNodesInitialized.value.length ? getBoundsofRects(bb.value, viewBB.value) : viewBB.value,
+  getNodesInitialized.value && getNodesInitialized.value.length ? getBoundsOfRects(bb.value, viewBB.value) : viewBB.value,
 )
 
 const viewScale = computed(() => {

From a380689b3d5c0cfa8d844e28e955ca849433459d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:22:21 +0200
Subject: [PATCH 09/17] refactor(core): replace `getMarkerId`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../src/components/ConnectionLine/index.ts     |  4 ++--
 .../core/src/components/Edges/EdgeWrapper.ts   | 11 ++---------
 .../EdgeRenderer/MarkerDefinitions.vue         |  2 +-
 packages/core/src/index.ts                     |  3 +--
 packages/core/src/utils/graph.ts               | 18 ------------------
 5 files changed, 6 insertions(+), 32 deletions(-)

diff --git a/packages/core/src/components/ConnectionLine/index.ts b/packages/core/src/components/ConnectionLine/index.ts
index 70101ac8d..fe5ac7fb5 100644
--- a/packages/core/src/components/ConnectionLine/index.ts
+++ b/packages/core/src/components/ConnectionLine/index.ts
@@ -1,8 +1,8 @@
 import { computed, defineComponent, h, inject } from 'vue'
-import { getBezierPath, getSmoothStepPath } from '@xyflow/system'
+import { getBezierPath, getMarkerId, getSmoothStepPath } from '@xyflow/system'
 import type { HandleElement } from '../../types'
 import { ConnectionLineType, ConnectionMode, Position } from '../../types'
-import { getHandlePosition, getMarkerId } from '../../utils'
+import { getHandlePosition } from '../../utils'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'
diff --git a/packages/core/src/components/Edges/EdgeWrapper.ts b/packages/core/src/components/Edges/EdgeWrapper.ts
index d8c61e9a5..4d2bc0826 100644
--- a/packages/core/src/components/Edges/EdgeWrapper.ts
+++ b/packages/core/src/components/Edges/EdgeWrapper.ts
@@ -1,17 +1,10 @@
 import { computed, defineComponent, getCurrentInstance, h, inject, provide, ref, resolveComponent, toRef } from 'vue'
+import { getMarkerId } from '@xyflow/system'
 import type { Connection, EdgeComponent, HandleType, MouseTouchEvent } from '../../types'
 import { ConnectionMode, Position } from '../../types'
 import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
 import { EdgeId, EdgeRef, Slots } from '../../context'
-import {
-  ARIA_EDGE_DESC_KEY,
-  ErrorCode,
-  VueFlowError,
-  elementSelectionKeys,
-  getHandle,
-  getHandlePosition,
-  getMarkerId,
-} from '../../utils'
+import { ARIA_EDGE_DESC_KEY, ErrorCode, VueFlowError, elementSelectionKeys, getHandle, getHandlePosition } from '../../utils'
 import EdgeAnchor from './EdgeAnchor'
 
 interface Props {
diff --git a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue
index 75eff032c..a8e0da622 100644
--- a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue
+++ b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { getMarkerId } from '@xyflow/system'
 import type { EdgeMarkerType, MarkerProps, MarkerType } from '../../types'
 import { useVueFlow } from '../../composables'
-import { getMarkerId } from '../../utils'
 import MarkerSymbols from './MarkerSymbols.vue'
 
 const { id: vueFlowId, edges, connectionLineOptions, defaultMarkerColor: defaultColor } = useVueFlow()
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 59c251b76..24ca39f3d 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -23,7 +23,7 @@ export { getBezierPath, getSmoothStepPath, getStraightPath, getBezierEdgeCenter
 export { getSimpleBezierPath } from './components/Edges/SimpleBezierEdge'
 
 // re-export graph utils
-export { clamp, getBoundsOfRects, getBoundsOfBoxes, rendererPointToPoint } from '@xyflow/system'
+export { clamp, getBoundsOfRects, getBoundsOfBoxes, rendererPointToPoint, getMarkerId } from '@xyflow/system'
 
 export {
   isNode,
@@ -37,7 +37,6 @@ export {
   getRectOfNodes,
   pointToRendererPoint,
   getNodesInside,
-  getMarkerId,
   connectionExists,
 } from './utils/graph'
 
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 246aea5e4..1e1622aea 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -6,7 +6,6 @@ import type {
   Connection,
   DefaultEdgeOptions,
   Edge,
-  EdgeMarkerType,
   Element,
   ElementData,
   Elements,
@@ -353,20 +352,3 @@ export function isParentSelected(node: GraphNode, findNode: Actions['findNode'])
 
   return isParentSelected(parent, findNode)
 }
-
-export function getMarkerId(marker: EdgeMarkerType | undefined, vueFlowId?: string) {
-  if (typeof marker === 'undefined') {
-    return ''
-  }
-
-  if (typeof marker === 'string') {
-    return marker
-  }
-
-  const idPrefix = vueFlowId ? `${vueFlowId}__` : ''
-
-  return `${idPrefix}${Object.keys(marker)
-    .sort()
-    .map((key) => `${key}=${marker[<keyof EdgeMarkerType>key]}`)
-    .join('&')}`
-}

From efc3daf3496975b3336d66d36afe244a5aa15ee5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:27:59 +0200
Subject: [PATCH 10/17] refactor(core): replace `isRect` & `isNumeric`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/store/actions.ts | 5 ++---
 packages/core/src/utils/graph.ts   | 8 --------
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index a3374320e..4bc93c8aa 100644
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -1,7 +1,7 @@
 import { zoomIdentity } from 'd3-zoom'
 import type { ComputedRef } from 'vue'
 import { until } from '@vueuse/core'
-import { clamp, getDimensions, getOverlappingArea } from '@xyflow/system'
+import { clamp, getDimensions, getOverlappingArea, isRectObject } from '@xyflow/system'
 import type {
   Actions,
   CoordinateExtent,
@@ -42,7 +42,6 @@ import {
   isEdge,
   isGraphNode,
   isNode,
-  isRect,
   nodeToRect,
   updateConnectionLookup,
   updateEdgeAction,
@@ -597,7 +596,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
   const getNodeRect = (
     nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect,
   ): [Rect | null, Node | null | undefined, boolean] => {
-    const isRectObj = isRect(nodeOrRect)
+    const isRectObj = isRectObject(nodeOrRect)
     const node = isRectObj ? null : isGraphNode(nodeOrRect as GraphNode) ? (nodeOrRect as GraphNode) : findNode(nodeOrRect.id)
 
     if (!isRectObj && !node) {
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 1e1622aea..aeee4c2be 100644
--- a/packages/core/src/utils/graph.ts
+++ b/packages/core/src/utils/graph.ts
@@ -45,14 +45,6 @@ export function isGraphNode<Data = ElementData>(element: MaybeElement): element
   return isNode(element) && 'computedPosition' in element
 }
 
-function isNumeric(n: any): n is number {
-  return !Number.isNaN(n) && Number.isFinite(n)
-}
-
-export function isRect(obj: any): obj is Rect {
-  return isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y)
-}
-
 export function parseNode(node: Node, existingNode?: GraphNode, parentNode?: string): GraphNode {
   const initialState = {
     id: node.id.toString(),

From 9ebd8749dcdd87d868711e43450e6f90e8d2a552 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:30:54 +0200
Subject: [PATCH 11/17] refactor(core): replace `calcAutoPan`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/composables/useDrag.ts   | 11 ++-------
 packages/core/src/composables/useHandle.ts |  3 +--
 packages/core/src/utils/autopan.ts         | 28 ----------------------
 3 files changed, 3 insertions(+), 39 deletions(-)
 delete mode 100644 packages/core/src/utils/autopan.ts

diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts
index c84f8f5ef..b8ba7e6e1 100644
--- a/packages/core/src/composables/useDrag.ts
+++ b/packages/core/src/composables/useDrag.ts
@@ -3,16 +3,9 @@ import { drag } from 'd3-drag'
 import { select } from 'd3-selection'
 import type { MaybeRefOrGetter, Ref } from 'vue'
 import { ref, toValue, watch } from 'vue'
+import { calcAutoPan } from '@xyflow/system'
 import type { NodeDragEvent, NodeDragItem, XYPosition } from '../types'
-import {
-  calcAutoPan,
-  calcNextPosition,
-  getDragItems,
-  getEventHandlerParams,
-  getEventPosition,
-  handleNodeClick,
-  hasSelector,
-} from '../utils'
+import { calcNextPosition, getDragItems, getEventHandlerParams, getEventPosition, handleNodeClick, hasSelector } from '../utils'
 import { useGetPointerPosition, useVueFlow } from '.'
 
 export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>
diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index 79b1f4a0d..7a169ef87 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -1,9 +1,8 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
-import { getHostForElement, rendererPointToPoint } from '@xyflow/system'
+import { calcAutoPan, getHostForElement, rendererPointToPoint } from '@xyflow/system'
 import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc, ValidHandleResult } from '../types'
 import {
-  calcAutoPan,
   getClosestHandle,
   getConnectionStatus,
   getEventPosition,
diff --git a/packages/core/src/utils/autopan.ts b/packages/core/src/utils/autopan.ts
deleted file mode 100644
index d2489bbb4..000000000
--- a/packages/core/src/utils/autopan.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { clamp } from '@xyflow/system'
-import type { Dimensions, XYPosition } from '../types'
-
-// returns a number between 0 and 1 that represents the velocity of the movement
-// when the mouse is close to the edge of the canvas
-function calcAutoPanVelocity(value: number, min: number, max: number) {
-  if (value < min) {
-    return clamp(Math.abs(value - min), 1, min) / min
-  }
-
-  if (value > max) {
-    return -clamp(Math.abs(value - max), 1, min) / min
-  }
-
-  return 0
-}
-
-export function calcAutoPan(
-  pos: XYPosition,
-  bounds: Dimensions,
-  speed = 15,
-  distance = 40,
-): [xMovement: number, yMovement: number] {
-  const xMovement = calcAutoPanVelocity(pos.x, distance, bounds.width - distance) * speed
-  const yMovement = calcAutoPanVelocity(pos.y, distance, bounds.height - distance) * speed
-
-  return [xMovement, yMovement]
-}

From ac62b02b0dd745bc82f279e2b12a0250e1f60690 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:35:47 +0200
Subject: [PATCH 12/17] refactor(core): replace `isMouseEvent`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/components/Handle/Handle.vue | 4 ++--
 packages/core/src/composables/useHandle.ts     | 3 +--
 packages/core/src/utils/general.ts             | 5 +----
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components/Handle/Handle.vue b/packages/core/src/components/Handle/Handle.vue
index 4d1181b9d..62d59f46c 100644
--- a/packages/core/src/components/Handle/Handle.vue
+++ b/packages/core/src/components/Handle/Handle.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref, toRef } from 'vue'
-import { getDimensions } from '@xyflow/system'
+import { getDimensions, isMouseEvent } from '@xyflow/system'
 import type { HandleProps } from '../../types'
 import { Position } from '../../types'
 import { useHandle, useNode, useVueFlow } from '../../composables'
-import { isDef, isMouseEvent } from '../../utils'
+import { isDef } from '../../utils'
 
 const {
   position = Position.Top,
diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index 7a169ef87..47114a29d 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -1,6 +1,6 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
-import { calcAutoPan, getHostForElement, rendererPointToPoint } from '@xyflow/system'
+import { calcAutoPan, getHostForElement, isMouseEvent, rendererPointToPoint } from '@xyflow/system'
 import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc, ValidHandleResult } from '../types'
 import {
   getClosestHandle,
@@ -8,7 +8,6 @@ import {
   getEventPosition,
   getHandleLookup,
   getHandleType,
-  isMouseEvent,
   isValidHandle,
   pointToRendererPoint,
   resetRecentHandle,
diff --git a/packages/core/src/utils/general.ts b/packages/core/src/utils/general.ts
index 53eb4b842..4dd17fdc1 100644
--- a/packages/core/src/utils/general.ts
+++ b/packages/core/src/utils/general.ts
@@ -1,9 +1,6 @@
+import { isMouseEvent } from '@xyflow/system'
 import type { GraphNode } from '../types'
 
-export function isMouseEvent(event: MouseEvent | TouchEvent): event is MouseEvent {
-  return 'clientX' in event
-}
-
 export function getEventPosition(event: MouseEvent | TouchEvent, bounds?: DOMRect) {
   const isMouseTriggered = isMouseEvent(event)
   const evtX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX

From 770cf535990fdc9f7a949dcbc72d550a0580bfc3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:37:51 +0200
Subject: [PATCH 13/17] refactor(core): replace `getEventPosition`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/composables/useDrag.ts   |  4 ++--
 packages/core/src/composables/useHandle.ts |  3 +--
 packages/core/src/container/Pane/Pane.vue  |  3 ++-
 packages/core/src/utils/general.ts         | 12 ------------
 packages/core/src/utils/handle.ts          |  3 ++-
 5 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts
index b8ba7e6e1..ad5aa44fe 100644
--- a/packages/core/src/composables/useDrag.ts
+++ b/packages/core/src/composables/useDrag.ts
@@ -3,9 +3,9 @@ import { drag } from 'd3-drag'
 import { select } from 'd3-selection'
 import type { MaybeRefOrGetter, Ref } from 'vue'
 import { ref, toValue, watch } from 'vue'
-import { calcAutoPan } from '@xyflow/system'
+import { calcAutoPan, getEventPosition } from '@xyflow/system'
 import type { NodeDragEvent, NodeDragItem, XYPosition } from '../types'
-import { calcNextPosition, getDragItems, getEventHandlerParams, getEventPosition, handleNodeClick, hasSelector } from '../utils'
+import { calcNextPosition, getDragItems, getEventHandlerParams, handleNodeClick, hasSelector } from '../utils'
 import { useGetPointerPosition, useVueFlow } from '.'
 
 export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>
diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
index 47114a29d..5cce1c969 100644
--- a/packages/core/src/composables/useHandle.ts
+++ b/packages/core/src/composables/useHandle.ts
@@ -1,11 +1,10 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
-import { calcAutoPan, getHostForElement, isMouseEvent, rendererPointToPoint } from '@xyflow/system'
+import { calcAutoPan, getEventPosition, getHostForElement, isMouseEvent, rendererPointToPoint } from '@xyflow/system'
 import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc, ValidHandleResult } from '../types'
 import {
   getClosestHandle,
   getConnectionStatus,
-  getEventPosition,
   getHandleLookup,
   getHandleType,
   isValidHandle,
diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue
index 4661d97af..4e19c6217 100644
--- a/packages/core/src/container/Pane/Pane.vue
+++ b/packages/core/src/container/Pane/Pane.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { ref, toRef, watch } from 'vue'
+import { getEventPosition } from '@xyflow/system'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import type { NodeChange } from '../../types'
 import { SelectionMode } from '../../types'
 import { useKeyPress, useVueFlow } from '../../composables'
-import { getEventPosition, getNodesInside, getSelectionChanges } from '../../utils'
+import { getNodesInside, getSelectionChanges } from '../../utils'
 import { getMousePosition } from './utils'
 
 const { isSelecting, selectionKeyPressed } = defineProps<{ isSelecting: boolean; selectionKeyPressed: boolean }>()
diff --git a/packages/core/src/utils/general.ts b/packages/core/src/utils/general.ts
index 4dd17fdc1..c1f52e8a8 100644
--- a/packages/core/src/utils/general.ts
+++ b/packages/core/src/utils/general.ts
@@ -1,17 +1,5 @@
-import { isMouseEvent } from '@xyflow/system'
 import type { GraphNode } from '../types'
 
-export function getEventPosition(event: MouseEvent | TouchEvent, bounds?: DOMRect) {
-  const isMouseTriggered = isMouseEvent(event)
-  const evtX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX
-  const evtY = isMouseTriggered ? event.clientY : event.touches?.[0].clientY
-
-  return {
-    x: evtX - (bounds?.left ?? 0),
-    y: evtY - (bounds?.top ?? 0),
-  }
-}
-
 export const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0
 
 export function getNodeDimensions(node: GraphNode): { width: number; height: number } {
diff --git a/packages/core/src/utils/handle.ts b/packages/core/src/utils/handle.ts
index c28e38242..11d32f530 100644
--- a/packages/core/src/utils/handle.ts
+++ b/packages/core/src/utils/handle.ts
@@ -1,3 +1,4 @@
+import { getEventPosition } from '@xyflow/system'
 import { ConnectionMode } from '../types'
 import type {
   Actions,
@@ -13,7 +14,7 @@ import type {
   ValidHandleResult,
   XYPosition,
 } from '../types'
-import { getEventPosition, getHandlePosition } from '.'
+import { getHandlePosition } from '.'
 
 function defaultValidHandleResult(): ValidHandleResult {
   return {

From 9ec7dc6c112d9acc89d1c1fe1bb4dfc901d18610 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:38:57 +0200
Subject: [PATCH 14/17] refactor(core): remove `isMacOS`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/utils/general.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/core/src/utils/general.ts b/packages/core/src/utils/general.ts
index c1f52e8a8..e26dab6af 100644
--- a/packages/core/src/utils/general.ts
+++ b/packages/core/src/utils/general.ts
@@ -1,7 +1,5 @@
 import type { GraphNode } from '../types'
 
-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,

From d97f12599b22da259d6df3b4cee82ee30b58cb11 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:45:07 +0200
Subject: [PATCH 15/17] chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/fluffy-tables-wash.md | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 .changeset/fluffy-tables-wash.md

diff --git a/.changeset/fluffy-tables-wash.md b/.changeset/fluffy-tables-wash.md
new file mode 100644
index 000000000..df7f5a246
--- /dev/null
+++ b/.changeset/fluffy-tables-wash.md
@@ -0,0 +1,26 @@
+---
+"@vue-flow/core": minor
+---
+
+Replace existing graph utils exports with those already provided by `@xyflow/system`:
+
+- Replace utils
+  - `clamp`
+  - `clampPosition`
+  - `getDimensions`
+  - `getHostForElement`
+  - `getOverlappingArea`
+  - `rectToBox`
+  - `boxToRect`
+  - `getBoundsofRects`
+  - `getBoundsOfBoxes`
+  - `rendererPointToPoint`
+  - `getMarkerId`
+  - `isRect`
+  - `isNumeric`
+  - `calcAutoPan`
+  - `isMouseEvent`
+  - `getEventPosition`
+
+-Remove utils
+- `isMacOS`

From 52b65ef6ed679ecc635d597734e43aeebf701be3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:45:50 +0200
Subject: [PATCH 16/17] chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/fifty-rockets-report.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fifty-rockets-report.md

diff --git a/.changeset/fifty-rockets-report.md b/.changeset/fifty-rockets-report.md
new file mode 100644
index 000000000..7ab72fa33
--- /dev/null
+++ b/.changeset/fifty-rockets-report.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/minimap": patch
+---
+
+Update import of `getBoundsOfRects`

From fa5fd4d27e83a9c328a97c9f4f7f74548ceb9d23 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 16 Jul 2024 00:47:05 +0200
Subject: [PATCH 17/17] chore(core): cleanup

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/core/src/container/Viewport/Viewport.vue | 4 ++--
 packages/core/src/store/state.ts                  | 2 +-
 packages/core/src/utils/index.ts                  | 1 -
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
index b6eec2164..cb4ed84e3 100644
--- a/packages/core/src/container/Viewport/Viewport.vue
+++ b/packages/core/src/container/Viewport/Viewport.vue
@@ -3,13 +3,13 @@ import type { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
 import { zoom, zoomIdentity } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
 import { onMounted, ref, toRef, watch } from 'vue'
-import { clamp } from '@xyflow/system'
+import { clamp, isMacOs } from '@xyflow/system'
 import type { CoordinateExtent, D3ZoomHandler, ViewportTransform } from '../../types'
 import { PanOnScrollMode } from '../../types'
 import { useKeyPress } from '../../composables/useKeyPress'
 import { useVueFlow } from '../../composables/useVueFlow'
 import { useResizeHandler } from '../../composables/useResizeHandler'
-import { isMacOs, warn } from '../../utils'
+import { warn } from '../../utils'
 import Pane from '../Pane/Pane.vue'
 import Transform from './Transform.vue'
 
diff --git a/packages/core/src/store/state.ts b/packages/core/src/store/state.ts
index 2198b9465..72c253c25 100644
--- a/packages/core/src/store/state.ts
+++ b/packages/core/src/store/state.ts
@@ -1,7 +1,7 @@
+import { isMacOs } from '@xyflow/system'
 import type { FlowOptions, State } from '../types'
 import { ConnectionLineType, ConnectionMode, PanOnScrollMode, SelectionMode } from '../types'
 
-import { isMacOs } from '../utils'
 import { createHooks } from './hooks'
 
 export function useState(): State {
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
index d1ac0a0b8..8ff246d82 100644
--- a/packages/core/src/utils/index.ts
+++ b/packages/core/src/utils/index.ts
@@ -1,5 +1,4 @@
 export * from './a11y'
-export * from './autopan'
 export * from './changes'
 export * from './createExtendedEventHook'
 export * from './drag'