feat(provider): add minZoom, maxZoom and fitViewOptions

packages/react/src/store/index.ts

@@ -18,7 +18,7 @@ import {
 
 import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes';
 import getInitialState from './initialState';
-import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams } from '../types';
+import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions } from '../types';
 
 const createStore = ({
   nodes,
@@ -28,6 +28,9 @@ const createStore = ({
   width,
   height,
   fitView,
+  fitViewOptions,
+  minZoom,
+  maxZoom,
   nodeOrigin,
   nodeExtent,
 }: {
@@ -38,6 +41,9 @@ const createStore = ({
   width?: number;
   height?: number;
   fitView?: boolean;
+  fitViewOptions?: FitViewOptions;
+  minZoom?: number;
+  maxZoom?: number;
   nodeOrigin?: NodeOrigin;
   nodeExtent?: CoordinateExtent;
 }) =>
@@ -70,7 +76,20 @@ const createStore = ({
     }
 
     return {
-      ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, nodeExtent, defaultNodes, defaultEdges }),
+      ...getInitialState({
+        nodes,
+        edges,
+        width,
+        height,
+        fitView,
+        fitViewOptions,
+        minZoom,
+        maxZoom,
+        nodeOrigin,
+        nodeExtent,
+        defaultNodes,
+        defaultEdges,
+      }),
       setNodes: (nodes: Node[]) => {
         const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect, fitViewQueued } = get();
         /*

packages/react/src/store/initialState.ts

@@ -12,7 +12,7 @@ import {
   CoordinateExtent,
 } from '@xyflow/system';
 
-import type { Edge, InternalNode, Node, ReactFlowStore } from '../types';
+import type { Edge, FitViewOptions, InternalNode, Node, ReactFlowStore } from '../types';
 
 const getInitialState = ({
   nodes,
@@ -22,6 +22,9 @@ const getInitialState = ({
   width,
   height,
   fitView,
+  fitViewOptions,
+  minZoom = 0.5,
+  maxZoom = 2,
   nodeOrigin,
   nodeExtent,
 }: {
@@ -32,6 +35,9 @@ const getInitialState = ({
   width?: number;
   height?: number;
   fitView?: boolean;
+  fitViewOptions?: FitViewOptions;
+  minZoom?: number;
+  maxZoom?: number;
   nodeOrigin?: NodeOrigin;
   nodeExtent?: CoordinateExtent;
 } = {}): ReactFlowStore => {
@@ -59,7 +65,14 @@ const getInitialState = ({
       filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight)),
     });
 
-    const { x, y, zoom } = getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
+    const { x, y, zoom } = getViewportForBounds(
+      bounds,
+      width,
+      height,
+      minZoom,
+      maxZoom,
+      fitViewOptions?.padding ?? 0.1
+    );
     transform = [x, y, zoom];
   }
 
@@ -80,8 +93,8 @@ const getInitialState = ({
     hasDefaultNodes: defaultNodes !== undefined,
     hasDefaultEdges: defaultEdges !== undefined,
     panZoom: null,
-    minZoom: 0.5,
-    maxZoom: 2,
+    minZoom,
+    maxZoom,
     translateExtent: infiniteExtent,
     nodeExtent: storeNodeExtent,
     nodesSelectionActive: false,
@@ -110,7 +123,7 @@ const getInitialState = ({
     multiSelectionActive: false,
 
     fitViewQueued: fitView ?? false,
-    fitViewOptions: undefined,
+    fitViewOptions,
     fitViewResolver: null,
 
     connection: { ...initialConnection },