Skip to content

Right click menu #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

Right click menu #8

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a26367d
initial commit
Saahib13 Oct 2, 2025
692c4b4
added right clikc funcitonality menu front end
Saahib13 Oct 4, 2025
a06c2ab
added sub menu functionality
Saahib13 Oct 6, 2025
b5c994b
fixed laggy menu (hopefully)
Saahib13 Oct 16, 2025
b695039
laggy menu should be fixed along woth dragging issue. only changed th…
Saahib13 Oct 30, 2025
efa68d3
Merge branch 'right_click_menu' of https://github.com/UWARG/IMACS-3.0…
Saahib13 Oct 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
121 changes: 120 additions & 1 deletion gcs/src/components/missions/missionsMap.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,8 @@ function MapSectionNonMemo({
setContextMenuPositionCalculationInfo,
] = useState()
const [clickedGpsCoords, setClickedGpsCoords] = useState({ lng: 0, lat: 0 })
const [savedCoordinates, setSavedCoordinates] = useState([])
const [showSubmenu, setShowSubmenu] = useState(false)

const clipboard = useClipboard({ timeout: 500 })

Expand Down Expand Up @@ -169,6 +171,21 @@ function MapSectionNonMemo({
}
}, [homePosition])

// Close context menu when clicking outside
useEffect(() => {
const handleClickOutside = (event) => {
if (clicked && contextMenuRef.current && !contextMenuRef.current.contains(event.target)) {
setClicked(false)
setShowSubmenu(false)
}
}

document.addEventListener('mousedown', handleClickOutside)
return () => {
document.removeEventListener('mousedown', handleClickOutside)
}
}, [clicked])

return (
<div className="w-initial h-full" id="map">
<Map
Expand All @@ -189,7 +206,14 @@ function MapSectionNonMemo({
onContextMenu={(e) => {
e.preventDefault()
setClicked(true)
setShowSubmenu(false)
setClickedGpsCoords(e.lngLat)
// Save coordinates for future use
setSavedCoordinates(prev => [...prev, {
lat: e.lngLat.lat,
lng: e.lngLat.lng,
timestamp: new Date().toISOString()
}])
setContextMenuPositionCalculationInfo({
clickedPoint: e.point,
canvasSize: {
Expand Down Expand Up @@ -294,15 +318,17 @@ function MapSectionNonMemo({
{clicked && (
<div
ref={contextMenuRef}
className="absolute bg-falcongrey-700 rounded-md p-1"
className="absolute bg-falcongrey-700 rounded-md p-1 min-w-[180px]"
style={{ top: points.y, left: points.x }}
>
{/* Copy Coordinates */}
<ContextMenuItem
onClick={() => {
clipboard.copy(
`${clickedGpsCoords.lat}, ${clickedGpsCoords.lng}`,
)
showNotification("Copied to clipboard")
setClicked(false)
}}
>
<div className="w-full flex justify-between gap-2">
Expand All @@ -324,6 +350,99 @@ function MapSectionNonMemo({
</svg>
</div>
</ContextMenuItem>

{/* Divider */}
<div className="border-t border-falcongrey-600 my-1"></div>

{/* Insert Command */}
<div className="relative">
<ContextMenuItem
onClick={() => {
setShowSubmenu(!showSubmenu)
}}
>
<div className="w-full flex justify-between gap-2">
<span>Insert Command</span>
<svg
className={`transform transition-transform ${showSubmenu ? 'rotate-90' : ''}`}
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.41z"
/>
</svg>
</div>
</ContextMenuItem>

{/* Insert Submenu */}
{showSubmenu && (
<div className="absolute left-full top-0 ml-1 bg-falcongrey-700 rounded-md p-1 min-w-[140px] shadow-lg">
<ContextMenuItem
onClick={() => {
console.log("Insert Waypoint at:", clickedGpsCoords)
setClicked(false)
setShowSubmenu(false)
}}
>
<span>Waypoint</span>
</ContextMenuItem>
<ContextMenuItem
onClick={() => {
console.log("Insert Land at:", clickedGpsCoords)
setClicked(false)
setShowSubmenu(false)
}}
>
<span>Land</span>
</ContextMenuItem>
<ContextMenuItem
onClick={() => {
console.log("Insert Takeoff at:", clickedGpsCoords)
setClicked(false)
setShowSubmenu(false)
}}
>
<span>Takeoff</span>
</ContextMenuItem>
<ContextMenuItem
onClick={() => {
console.log("Insert Return to Launch at:", clickedGpsCoords)
setClicked(false)
setShowSubmenu(false)
}}
>
<span>Return to Launch</span>
</ContextMenuItem>
</div>
)}
</div>

{/* Delete Command */}
<ContextMenuItem
onClick={() => {
console.log("Delete command at:", clickedGpsCoords)
setClicked(false)
}}
>
<div className="w-full flex justify-between gap-2">
<span>Delete Command</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z"
/>
</svg>
</div>
</ContextMenuItem>
Copy link
Collaborator

@benjtran benjtran Oct 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its a little bulky... could you refactor all right click functionality (including previously written code) into its own file within gcs/src/components/missions/? You can name it missionContextMenu.jsx.

</div>
)}
</Map>
Expand Down
10 changes: 6 additions & 4 deletions radio/app/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
from flask import Flask
from flask_socketio import SocketIO

CONFIG_FILE = os.path.join(os.getcwd(), "IMACS.yml")
CONFIG_FILE = os.path.join(os.path.dirname(os.path.abspath(__file__)), "..", "..", "IMACS.yml")
CONFIG_FILE = os.path.normpath(CONFIG_FILE)


def create_directory(path: str, count: int) -> str:
"""
Expand All @@ -32,11 +34,11 @@ def create_directory(path: str, count: int) -> str:
return create_directory(path, count + 1)


with open(CONFIG_FILE, 'r') as file:
with open(CONFIG_FILE, "r") as file:
config = yaml.safe_load(file)

if 'logs' in config and config['logs'].get('location'):
log_dir = config['logs']['location']
if "logs" in config and config["logs"].get("location"):
log_dir = config["logs"]["location"]
else:
log_dir = os.path.expanduser("~/.imacs/logs")

Expand Down
Loading