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

src/components/Attribution/index.tsx

@@ -4,12 +4,12 @@ import cc from 'classcat';
 import { AttributionPosition, ProOptions } from '../../types';
 
 type AttributionProps = {
-  pro?: ProOptions;
+  proOptions?: ProOptions;
   position?: AttributionPosition;
 };
 
-function Attribution({ pro, position = 'bottom-right' }: AttributionProps) {
-  if (pro?.account === 'paid-subscription' && pro?.hideAttribution) {
+function Attribution({ proOptions, position = 'bottom-right' }: AttributionProps) {
+  if (proOptions?.account === 'paid-subscription' && proOptions?.hideAttribution) {
     return null;
   }
 

src/components/Nodes/wrapNode.tsx

@@ -40,7 +40,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
     sourcePosition,
     targetPosition,
     hidden,
-    isInitialized,
     snapToGrid,
     snapGrid,
     dragging,
@@ -60,11 +59,9 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
         zIndex,
         transform: `translate(${xPos}px,${yPos}px)`,
         pointerEvents: hasPointerEvents ? 'all' : 'none',
-        // prevents jumping of nodes on start
-        opacity: isInitialized ? 1 : 0,
         ...style,
       }),
-      [zIndex, xPos, yPos, hasPointerEvents, isInitialized, style]
+      [zIndex, xPos, yPos, hasPointerEvents, style]
     );
 
     const node = useMemo(() => ({ id, type, position: { x: xPos, y: yPos }, data }), [id, type, xPos, yPos, data]);

src/components/NodesSelection/index.tsx

@@ -10,7 +10,7 @@ import shallow from 'zustand/shallow';
 
 import { useStore } from '../../store';
 import { Node, ReactFlowState } from '../../types';
-import { getRectOfNodeInternals } from '../../utils/graph';
+import { getRectOfNodes } from '../../utils/graph';
 
 export interface NodesSelectionProps {
   onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
@@ -55,7 +55,7 @@ function NodesSelection({
     [tX, tY, tScale]
   );
 
-  const selectedNodesBbox = useMemo(() => getRectOfNodeInternals(selectedNodes), [selectedNodes]);
+  const selectedNodesBbox = useMemo(() => getRectOfNodes(selectedNodes), [selectedNodes]);
 
   const innerStyle = useMemo(
     () => ({

src/components/StoreUpdater/index.tsx

@@ -17,6 +17,7 @@ import {
   ConnectionMode,
   SnapGrid,
   DefaultEdgeOptions,
+  FitViewOptions,
 } from '../../types';
 
 interface StoreUpdaterProps {
@@ -40,9 +41,10 @@ interface StoreUpdaterProps {
   snapToGrid?: boolean;
   snapGrid?: SnapGrid;
   translateExtent?: CoordinateExtent;
-  fitViewOnInit: boolean;
   connectOnClick: boolean;
   defaultEdgeOptions?: DefaultEdgeOptions;
+  fitView?: boolean;
+  fitViewOptions?: FitViewOptions;
 }
 
 const selector = (s: ReactFlowState) => ({
@@ -94,9 +96,10 @@ const StoreUpdater = ({
   snapGrid,
   snapToGrid,
   translateExtent,
-  fitViewOnInit,
   connectOnClick,
   defaultEdgeOptions,
+  fitView,
+  fitViewOptions,
 }: StoreUpdaterProps) => {
   const {
     setNodes,
@@ -127,12 +130,13 @@ const StoreUpdater = ({
   useDirectStoreUpdater('nodesDraggable', nodesDraggable, store.setState);
   useDirectStoreUpdater('nodesConnectable', nodesConnectable, store.setState);
   useDirectStoreUpdater('elementsSelectable', elementsSelectable, store.setState);
-  useDirectStoreUpdater('fitViewOnInit', fitViewOnInit, store.setState);
   useDirectStoreUpdater('snapToGrid', snapToGrid, store.setState);
   useDirectStoreUpdater('snapGrid', snapGrid, store.setState);
   useDirectStoreUpdater('onNodesChange', onNodesChange, store.setState);
   useDirectStoreUpdater('onEdgesChange', onEdgesChange, store.setState);
   useDirectStoreUpdater('connectOnClick', connectOnClick, store.setState);
+  useDirectStoreUpdater('fitViewOnInit', fitView, store.setState);
+  useDirectStoreUpdater('fitViewOnInitOptions', fitViewOptions, store.setState);
 
   useStoreUpdater<Node[]>(nodes, setNodes);
   useStoreUpdater<Edge[]>(edges, setEdges);