Merge pull request #4572 from xyflow/fix-extent

fix node extent

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -53,6 +53,7 @@
   export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
   export let isValidConnection: $$Props['isValidConnection'] = undefined;
   export let translateExtent: $$Props['translateExtent'] = undefined;
+  export let nodeExtent: $$Props['nodeExtent'] = undefined;
   export let onlyRenderVisibleElements: $$Props['onlyRenderVisibleElements'] = undefined;
   export let panOnScrollMode: $$Props['panOnScrollMode'] = PanOnScrollMode.Free;
   export let preventScrolling: $$Props['preventScrolling'] = true;
@@ -102,7 +103,8 @@
         width,
         height,
         fitView,
-        nodeOrigin
+        nodeOrigin,
+        nodeExtent
       });
 
   onMount(() => {

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -206,6 +206,12 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
    * @example [[-1000, -10000], [1000, 1000]]
    */
   translateExtent?: CoordinateExtent;
+  /** By default the nodes can be placed anywhere. You can use this prop to set a boundary.
+   *
+   * The first pair of coordinates is the top left boundary and the second pair is the bottom right.
+   * @example [[-1000, -10000], [1000, 1000]]
+   */
+  nodeExtent?: CoordinateExtent;
   /** Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.
    * @default true
    */

packages/svelte/src/lib/store/index.ts

@@ -37,7 +37,8 @@ export function createStore({
   width,
   height,
   fitView: fitViewOnCreate,
-  nodeOrigin
+  nodeOrigin,
+  nodeExtent
 }: {
   nodes?: Node[];
   edges?: Edge[];
@@ -45,6 +46,7 @@ export function createStore({
   height?: number;
   fitView?: boolean;
   nodeOrigin?: NodeOrigin;
+  nodeExtent?: CoordinateExtent;
 }): SvelteFlowStore {
   const store = getInitialStore({
     nodes,
@@ -52,7 +54,8 @@ export function createStore({
     width,
     height,
     fitView: fitViewOnCreate,
-    nodeOrigin
+    nodeOrigin,
+    nodeExtent
   });
 
   function setNodeTypes(nodeTypes: NodeTypes) {
@@ -482,7 +485,8 @@ export function createStoreContext({
   width,
   height,
   fitView,
-  nodeOrigin
+  nodeOrigin,
+  nodeExtent
 }: {
   nodes?: Node[];
   edges?: Edge[];
@@ -490,8 +494,9 @@ export function createStoreContext({
   height?: number;
   fitView?: boolean;
   nodeOrigin?: NodeOrigin;
+  nodeExtent?: CoordinateExtent;
 }) {
-  const store = createStore({ nodes, edges, width, height, fitView, nodeOrigin });
+  const store = createStore({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent });
 
   setContext(key, {
     getStore: () => store

packages/svelte/src/lib/store/initial-store.ts

@@ -75,7 +75,8 @@ export const getInitialStore = ({
   width,
   height,
   fitView,
-  nodeOrigin
+  nodeOrigin,
+  nodeExtent
 }: {
   nodes?: Node[];
   edges?: Edge[];
@@ -83,17 +84,23 @@ export const getInitialStore = ({
   height?: number;
   fitView?: boolean;
   nodeOrigin?: NodeOrigin;
+  nodeExtent?: CoordinateExtent;
 }) => {
   const nodeLookup: NodeLookup = new Map();
   const parentLookup = new Map();
+  const connectionLookup = new Map();
+  const edgeLookup = new Map();
+
   const storeNodeOrigin = nodeOrigin ?? [0, 0];
+  const storeNodeExtent = nodeExtent ?? infiniteExtent;
+
   adoptUserNodes(nodes, nodeLookup, parentLookup, {
+    nodeExtent: storeNodeExtent,
     nodeOrigin: storeNodeOrigin,
     elevateNodesOnSelect: false,
     checkEquality: false
   });
-  const connectionLookup = new Map();
-  const edgeLookup = new Map();
+
   updateConnectionLookup(connectionLookup, edgeLookup, edges);
 
   let viewport: Viewport = { x: 0, y: 0, zoom: 1 };
@@ -107,7 +114,7 @@ export const getInitialStore = ({
 
   return {
     flowId: writable<string | null>(null),
-    nodes: createNodesStore(nodes, nodeLookup, parentLookup, storeNodeOrigin),
+    nodes: createNodesStore(nodes, nodeLookup, parentLookup, storeNodeOrigin, storeNodeExtent),
     nodeLookup: readable<NodeLookup<InternalNode>>(nodeLookup),
     parentLookup: readable<ParentLookup<InternalNode>>(parentLookup),
     edgeLookup: readable<EdgeLookup<Edge>>(edgeLookup),
@@ -121,7 +128,7 @@ export const getInitialStore = ({
     maxZoom: writable<number>(2),
     nodeOrigin: writable<NodeOrigin>(storeNodeOrigin),
     nodeDragThreshold: writable<number>(1),
-    nodeExtent: writable<CoordinateExtent>(infiniteExtent),
+    nodeExtent: writable<CoordinateExtent>(storeNodeExtent),
     translateExtent: writable<CoordinateExtent>(infiniteExtent),
     autoPanOnNodeDrag: writable<boolean>(true),
     autoPanOnConnect: writable<boolean>(true),

packages/svelte/src/lib/store/utils.ts

@@ -15,7 +15,9 @@ import {
   type EdgeLookup,
   type NodeLookup,
   type ParentLookup,
-  type NodeOrigin
+  type NodeOrigin,
+  infiniteExtent,
+  type CoordinateExtent
 } from '@xyflow/system';
 
 import type { DefaultEdgeOptions, DefaultNodeOptions, Edge, InternalNode, Node } from '$lib/types';
@@ -131,7 +133,8 @@ export const createNodesStore = (
   nodes: Node[],
   nodeLookup: NodeLookup<InternalNode>,
   parentLookup: ParentLookup<InternalNode>,
-  nodeOrigin: NodeOrigin = [0, 0]
+  nodeOrigin: NodeOrigin = [0, 0],
+  nodeExtent: CoordinateExtent = infiniteExtent
 ): {
   subscribe: (this: void, run: Subscriber<Node[]>) => Unsubscriber;
   update: (this: void, updater: Updater<Node[]>) => void;
@@ -148,6 +151,7 @@ export const createNodesStore = (
     adoptUserNodes(nds, nodeLookup, parentLookup, {
       elevateNodesOnSelect,
       nodeOrigin,
+      nodeExtent,
       defaults,
       checkEquality: false
     });