fix(core): clamp child pos to parent

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

Diff for: packages/core/src/components/Nodes/NodeWrapper.ts

@@ -226,6 +226,8 @@ const NodeWrapper = defineComponent({
         } else {
           node.computedPosition = xyzPos
         }
+
+        clampPosition()
       },
       { flush: 'post', immediate: true },
     )

Diff for: packages/core/src/utils/drag.ts

@@ -9,7 +9,7 @@ import type {
   State,
   XYPosition,
 } from '../types'
-import { ErrorCode, VueFlowError, clampPosition, isParentSelected } from '.'
+import { ErrorCode, VueFlowError, clampPosition, clampPositionToParent, isParentSelected } from '.'
 
 export function hasSelector(target: Element, selector: string, node: Element): boolean {
   let current = target
@@ -192,15 +192,23 @@ export function calcNextPosition(
   nodeExtent?: State['nodeExtent'],
   parentNode?: GraphNode,
 ) {
+  const currentExtent = node.extent || nodeExtent
   const extent = clampNodeExtent(node.dimensions, getExtent(node, triggerError, nodeExtent, parentNode))
 
   const clampedPos = clampPosition(nextPosition, extent)
 
+  let computedPos = clampedPos
+
+  if (parentNode && (currentExtent === 'parent' || (!Array.isArray(currentExtent) && currentExtent?.range === 'parent'))) {
+    console.log('clamp to parent')
+    computedPos = clampPositionToParent(clampedPos, node.dimensions, parentNode)
+  }
+
   return {
     position: {
       x: clampedPos.x - (parentNode?.computedPosition.x || 0),
       y: clampedPos.y - (parentNode?.computedPosition.y || 0),
     },
-    computedPosition: clampedPos,
+    computedPosition: computedPos,
   }
 }

Diff for: packages/core/src/utils/general.ts

@@ -1,6 +1,5 @@
-import type { GraphNode, SnapGrid, XYPosition } from '../types'
 import type { UseDragEvent } from '../composables'
-import type { Dimensions, GraphNode, XYPosition } from '../types'
+import type { Dimensions, GraphNode, SnapGrid, XYPosition } from '../types'
 import { clampPosition } from './graph'
 
 export function isMouseEvent(event: MouseEvent | TouchEvent): event is MouseEvent {

Diff for: packages/core/src/utils/graph.ts

@@ -49,7 +49,7 @@ export function clamp(val: number, min = 0, max = 1) {
   return Math.min(Math.max(val, min), max)
 }
 
-export function clampPosition(position: XYPosition = { x: 0, y: 0 }, extent: CoordinateExtent, dimensions: Partial<Dimensions>) {
+export function clampPosition(position: XYPosition = { x: 0, y: 0 }, extent: CoordinateExtent, dimensions?: Partial<Dimensions>) {
   return {
     x: clamp(position.x, extent[0][0], extent[1][0] - (dimensions?.width ?? 0)),
     y: clamp(position.y, extent[0][1], extent[1][1] - (dimensions?.height ?? 0)),