fix: resume zoom animation immediately when precision mode activates
Fixed issue where zoom animation would stay paused after activating precision mode until the user moved the mouse. **Problem:** - User activates precision mode (pointer lock) - Zoom animation stays paused at threshold - Doesn't resume until mouse moves - Feels unresponsive and broken **Root cause:** - Zoom capping logic runs in handleMouseMove - When pointer lock activates, no mouse movement occurs - targetZoom stays at capped value - Spring update effect runs but with old (capped) target - Animation doesn't resume **Solution:** - Trigger synthetic mousemove event when pointer lock acquired - Event has movementX/movementY = 0 (no cursor movement) - Triggers handleMouseMove to recalculate zoom WITHOUT capping - New uncapped targetZoom triggers spring to resume animation - Zoom smoothly continues from pause point **User experience:** - Click to activate precision mode - Zoom immediately resumes animating toward target - No need to move mouse to "wake up" the animation - Smooth, responsive transition into precision mode 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
e73b59d510
commit
7c1f2e54c9
|
|
@ -249,6 +249,22 @@ export function MapRenderer({
|
||||||
setIsReleasingPointerLock(false)
|
setIsReleasingPointerLock(false)
|
||||||
initialCapturePositionRef.current = null
|
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)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handlePointerLockError = () => {
|
const handlePointerLockError = () => {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue