diff options
Diffstat (limited to 'subprojects/frontend/src/graph/ZoomButtons.tsx')
-rw-r--r-- | subprojects/frontend/src/graph/ZoomButtons.tsx | 49 |
1 files changed, 49 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..83938cf4 --- /dev/null +++ b/subprojects/frontend/src/graph/ZoomButtons.tsx | |||
@@ -0,0 +1,49 @@ | |||
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 | import ToggleButton from '@mui/material/ToggleButton'; | ||
13 | |||
14 | import type { ChangeZoomCallback, SetFitZoomCallback } from './ZoomCanvas'; | ||
15 | |||
16 | export default function ZoomButtons({ | ||
17 | changeZoom, | ||
18 | fitZoom, | ||
19 | setFitZoom, | ||
20 | }: { | ||
21 | changeZoom: ChangeZoomCallback; | ||
22 | fitZoom: boolean; | ||
23 | setFitZoom: SetFitZoomCallback; | ||
24 | }): JSX.Element { | ||
25 | return ( | ||
26 | <Stack | ||
27 | direction="column" | ||
28 | p={1} | ||
29 | sx={{ position: 'absolute', bottom: 0, right: 0 }} | ||
30 | > | ||
31 | <IconButton aria-label="Zoom in" onClick={() => changeZoom(2)}> | ||
32 | <AddIcon fontSize="small" /> | ||
33 | </IconButton> | ||
34 | <IconButton aria-label="Zoom out" onClick={() => changeZoom(0.5)}> | ||
35 | <RemoveIcon fontSize="small" /> | ||
36 | </IconButton> | ||
37 | <ToggleButton | ||
38 | value="show-replace" | ||
39 | selected={fitZoom} | ||
40 | onClick={() => setFitZoom(!fitZoom)} | ||
41 | aria-label="Fit screen" | ||
42 | size="small" | ||
43 | className="iconOnly" | ||
44 | > | ||
45 | <CropFreeIcon fontSize="small" /> | ||
46 | </ToggleButton> | ||
47 | </Stack> | ||
48 | ); | ||
49 | } | ||