Merge pull request #4572 from xyflow/fix-extent

fix node extent

packages/react/src/components/NodeWrapper/index.tsx

@@ -2,7 +2,6 @@ import { type MouseEvent, type KeyboardEvent } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 import {
-  clampPosition,
   elementSelectionKeys,
   errorMessages,
   getNodeDimensions,
@@ -87,10 +86,6 @@ export function NodeWrapper<NodeType extends Node>({
 
   const nodeDimensions = getNodeDimensions(node);
   const inlineDimensions = getNodeInlineStyleDimensions(node);
-  // TODO: clamping should happen earlier
-  const clampedPosition = nodeExtent
-    ? clampPosition(internals.positionAbsolute, nodeExtent)
-    : internals.positionAbsolute;
 
   const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
 
@@ -146,7 +141,7 @@ export function NodeWrapper<NodeType extends Node>({
       store.setState({
         ariaLiveMessage: `Moved selected node ${event.key
           .replace('Arrow', '')
-          .toLowerCase()}. New position, x: ${~~clampedPosition.x}, y: ${~~clampedPosition.y}`,
+          .toLowerCase()}. New position, x: ${~~internals.positionAbsolute.x}, y: ${~~internals.positionAbsolute.y}`,
       });
 
       moveSelectedNodes({
@@ -177,7 +172,7 @@ export function NodeWrapper<NodeType extends Node>({
       ref={nodeRef}
       style={{
         zIndex: internals.z,
-        transform: `translate(${clampedPosition.x}px,${clampedPosition.y}px)`,
+        transform: `translate(${internals.positionAbsolute.x}px,${internals.positionAbsolute.y}px)`,
         pointerEvents: hasPointerEvents ? 'all' : 'none',
         visibility: hasDimensions ? 'visible' : 'hidden',
         ...node.style,
@@ -202,8 +197,8 @@ export function NodeWrapper<NodeType extends Node>({
           id={id}
           data={node.data}
           type={nodeType}
-          positionAbsoluteX={clampedPosition.x}
-          positionAbsoluteY={clampedPosition.y}
+          positionAbsoluteX={internals.positionAbsolute.x}
+          positionAbsoluteY={internals.positionAbsolute.y}
           selected={node.selected}
           selectable={isSelectable}
           draggable={isDraggable}

packages/react/src/components/ReactFlowProvider/index.tsx

@@ -4,7 +4,7 @@ import { Provider } from '../../contexts/StoreContext';
 import { createStore } from '../../store';
 import { BatchProvider } from '../BatchProvider';
 import type { Node, Edge } from '../../types';
-import { NodeOrigin } from '@xyflow/system';
+import { CoordinateExtent, NodeOrigin } from '@xyflow/system';
 
 export type ReactFlowProviderProps = {
   initialNodes?: Node[];
@@ -15,6 +15,7 @@ export type ReactFlowProviderProps = {
   initialHeight?: number;
   fitView?: boolean;
   nodeOrigin?: NodeOrigin;
+  nodeExtent?: CoordinateExtent;
   children: ReactNode;
 };
 
@@ -27,6 +28,7 @@ export function ReactFlowProvider({
   initialHeight: height,
   fitView,
   nodeOrigin,
+  nodeExtent,
   children,
 }: ReactFlowProviderProps) {
   const [store] = useState(() =>
@@ -39,6 +41,7 @@ export function ReactFlowProvider({
       height,
       fitView,
       nodeOrigin,
+      nodeExtent,
     })
   );