From d06d3a20b1bc1d82d0a5d7d9126ddda47bdefda0 Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Thu, 13 Mar 2025 00:34:20 +0800
Subject: [PATCH] Fix auto fit disabled afther zoom in or out manually

- Enhanced FocusOnNode component logic
- Added reset to default view when no node
- Updated mouse event handling for custom BBox
- Added sigmaRef for future use
- Triggered camera reset after graph updates
---
 .../src/components/graph/FocusOnNode.tsx        | 17 +++++++++++++----
 lightrag_webui/src/features/GraphViewer.tsx     | 17 +++++++++++++----
 lightrag_webui/src/hooks/useLightragGraph.tsx   |  2 ++
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/lightrag_webui/src/components/graph/FocusOnNode.tsx b/lightrag_webui/src/components/graph/FocusOnNode.tsx
index cfefb7bb..70af7525 100644
--- a/lightrag_webui/src/components/graph/FocusOnNode.tsx
+++ b/lightrag_webui/src/components/graph/FocusOnNode.tsx
@@ -13,15 +13,24 @@ const FocusOnNode = ({ node, move }: { node: string | null; move?: boolean }) =>
    * When the selected item changes, highlighted the node and center the camera on it.
    */
   useEffect(() => {
-    if (!node) return
-    sigma.getGraph().setNodeAttribute(node, 'highlighted', true)
     if (move) {
-      gotoNode(node)
+      if (node) {
+        sigma.getGraph().setNodeAttribute(node, 'highlighted', true)
+        gotoNode(node)
+      } else {
+        // If no node is selected but move is true, reset to default view
+        sigma.setCustomBBox(null)
+        sigma.getCamera().animate({ x: 0.5, y: 0.5, ratio: 1 }, { duration: 0 })
+      }
       useGraphStore.getState().setMoveToSelectedNode(false)
+    } else if (node) {
+      sigma.getGraph().setNodeAttribute(node, 'highlighted', true)
     }
 
     return () => {
-      sigma.getGraph().setNodeAttribute(node, 'highlighted', false)
+      if (node) {
+        sigma.getGraph().setNodeAttribute(node, 'highlighted', false)
+      }
     }
   }, [node, move, sigma, gotoNode])
 
diff --git a/lightrag_webui/src/features/GraphViewer.tsx b/lightrag_webui/src/features/GraphViewer.tsx
index 1701636d..aab10c1a 100644
--- a/lightrag_webui/src/features/GraphViewer.tsx
+++ b/lightrag_webui/src/features/GraphViewer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback, useMemo } from 'react'
+import { useEffect, useState, useCallback, useMemo, useRef } from 'react'
 // import { MiniMap } from '@react-sigma/minimap'
 import { SigmaContainer, useRegisterEvents, useSigma } from '@react-sigma/core'
 import { Settings as SigmaSettings } from 'sigma/settings'
@@ -91,8 +91,12 @@ const GraphEvents = () => {
         }
       },
       // Disable the autoscale at the first down interaction
-      mousedown: () => {
-        if (!sigma.getCustomBBox()) sigma.setCustomBBox(sigma.getBBox())
+      mousedown: (e) => {
+        // Only set custom BBox if it's a drag operation (mouse button is pressed)
+        const mouseEvent = e.original as MouseEvent;
+        if (mouseEvent.buttons !== 0 && !sigma.getCustomBBox()) {
+          sigma.setCustomBBox(sigma.getBBox())
+        }
       }
     })
   }, [registerEvents, sigma, draggedNode])
@@ -102,6 +106,7 @@ const GraphEvents = () => {
 
 const GraphViewer = () => {
   const [sigmaSettings, setSigmaSettings] = useState(defaultSigmaSettings)
+  const sigmaRef = useRef<any>(null)
 
   const selectedNode = useGraphStore.use.selectedNode()
   const focusedNode = useGraphStore.use.focusedNode()
@@ -144,7 +149,11 @@ const GraphViewer = () => {
   )
 
   return (
-    <SigmaContainer settings={sigmaSettings} className="!bg-background !size-full overflow-hidden">
+    <SigmaContainer 
+      settings={sigmaSettings} 
+      className="!bg-background !size-full overflow-hidden"
+      ref={sigmaRef}
+    >
       <GraphControl />
 
       {enableNodeDrag && <GraphEvents />}
diff --git a/lightrag_webui/src/hooks/useLightragGraph.tsx b/lightrag_webui/src/hooks/useLightragGraph.tsx
index 969b6dfe..a5e414b9 100644
--- a/lightrag_webui/src/hooks/useLightragGraph.tsx
+++ b/lightrag_webui/src/hooks/useLightragGraph.tsx
@@ -254,6 +254,8 @@ const useLightrangeGraph = () => {
             delete fetchStatusRef.current[fetchKey];
           }
           // Reset fetching state after all updates are complete
+          // Reset camera view by triggering FocusOnNode component
+          state.setMoveToSelectedNode(true);
           state.setIsFetching(false);
         }).catch(() => {
           // Reset fetching state and remove flag in case of error