fix: resume zoom animation immediately when precision mode activates

When user clicked to activate precision mode (pointer lock), the zoom
animation stayed paused until the mouse moved. This was because:
- Zoom is capped at threshold (20 px/px) when not in pointer lock
- When pointer lock activates, no mouse movement occurs
- handleMouseMove never runs, so zoom never recalculates without cap

Solution:
- Store uncapped adaptive zoom in ref before capping logic runs
- When pointer lock activates, directly set targetZoom to uncapped value
- This triggers pause/resume effect which sees target is no longer at
  threshold and resumes animation immediately

Changes:
- Added uncappedAdaptiveZoomRef to store zoom before capping
- Store uncapped value in handleMouseMove (line 1468)
- Set targetZoom to uncapped value when pointer lock acquired (lines 256-263)
- Removed synthetic mousemove event approach (didn't work)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-11-23 21:17:47 -06:00
parent 7c1f2e54c9
commit 7ba7e03661
1 changed files with 13 additions and 14 deletions

View File

@ -206,6 +206,9 @@ export function MapRenderer({
// Maps regionId -> {width, height} of the largest piece
const largestPieceSizesRef = useRef<Map<string, { width: number; height: number }>>(new Map())
// Store the uncapped adaptive zoom for use when pointer lock activates
const uncappedAdaptiveZoomRef = useRef<number | null>(null)
// Configuration
const MAX_ZOOM = 1000 // Maximum zoom level (for Gibraltar at 0.08px!)
const HIGH_ZOOM_THRESHOLD = 100 // Show gold border above this zoom level
@ -250,20 +253,13 @@ export function MapRenderer({
initialCapturePositionRef.current = null
}
// Trigger a synthetic mouse move event to recalculate zoom without capping
// This allows the zoom animation to resume immediately when precision mode activates
if (isLocked && svgRef.current && cursorPositionRef.current) {
console.log('[Pointer Lock] Triggering zoom recalculation to resume animation')
// Create a synthetic mousemove event at the current cursor position
const syntheticEvent = new MouseEvent('mousemove', {
bubbles: true,
cancelable: true,
clientX: 0, // These don't matter for pointer lock mode
clientY: 0,
movementX: 0,
movementY: 0,
})
svgRef.current.dispatchEvent(syntheticEvent)
// When pointer lock activates, update target zoom to the uncapped value
// This allows the zoom animation to resume immediately
if (isLocked && uncappedAdaptiveZoomRef.current !== null) {
console.log(
`[Pointer Lock] Updating target zoom to uncapped value: ${uncappedAdaptiveZoomRef.current.toFixed(1)}×`
)
setTargetZoom(uncappedAdaptiveZoomRef.current)
}
}
@ -1474,6 +1470,9 @@ export function MapRenderer({
)
}
// Store uncapped adaptive zoom before potentially capping it
uncappedAdaptiveZoomRef.current = adaptiveZoom
// Cap zoom if not in pointer lock mode to prevent excessive screen pixel ratios
if (!pointerLocked && containerRef.current && svgRef.current) {
const containerRect = containerRef.current.getBoundingClientRect()