dave/eve-signaler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Add labelScale prop for dynamic text scaling in MapNode and adjust RegionMap to utilize it based on compact view

Browse Source
This commit is contained in:
PhatPhuckDave
2025-10-05 16:47:40 +02:00
parent 634c72be2d
commit 2c0134ed4d
2 changed files with 16 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/MapNode.tsx
View File

@@ -21,6 +21,7 @@ interface MapNodeProps {
showJumps?: boolean; showJumps?: boolean;
showKills?: boolean; showKills?: boolean;
viewBoxWidth?: number; // Add viewBox width for scaling calculations viewBoxWidth?: number; // Add viewBox width for scaling calculations
labelScale?: number;
} }
export const MapNode: React.FC<MapNodeProps> = ({ export const MapNode: React.FC<MapNodeProps> = ({
@@ -43,6 +44,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
showJumps = false, showJumps = false,
showKills = false, showKills = false,
viewBoxWidth = 1200, viewBoxWidth = 1200,
labelScale = 1,
}) => { }) => {
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
@@ -197,23 +199,22 @@ export const MapNode: React.FC<MapNodeProps> = ({
fontWeight="bold" fontWeight="bold"
className={`transition-all duration-300 ${isHovered ? 'fill-purple-200' : 'fill-white' className={`transition-all duration-300 ${isHovered ? 'fill-purple-200' : 'fill-white'
} pointer-events-none select-none`} } pointer-events-none select-none`}
style={{ style={{
textShadow: '2px 2px 4px rgba(0,0,0,0.8)', textShadow: '2px 2px 4px rgba(0,0,0,0.8)',
vectorEffect: 'non-scaling-stroke' vectorEffect: 'non-scaling-stroke'
}} }}
transform={`scale(${1 / (1200 / viewBoxWidth)})`} transform={`scale(${(1 / (1200 / viewBoxWidth)) * labelScale})`}
transformOrigin="0 0"
> >
{name} {security !== undefined && ( {name} {security !== undefined && (
<tspan fill={getSecurityColor(security)}>{security.toFixed(1)}</tspan> <tspan fill={getSecurityColor(security)}>{security.toFixed(1)}</tspan>
)} )}
</text> </text>
{/* Dynamic text positioning based on what's shown */} {/* Dynamic text positioning based on what's shown */}
{(() => { {(() => {
let currentY = textOffset + 15; let currentY = textOffset + 15;
const textElements = []; const textElements = [];
// Add signatures if present // Add signatures if present
if (signatures !== undefined && signatures > 0) { if (signatures !== undefined && signatures > 0) {
textElements.push( textElements.push(
@@ -225,19 +226,18 @@ export const MapNode: React.FC<MapNodeProps> = ({
fill="#a3a3a3" fill="#a3a3a3"
fontSize="12" fontSize="12"
className="pointer-events-none select-none" className="pointer-events-none select-none"
style={{ style={{
textShadow: '1px 1px 2px rgba(0,0,0,0.8)', textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
vectorEffect: 'non-scaling-stroke' vectorEffect: 'non-scaling-stroke'
}} }}
transform={`scale(${1 / (1200 / viewBoxWidth)})`} transform={`scale(${(1 / (1200 / viewBoxWidth)) * labelScale})`}
transformOrigin="0 0"
> >
📡 {signatures} 📡 {signatures}
</text> </text>
); );
currentY += 15; currentY += 15;
} }
// Add jumps if enabled and present // Add jumps if enabled and present
if (showJumps && jumps !== undefined) { if (showJumps && jumps !== undefined) {
textElements.push( textElements.push(
@@ -249,19 +249,18 @@ export const MapNode: React.FC<MapNodeProps> = ({
fill="#60a5fa" fill="#60a5fa"
fontSize="10" fontSize="10"
className="pointer-events-none select-none" className="pointer-events-none select-none"
style={{ style={{
textShadow: '1px 1px 2px rgba(0,0,0,0.8)', textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
vectorEffect: 'non-scaling-stroke' vectorEffect: 'non-scaling-stroke'
}} }}
transform={`scale(${1 / (1200 / viewBoxWidth)})`} transform={`scale(${(1 / (1200 / viewBoxWidth)) * labelScale})`}
transformOrigin="0 0"
> >
🚀 {jumps} 🚀 {jumps}
</text> </text>
); );
currentY += 15; currentY += 15;
} }
// Add kills if enabled and present // Add kills if enabled and present
if (showKills && kills !== undefined) { if (showKills && kills !== undefined) {
textElements.push( textElements.push(
@@ -273,18 +272,17 @@ export const MapNode: React.FC<MapNodeProps> = ({
fill="#f87171" fill="#f87171"
fontSize="10" fontSize="10"
className="pointer-events-none select-none" className="pointer-events-none select-none"
style={{ style={{
textShadow: '1px 1px 2px rgba(0,0,0,0.8)', textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
vectorEffect: 'non-scaling-stroke' vectorEffect: 'non-scaling-stroke'
}} }}
transform={`scale(${1 / (1200 / viewBoxWidth)})`} transform={`scale(${(1 / (1200 / viewBoxWidth)) * labelScale})`}
transformOrigin="0 0"
> >
⚔️ {kills} ⚔️ {kills}
</text> </text>
); );
} }
return textElements; return textElements;
})()} })()}
</g> </g>

1
frontend/src/components/RegionMap.tsx
View File

@@ -1114,6 +1114,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
showJumps={showJumps} showJumps={showJumps}
showKills={showKills} showKills={showKills}
viewBoxWidth={viewBox.width} viewBoxWidth={viewBox.width}
labelScale={isCompact ? 2.0 : 1}
/> />
))} ))}