fix(rithmomachia): smooth guide dragging from docked state without jump
Fixed the guide modal jumping to center when dragging from docked state.
**Root Cause:**
When undocking, the code was centering the modal on the cursor:
- Position set to: `{ x: e.clientX - width/2, y: e.clientY - 20 }`
- This caused a visual jump from the docked position to cursor-centered
**Solution:**
Changed undocking logic to maintain the modal's current visual position:
- Position set to: `{ x: rect.left, y: rect.top }` (current screen position)
- dragStart set to: `{ x: e.clientX - rect.left, y: e.clientY - rect.top }` (offset)
**Result:**
- Modal stays exactly where it is visually when undocking (no jump!)
- dragStart correctly reflects the cursor offset from modal position
- Subsequent mouse movements smoothly continue the drag operation
- Single continuous drag gesture from docked to floating state
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -182,17 +182,19 @@ export function PlayingGuideModal({
|
||||
if (dragDistance > UNDOCK_THRESHOLD) {
|
||||
console.log('[PlayingGuideModal] Undocking due to drag distance:', dragDistance)
|
||||
onUndock()
|
||||
// After undocking, set up position for continued dragging as floating modal
|
||||
// Center the modal at the current mouse position
|
||||
// After undocking, keep modal at current visual position
|
||||
// and set dragStart as offset from position to cursor for smooth continued dragging
|
||||
if (modalRef.current) {
|
||||
const rect = modalRef.current.getBoundingClientRect()
|
||||
// Keep modal at its current screen position (no jump)
|
||||
setPosition({
|
||||
x: e.clientX - rect.width / 2,
|
||||
y: e.clientY - 20, // Offset slightly from cursor
|
||||
x: rect.left,
|
||||
y: rect.top,
|
||||
})
|
||||
// Set dragStart as offset from current position to cursor
|
||||
setDragStart({
|
||||
x: e.clientX - (e.clientX - rect.width / 2),
|
||||
y: e.clientY - (e.clientY - 20),
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user