Merge pull request #2832 from wbkd/feature/fix-fitView-return-type

Feature/fix fit view return type

.changeset/perfect-meals-confess.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+fitView: return type boolean

packages/core/src/hooks/useViewportHelper.ts

@@ -4,7 +4,7 @@ import { shallow } from 'zustand/shallow';
 
 import { useStoreApi, useStore } from '../hooks/useStore';
 import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph';
-import { fitView as fitViewStore } from '../store/utils';
+import { fitView } from '../store/utils';
 import type { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -17,7 +17,7 @@ const initialViewportHelper: ViewportHelperFunctions = {
   getZoom: () => 1,
   setViewport: noop,
   getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
-  fitView: noop,
+  fitView: () => false,
   setCenter: noop,
   fitBounds: noop,
   project: (position: XYPosition) => position,
@@ -51,7 +51,7 @@ const useViewportHelper = (): ViewportHelperFunctions => {
           const [x, y, zoom] = store.getState().transform;
           return { x, y, zoom };
         },
-        fitView: (options) => fitViewStore(store.getState, options),
+        fitView: (options) => fitView(store.getState, options),
         setCenter: (x, y, options) => {
           const { width, height, maxZoom } = store.getState();
           const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;

packages/core/src/store/utils.ts

@@ -138,35 +138,35 @@ export function fitView(get: StoreApi<ReactFlowState>['getState'], options: Inte
     fitViewOnInit,
     nodeOrigin,
   } = get();
+  const isInitialFitView = options.initial && !fitViewOnInitDone && fitViewOnInit;
+  const d3initialized = d3Zoom && d3Selection;
 
-  if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) {
+  if (d3initialized && (isInitialFitView || !options.initial)) {
-    if (d3Zoom && d3Selection) {
+    const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden));
-      const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden));
 
-      const nodesInitialized = nodes.every((n) => n.width && n.height);
+    const nodesInitialized = nodes.every((n) => n.width && n.height);
 
-      if (nodes.length > 0 && nodesInitialized) {
+    if (nodes.length > 0 && nodesInitialized) {
-        const bounds = getRectOfNodes(nodes, nodeOrigin);
+      const bounds = getRectOfNodes(nodes, nodeOrigin);
 
-        const [x, y, zoom] = getTransformForBounds(
+      const [x, y, zoom] = getTransformForBounds(
-          bounds,
+        bounds,
-          width,
+        width,
-          height,
+        height,
-          options.minZoom ?? minZoom,
+        options.minZoom ?? minZoom,
-          options.maxZoom ?? maxZoom,
+        options.maxZoom ?? maxZoom,
-          options.padding ?? 0.1
+        options.padding ?? 0.1
-        );
+      );
 
-        const nextTransform = zoomIdentity.translate(x, y).scale(zoom);
+      const nextTransform = zoomIdentity.translate(x, y).scale(zoom);
 
-        if (typeof options.duration === 'number' && options.duration > 0) {
+      if (typeof options.duration === 'number' && options.duration > 0) {
-          d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform);
+        d3Zoom.transform(getD3Transition(d3Selection, options.duration), nextTransform);
-        } else {
+      } else {
-          d3Zoom.transform(d3Selection, nextTransform);
+        d3Zoom.transform(d3Selection, nextTransform);
-        }
-
-        return true;
       }
+
+      return true;
     }
   }
 

packages/core/src/types/general.ts

@@ -30,7 +30,7 @@ export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentTyp
 export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
 export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapEdgeProps>> };
 
-export type FitView = (fitViewOptions?: FitViewOptions) => void;
+export type FitView = (fitViewOptions?: FitViewOptions) => boolean;
 
 export type Project = (position: XYPosition) => XYPosition;