chore: only pan focus when out of viewport

packages/react/src/components/NodeWrapper/index.tsx

@@ -18,6 +18,7 @@ import { handleNodeClick } from '../Nodes/utils';
 import { arrowKeyDiffs, builtinNodeTypes, getNodeInlineStyleDimensions } from './utils';
 import { useNodeObserver } from './useNodeObserver';
 import type { InternalNode, Node, NodeWrapperProps } from '../../types';
+import { useReactFlow } from '../../hooks/useReactFlow';
 
 export function NodeWrapper<NodeType extends Node>({
   id,
@@ -78,6 +79,8 @@ export function NodeWrapper<NodeType extends Node>({
     nodeClickDistance,
   });
   const moveSelectedNodes = useMoveSelectedNodes();
+  const { fitView } = useReactFlow();
+  const { getViewport } = useReactFlow();
 
   if (node.hidden) {
     return null;
@@ -160,16 +163,26 @@ export function NodeWrapper<NodeType extends Node>({
       return;
     }
 
-    const { panZoom } = store.getState();
+    // Return early if focus is not from keyboard navigation (i.e., was clicked)
-    const zoom = panZoom?.getViewport().zoom ?? 1;
+    if (!nodeRef.current?.matches(':focus-visible')) {
-    panZoom?.setViewport(
+      return;
-      {
+    }
-        x: -(internals.positionAbsolute.x + nodeDimensions.width / 2) * zoom + window.innerWidth / 2,
+    const { x, y, zoom } = getViewport();
-        y: -(internals.positionAbsolute.y + nodeDimensions.height / 2) * zoom + window.innerHeight / 2,
+
-        zoom: zoom,
+    const isNodeVisible =
-      },
+      node.position.x >= x &&
-      { duration: 100 }
+      node.position.x <= x + window.innerWidth &&
-    );
+      node.position.y >= y &&
+      node.position.y <= y + window.innerHeight;
+
+    if (!isNodeVisible) {
+      fitView({
+        nodes: [{ id }],
+        duration: 100,
+        minZoom: zoom,
+        maxZoom: zoom,
+      });
+    }
   };
 
   return (