added nodeExtent to Svelte Flow and React Flow Provider

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