blob: 19caa8885fbfd8ef7a6cfe1c2ec501b5723ca5f8 (
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
68
69
70
71
72
73
|
"use client";
import { memo } from "react";
import type { GraphNode } from "@/types";
import {
navContainer,
navButton,
zoomContainer,
zoomInButton,
zoomOutButton,
} from "./navigation-controls.css";
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;
}
const containerClassName = className
? `${navContainer} ${className}`
: navContainer;
return (
<div className={containerClassName}>
<button
type="button"
onClick={onAutoFit}
className={navButton}
title="Auto-fit graph to viewport"
>
Fit
</button>
<button
type="button"
onClick={onCenter}
className={navButton}
title="Center view on graph"
>
Center
</button>
<div className={zoomContainer}>
<button
type="button"
onClick={onZoomIn}
className={zoomInButton}
title="Zoom in"
>
+
</button>
<button
type="button"
onClick={onZoomOut}
className={zoomOutButton}
title="Zoom out"
>
−
</button>
</div>
</div>
);
},
);
NavigationControls.displayName = "NavigationControls";
|