From 9097102386d470488fa20df45f938c93037a46d0 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 22 Aug 2024 15:20:56 +0200
Subject: [PATCH] fixed node extent = parent in subflows

---
 examples/react/src/examples/Subflow/index.tsx |  5 ++--
 packages/system/src/utils/store.ts            | 28 +++++++++++++++++--
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/examples/react/src/examples/Subflow/index.tsx b/examples/react/src/examples/Subflow/index.tsx
index 7b429d39..7130c1b1 100644
--- a/examples/react/src/examples/Subflow/index.tsx
+++ b/examples/react/src/examples/Subflow/index.tsx
@@ -13,7 +13,6 @@ import {
   MiniMap,
   Background,
   Panel,
-  NodeOrigin,
   useUpdateNodeInternals,
   ReactFlowProvider,
 } from '@xyflow/react';
@@ -34,6 +33,7 @@ const initialNodes: Node[] = [
     height: 1000,
     data: { label: 'Extent' },
     origin: [0, 0],
+    zIndex: -1,
   },
   {
     id: '1',
@@ -58,11 +58,10 @@ const initialNodes: Node[] = [
   {
     id: '4a',
     data: { label: 'Node 4a' },
-    position: { x: 15, y: 15 },
+    position: { x: -15, y: -15 },
     className: 'light',
     parentId: '4',
     origin: [0, 0],
-
     extent: [
       [0, 0],
       [300, 100],
diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts
index 8f8749d8..c0775af9 100644
--- a/packages/system/src/utils/store.ts
+++ b/packages/system/src/utils/store.ts
@@ -163,13 +163,35 @@ function calculateChildXYZ<NodeType extends NodeBase>(
   nodeOrigin: NodeOrigin,
   selectedNodeZ: number
 ) {
-  const position = getNodePositionWithOrigin(childNode, nodeOrigin);
+  const childDimensions = getNodeDimensions(childNode);
+  const parentPosition = parentNode.internals.positionAbsolute;
+
+  let position = getNodePositionWithOrigin(childNode, nodeOrigin);
+
+  if (isCoordinateExtent(childNode.extent)) {
+    position = clampPosition(position, childNode.extent, childDimensions);
+  }
+
+  let absolutePosition = { x: parentPosition.x + position.x, y: parentPosition.y + position.y };
+
+  if (childNode.extent === 'parent') {
+    const parentDimensions = getNodeDimensions(parentNode);
+    absolutePosition = clampPosition(
+      absolutePosition,
+      [
+        [parentPosition.x, parentPosition.y],
+        [parentPosition.x + parentDimensions.width, parentPosition.y + parentDimensions.height],
+      ],
+      childDimensions
+    );
+  }
+
   const childZ = calculateZ(childNode, selectedNodeZ);
   const parentZ = parentNode.internals.z ?? 0;
 
   return {
-    x: parentNode.internals.positionAbsolute.x + position.x,
-    y: parentNode.internals.positionAbsolute.y + position.y,
+    x: absolutePosition.x,
+    y: absolutePosition.y,
     z: parentZ > childZ ? parentZ : childZ,
   };
 }