added nodeExtent to Svelte Flow and React Flow Provider

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

@@ -90,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, node.measured)
+    ? clampPosition(internals.positionAbsolute, nodeExtent, nodeDimensions)
     : internals.positionAbsolute;
 
   const hasPointerEvents = isSelectable || isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;

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,
     })
   );
 

packages/react/src/container/ReactFlow/Wrapper.tsx

@@ -3,7 +3,7 @@ import { useContext, type ReactNode } from 'react';
 import StoreContext from '../../contexts/StoreContext';
 import { ReactFlowProvider } from '../../components/ReactFlowProvider';
 import type { Node, Edge } from '../../types';
-import { NodeOrigin } from '@xyflow/system';
+import { CoordinateExtent, NodeOrigin } from '@xyflow/system';
 
 export function Wrapper({
   children,
@@ -15,6 +15,7 @@ export function Wrapper({
   height,
   fitView,
   nodeOrigin,
+  nodeExtent,
 }: {
   children: ReactNode;
   nodes?: Node[];
@@ -25,6 +26,7 @@ export function Wrapper({
   height?: number;
   fitView?: boolean;
   nodeOrigin?: NodeOrigin;
+  nodeExtent?: CoordinateExtent;
 }) {
   const isWrapped = useContext(StoreContext);
 
@@ -44,6 +46,7 @@ export function Wrapper({
       initialHeight={height}
       fitView={fitView}
       nodeOrigin={nodeOrigin}
+      nodeExtent={nodeExtent}
     >
       {children}
     </ReactFlowProvider>

packages/react/src/container/ReactFlow/index.tsx

@@ -160,7 +160,15 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
       data-testid="rf__wrapper"
       id={id}
     >
-      <Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView} nodeOrigin={nodeOrigin}>
+      <Wrapper
+        nodes={nodes}
+        edges={edges}
+        width={width}
+        height={height}
+        fitView={fitView}
+        nodeOrigin={nodeOrigin}
+        nodeExtent={nodeExtent}
+      >
         <GraphView<NodeType, EdgeType>
           onInit={onInit}
           onNodeClick={onNodeClick}

packages/react/src/store/index.ts

@@ -15,6 +15,7 @@ import {
   ParentExpandChild,
   initialConnection,
   NodeOrigin,
+  CoordinateExtent,
 } from '@xyflow/system';
 
 import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
@@ -30,6 +31,7 @@ const createStore = ({
   height,
   fitView,
   nodeOrigin,
+  nodeExtent,
 }: {
   nodes?: Node[];
   edges?: Edge[];
@@ -39,10 +41,11 @@ const createStore = ({
   height?: number;
   fitView?: boolean;
   nodeOrigin?: NodeOrigin;
+  nodeExtent?: CoordinateExtent;
 }) =>
   createWithEqualityFn<ReactFlowState>(
     (set, get) => ({
-      ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, defaultNodes, defaultEdges }),
+      ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
       setNodes: (nodes: Node[]) => {
         const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
         // setNodes() is called exclusively in response to user actions:

packages/react/src/store/initialState.ts

@@ -9,6 +9,7 @@ import {
   getInternalNodesBounds,
   NodeOrigin,
   initialConnection,
+  CoordinateExtent,
 } from '@xyflow/system';
 
 import type { Edge, InternalNode, Node, ReactFlowStore } from '../types';
@@ -22,6 +23,7 @@ const getInitialState = ({
   height,
   fitView,
   nodeOrigin,
+  nodeExtent,
 }: {
   nodes?: Node[];
   edges?: Edge[];
@@ -31,18 +33,22 @@ const getInitialState = ({
   height?: number;
   fitView?: boolean;
   nodeOrigin?: NodeOrigin;
+  nodeExtent?: CoordinateExtent;
 } = {}): ReactFlowStore => {
   const nodeLookup = new Map<string, InternalNode>();
   const parentLookup = new Map();
   const connectionLookup = new Map();
   const edgeLookup = new Map();
+
   const storeEdges = defaultEdges ?? edges ?? [];
   const storeNodes = defaultNodes ?? nodes ?? [];
   const storeNodeOrigin = nodeOrigin ?? [0, 0];
+  const storeNodeExtent = nodeExtent ?? infiniteExtent;
 
   updateConnectionLookup(connectionLookup, edgeLookup, storeEdges);
   adoptUserNodes(storeNodes, nodeLookup, parentLookup, {
     nodeOrigin: storeNodeOrigin,
+    nodeExtent: storeNodeExtent,
     elevateNodesOnSelect: false,
   });
 
@@ -76,7 +82,7 @@ const getInitialState = ({
     minZoom: 0.5,
     maxZoom: 2,
     translateExtent: infiniteExtent,
-    nodeExtent: infiniteExtent,
+    nodeExtent: storeNodeExtent,
     nodesSelectionActive: false,
     userSelectionActive: false,
     userSelectionRect: null,