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 /
|
63 |
-
containerHeight /
|
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
|