diff --git a/applications/visualizer/frontend/src/components/viewers/EM/EM.tsx b/applications/visualizer/frontend/src/components/viewers/EM/EM.tsx index 224b6ef6..79b2bb40 100644 --- a/applications/visualizer/frontend/src/components/viewers/EM/EM.tsx +++ b/applications/visualizer/frontend/src/components/viewers/EM/EM.tsx @@ -2,14 +2,20 @@ import { Box } from "@mui/material"; import cytoscape from "cytoscape"; import dagre from "cytoscape-dagre"; import fcose from "cytoscape-fcose"; +import SceneControls from "./SceneControls.tsx"; +import {useRef} from "react"; +import {CameraControls} from "@react-three/drei"; cytoscape.use(fcose); cytoscape.use(dagre); const EM = () => { + const cameraControlRef = useRef(null); + return ( - + + ); }; diff --git a/applications/visualizer/frontend/src/components/viewers/EM/SceneControls.tsx b/applications/visualizer/frontend/src/components/viewers/EM/SceneControls.tsx new file mode 100644 index 00000000..4ccb0bf1 --- /dev/null +++ b/applications/visualizer/frontend/src/components/viewers/EM/SceneControls.tsx @@ -0,0 +1,71 @@ +import { + FileDownloadOutlined, + HomeOutlined, + TextsmsOutlined +} from "@mui/icons-material"; +import ZoomInIcon from "@mui/icons-material/ZoomIn"; +import ZoomOutIcon from "@mui/icons-material/ZoomOut"; +import { Box, Divider, IconButton } from "@mui/material"; +import Tooltip from "@mui/material/Tooltip"; + +function SceneControls({ cameraControlRef }) { + return ( + + + { + cameraControlRef.current?.zoom(cameraControlRef.current?._camera.zoom / 2, true); + }} + > + + + + + { + cameraControlRef.current?.reset(true); + }} + > + + + + + { + cameraControlRef.current?.zoom(-cameraControlRef.current?._camera.zoom / 2, true); + }} + > + + + + + + + + + + + + + + + + + ); +} + +export default SceneControls;