refactor(fitview-nodes): cleanup

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,31 +88,31 @@ const LayoutFlow = () => {
 
   return (
     <div className={styles.layoutflow}>
-      <ReactFlowProvider>
-        <ReactFlow
-          nodes={nodes}
-          edges={edges}
-          onConnect={onConnect}
-          nodeExtent={nodeExtent}
-          onInit={() => onLayout('TB')}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-        >
-          <Controls />
-        </ReactFlow>
-        <div className={styles.controls}>
-          <button onClick={() => onLayout('TB')} style={{ marginRight: 10 }}>
-            vertical layout
-          </button>
-          <button onClick={() => onLayout('LR')} style={{ marginRight: 10 }}>
-            horizontal layout
-          </button>
-          <button onClick={() => unselect()}>unselect nodes</button>
-          <button onClick={() => changeMarker()}>change marker</button>
-        </div>
-      </ReactFlowProvider>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onConnect={onConnect}
+        nodeExtent={nodeExtent}
+        onInit={() => onLayout('TB')}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+      >
+        <Controls />
+      </ReactFlow>
+      <Panel position="top-right">
+        <button onClick={() => onLayout('TB')}>vertical layout</button>
+        <button onClick={() => onLayout('LR')}>horizontal layout</button>
+        <button onClick={() => unselect()}>unselect nodes</button>
+        <button onClick={() => changeMarker()}>change marker</button>
+        <button onClick={() => fitView()}>fitView</button>
+        <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

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

packages/core/src/types/general.ts

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