fix(core): clamp node extent by node dimensions to avoid overflow (#1014

)

.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

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,14 +166,19 @@ 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,
   onError: State['hooks']['error']['trigger'],
   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)