refactor(RegionMap.tsx): extract map interaction constants to improve code readability
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
Reference in New Issue
Block a user