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

src/types/component-props.ts

@@ -20,15 +20,15 @@ import {
   OnEdgeUpdateFunc,
   NodeChange,
   EdgeChange,
-  OnPaneReady,
+  OnInit,
   ProOptions,
   AttributionPosition,
   DefaultEdgeOptions,
-  FitViewParams,
+  FitViewOptions,
   BackgroundVariant,
 } from '.';
 
-export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onPaneReady'> {
+export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   nodes?: Node[];
   edges?: Edge[];
   defaultNodes?: Node[];
@@ -50,7 +50,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onConnectStart?: OnConnectStart;
   onConnectStop?: OnConnectStop;
   onConnectEnd?: OnConnectEnd;
-  onPaneReady?: OnPaneReady;
+  onInit?: OnInit;
   onMove?: (viewport?: Viewport) => void;
   onMoveStart?: (viewport?: Viewport) => void;
   onMoveEnd?: (viewport?: Viewport) => void;
@@ -106,10 +106,11 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   noDragClassName?: string;
   noWheelClassName?: string;
   noPanClassName?: string;
-  fitViewOnInit?: boolean;
+  fitView?: boolean;
+  fitViewOptions?: FitViewOptions;
   connectOnClick?: boolean;
   attributionPosition?: AttributionPosition;
-  pro?: ProOptions;
+  proOptions?: ProOptions;
 }
 
 export type ReactFlowRefType = HTMLDivElement;
@@ -129,7 +130,7 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
   showZoom?: boolean;
   showFitView?: boolean;
   showInteractive?: boolean;
-  fitViewParams?: FitViewParams;
+  fitViewOptions?: FitViewOptions;
   onZoomIn?: () => void;
   onZoomOut?: () => void;
   onFitView?: () => void;

src/types/general.ts

@@ -12,7 +12,7 @@ import { ReactFlowInstance } from './instance';
 export type NodeTypesType = { [key: string]: ReactNode };
 export type EdgeTypesType = NodeTypesType;
 
-export type FitView = (fitViewOptions?: FitViewParams) => void;
+export type FitView = (fitViewOptions?: FitViewOptions) => void;
 
 export type Project = (position: XYPosition) => XYPosition;
 
@@ -28,9 +28,7 @@ export type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionO
 export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => void;
 export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => void;
 
-export type OnPaneReady<NodeData = any, EdgeData = any> = (
-  reactFlowInstance: ReactFlowInstance<NodeData, EdgeData>
-) => void;
+export type OnInit<NodeData = any, EdgeData = any> = (reactFlowInstance: ReactFlowInstance<NodeData, EdgeData>) => void;
 
 export interface Connection {
   source: string | null;
@@ -46,7 +44,7 @@ export enum ConnectionMode {
 
 export type OnConnect = (connection: Connection) => void;
 
-export type FitViewParams = {
+export type FitViewOptions = {
   padding?: number;
   includeHiddenNodes?: boolean;
   minZoom?: number;
@@ -153,9 +151,6 @@ export type ReactFlowStore = {
 
   reactFlowVersion: string;
 
-  fitViewOnInit: boolean;
-  fitViewOnInitDone: boolean;
-
   connectionStartHandle: StartHandle | null;
 
   onConnect?: OnConnect;
@@ -165,6 +160,10 @@ export type ReactFlowStore = {
 
   connectOnClick: boolean;
   defaultEdgeOptions?: DefaultEdgeOptions;
+
+  fitViewOnInit: boolean;
+  fitViewOnInitDone: boolean;
+  fitViewOnInitOptions: FitViewOptions | undefined;
 };
 
 export type ReactFlowActions = {

src/types/nodes.ts

@@ -81,7 +81,6 @@ export interface WrapNodeProps<T = any> {
   sourcePosition?: Position;
   targetPosition?: Position;
   hidden?: boolean;
-  isInitialized?: boolean;
   snapToGrid?: boolean;
   snapGrid?: SnapGrid;
   dragging: boolean;