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:
parent
7c1f2e54c9
commit
7ba7e03661
|
|
@ -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()
|
||||
|
|
|
|||
Loading…
Reference in New Issue