Merge pull request #4572 from xyflow/fix-extent

fix node extent

examples/react/src/examples/Subflow/index.tsx

@@ -13,9 +13,9 @@ import {
   MiniMap,
   Background,
   Panel,
-  NodeOrigin,
   useUpdateNodeInternals,
   ReactFlowProvider,
+  CoordinateExtent,
 } from '@xyflow/react';
 
 import DebugNode from './DebugNode';
@@ -27,11 +27,20 @@ const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
 const defaultViewport = { x: 0, y: 0, zoom: 1.5 };
 const initialNodes: Node[] = [
+  {
+    id: 'extent',
+    position: { x: 0, y: 0 },
+    width: 1000,
+    height: 1000,
+    data: { label: 'Extent' },
+    origin: [0, 0],
+    zIndex: -1,
+  },
   {
     id: '1',
     type: 'input',
     data: { label: 'Node 1' },
-    position: { x: 250, y: 5 },
+    position: { x: -200, y: -500 },
     className: 'light',
     origin: [0.5, 0.5],
   },
@@ -40,7 +49,7 @@ const initialNodes: Node[] = [
     data: { label: 'Node 4' },
     position: { x: 100, y: 200 },
     className: 'light',
-    origin: [0.5, 0.5],
+    origin: [0, 0],
     style: {
       backgroundColor: 'rgba(255,50, 50, 0.5)',
       width: 500,
@@ -50,14 +59,13 @@ 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.5, 0.5],
-
+    origin: [0, 0],
     extent: [
       [0, 0],
-      [100, 100],
+      [300, 100],
     ],
   },
   {
@@ -98,9 +106,13 @@ const initialNodes: Node[] = [
   {
     id: '5a',
     data: { label: 'Node 5a' },
-    position: { x: 0, y: 0 },
+    position: { x: -100, y: -100 },
     className: 'light',
     parentId: '5',
+    // extent: [
+    //   [0, 0],
+    //   [300, 300],
+    // ],
     extent: 'parent',
   },
   {
@@ -151,6 +163,11 @@ const nodeTypes = {
   default: DebugNode,
 };
 
+const nodeExtent: CoordinateExtent = [
+  [0, 0],
+  [1000, 1000],
+];
+
 const Subflow = () => {
   const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
   const updateNodeInternals = useUpdateNodeInternals();
@@ -220,6 +237,7 @@ const Subflow = () => {
       nodeTypes={nodeTypes}
       fitView
       nodeOrigin={[0, 0]}
+      nodeExtent={nodeExtent}
     >
       <MiniMap />
       <Controls />
@@ -239,7 +257,7 @@ const Subflow = () => {
 };
 
 export default () => (
-  <ReactFlowProvider>
+  <ReactFlowProvider nodeExtent={nodeExtent}>
     <Subflow />
   </ReactFlowProvider>
 );