From 82e79a6113e7f0b8cf7fab6210e9fd80365cb0a2 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 10 Jul 2023 19:06:35 +0200
Subject: [PATCH] fix(core): clamp node extent by node dimensions to avoid
 overflow (#1014)

---
 .changeset/perfect-kings-complain.md |  5 +++++
 packages/core/src/utils/drag.ts      | 18 ++++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/perfect-kings-complain.md

diff --git a/.changeset/perfect-kings-complain.md b/.changeset/perfect-kings-complain.md
new file mode 100644
index 00000000..6be70687
--- /dev/null
+++ b/.changeset/perfect-kings-complain.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": patch
+---
+
+Clamp node extent by node dimensions to avoid node overflowing the extent by its size
diff --git a/packages/core/src/utils/drag.ts b/packages/core/src/utils/drag.ts
index 4d9ac418..4858c1d1 100644
--- a/packages/core/src/utils/drag.ts
+++ b/packages/core/src/utils/drag.ts
@@ -1,6 +1,15 @@
 import { markRaw } from 'vue'
 import { ErrorCode, VueFlowError, clampPosition, isNumber, isParentSelected } from '.'
-import type { Actions, CoordinateExtent, CoordinateExtentRange, GraphNode, NodeDragItem, State, XYPosition } from '~/types'
+import type {
+  Actions,
+  CoordinateExtent,
+  CoordinateExtentRange,
+  Dimensions,
+  GraphNode,
+  NodeDragItem,
+  State,
+  XYPosition,
+} from '~/types'
 
 export function hasSelector(target: Element, selector: string, node: Element): boolean {
   let current = target
@@ -157,6 +166,11 @@ export function getExtent<T extends NodeDragItem | GraphNode>(
 
   return currentExtent as CoordinateExtent
 }
+
+function clampNodeExtent({ width, height }: Dimensions, extent: CoordinateExtent): CoordinateExtent {
+  return [extent[0], [extent[1][0] - (width || 0), extent[1][1] - (height || 0)]]
+}
+
 export function calcNextPosition(
   node: GraphNode | NodeDragItem,
   nextPosition: XYPosition,
@@ -164,7 +178,7 @@ export function calcNextPosition(
   nodeExtent?: State['nodeExtent'],
   parentNode?: GraphNode,
 ) {
-  const extent = getExtent(node, onError, nodeExtent, parentNode)
+  const extent = clampNodeExtent(node.dimensions, getExtent(node, onError, nodeExtent, parentNode))
 
   const clampedPos = clampPosition(nextPosition, extent)