refactor(fitView): use same fitView function for viewport helper and initial prop

example/src/Basic/index.tsx

@@ -63,7 +63,7 @@ const BasicFlow = () => {
       defaultZoom={1.5}
       minZoom={0.2}
       maxZoom={4}
-      fitViewOnInit
+      fitView
     >
       <Background variant={BackgroundVariant.Lines} />
 

example/src/ControlledUncontrolled/index.tsx

@@ -69,7 +69,7 @@ const ControlledUncontrolled = () => {
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       defaultEdgeOptions={defaultEdgeOptions}
-      fitViewOnInit
+      fitView
     >
       <Background variant={BackgroundVariant.Lines} />
 

example/src/CustomNode/index.tsx

@@ -16,7 +16,7 @@ import ReactFlow, {
 
 import ColorSelectorNode from './ColorSelectorNode';
 
-const onPaneReady = (reactFlowInstance: ReactFlowInstance) => {
+const onInit = (reactFlowInstance: ReactFlowInstance) => {
   console.log('flow loaded:', reactFlowInstance);
   reactFlowInstance.fitView();
 };
@@ -111,13 +111,13 @@ const CustomNodeFlow = () => {
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
       style={{ background: bgColor }}
-      onPaneReady={onPaneReady}
+      onInit={onInit}
       nodeTypes={nodeTypes}
       connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
       snapGrid={snapGrid}
       defaultZoom={1.5}
-      fitViewOnInit
+      fitView
     >
       <MiniMap
         nodeStrokeColor={(n: Node): string => {

example/src/DefaultNodes/index.tsx

@@ -55,12 +55,7 @@ const DefaultNodes = () => {
   };
 
   return (
-    <ReactFlow
-      defaultNodes={defaultNodes}
-      defaultEdges={defaultEdges}
-      defaultEdgeOptions={defaultEdgeOptions}
-      fitViewOnInit
-    >
+    <ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} defaultEdgeOptions={defaultEdgeOptions} fitView>
       <Background variant={BackgroundVariant.Lines} />
 
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>

example/src/DragNDrop/index.tsx

@@ -31,7 +31,7 @@ const DnDFlow = () => {
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
   const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
-  const onPaneReady = (rfi: ReactFlowInstance) => setReactFlowInstance(rfi);
+  const onInit = (rfi: ReactFlowInstance) => setReactFlowInstance(rfi);
 
   const onDrop = (event: DragEvent) => {
     event.preventDefault();
@@ -60,7 +60,7 @@ const DnDFlow = () => {
             onEdgesChange={onEdgesChange}
             onNodesChange={onNodesChange}
             onConnect={onConnect}
-            onPaneReady={onPaneReady}
+            onInit={onInit}
             onDrop={onDrop}
             onDragOver={onDragOver}
           >

example/src/EdgeTypes/index.tsx

@@ -15,7 +15,7 @@ import ReactFlow, {
 } from 'react-flow-renderer';
 import { getElements } from './utils';
 
-const onPaneReady = (reactFlowInstance: ReactFlowInstance) => {
+const onInit = (reactFlowInstance: ReactFlowInstance) => {
   reactFlowInstance.fitView();
   console.log(reactFlowInstance.getNodes());
 };
@@ -36,7 +36,7 @@ const EdgeTypesFlow = () => {
       edges={edges}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
-      onPaneReady={onPaneReady}
+      onInit={onInit}
       onConnect={onConnect}
       minZoom={0.2}
       zoomOnScroll={false}

example/src/Edges/index.tsx

@@ -18,7 +18,7 @@ import ReactFlow, {
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';
 
-const onPaneReady = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
+const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 
@@ -121,7 +121,7 @@ const EdgesFlow = () => {
       onNodeClick={onNodeClick}
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
-      onPaneReady={onPaneReady}
+      onInit={onInit}
       snapToGrid={true}
       edgeTypes={edgeTypes}
     >

example/src/Empty/index.tsx

@@ -13,7 +13,7 @@ import ReactFlow, {
   ReactFlowInstance,
 } from 'react-flow-renderer';
 
-const onPaneReady = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
+const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 
@@ -38,7 +38,7 @@ const EmptyFlow = () => {
     <ReactFlow
       nodes={nodes}
       edges={edges}
-      onPaneReady={onPaneReady}
+      onInit={onInit}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onNodeClick={onNodeClick}

example/src/FloatingEdges/index.tsx

@@ -16,7 +16,7 @@ import FloatingEdge from './FloatingEdge';
 import FloatingConnectionLine from './FloatingConnectionLine';
 import { createElements } from './utils';
 
-const onPaneReady = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
+const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
 
 const { nodes: initialNodes, edges: initialEdges } = createElements();
 
@@ -40,7 +40,7 @@ const FloatingEdges = () => {
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
-        onPaneReady={onPaneReady}
+        onInit={onInit}
         edgeTypes={edgeTypes}
         connectionLineComponent={FloatingConnectionLine}
       >

example/src/Layouting/index.tsx

@@ -67,7 +67,7 @@ const LayoutFlow = () => {
           edges={edges}
           onConnect={onConnect}
           nodeExtent={nodeExtent}
-          onPaneReady={() => onLayout('TB')}
+          onInit={() => onLayout('TB')}
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
         >

example/src/NestedNodes/index.tsx

@@ -91,7 +91,7 @@ const NestedFlow = () => {
   const onConnect = useCallback((connection: Connection) => {
     setEdges((eds) => addEdge(connection, eds));
   }, []);
-  const onPaneReady = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
+  const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
 
   const updatePos = () => {
     setNodes((nds) => {
@@ -131,7 +131,7 @@ const NestedFlow = () => {
     <ReactFlow
       nodes={nodes}
       edges={edges}
-      onPaneReady={onPaneReady}
+      onInit={onInit}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onNodeClick={onNodeClick}

example/src/NodeTypeChange/index.tsx

@@ -58,7 +58,7 @@ const NodeTypeChangeFlow = () => {
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onConnect={onConnect}
-      fitViewOnInit
+      fitView
     >
       <button onClick={changeType} style={buttonStyle}>
         change type

example/src/Overview/index.tsx

@@ -32,7 +32,7 @@ const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => {
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('node click:', node);
 
 const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) => console.log('selection change', nodes, edges);
-const onPaneReady = (reactFlowInstance: ReactFlowInstance) => {
+const onInit = (reactFlowInstance: ReactFlowInstance) => {
   console.log('pane ready:', reactFlowInstance);
 };
 
@@ -183,7 +183,7 @@ const OverviewFlow = () => {
       onSelectionChange={onSelectionChange}
       onMoveStart={onMoveStart}
       onMoveEnd={onMoveEnd}
-      onPaneReady={onPaneReady}
+      onInit={onInit}
       connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
       snapGrid={snapGrid}
@@ -192,8 +192,10 @@ const OverviewFlow = () => {
       onEdgeMouseMove={onEdgeMouseMove}
       onEdgeMouseLeave={onEdgeMouseLeave}
       onEdgeDoubleClick={onEdgeDoubleClick}
-      fitViewOnInit
+      fitView
+      fitViewOptions={{ padding: 0.2 }}
       attributionPosition="top-right"
+      maxZoom={Infinity}
     >
       <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
       <Controls />

example/src/Provider/index.tsx

@@ -17,7 +17,7 @@ import Sidebar from './Sidebar';
 import './provider.css';
 
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
-const onPaneReady = (reactFlowInstance: ReactFlowInstance) => console.log('pane ready:', reactFlowInstance);
+const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('pane ready:', reactFlowInstance);
 
 const initialNodes: Node[] = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
@@ -48,7 +48,7 @@ const ProviderFlow = () => {
             onEdgesChange={onEdgesChange}
             onNodeClick={onNodeClick}
             onConnect={onConnect}
-            onPaneReady={onPaneReady}
+            onInit={onInit}
             connectionMode={ConnectionMode.Loose}
           >
             <Controls />

example/src/SaveRestore/index.tsx

@@ -35,7 +35,7 @@ const SaveRestore = () => {
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
-        onPaneReady={setRfInstance}
+        onInit={setRfInstance}
       >
         <Controls rfInstance={rfInstance} setNodes={setNodes} setEdges={setEdges} />
       </ReactFlow>

example/src/Stress/index.tsx

@@ -16,7 +16,7 @@ import { getNodesAndEdges } from './utils';
 
 const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 4 };
 
-const onPaneReady = (reactFlowInstance: ReactFlowInstance) => {
+const onInit = (reactFlowInstance: ReactFlowInstance) => {
   reactFlowInstance.fitView();
   console.log(reactFlowInstance.getNodes());
 };
@@ -55,13 +55,7 @@ const StressFlow = () => {
   }, []);
 
   return (
-    <ReactFlow
-      nodes={nodes}
-      edges={edges}
-      onPaneReady={onPaneReady}
-      onConnect={onConnect}
-      onNodesChange={onNodesChange}
-    >
+    <ReactFlow nodes={nodes} edges={edges} onInit={onInit} onConnect={onConnect} onNodesChange={onNodesChange}>
       <MiniMap />
       <Controls />
       <Background />

example/src/Subflow/index.tsx

@@ -113,7 +113,7 @@ const BasicFlow = () => {
   const onConnect = useCallback((connection: Connection) => {
     setEdges((eds) => addEdge(connection, eds));
   }, []);
-  const onPaneReady = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
+  const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
 
   const updatePos = () => {
     setNodes((nds) => {
@@ -155,7 +155,7 @@ const BasicFlow = () => {
     <ReactFlow
       nodes={nodes}
       edges={edges}
-      onPaneReady={onPaneReady}
+      onInit={onInit}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onNodeClick={onNodeClick}
@@ -168,7 +168,7 @@ const BasicFlow = () => {
       maxZoom={4}
       onlyRenderVisibleElements={false}
       nodeTypes={nodeTypes}
-      fitViewOnInit
+      fitView
     >
       <MiniMap />
       <Controls />

example/src/UpdatableEdge/index.tsx

@@ -53,7 +53,7 @@ const initialNodes: Node[] = [
 
 const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }];
 
-const onPaneReady = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
+const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
 const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge) => console.log('start update', edge);
 const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge) => console.log('end update', edge);
 
@@ -79,7 +79,7 @@ const UpdatableEdge = () => {
       edges={edges}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
-      onPaneReady={onPaneReady}
+      onInit={onInit}
       snapToGrid={true}
       onEdgeUpdate={onEdgeUpdate}
       onConnect={onConnect}

example/src/UseZoomPanHelper/index.tsx

@@ -33,7 +33,7 @@ const UseZoomPanHelperFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
   const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
-  const { project, setCenter, zoomIn, zoomOut } = useReactFlow();
+  const { project, setCenter, zoomIn, zoomOut, fitView } = useReactFlow();
 
   const onPaneClick = useCallback(
     (evt) => {
@@ -55,7 +55,7 @@ const UseZoomPanHelperFlow = () => {
   const onNodeClick = useCallback(
     (_, element) => {
       const { x, y } = element.position;
-      setCenter(x, y, { zoom: 1 });
+      setCenter(x, y, { zoom: 1, duration: 1200 });
     },
     [setCenter]
   );
@@ -69,10 +69,14 @@ const UseZoomPanHelperFlow = () => {
       onNodeClick={onNodeClick}
       onConnect={onConnect}
       onPaneClick={onPaneClick}
+      fitView
+      fitViewOptions={{ duration: 1200, padding: 0.2 }}
+      maxZoom={Infinity}
     >
       <div style={{ position: 'absolute', left: 0, top: 0, zIndex: 100 }}>
         <button onClick={() => zoomIn({ duration: 1200 })}>zoomIn</button>
         <button onClick={() => zoomOut({ duration: 0 })}>zoomOut</button>
+        <button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>fitView</button>
       </div>
       <Background />
       <MiniMap />

example/src/Validation/index.tsx

@@ -70,7 +70,7 @@ const ValidationFlow = () => {
       onConnectStart={onConnectStart}
       onConnectStop={onConnectStop}
       onConnectEnd={onConnectEnd}
-      fitViewOnInit
+      fitView
     />
   );
 };