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

src/container/GraphView/index.tsx

@@ -4,7 +4,7 @@ import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import Viewport from '../Viewport';
-import useOnPaneReadyHandler from '../../hooks/useOnPaneReadyHandler';
+import useOnInitHandler from '../../hooks/useOnInitHandler';
 import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode, ReactFlowProps } from '../../types';
 
 export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges'> {
@@ -30,7 +30,7 @@ const GraphView = ({
   onMove,
   onMoveStart,
   onMoveEnd,
-  onPaneReady,
+  onInit,
   onNodeClick,
   onEdgeClick,
   onNodeDoubleClick,
@@ -82,7 +82,7 @@ const GraphView = ({
   noWheelClassName,
   noPanClassName,
 }: GraphViewProps) => {
-  useOnPaneReadyHandler(onPaneReady);
+  useOnInitHandler(onInit);
 
   return (
     <FlowRenderer

src/container/NodeRenderer/index.tsx

@@ -37,7 +37,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
   const { scale, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions, snapGrid, snapToGrid } =
     useStore(selector, shallow);
   const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
-  const reseizeObserverRef = useRef<ResizeObserver>();
+  const resizeObserverRef = useRef<ResizeObserver>();
 
   const resizeObserver = useMemo(() => {
     if (typeof ResizeObserver === 'undefined') {
@@ -54,14 +54,14 @@ const NodeRenderer = (props: NodeRendererProps) => {
       updateNodeDimensions(updates);
     });
 
-    reseizeObserverRef.current = observer;
+    resizeObserverRef.current = observer;
 
     return observer;
   }, []);
 
   useEffect(() => {
     return () => {
-      reseizeObserverRef?.current?.disconnect();
+      resizeObserverRef?.current?.disconnect();
     };
   }, []);
 
@@ -78,8 +78,6 @@ const NodeRenderer = (props: NodeRendererProps) => {
         const isDraggable = !!(node.draggable || (nodesDraggable && typeof node.draggable === 'undefined'));
         const isSelectable = !!(node.selectable || (elementsSelectable && typeof node.selectable === 'undefined'));
         const isConnectable = !!(node.connectable || (nodesConnectable && typeof node.connectable === 'undefined'));
-        const isInitialized =
-          node.width && node.height && typeof node.width !== 'undefined' && typeof node.height !== 'undefined';
 
         return (
           <NodeComponent
@@ -95,7 +93,6 @@ const NodeRenderer = (props: NodeRendererProps) => {
             xPos={node.positionAbsolute?.x ?? 0}
             yPos={node.positionAbsolute?.y ?? 0}
             dragging={!!node.dragging}
-            isInitialized={!!isInitialized}
             snapGrid={snapGrid}
             snapToGrid={snapToGrid}
             selectNodesOnDrag={props.selectNodesOnDrag}

src/container/ReactFlow/index.tsx

@@ -46,7 +46,7 @@ const ReactFlow: FunctionComponent<ReactFlowProps> = forwardRef<ReactFlowRefType
       edgeTypes = defaultEdgeTypes,
       onNodeClick,
       onEdgeClick,
-      onPaneReady,
+      onInit,
       onMove,
       onMoveStart,
       onMoveEnd,
@@ -115,10 +115,11 @@ const ReactFlow: FunctionComponent<ReactFlowProps> = forwardRef<ReactFlowRefType
       noDragClassName = 'nodrag',
       noWheelClassName = 'nowheel',
       noPanClassName = 'nopan',
-      fitViewOnInit = false,
+      fitView = false,
+      fitViewOptions,
       connectOnClick = true,
       attributionPosition,
-      pro,
+      proOptions,
       defaultEdgeOptions,
       ...rest
     },
@@ -132,7 +133,7 @@ const ReactFlow: FunctionComponent<ReactFlowProps> = forwardRef<ReactFlowRefType
       <div {...rest} ref={ref} className={reactFlowClasses}>
         <Wrapper>
           <GraphView
-            onPaneReady={onPaneReady}
+            onInit={onInit}
             onMove={onMove}
             onMoveStart={onMoveStart}
             onMoveEnd={onMoveEnd}
@@ -209,13 +210,14 @@ const ReactFlow: FunctionComponent<ReactFlowProps> = forwardRef<ReactFlowRefType
             snapGrid={snapGrid}
             connectionMode={connectionMode}
             translateExtent={translateExtent}
-            fitViewOnInit={fitViewOnInit}
             connectOnClick={connectOnClick}
             defaultEdgeOptions={defaultEdgeOptions}
+            fitView={fitView}
+            fitViewOptions={fitViewOptions}
           />
           {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
           {children}
-          <Attribution pro={pro} position={attributionPosition} />
+          <Attribution proOptions={proOptions} position={attributionPosition} />
         </Wrapper>
       </div>
     );