65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
|
|
import { ExpandIcon } from "@icons/questionsPage/ExpandIcon";
|
|
import { AlignIcon } from "@icons/questionsPage/AlignIcon";
|
|
import { FC, MutableRefObject } from "react";
|
|
import { Core } from "cytoscape";
|
|
|
|
type PositionControlProps = {
|
|
cyRef: MutableRefObject<Core | null>;
|
|
};
|
|
|
|
export const PositionControl: FC<PositionControlProps> = ({ cyRef }) => {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
bottom: isMobile ? "15px" : "20px",
|
|
left: isMobile ? "15px" : "20px",
|
|
display: "flex",
|
|
gap: "10px",
|
|
}}
|
|
>
|
|
<Button
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
minWidth: "36px",
|
|
width: "36px",
|
|
height: "36px",
|
|
background: "#9A9AAF",
|
|
opacity: "0.7",
|
|
zIndex: 2,
|
|
}}
|
|
onClick={() => {
|
|
cyRef.current?.zoom(1);
|
|
cyRef.current?.center();
|
|
}}
|
|
>
|
|
<ExpandIcon />
|
|
</Button>
|
|
<Button
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
minWidth: "36px",
|
|
width: "36px",
|
|
height: "36px",
|
|
background: "#9A9AAF",
|
|
opacity: "0.7",
|
|
zIndex: 2,
|
|
}}
|
|
onClick={() => {
|
|
cyRef.current?.fit(undefined, 70);
|
|
}}
|
|
>
|
|
<AlignIcon />
|
|
</Button>
|
|
</Box>
|
|
);
|
|
};
|