fix: cap zoom when releasing pointer lock (escape key)

When user pressed Escape to exit precision mode, the zoom would stay
at the uncapped value (e.g., 50×) instead of animating back down to
the capped threshold (20 px/px). This was because:
- Zoom was set to uncapped value when precision mode activated
- When pointer lock released, no zoom recalculation occurred
- Zoom remained "stuck" at the uncapped value

Solution:
- When pointer lock is released, recalculate zoom with capping applied
- If uncapped zoom exceeds threshold, cap it at threshold
- This triggers animation to zoom back down to the threshold

Changes:
- Added zoom recalculation logic in handlePointerLockChange when !isLocked
- Calculate screen pixel ratio for uncapped zoom
- Cap zoom at threshold if it would exceed it
- Set targetZoom to capped value, triggering smooth zoom-out animation

🤖 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:35:32 -06:00
parent da20f5aa4b
commit 2331f1038c
1 changed files with 29 additions and 0 deletions

View File

@ -251,6 +251,35 @@ export function MapRenderer({
setCursorSquish({ x: 1, y: 1 })
setIsReleasingPointerLock(false)
initialCapturePositionRef.current = null
// When releasing pointer lock, recalculate zoom with capping applied
// The current zoom may be above the threshold (uncapped), so we need to cap it
if (containerRef.current && svgRef.current && uncappedAdaptiveZoomRef.current !== null) {
const containerRect = containerRef.current.getBoundingClientRect()
const svgRect = svgRef.current.getBoundingClientRect()
const magnifierWidth = containerRect.width * 0.5
const viewBoxParts = mapData.viewBox.split(' ').map(Number)
const viewBoxWidth = viewBoxParts[2]
if (viewBoxWidth && !isNaN(viewBoxWidth)) {
// Calculate what the screen pixel ratio would be at the uncapped zoom
const uncappedZoom = uncappedAdaptiveZoomRef.current
const magnifiedViewBoxWidth = viewBoxWidth / uncappedZoom
const magnifierScreenPixelsPerSvgUnit = magnifierWidth / magnifiedViewBoxWidth
const mainMapSvgUnitsPerScreenPixel = viewBoxWidth / svgRect.width
const screenPixelRatio = mainMapSvgUnitsPerScreenPixel * magnifierScreenPixelsPerSvgUnit
// If it exceeds threshold, cap the zoom to stay at threshold
if (screenPixelRatio > PRECISION_MODE_THRESHOLD) {
const maxZoom = PRECISION_MODE_THRESHOLD / (magnifierWidth / svgRect.width)
const cappedZoom = Math.min(uncappedZoom, maxZoom)
console.log(
`[Pointer Lock] Released - capping zoom from ${uncappedZoom.toFixed(1)}× to ${cappedZoom.toFixed(1)}× (threshold: ${PRECISION_MODE_THRESHOLD} px/px)`
)
setTargetZoom(cappedZoom)
}
}
}
}
// When pointer lock activates, update target zoom to the uncapped value