From d9563505d8fb01862a3a6bae6e05dcea626c2e26 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Mon, 19 Aug 2024 17:44:36 +0200
Subject: [PATCH] fix node extent

---
 .changeset/twenty-ads-breathe.md                    |  7 +++++++
 packages/react/src/components/NodeWrapper/index.tsx |  5 +++--
 packages/react/src/store/index.ts                   |  9 +++++++--
 packages/system/src/utils/general.ts                | 11 ++++++++---
 packages/system/src/utils/graph.ts                  |  2 +-
 5 files changed, 26 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/twenty-ads-breathe.md

diff --git a/.changeset/twenty-ads-breathe.md b/.changeset/twenty-ads-breathe.md
new file mode 100644
index 00000000..f63a3add
--- /dev/null
+++ b/.changeset/twenty-ads-breathe.md
@@ -0,0 +1,7 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+'@xyflow/system': patch
+---
+
+Fix extent on nodes not working properly
diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx
index adc6f393..56d2b07c 100644
--- a/packages/react/src/components/NodeWrapper/index.tsx
+++ b/packages/react/src/components/NodeWrapper/index.tsx
@@ -42,7 +42,7 @@ export function NodeWrapper<NodeType extends Node>({
   nodeClickDistance,
   onError,
 }: NodeWrapperProps<NodeType>) {
-  const { node, internals, isParent } = useStore((s) => {
+  const { node, internals, isParent, origin } = useStore((s) => {
     const node = s.nodeLookup.get(id)! as InternalNode<NodeType>;
     const isParent = s.parentLookup.has(id);
 
@@ -50,6 +50,7 @@ export function NodeWrapper<NodeType extends Node>({
       node,
       internals: node.internals,
       isParent,
+      origin: node.origin ?? s.nodeOrigin,
     };
   }, shallow);
 
@@ -89,7 +90,7 @@ export function NodeWrapper<NodeType extends Node>({
   const inlineDimensions = getNodeInlineStyleDimensions(node);
   // TODO: clamping should happen earlier
   const clampedPosition = nodeExtent
-    ? clampPosition(internals.positionAbsolute, nodeExtent)
+    ? clampPosition(internals.positionAbsolute, nodeExtent, node.measured, origin)
     : internals.positionAbsolute;
 
   const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
index c45d8f2d..18d74ff7 100644
--- a/packages/react/src/store/index.ts
+++ b/packages/react/src/store/index.ts
@@ -278,10 +278,15 @@ const createStore = ({
         triggerEdgeChanges(edgeChanges);
       },
       setNodeExtent: (nodeExtent) => {
-        const { nodeLookup } = get();
+        const { nodeLookup, nodeOrigin } = get();
 
         for (const [, node] of nodeLookup) {
-          const positionAbsolute = clampPosition(node.internals.positionAbsolute, nodeExtent);
+          const positionAbsolute = clampPosition(
+            node.internals.positionAbsolute,
+            nodeExtent,
+            node.measured,
+            node.origin ?? nodeOrigin
+          );
 
           nodeLookup.set(node.id, {
             ...node,
diff --git a/packages/system/src/utils/general.ts b/packages/system/src/utils/general.ts
index 7d539fb5..67cf43b0 100644
--- a/packages/system/src/utils/general.ts
+++ b/packages/system/src/utils/general.ts
@@ -16,9 +16,14 @@ import { getNodePositionWithOrigin, isInternalNodeBase } from './graph';
 
 export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max);
 
-export const clampPosition = (position: XYPosition = { x: 0, y: 0 }, extent: CoordinateExtent) => ({
-  x: clamp(position.x, extent[0][0], extent[1][0]),
-  y: clamp(position.y, extent[0][1], extent[1][1]),
+export const clampPosition = (
+  position: XYPosition = { x: 0, y: 0 },
+  extent: CoordinateExtent,
+  dimensions: Partial<Dimensions>,
+  origin: NodeOrigin
+) => ({
+  x: clamp(position.x, extent[0][0], extent[1][0] - (dimensions?.width ?? 0) * origin[0]),
+  y: clamp(position.y, extent[0][1], extent[1][1] - (dimensions?.height ?? 0) * origin[1]),
 });
 
 /**
diff --git a/packages/system/src/utils/graph.ts b/packages/system/src/utils/graph.ts
index 207799bc..21f948e8 100644
--- a/packages/system/src/utils/graph.ts
+++ b/packages/system/src/utils/graph.ts
@@ -346,7 +346,7 @@ export function calculateNodePosition<NodeType extends NodeBase>({
   }
 
   const positionAbsolute = isCoordinateExtent(currentExtent)
-    ? clampPosition(nextPosition, currentExtent)
+    ? clampPosition(nextPosition, currentExtent, node.measured, origin)
     : nextPosition;
 
   return {