fixed node extent = parent in subflows

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],

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,
+    x: absolutePosition.x,
-    y: parentNode.internals.positionAbsolute.y + position.y,
+    y: absolutePosition.y,
     z: parentZ > childZ ? parentZ : childZ,
   };
 }