From e9e2bab4ee1850e64b7ffa0fbcab74b0b5201dff Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 21 Feb 2025 15:16:02 +1000
Subject: [PATCH] feat(ui): make useZoomToNode not rely on reactflow ctx

---
 .../src/features/nodes/hooks/useZoomToNode.ts | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useZoomToNode.ts b/invokeai/frontend/web/src/features/nodes/hooks/useZoomToNode.ts
index 022a4e3d55..f306bfbe02 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useZoomToNode.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useZoomToNode.ts
@@ -1,13 +1,17 @@
-import { useReactFlow } from '@xyflow/react';
+import { logger } from 'app/logging/logger';
+import { $flow } from 'features/nodes/store/reactFlowInstance';
 import { useCallback } from 'react';
 
+const log = logger('workflows');
+
 export const useZoomToNode = () => {
-  const flow = useReactFlow();
-  const zoomToNode = useCallback(
-    (nodeId: string) => {
-      flow.fitView({ duration: 300, maxZoom: 1.5, nodes: [{ id: nodeId }] });
-    },
-    [flow]
-  );
+  const zoomToNode = useCallback((nodeId: string) => {
+    const flow = $flow.get();
+    if (!flow) {
+      log.warn('No flow instance found, cannot zoom to node');
+      return;
+    }
+    flow.fitView({ duration: 300, maxZoom: 1.5, nodes: [{ id: nodeId }] });
+  }, []);
   return zoomToNode;
 };