Added camera rotation controls to graph panel.

2025-03-18 12:34:04 +08:00
parent 190822da78
commit 331b1194f0
5 changed files with 168 additions and 112 deletions
--- a/lightrag/api/webui/assets/index-DlSL6ZG8.js
+++ b/lightrag/api/webui/assets/index-DlSL6ZG8.js
--- a/lightrag/api/webui/index.html
+++ b/lightrag/api/webui/index.html
@@ -8,7 +8,7 @@
    <link rel="icon" type="image/svg+xml" href="logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lightrag</title>
-    <script type="module" crossorigin src="./assets/index-DFtyEbmf.js"></script>
+    <script type="module" crossorigin src="./assets/index-DlSL6ZG8.js"></script>
    <link rel="stylesheet" crossorigin href="./assets/index-mPRIIErN.css">
  </head>
  <body>
--- a/lightrag_webui/src/components/graph/ZoomControl.tsx
+++ b/lightrag_webui/src/components/graph/ZoomControl.tsx
@@ -1,7 +1,7 @@
 import { useCamera, useSigma } from '@react-sigma/core'
 import { useCallback } from 'react'
 import Button from '@/components/ui/Button'
-import { ZoomInIcon, ZoomOutIcon, FullscreenIcon } from 'lucide-react'
+import { ZoomInIcon, ZoomOutIcon, FullscreenIcon, RotateCwIcon, RotateCcwIcon } from 'lucide-react'
 import { controlButtonVariant } from '@/lib/constants'
 import { useTranslation } from 'react-i18next';

@@ -44,8 +44,50 @@ const ZoomControl = () => {
    }
  }, [sigma, reset])

+  const handleRotate = useCallback(() => {
+    if (!sigma) return
+
+    const camera = sigma.getCamera()
+    const currentAngle = camera.angle
+    const newAngle = currentAngle + Math.PI / 8
+
+    camera.animate(
+      { angle: newAngle },
+      { duration: 200 }
+    )
+  }, [sigma])
+
+  const handleRotateCounterClockwise = useCallback(() => {
+    if (!sigma) return
+
+    const camera = sigma.getCamera()
+    const currentAngle = camera.angle
+    const newAngle = currentAngle - Math.PI / 8
+
+    camera.animate(
+      { angle: newAngle },
+      { duration: 200 }
+    )
+  }, [sigma])
+
  return (
    <>
+      <Button
+        variant={controlButtonVariant}
+        onClick={handleRotateCounterClockwise}
+        tooltip={t('graphPanel.sideBar.zoomControl.rotateCameraCounterClockwise')}
+        size="icon"
+      >
+        <RotateCcwIcon />
+      </Button>
+      <Button
+        variant={controlButtonVariant}
+        onClick={handleRotate}
+        tooltip={t('graphPanel.sideBar.zoomControl.rotateCamera')}
+        size="icon"
+      >
+        <RotateCwIcon />
+      </Button>
      <Button
        variant={controlButtonVariant}
        onClick={handleResetZoom}
--- a/lightrag_webui/src/locales/en.json
+++ b/lightrag_webui/src/locales/en.json
@@ -112,7 +112,9 @@
      "zoomControl": {
        "zoomIn": "Zoom In",
        "zoomOut": "Zoom Out",
-        "resetZoom": "Reset Zoom"
+        "resetZoom": "Reset Zoom",
+        "rotateCamera": "Clockwise Rotate",
+        "rotateCameraCounterClockwise": "Counter-Clockwise Rotate"
      },

      "layoutsControl": {
--- a/lightrag_webui/src/locales/zh.json
+++ b/lightrag_webui/src/locales/zh.json
@@ -111,7 +111,9 @@
      "zoomControl": {
        "zoomIn": "放大",
        "zoomOut": "缩小",
-        "resetZoom": "重置缩放"
+        "resetZoom": "重置缩放",
+        "rotateCamera": "顺时针旋转图形",
+        "rotateCameraCounterClockwise": "逆时针旋转图形"
      },
      "layoutsControl": {
        "startAnimation": "继续布局动画",