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:
Thomas Hallock
2025-11-02 13:42:17 -06:00
parent da9bba1096
commit 8f4a79c9b0

View File

@@ -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,
})
}
}