gardel/lightrag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(graph): improve fit-to-screen calculation with proper padding and zero size check

Browse Source
This commit is contained in:
yangdx
2025-03-15 20:19:48 +08:00
parent b9dd53b1e3
commit 4ea0b85a03
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
lightrag_webui/src/components/graph/ZoomControl.tsx
View File

@@ -4,6 +4,7 @@ import Button from '@/components/ui/Button'
import { ZoomInIcon, ZoomOutIcon, FullscreenIcon } from 'lucide-react' import { ZoomInIcon, ZoomOutIcon, FullscreenIcon } from 'lucide-react'
import { controlButtonVariant } from '@/lib/constants' import { controlButtonVariant } from '@/lib/constants'
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { combine } from 'zustand/middleware'
/** /**
* Component that provides zoom controls for the graph viewer. * Component that provides zoom controls for the graph viewer.
@@ -37,8 +38,15 @@ const ZoomControl = () => {
const container = sigma.getContainer() const container = sigma.getContainer()
const containerWidth = container.offsetWidth const containerWidth = container.offsetWidth
const containerHeight = container.offsetHeight const containerHeight = container.offsetHeight
const containerPadding = 30
console.log('Container W:', containerWidth, 'H:', containerHeight) console.log('Container W:', containerWidth, 'H:', containerHeight)
if (containerWidth < 100|| containerHeight < 100) {
// Use reset() for zero size case
reset()
return
}
// Get all node positions // Get all node positions
const nodePositions = graph.nodes().map(node => ({ const nodePositions = graph.nodes().map(node => ({
x: graph.getNodeAttribute(node, 'x'), x: graph.getNodeAttribute(node, 'x'),
@@ -54,13 +62,13 @@ const ZoomControl = () => {
// Calculate graph dimensions with minimal padding // Calculate graph dimensions with minimal padding
const width = maxX - minX const width = maxX - minX
const height = maxY - minY const height = maxY - minY
const padding = Math.max(width, height) * 0.05 // const padding = Math.max(width, height) * 0.05
console.log('Graph W:', Math.round(width*100)/100, 'H:', Math.round(height*100)/100) console.log('Graph W:', Math.round(width*100)/100, 'H:', Math.round(height*100)/100)
// Calculate base scale // Calculate base scale
const scale = Math.min( const scale = Math.min(
containerWidth / (width + padding * 2), (containerWidth - containerPadding) / width,
containerHeight / (height + padding * 2) (containerHeight - containerPadding) / height
) )
// Apply scaling factor (just don't know why) // Apply scaling factor (just don't know why)
const ratio = (1 / scale) * 10 const ratio = (1 / scale) * 10