feat(MapNode): add viewBoxWidth prop for scaling and adjust text rendering for fixed visual size

This commit is contained in:
2025-09-15 00:09:52 +02:00
parent 8575155f4b
commit 6f3a5dce64
2 changed files with 29 additions and 6 deletions

View File

@@ -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<MapNodeProps> = ({
@@ -41,6 +42,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
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<MapNodeProps> = ({
className="transition-all duration-300"
/>
{/* Node label */}
{/* Node label - fixed visual size regardless of zoom */}
<text
x="0"
y={textOffset}
@@ -195,7 +197,12 @@ export const MapNode: React.FC<MapNodeProps> = ({
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 && (
<tspan fill={getSecurityColor(security)}>{security.toFixed(1)}</tspan>
@@ -208,12 +215,17 @@ export const MapNode: React.FC<MapNodeProps> = ({
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}`}
</text>
{/* Statistics display */}
{/* Statistics display - fixed visual size regardless of zoom */}
{showJumps && jumps !== undefined && (
<text
x="0"
@@ -222,7 +234,12 @@ export const MapNode: React.FC<MapNodeProps> = ({
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}
</text>
@@ -236,7 +253,12 @@ export const MapNode: React.FC<MapNodeProps> = ({
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}
</text>

View File

@@ -1088,6 +1088,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
kills={getSystemKills(system.solarSystemName)}
showJumps={showJumps}
showKills={showKills}
viewBoxWidth={viewBox.width}
/>
))}