From 65de08465c7b529c443809568051330cdbb4ca16 Mon Sep 17 00:00:00 2001 From: Justin Shetty Date: Sun, 19 Oct 2025 16:33:49 -0700 Subject: [PATCH 1/3] move pan+zoom hint to control bar --- src/AnimationControl.tsx | 15 +++++++++++++-- src/PixiApp.tsx | 15 ++------------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/AnimationControl.tsx b/src/AnimationControl.tsx index 3695f18..8ef6212 100644 --- a/src/AnimationControl.tsx +++ b/src/AnimationControl.tsx @@ -180,9 +180,20 @@ function AnimationControl({ py: 1.5, }}> - + + Drag to pan, scroll to zoom. + - + Date: Sun, 19 Oct 2025 16:53:59 -0700 Subject: [PATCH 2/3] move key mapping to enum in params and add tooltips --- src/AnimationControl.tsx | 44 ++++++++------------- src/ControlsSection.tsx | 69 +++++++++++++++++++-------------- src/DisplaySection.tsx | 82 +++++++++++++++++++++++----------------- src/Params.tsx | 17 +++++++++ 4 files changed, 120 insertions(+), 92 deletions(-) diff --git a/src/AnimationControl.tsx b/src/AnimationControl.tsx index 8ef6212..cf356cb 100644 --- a/src/AnimationControl.tsx +++ b/src/AnimationControl.tsx @@ -8,26 +8,12 @@ import SkipPreviousIcon from '@mui/icons-material/SkipPrevious'; import SkipNextIcon from '@mui/icons-material/SkipNext'; import MenuIcon from '@mui/icons-material/Menu'; import { useEffect } from 'react'; +import { KeyMap } from './Params'; const STEP_SIZE_INCREMENT = 0.2; const STEP_SIZE_MAX = 10; const STEP_SIZE_MIN = 0.2; -const STEP_BACKWARD_KEY = 'ArrowLeft'; -const PLAY_PAUSE_KEY = ' '; -const STEP_FORWARD_KEY = 'ArrowRight'; -const RESTART_KEY = 'r'; -const LOOP_KEY = 'l'; -const FIT_VIEW_KEY = 'f'; -const SHOW_AGENT_ID_KEY = 'a'; -const STEP_SIZE_UP_KEY = 'ArrowUp'; -const STEP_SIZE_DOWN_KEY = 'ArrowDown'; -const TRACE_PATHS_KEY = 'p'; -const SCREENSHOT_KEY = 's'; -const SHOW_CELL_ID_KEY = 'c'; -const SHOW_GOALS_KEY = 'g'; -const SHOW_GOAL_VECTORS_KEY = 'v'; - interface AnimationControlProps { playAnimation: boolean; onPlayChange: (play: boolean) => void; @@ -90,50 +76,50 @@ function AnimationControl({ } switch (event.key) { - case STEP_BACKWARD_KEY: + case KeyMap.STEP_BACKWARD_KEY: onSkipBackward(); break; - case PLAY_PAUSE_KEY: + case KeyMap.PLAY_PAUSE_KEY: onPlayChange(!playAnimation); break; - case STEP_FORWARD_KEY: + case KeyMap.STEP_FORWARD_KEY: onSkipForward(); break; - case RESTART_KEY: + case KeyMap.RESTART_KEY: onRestart(); break; - case LOOP_KEY: + case KeyMap.LOOP_KEY: onLoopAnimationChange(!loopAnimation); break; - case FIT_VIEW_KEY: + case KeyMap.FIT_VIEW_KEY: onFitView(); break; - case SHOW_AGENT_ID_KEY: + case KeyMap.SHOW_AGENT_ID_KEY: onShowAgentIdChange(!showAgentId); break; - case STEP_SIZE_UP_KEY: + case KeyMap.STEP_SIZE_UP_KEY: if (stepSize + STEP_SIZE_INCREMENT <= STEP_SIZE_MAX) { roundAndSetStepSize(stepSize + STEP_SIZE_INCREMENT); } break; - case STEP_SIZE_DOWN_KEY: + case KeyMap.STEP_SIZE_DOWN_KEY: if (stepSize - STEP_SIZE_INCREMENT >= STEP_SIZE_MIN) { roundAndSetStepSize(stepSize - STEP_SIZE_INCREMENT); } break; - case TRACE_PATHS_KEY: + case KeyMap.TRACE_PATHS_KEY: onTracePathsChange(!tracePaths); break; - case SCREENSHOT_KEY: + case KeyMap.SCREENSHOT_KEY: takeScreenshot(); break; - case SHOW_CELL_ID_KEY: + case KeyMap.SHOW_CELL_ID_KEY: setShowCellId(!showCellId); break; - case SHOW_GOALS_KEY: + case KeyMap.SHOW_GOALS_KEY: setShowGoals(!showGoals); break; - case SHOW_GOAL_VECTORS_KEY: + case KeyMap.SHOW_GOAL_VECTORS_KEY: setShowGoalVectors(!showGoalVectors); break; } diff --git a/src/ControlsSection.tsx b/src/ControlsSection.tsx index c9d9c9f..6401e0e 100644 --- a/src/ControlsSection.tsx +++ b/src/ControlsSection.tsx @@ -4,6 +4,8 @@ import RepeatIcon from '@mui/icons-material/Repeat'; import RepeatOnIcon from '@mui/icons-material/RepeatOn'; import FilterCenterFocusOutlinedIcon from '@mui/icons-material/FilterCenterFocusOutlined'; import ScreenshotMonitorOutlinedIcon from '@mui/icons-material/ScreenshotMonitorOutlined'; +import Tooltip from '@mui/material/Tooltip'; +import { KeyMap } from './Params'; interface ControlsSectionProps { onRestart: () => void; @@ -26,24 +28,31 @@ function ControlsSection({ Controls - - + + + + + + + + + - + + + + + ); diff --git a/src/DisplaySection.tsx b/src/DisplaySection.tsx index 74bdc40..c3b664e 100644 --- a/src/DisplaySection.tsx +++ b/src/DisplaySection.tsx @@ -4,6 +4,8 @@ import LooksOneOutlinedIcon from '@mui/icons-material/LooksOneOutlined'; import DirectionsOutlinedIcon from '@mui/icons-material/DirectionsOutlined'; import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag'; import PolylineOutlinedIcon from '@mui/icons-material/PolylineOutlined'; +import { KeyMap } from './Params'; +import Tooltip from '@mui/material/Tooltip'; interface DisplaySectionProps { showAgentId: boolean; @@ -34,45 +36,55 @@ function DisplaySection({ Display - onShowAgentIdChange(!showAgentId)}> - onShowAgentIdChange(e.target.checked)} sx={{ py: 0.5 }} /> - - - Agent IDs - - + + onShowAgentIdChange(!showAgentId)}> + onShowAgentIdChange(e.target.checked)} sx={{ py: 0.5 }} /> + + + Agent IDs + + + - setShowCellId(!showCellId)}> - setShowCellId(e.target.checked)} sx={{ py: 0.5 }} /> - - - Cell IDs - - + + setShowCellId(!showCellId)}> + setShowCellId(e.target.checked)} sx={{ py: 0.5 }} /> + + + Cell IDs + + + - onTracePathsChange(!tracePaths)}> - onTracePathsChange(e.target.checked)} sx={{ py: 0.5 }} /> - - - Paths - - + + onTracePathsChange(!tracePaths)}> + onTracePathsChange(e.target.checked)} sx={{ py: 0.5 }} /> + + + Paths + + + - setShowGoals(!showGoals)}> - setShowGoals(e.target.checked)} sx={{ py: 0.5 }} /> - - - Goals - - + + setShowGoals(!showGoals)}> + setShowGoals(e.target.checked)} sx={{ py: 0.5 }} /> + + + Goals + + + - setShowGoalVectors(!showGoalVectors)}> - setShowGoalVectors(e.target.checked)} sx={{ py: 0.5 }} /> - - - Vectors - - + + setShowGoalVectors(!showGoalVectors)}> + setShowGoalVectors(e.target.checked)} sx={{ py: 0.5 }} /> + + + Vectors + + + ); diff --git a/src/Params.tsx b/src/Params.tsx index 390fdc1..02a6569 100644 --- a/src/Params.tsx +++ b/src/Params.tsx @@ -16,3 +16,20 @@ export const AGENT_COLORS: number[] = [ 0x009688, 0x3F51B5 ]; + +export enum KeyMap { + STEP_BACKWARD_KEY = 'ArrowLeft', + PLAY_PAUSE_KEY = ' ', + STEP_FORWARD_KEY = 'ArrowRight', + RESTART_KEY = 'r', + LOOP_KEY = 'l', + FIT_VIEW_KEY = 'f', + SHOW_AGENT_ID_KEY = 'a', + STEP_SIZE_UP_KEY = 'ArrowUp', + STEP_SIZE_DOWN_KEY = 'ArrowDown', + TRACE_PATHS_KEY = 'p', + SCREENSHOT_KEY = 's', + SHOW_CELL_ID_KEY = 'c', + SHOW_GOALS_KEY = 'g', + SHOW_GOAL_VECTORS_KEY = 'v', +} From b506c962ef59409528d215376d72d4ab7a655ae4 Mon Sep 17 00:00:00 2001 From: Justin Shetty Date: Sun, 19 Oct 2025 17:01:19 -0700 Subject: [PATCH 3/3] move tooltips --- src/ControlsSection.tsx | 8 ++++---- src/DisplaySection.tsx | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/ControlsSection.tsx b/src/ControlsSection.tsx index 6401e0e..9e938f0 100644 --- a/src/ControlsSection.tsx +++ b/src/ControlsSection.tsx @@ -28,7 +28,7 @@ function ControlsSection({ Controls - + - +