Merge pull request #2834 from wbkd/feat/fit-view-nodes-option

Feat/fit view nodes option

.changeset/witty-actors-clap.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/core': patch
+---
+
+Add `nodes` to fit view options to allow fitting view only around specified set of nodes

examples/vite-app/src/examples/Layouting/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import ReactFlow, {
   Controls,
   ReactFlowProvider,
@@ -10,6 +10,8 @@ import ReactFlow, {
   useEdgesState,
   MarkerType,
   EdgeMarker,
+  Panel,
+  useReactFlow,
 } from 'reactflow';
 
 import dagre from 'dagre';
@@ -29,6 +31,7 @@ const nodeExtent: CoordinateExtent = [
 const LayoutFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialItems.nodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialItems.edges);
+  const { fitView } = useReactFlow();
 
   const onConnect = useCallback(
     (connection: Connection) => {
@@ -85,7 +88,6 @@ const LayoutFlow = () => {
 
   return (
     <div className={styles.layoutflow}>
-      <ReactFlowProvider>
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -97,19 +99,20 @@ const LayoutFlow = () => {
       >
         <Controls />
       </ReactFlow>
-        <div className={styles.controls}>
+      <Panel position="top-right">
-          <button onClick={() => onLayout('TB')} style={{ marginRight: 10 }}>
+        <button onClick={() => onLayout('TB')}>vertical layout</button>
-            vertical layout
+        <button onClick={() => onLayout('LR')}>horizontal layout</button>
-          </button>
-          <button onClick={() => onLayout('LR')} style={{ marginRight: 10 }}>
-            horizontal layout
-          </button>
         <button onClick={() => unselect()}>unselect nodes</button>
         <button onClick={() => changeMarker()}>change marker</button>
-        </div>
+        <button onClick={() => fitView()}>fitView</button>
-      </ReactFlowProvider>
+        <button onClick={() => fitView({ nodes: nodes.slice(0, 2) })}>fitView partially</button>
+      </Panel>
     </div>
   );
 };
 
-export default LayoutFlow;
+export default () => (
+  <ReactFlowProvider>
+    <LayoutFlow />
+  </ReactFlowProvider>
+);

examples/vite-app/src/examples/Layouting/layouting.module.css

@@ -2,10 +2,3 @@
   flex-grow: 1;
   position: relative;
 }
-
-.controls {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  z-index: 10;
-}

packages/core/src/store/utils.ts

@@ -142,7 +142,15 @@ export function fitView(get: StoreApi<ReactFlowState>['getState'], options: Inte
   const d3initialized = d3Zoom && d3Selection;
 
   if (d3initialized && (isInitialFitView || !options.initial)) {
-    const nodes = getNodes().filter((n) => (options.includeHiddenNodes ? n.width && n.height : !n.hidden));
+    const nodes = getNodes().filter((n) => {
+      const isVisible = options.includeHiddenNodes ? n.width && n.height : !n.hidden;
+
+      if (options.nodes?.length) {
+        return isVisible && options.nodes.some((optionNode) => optionNode.id === n.id);
+      }
+
+      return isVisible;
+    });
 
     const nodesInitialized = nodes.every((n) => n.width && n.height);
 

packages/core/src/types/general.ts

@@ -76,6 +76,7 @@ export type FitViewOptions = {
   minZoom?: number;
   maxZoom?: number;
   duration?: number;
+  nodes?: (Partial<Node> & { id: Node['id'] })[];
 };
 
 export type OnConnectStartParams = {