fix(subflows): node extent relative to parent closes #2232

example/src/Subflow/index.tsx

@@ -20,7 +20,13 @@ const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
 const initialNodes: Node[] = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+    className: 'light',
+  },
   {
     id: '4',
     data: { label: 'Node 4' },
@@ -34,7 +40,10 @@ const initialNodes: Node[] = [
     position: { x: 15, y: 15 },
     className: 'light',
     parentNode: '4',
-    extent: 'parent',
+    extent: [
+      [0, 0],
+      [100, 100],
+    ],
   },
   {
     id: '4b',

src/hooks/useDrag/utils.ts

@@ -84,6 +84,14 @@ export function updatePosition(
       }
       currentExtent = nodeExtent;
     }
+  } else if (dragItem.extent && dragItem.parentNode) {
+    const parent = nodeInternals.get(dragItem.parentNode);
+    const parentX = parent?.positionAbsolute?.x ?? 0;
+    const parentY = parent?.positionAbsolute?.y ?? 0;
+    currentExtent = [
+      [dragItem.extent[0][0] + parentX, dragItem.extent[0][1] + parentY],
+      [dragItem.extent[1][0] + parentX, dragItem.extent[1][1] + parentY],
+    ];
   }
 
   dragItem.position = currentExtent ? clampPosition(nextPosition, currentExtent as CoordinateExtent) : nextPosition;