fix: prevent zoom jump on precision mode activation by resetting spring target

**Problem:**
When precision mode activated, the spring had already reached its uncapped
target. Removing the render-time clamping caused an instant jump to the
target value.

**Solution:**
Added useEffect that watches for pointerLocked changes. When precision mode
activates:
1. Get current spring value (clamped at threshold)
2. Set spring target to current value
3. This resets the spring, preventing jump
4. Next mouse move will set new uncapped target
5. Spring smoothly animates from threshold to new target

**Flow:**
1. Not in precision mode: Spring targets 100×, renders at ~40× (clamped)
2. User clicks to activate precision mode
3. useEffect fires: setTargetZoom(currentZoom) // ~40×
4. Spring is now at ~40× targeting ~40× (no movement)
5. User moves mouse: setTargetZoom(100×)
6. Spring smoothly animates from ~40× to 100×

**Result:**
 Fast easing to threshold
 No jump when activating precision mode
 Smooth zoom continuation after activation

🤖 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 20:37:15 -06:00
parent cab1fbff95
commit 33d9f15897
1 changed files with 14 additions and 0 deletions

View File

@ -278,6 +278,20 @@ export function MapRenderer({
} }
}, []) }, [])
// When pointer lock state changes, update the spring target to current zoom
// This prevents jumps when transitioning between capped and uncapped zoom
useEffect(() => {
if (pointerLocked) {
// Just activated precision mode - set spring target to current value to avoid jump
const currentZoom = magnifierSpring.zoom.get()
setTargetZoom(currentZoom)
console.log(
'[Precision Mode] Activated - setting spring target to current zoom:',
currentZoom
)
}
}, [pointerLocked, magnifierSpring.zoom])
// Pre-compute largest piece sizes for multi-piece regions // Pre-compute largest piece sizes for multi-piece regions
useEffect(() => { useEffect(() => {
if (!svgRef.current) return if (!svgRef.current) return