73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
|
|
import { FC, MutableRefObject } from "react";
|
|
import AddIcon from "@mui/icons-material/Add";
|
|
import RemoveIcon from "@mui/icons-material/Remove";
|
|
import { Core } from "cytoscape";
|
|
|
|
type PositionControlProps = {
|
|
cyRef: MutableRefObject<Core | null>;
|
|
};
|
|
|
|
export const ZoomControl: FC<PositionControlProps> = ({ cyRef }) => {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
bottom: isMobile ? "15px" : "20px",
|
|
right: isMobile ? "15px" : "20px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "10px",
|
|
background: "#EEE4FC",
|
|
padding: "16px",
|
|
borderRadius: "8px",
|
|
zIndex: 2,
|
|
}}
|
|
>
|
|
<Button
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
minWidth: "36px",
|
|
width: "36px",
|
|
height: "36px",
|
|
background: "#7E2AEA",
|
|
fontSize: "16px",
|
|
color: "#fff",
|
|
zIndex: 2,
|
|
}}
|
|
onClick={() => {
|
|
const currentZoom = cyRef.current?.zoom() || 1;
|
|
cyRef.current?.zoom(currentZoom + 0.1);
|
|
}}
|
|
>
|
|
<AddIcon />
|
|
</Button>
|
|
<Button
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
minWidth: "36px",
|
|
width: "36px",
|
|
height: "36px",
|
|
background: "#7E2AEA",
|
|
fontSize: "16px",
|
|
color: "#fff",
|
|
zIndex: 2,
|
|
}}
|
|
onClick={() => {
|
|
const currentZoom = cyRef.current?.zoom() || 1;
|
|
cyRef.current?.zoom(currentZoom - 0.1);
|
|
}}
|
|
>
|
|
<RemoveIcon />
|
|
</Button>
|
|
</Box>
|
|
);
|
|
};
|