refactor(general): fit view in store to prevent flickering, rename onLoad => onPaneReady

example/src/Basic/index.tsx

@@ -7,7 +7,7 @@ import ReactFlow, {
   Controls,
   Node,
   Edge,
-  OnLoadParams,
+  ReactFlowInstance,
   Connection,
   MarkerType,
   useNodesState,
@@ -105,7 +105,7 @@ const nodeTypes = {
 };
 
 const BasicFlow = () => {
-  const [rfInstance, setRfInstance] = useState<OnLoadParams | null>(null);
+  const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
@@ -114,7 +114,7 @@ const BasicFlow = () => {
       return addEdge(connection, eds);
     });
   }, []);
-  const onLoad = useCallback((reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance), []);
+  const onPaneReady = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
 
   const updatePos = () => {
     setNodes((nds) => {
@@ -154,7 +154,7 @@ const BasicFlow = () => {
     <ReactFlow
       nodes={nodes}
       edges={edges}
-      onLoad={onLoad}
+      onPaneReady={onPaneReady}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onNodeClick={onNodeClick}
@@ -167,6 +167,7 @@ const BasicFlow = () => {
       maxZoom={4}
       onlyRenderVisibleElements={false}
       nodeTypes={nodeTypes}
+      fitViewOnInit
     >
       <MiniMap />
       <Controls />

example/src/CustomNode/index.tsx

@@ -6,7 +6,7 @@ import ReactFlow, {
   MiniMap,
   Controls,
   Node,
-  OnLoadParams,
+  ReactFlowInstance,
   Position,
   SnapGrid,
   Connection,
@@ -16,7 +16,7 @@ import ReactFlow, {
 
 import ColorSelectorNode from './ColorSelectorNode';
 
-const onLoad = (reactFlowInstance: OnLoadParams) => {
+const onPaneReady = (reactFlowInstance: ReactFlowInstance) => {
   console.log('flow loaded:', reactFlowInstance);
   reactFlowInstance.fitView();
 };
@@ -111,12 +111,13 @@ const CustomNodeFlow = () => {
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
       style={{ background: bgColor }}
-      onLoad={onLoad}
+      onPaneReady={onPaneReady}
       nodeTypes={nodeTypes}
       connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
       snapGrid={snapGrid}
       defaultZoom={1.5}
+      fitViewOnInit
     >
       <MiniMap
         nodeStrokeColor={(n: Node): string => {
@@ -137,4 +138,4 @@ const CustomNodeFlow = () => {
   );
 };
 
-export default CustomNodeFlow;
+export default CustomNodeFlow;

example/src/FloatingEdges/index.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import ReactFlow, {
   addEdge,
   Background,
-  OnLoadParams,
+  ReactFlowInstance,
   EdgeTypesType,
   Connection,
   useNodesState,
@@ -16,7 +16,7 @@ import FloatingEdge from './FloatingEdge';
 import FloatingConnectionLine from './FloatingConnectionLine';
 import { createElements } from './utils';
 
-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
+const onPaneReady = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
 
 const { nodes: initialNodes, edges: initialEdges } = createElements();
 
@@ -40,7 +40,7 @@ const FloatingEdges = () => {
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
-        onLoad={onLoad}
+        onPaneReady={onPaneReady}
         edgeTypes={edgeTypes}
         connectionLineComponent={FloatingConnectionLine}
       >

example/src/Layouting/index.tsx

@@ -2,11 +2,7 @@ import { useCallback } from 'react';
 import ReactFlow, {
   ReactFlowProvider,
   addEdge,
-  applyNodeChanges,
-  applyEdgeChanges,
   Controls,
-  NodeChange,
-  EdgeChange,
   Connection,
   CoordinateExtent,
   Position,
@@ -71,7 +67,7 @@ const LayoutFlow = () => {
           edges={edges}
           onConnect={onConnect}
           nodeExtent={nodeExtent}
-          onLoad={() => onLayout('TB')}
+          onPaneReady={() => onLayout('TB')}
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
         >

example/src/NestedNodes/index.tsx

@@ -9,7 +9,7 @@ import ReactFlow, {
   Controls,
   Node,
   Edge,
-  OnLoadParams,
+  ReactFlowInstance,
   Connection,
 } from 'react-flow-renderer';
 
@@ -84,14 +84,14 @@ const initialEdges: Edge[] = [
 ];
 
 const NestedFlow = () => {
-  const [rfInstance, setRfInstance] = useState<OnLoadParams | null>(null);
+  const [rfInstance, setRfInstance] = useState<ReactFlowInstance | null>(null);
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
   const onConnect = useCallback((connection: Connection) => {
     setEdges((eds) => addEdge(connection, eds));
   }, []);
-  const onLoad = useCallback((reactFlowInstance: OnLoadParams) => setRfInstance(reactFlowInstance), []);
+  const onPaneReady = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
 
   const updatePos = () => {
     setNodes((nds) => {
@@ -131,7 +131,7 @@ const NestedFlow = () => {
     <ReactFlow
       nodes={nodes}
       edges={edges}
-      onLoad={onLoad}
+      onPaneReady={onPaneReady}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onNodeClick={onNodeClick}

example/src/Stress/index.tsx

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

example/src/UpdatableEdge/index.tsx

@@ -5,7 +5,7 @@ import ReactFlow, {
   addEdge,
   applyNodeChanges,
   applyEdgeChanges,
-  OnLoadParams,
+  ReactFlowInstance,
   Connection,
   Edge,
   Node,
@@ -53,7 +53,7 @@ const initialNodes: Node[] = [
 
 const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }];
 
-const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
+const onPaneReady = (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}
-      onLoad={onLoad}
+      onPaneReady={onPaneReady}
       snapToGrid={true}
       onEdgeUpdate={onEdgeUpdate}
       onConnect={onConnect}