fix node extent

.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

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;

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,

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) => ({
+export const clampPosition = (
-  x: clamp(position.x, extent[0][0], extent[1][0]),
+  position: XYPosition = { x: 0, y: 0 },
-  y: clamp(position.y, extent[0][1], extent[1][1]),
+  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]),
 });
 
 /**

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 {