diff --git a/frontend/src/components/RegionMap.tsx b/frontend/src/components/RegionMap.tsx index e4d4ce8..02824a9 100644 --- a/frontend/src/components/RegionMap.tsx +++ b/frontend/src/components/RegionMap.tsx @@ -482,6 +482,45 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho }); }, [viewBox]); + const handleBackgroundContextMenu = (e: React.MouseEvent) => { + if (!svgRef.current || systems.size === 0) return; + e.preventDefault(); + e.stopPropagation(); + + // Convert click to SVG coordinates + const pt = svgRef.current.createSVGPoint(); + pt.x = e.clientX; + pt.y = e.clientY; + const svgPoint = pt.matrixTransform(svgRef.current.getScreenCTM()!.inverse()); + const clickX = svgPoint.x; + const clickY = svgPoint.y; + + // Find nearest system by Euclidean distance in SVG space + let nearestName: string | null = null; + let nearestDist2 = Number.POSITIVE_INFINITY; + systems.forEach((sys, name) => { + const pos = positions[name]; + if (!pos) return; + const dx = pos.x - clickX; + const dy = pos.y - clickY; + const d2 = dx * dx + dy * dy; + if (d2 < nearestDist2) { + nearestDist2 = d2; + nearestName = name; + } + }); + + if (nearestName) { + const sys = systems.get(nearestName)!; + // Place the menu at the system's on-screen position + const pt2 = svgRef.current.createSVGPoint(); + pt2.x = positions[nearestName]!.x; + pt2.y = positions[nearestName]!.y; + const screenPoint = pt2.matrixTransform(svgRef.current.getScreenCTM()!); + setContextMenu({ x: screenPoint.x, y: screenPoint.y, system: sys }); + } + }; + const handleContextMenu = (e: React.MouseEvent, system: System) => { e.preventDefault(); e.stopPropagation(); @@ -623,6 +662,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho onMouseLeave={handleMouseUp} onWheel={handleWheel} onDoubleClick={handleMapDoubleClick} + onContextMenu={handleBackgroundContextMenu} >