blob: b2abd67fa258c1b1c63aa4f56d0eb8524bb8b319 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
"use client"
import { memo } from "react"
import type { GraphNode } from "./types"
interface NavigationControlsProps {
onCenter: () => void
onZoomIn: () => void
onZoomOut: () => void
onAutoFit: () => void
nodes: GraphNode[]
className?: string
}
export const NavigationControls = memo<NavigationControlsProps>(({
onCenter,
onZoomIn,
onZoomOut,
onAutoFit,
nodes,
className = "",
}) => {
if (nodes.length === 0) {
return null
}
return (
<div className={`flex flex-col gap-1 ${className}`}>
<button
type="button"
onClick={onAutoFit}
className="bg-black/20 backdrop-blur-sm hover:bg-black/30 border border-white/10 hover:border-white/20 rounded-lg p-2 text-white/70 hover:text-white transition-colors text-xs font-medium min-w-16"
title="Auto-fit graph to viewport"
>
Fit
</button>
<button
type="button"
onClick={onCenter}
className="bg-black/20 backdrop-blur-sm hover:bg-black/30 border border-white/10 hover:border-white/20 rounded-lg p-2 text-white/70 hover:text-white transition-colors text-xs font-medium min-w-16"
title="Center view on graph"
>
Center
</button>
<div className="flex flex-col">
<button
type="button"
onClick={onZoomIn}
className="bg-black/20 backdrop-blur-sm hover:bg-black/30 border border-white/10 hover:border-white/20 rounded-t-lg p-2 text-white/70 hover:text-white transition-colors text-xs font-medium min-w-16 border-b-0"
title="Zoom in"
>
+
</button>
<button
type="button"
onClick={onZoomOut}
className="bg-black/20 backdrop-blur-sm hover:bg-black/30 border border-white/10 hover:border-white/20 rounded-b-lg p-2 text-white/70 hover:text-white transition-colors text-xs font-medium min-w-16"
title="Zoom out"
>
−
</button>
</div>
</div>
)
})
NavigationControls.displayName = "NavigationControls"
|