refactor(RegionMap.tsx): extract map interaction constants to improve code readability

This commit is contained in:
2025-08-11 19:26:35 +02:00
parent c55b3bd882
commit b0ad48985a

View File

@@ -12,6 +12,17 @@ import { ListCharacters, StartESILogin, SetDestinationForAll, PostRouteForAllByN
import { toast } from '@/hooks/use-toast';
import { getSystemsRegions } from '@/utils/systemApi';
// Interaction/indicator constants
const SELECT_HOLD_MS = 300;
const PAN_THRESHOLD_PX = 6;
const DRAG_SNAP_DISTANCE = 20;
const VIA_WAYPOINT_RING_RADIUS = 14;
const VIA_WAYPOINT_RING_COLOR = '#10b981';
const INDICATED_RING_RADIUS = 20;
const INDICATED_RING_COLOR = '#f59e0b';
const INDICATED_RING_ANIM_VALUES = '18;22;18';
const INDICATED_RING_ANIM_DUR = '1.2s';
interface RegionMapProps {
regionName: string;
focusSystem?: string;
@@ -392,7 +403,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
const dx = system.x - x;
const dy = system.y - y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 20) {
if (distance < DRAG_SNAP_DISTANCE) {
targetSystem = system;
}
});
@@ -484,7 +495,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
}
};
const PAN_THRESHOLD_PX = 6; // movement before starting pan
// const PAN_THRESHOLD_PX = 6; // movement before starting pan
const handleMouseDown = useCallback((e: React.MouseEvent) => {
if (!svgRef.current) return;
@@ -504,7 +515,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
clearSelectTimer();
selectTimerRef.current = window.setTimeout(() => {
setIsSelecting(true);
}, 1000);
}, SELECT_HOLD_MS);
}, [positions, systems]);
const handleMouseMove = useCallback((e: React.MouseEvent) => {
@@ -859,9 +870,9 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
<circle
cx={positions[name].x}
cy={positions[name].y}
r="14"
r={VIA_WAYPOINT_RING_RADIUS}
fill="none"
stroke="#10b981"
stroke={VIA_WAYPOINT_RING_COLOR}
strokeWidth="3"
opacity="0.9"
filter="url(#glow)"
@@ -876,14 +887,14 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
<circle
cx={positions[indicatedSystem].x}
cy={positions[indicatedSystem].y}
r="20"
r={INDICATED_RING_RADIUS}
fill="none"
stroke="#f59e0b"
stroke={INDICATED_RING_COLOR}
strokeWidth="3"
opacity="0.9"
filter="url(#glow)"
>
<animate attributeName="r" values="18;22;18" dur="1.2s" repeatCount="indefinite" />
<animate attributeName="r" values={INDICATED_RING_ANIM_VALUES} dur={INDICATED_RING_ANIM_DUR} repeatCount="indefinite" />
</circle>
</g>
)}