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)
|
||||
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 = () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue