feature: animation control tooltips (#5)

* also add button to recenter view
JustinShetty · Jan 6, 2025 · b050d05 · b050d05
1 parent f8f84aa
commit b050d05
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ This is a work-in-progress and has not yet reached feature parity with [Kei18/ma
 - [x] Basic solution animation (with and without rotation)
 - [x] Playback control (play, pause, reset, speed adjustment, etc.)
 - [x] Timestep display
-- [ ] Playback control tooltips
+- [x] Playback control tooltips
 - [ ] Agent ID display
 - [ ] Agent coloring
 - [ ] Per-agent path drawing

diff --git a/src/AnimationControl.tsx b/src/AnimationControl.tsx
@@ -9,6 +9,9 @@ import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import Slider from '@mui/material/Slider';
 import RepeatIcon from '@mui/icons-material/Repeat';
 import RepeatOnIcon from '@mui/icons-material/RepeatOn';
+import Stack from '@mui/material/Stack';
+import CropFreeIcon from '@mui/icons-material/CropFree';
+import Tooltip from '@mui/material/Tooltip';
 
 interface AnimationControlProps {
     playAnimation: boolean;
@@ -20,6 +23,7 @@ interface AnimationControlProps {
     onSpeedChange: (speed: number) => void;
     loopAnimation: boolean,
     onLoopAnimationChange: (loopAnimation: boolean) => void;
+    onFitView: () => void;
 }
 
 function AnimationControl({
@@ -32,6 +36,7 @@ function AnimationControl({
     onSpeedChange,
     loopAnimation,
     onLoopAnimationChange,
+    onFitView,
 }: AnimationControlProps) {  
     const handleSliderChange = (event: Event, value: number | number[]) => {
         event.preventDefault();
@@ -41,58 +46,64 @@ function AnimationControl({
     };
 
     return (
-        <Box display="flex" flexDirection="column" alignItems="center">
+        <Stack direction="column" spacing={2}>
             <Box display="flex" justifyContent="center">
-                <ButtonGroup
-                    size="large"
-                    variant="outlined" 
-                >
-                    <Button onClick={onSkipBackward}>
-                        <SkipPreviousIcon />
-                    </Button>            
-                    <Button
-                        onClick={() => onPlayAnimationChange(!playAnimation)}
-                    >
-                        {playAnimation ? 
-                        <PauseTwoToneIcon /> : 
-                        <PlayArrowIcon />}
-                    </Button>
-                    <Button onClick={onSkipForward}>
-                        <SkipNextIcon />
-                    </Button>
+                <ButtonGroup size="large" variant="outlined">
+                    <Tooltip title="Backward one step">
+                        <Button onClick={onSkipBackward}>
+                            <SkipPreviousIcon />
+                        </Button>   
+                    </Tooltip>    
+                    <Tooltip title={playAnimation ? "Pause" : "Play"}>     
+                        <Button onClick={() => onPlayAnimationChange(!playAnimation)}>
+                            {playAnimation ? 
+                            <PauseTwoToneIcon /> : 
+                            <PlayArrowIcon />}
+                        </Button>
+                    </Tooltip>
+                    <Tooltip title="Forward one step">
+                        <Button onClick={onSkipForward}>
+                            <SkipNextIcon />
+                        </Button>
+                    </Tooltip>
                 </ButtonGroup>
             </Box>
             <Box display="flex" justifyContent="center">
-                <ButtonGroup
-                size="large"
-                variant="outlined"
-                >
-                    <Button onClick={onRestart}>
-                        <RestartAltIcon />
-                    </Button>
-                    <Button onClick={() => onLoopAnimationChange(!loopAnimation)}>
-                        {loopAnimation ? 
-                        <RepeatOnIcon /> : 
-                        <RepeatIcon />}
-                    </Button>
-                 </ButtonGroup>
+                <ButtonGroup size="large" variant="outlined">
+                    <Tooltip title="Restart animation">
+                        <Button onClick={onRestart}>
+                            <RestartAltIcon />
+                        </Button>
+                    </Tooltip>
+                    <Tooltip title={loopAnimation ? "Disable loop" : "Enable loop"}>
+                        <Button onClick={() => onLoopAnimationChange(!loopAnimation)}>
+                            {loopAnimation ? 
+                            <RepeatOnIcon /> : 
+                            <RepeatIcon />}
+                        </Button>
+                    </Tooltip>
+                    <Tooltip title="Reset view">
+                        <Button onClick={onFitView}>
+                            <CropFreeIcon />
+                        </Button>
+                    </Tooltip>
+                </ButtonGroup>
             </Box>
-            <Box 
-                sx={{ width: 1/2 }}
-                display="flex" 
-                justifyContent="center"
-            >
-                <Slider
-                    value={speed}
-                    step={0.2}
-                    marks
-                    min={0.2}
-                    max={10}
-                    valueLabelDisplay="auto"
-                    onChange={handleSliderChange}
-                />
+            <Box display='flex' justifyContent='center'>
+                <Tooltip title="Adjust animation step size (speed)">
+                    <Slider
+                        value={speed}
+                        step={0.2}
+                        marks
+                        min={0.2}
+                        max={10}
+                        valueLabelDisplay="auto"
+                        onChange={handleSliderChange}
+                        sx={{ width: '50%' }}
+                    />
+                </Tooltip>
             </Box>
-        </Box>
+        </Stack>
     );
 }
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -8,7 +8,12 @@ import React from 'react';
 import { StrictMode, useRef } from 'react';
 
 function App() {
-  const pixiAppRef = useRef<{ skipBackward?: () => void; skipForward?: () => void; restart?: () => void; }>(null);
+  const pixiAppRef = useRef<{ 
+    skipBackward?: () => void; 
+    skipForward?: () => void; 
+    restart?: () => void; 
+    fit?: () => void;
+  }>(null);
 
   const [graph, setGraph] = React.useState<Graph | null>(null);
   const [solution, setSolution] = React.useState<Solution | null>(null);
@@ -34,6 +39,12 @@ function App() {
     }
   }
 
+  const handleFitView = () => {
+    if (pixiAppRef.current?.fit) {
+      pixiAppRef.current.fit();
+    }
+  }
+
   return (
     <StrictMode>
     <Box sx={{ flexGrow: 1 }}>
@@ -61,6 +72,7 @@ function App() {
             onSpeedChange={(speed: number) => setSpeed(speed)}
             loopAnimation={loopAnimation}
             onLoopAnimationChange={(loopAnimation: boolean) => setLoopAnimation(loopAnimation)}
+            onFitView={handleFitView}
           />
         </Grid>
       </Grid>

diff --git a/src/ConfigBar.tsx b/src/ConfigBar.tsx
@@ -18,6 +18,7 @@ interface ConfigBarProps {
   onSpeedChange: (speed: number) => void;
   loopAnimation: boolean,
   onLoopAnimationChange: (loopAnimation: boolean) => void;
+  onFitView: () => void;
 }
 
 function ConfigBar({ 
@@ -32,6 +33,7 @@ function ConfigBar({
   onSpeedChange,
   loopAnimation,
   onLoopAnimationChange,
+  onFitView,
 }: ConfigBarProps) {
   const repoName = "JustinShetty/mapf-visualizer";
   return (
@@ -50,6 +52,7 @@ function ConfigBar({
         onSpeedChange={onSpeedChange}
         loopAnimation={loopAnimation}
         onLoopAnimationChange={onLoopAnimationChange}
+        onFitView={onFitView}
       />
       <Divider />
       <a target="_blank" href={`https://github.com/${repoName}`} style={{ color: 'white' }}>

diff --git a/src/PixiApp.tsx b/src/PixiApp.tsx
@@ -82,6 +82,9 @@ const PixiApp = forwardRef(({
         restart: () => {
             resetTimestep();
         },
+        fit: () => {
+            fit();
+        },
     }));
 
     // Fit the viewport to the grid