diff options
author | 2023-08-24 00:06:37 +0200 | |
---|---|---|
committer | 2023-08-24 01:17:45 +0200 | |
commit | 2e2ebbf75b12784ac664d864865f01729b3eb8c4 (patch) | |
tree | 6002405f0759015c57d161775c94b9e0df138872 /subprojects/frontend/src/graph/ZoomButtons.tsx | |
parent | refactor(web): move d3-zoom patch into repo (diff) | |
download | refinery-2e2ebbf75b12784ac664d864865f01729b3eb8c4.tar.gz refinery-2e2ebbf75b12784ac664d864865f01729b3eb8c4.tar.zst refinery-2e2ebbf75b12784ac664d864865f01729b3eb8c4.zip |
refactor(web): clean up graphviz visualization
Diffstat (limited to 'subprojects/frontend/src/graph/ZoomButtons.tsx')
-rw-r--r-- | subprojects/frontend/src/graph/ZoomButtons.tsx | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/subprojects/frontend/src/graph/ZoomButtons.tsx b/subprojects/frontend/src/graph/ZoomButtons.tsx new file mode 100644 index 00000000..72f54774 --- /dev/null +++ b/subprojects/frontend/src/graph/ZoomButtons.tsx | |||
@@ -0,0 +1,43 @@ | |||
1 | /* | ||
2 | * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/> | ||
3 | * | ||
4 | * SPDX-License-Identifier: EPL-2.0 | ||
5 | */ | ||
6 | |||
7 | import AddIcon from '@mui/icons-material/Add'; | ||
8 | import CropFreeIcon from '@mui/icons-material/CropFree'; | ||
9 | import RemoveIcon from '@mui/icons-material/Remove'; | ||
10 | import IconButton from '@mui/material/IconButton'; | ||
11 | import Stack from '@mui/material/Stack'; | ||
12 | |||
13 | export default function ZoomButtons({ | ||
14 | changeZoom, | ||
15 | fitZoom, | ||
16 | }: { | ||
17 | changeZoom: (event: React.MouseEvent, factor: number) => void; | ||
18 | fitZoom: (event: React.MouseEvent) => void; | ||
19 | }): JSX.Element { | ||
20 | return ( | ||
21 | <Stack | ||
22 | direction="column" | ||
23 | p={1} | ||
24 | sx={{ position: 'absolute', bottom: 0, right: 0 }} | ||
25 | > | ||
26 | <IconButton | ||
27 | aria-label="Zoom in" | ||
28 | onClick={(event) => changeZoom(event, 2)} | ||
29 | > | ||
30 | <AddIcon fontSize="small" /> | ||
31 | </IconButton> | ||
32 | <IconButton | ||
33 | aria-label="Zoom out" | ||
34 | onClick={(event) => changeZoom(event, 0.5)} | ||
35 | > | ||
36 | <RemoveIcon fontSize="small" /> | ||
37 | </IconButton> | ||
38 | <IconButton aria-label="Fit screen" onClick={fitZoom}> | ||
39 | <CropFreeIcon fontSize="small" /> | ||
40 | </IconButton> | ||
41 | </Stack> | ||
42 | ); | ||
43 | } | ||