diff --git a/frontend/src/components/MapNode.tsx b/frontend/src/components/MapNode.tsx index 9344d54..3f0a132 100644 --- a/frontend/src/components/MapNode.tsx +++ b/frontend/src/components/MapNode.tsx @@ -20,6 +20,7 @@ interface MapNodeProps { kills?: number; showJumps?: boolean; showKills?: boolean; + viewBoxWidth?: number; // Add viewBox width for scaling calculations } export const MapNode: React.FC = ({ @@ -41,6 +42,7 @@ export const MapNode: React.FC = ({ kills, showJumps = false, showKills = false, + viewBoxWidth = 1200, }) => { const [isHovered, setIsHovered] = useState(false); const [isDragging, setIsDragging] = useState(false); @@ -185,7 +187,7 @@ export const MapNode: React.FC = ({ className="transition-all duration-300" /> - {/* Node label */} + {/* Node label - fixed visual size regardless of zoom */} = ({ fontWeight="bold" className={`transition-all duration-300 ${isHovered ? 'fill-purple-200' : 'fill-white' } pointer-events-none select-none`} - style={{ textShadow: '2px 2px 4px rgba(0,0,0,0.8)' }} + style={{ + textShadow: '2px 2px 4px rgba(0,0,0,0.8)', + vectorEffect: 'non-scaling-stroke' + }} + transform={`scale(${1 / (1200 / viewBoxWidth)})`} + transformOrigin="0 0" > {name} {security !== undefined && ( {security.toFixed(1)} @@ -208,12 +215,17 @@ export const MapNode: React.FC = ({ fill="#a3a3a3" fontSize="12" className="pointer-events-none select-none" - style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }} + style={{ + textShadow: '1px 1px 2px rgba(0,0,0,0.8)', + vectorEffect: 'non-scaling-stroke' + }} + transform={`scale(${1 / (1200 / viewBoxWidth)})`} + transformOrigin="0 0" > {signatures !== undefined && signatures > 0 && `📡 ${signatures}`} - {/* Statistics display */} + {/* Statistics display - fixed visual size regardless of zoom */} {showJumps && jumps !== undefined && ( = ({ fill="#60a5fa" fontSize="10" className="pointer-events-none select-none" - style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }} + style={{ + textShadow: '1px 1px 2px rgba(0,0,0,0.8)', + vectorEffect: 'non-scaling-stroke' + }} + transform={`scale(${1 / (1200 / viewBoxWidth)})`} + transformOrigin="0 0" > 🚀 {jumps} @@ -236,7 +253,12 @@ export const MapNode: React.FC = ({ fill="#f87171" fontSize="10" className="pointer-events-none select-none" - style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }} + style={{ + textShadow: '1px 1px 2px rgba(0,0,0,0.8)', + vectorEffect: 'non-scaling-stroke' + }} + transform={`scale(${1 / (1200 / viewBoxWidth)})`} + transformOrigin="0 0" > ⚔️ {kills} diff --git a/frontend/src/components/RegionMap.tsx b/frontend/src/components/RegionMap.tsx index 67011f1..22c8b83 100644 --- a/frontend/src/components/RegionMap.tsx +++ b/frontend/src/components/RegionMap.tsx @@ -1088,6 +1088,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho kills={getSystemKills(system.solarSystemName)} showJumps={showJumps} showKills={showKills} + viewBoxWidth={viewBox.width} /> ))}