yangdx commited on
Commit
36dab67
·
1 Parent(s): 63a4981

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

Browse files
lightrag_webui/src/components/graph/ZoomControl.tsx CHANGED
@@ -4,6 +4,7 @@ import Button from '@/components/ui/Button'
4
  import { ZoomInIcon, ZoomOutIcon, FullscreenIcon } from 'lucide-react'
5
  import { controlButtonVariant } from '@/lib/constants'
6
  import { useTranslation } from 'react-i18next';
 
7
 
8
  /**
9
  * Component that provides zoom controls for the graph viewer.
@@ -37,8 +38,15 @@ const ZoomControl = () => {
37
  const container = sigma.getContainer()
38
  const containerWidth = container.offsetWidth
39
  const containerHeight = container.offsetHeight
 
40
  console.log('Container W:', containerWidth, 'H:', containerHeight)
41
 
 
 
 
 
 
 
42
  // Get all node positions
43
  const nodePositions = graph.nodes().map(node => ({
44
  x: graph.getNodeAttribute(node, 'x'),
@@ -54,13 +62,13 @@ const ZoomControl = () => {
54
  // Calculate graph dimensions with minimal padding
55
  const width = maxX - minX
56
  const height = maxY - minY
57
- const padding = Math.max(width, height) * 0.05
58
  console.log('Graph W:', Math.round(width*100)/100, 'H:', Math.round(height*100)/100)
59
 
60
  // Calculate base scale
61
  const scale = Math.min(
62
- containerWidth / (width + padding * 2),
63
- containerHeight / (height + padding * 2)
64
  )
65
  // Apply scaling factor (just don't know why)
66
  const ratio = (1 / scale) * 10
 
4
  import { ZoomInIcon, ZoomOutIcon, FullscreenIcon } from 'lucide-react'
5
  import { controlButtonVariant } from '@/lib/constants'
6
  import { useTranslation } from 'react-i18next';
7
+ import { combine } from 'zustand/middleware'
8
 
9
  /**
10
  * Component that provides zoom controls for the graph viewer.
 
38
  const container = sigma.getContainer()
39
  const containerWidth = container.offsetWidth
40
  const containerHeight = container.offsetHeight
41
+ const containerPadding = 30
42
  console.log('Container W:', containerWidth, 'H:', containerHeight)
43
 
44
+ if (containerWidth < 100|| containerHeight < 100) {
45
+ // Use reset() for zero size case
46
+ reset()
47
+ return
48
+ }
49
+
50
  // Get all node positions
51
  const nodePositions = graph.nodes().map(node => ({
52
  x: graph.getNodeAttribute(node, 'x'),
 
62
  // Calculate graph dimensions with minimal padding
63
  const width = maxX - minX
64
  const height = maxY - minY
65
+ // const padding = Math.max(width, height) * 0.05
66
  console.log('Graph W:', Math.round(width*100)/100, 'H:', Math.round(height*100)/100)
67
 
68
  // Calculate base scale
69
  const scale = Math.min(
70
+ (containerWidth - containerPadding) / width,
71
+ (containerHeight - containerPadding) / height
72
  )
73
  // Apply scaling factor (just don't know why)
74
  const ratio = (1 / scale) * 10