Right click menu #8
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
benjtran
requested changes
Oct 5, 2025
Comment on lines
353
to
445
|
|
||
| {/* 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> |
There was a problem hiding this comment.
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.
benjtran
requested changes
Oct 8, 2025
There was a problem hiding this comment.
Nice work. Right now, right clicking a command prioritizes dragging/moving it instead of opening the context menu. This should be fixed so the menu opens instead, allowing the "delete command" button to work.
Within your implementation, log the number/ID of the waypoint somewhere whenever one is right clicked to confirm that the context menu correctly identifies and distinguishes between which waypoint was clicked (if any).
Comment on lines
23
to
85
| useEffect(() => { | ||
| if (contextMenuRef.current && contextMenuPositionCalculationInfo) { | ||
| const contextMenuWidth = Math.round( | ||
| contextMenuRef.current.getBoundingClientRect().width, | ||
| ) | ||
| const contextMenuHeight = Math.round( | ||
| contextMenuRef.current.getBoundingClientRect().height, | ||
| ) | ||
| let x = contextMenuPositionCalculationInfo.clickedPoint.x | ||
| let y = contextMenuPositionCalculationInfo.clickedPoint.y | ||
|
|
||
| if ( | ||
| contextMenuWidth + contextMenuPositionCalculationInfo.clickedPoint.x > | ||
| contextMenuPositionCalculationInfo.canvasSize.width | ||
| ) { | ||
| x = contextMenuPositionCalculationInfo.clickedPoint.x - contextMenuWidth | ||
| } | ||
| if ( | ||
| contextMenuHeight + contextMenuPositionCalculationInfo.clickedPoint.y > | ||
| contextMenuPositionCalculationInfo.canvasSize.height | ||
| ) { | ||
| y = | ||
| contextMenuPositionCalculationInfo.clickedPoint.y - contextMenuHeight | ||
| } | ||
|
|
||
| setPoints({ x, y }) | ||
| } | ||
| }, [contextMenuPositionCalculationInfo]) | ||
|
|
||
| // 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]) | ||
|
|
||
| const handleContextMenu = (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: { | ||
| height: e.originalEvent.target.clientHeight, | ||
| width: e.originalEvent.target.clientWidth, | ||
| }, | ||
| }) | ||
| } |
There was a problem hiding this comment.
Nit: it seems like the menu briefly renders at its old position before updating to its newly clicked position, causing it to flash across the screen. Try and see if you can find a way to fix this, but not a critical issue
benjtran
requested changes
Oct 27, 2025
…e 2 files by goign back one commit.
…into right_click_menu
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
added the right click menu. i have had a bunch of issues with the tests because they cant even run due to the fact that imacs.yml is empty. also why i think i couldn't get the simulator to run with docker.