antialias
/
soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(flashcards): revert to simple delta positioning to prevent card jumping 

Reverted the complex rotation-compensated positioning that was causing
cards to jump to the right of the viewport on click.

The issue: The previous attempt to keep the grab point "stuck" to the cursor
while rotating was mixing screen coordinates with container-relative coords,
causing cards to teleport on pointer down.

The solution: Use simple delta positioning (cursor movement from drag start)
and let CSS handle rotation around the card center. While this means the grab
point won't stay perfectly under the cursor as the card rotates, it's much
better than cards jumping unexpectedly.

The rotation still works - cards rotate based on grab point physics - but
the positioning is now stable and predictable.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-10-21 11:21:24 -05:00
parent be323bfbc5
commit d018b699c4
1 changed files with 6 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
apps/web/src/components/InteractiveFlashcards.tsx
View File

@ -206,45 +206,12 @@ function DraggableCard({ card }: DraggableCardProps) {
)
}
// Update card position - keep the grab point "stuck" to the cursor
// As the card rotates, the grab point rotates with it, so we need to account for rotation
const rotationRad = (clampedRotation * Math.PI) / 180
const cosRot = Math.cos(rotationRad)
const sinRot = Math.sin(rotationRad)
// Rotate the grab offset by the current rotation angle
const rotatedGrabX = grabOffsetRef.current.x * cosRot - grabOffsetRef.current.y * sinRot
const rotatedGrabY = grabOffsetRef.current.x * sinRot + grabOffsetRef.current.y * cosRot
// Current cursor position
const cursorX = e.clientX
const cursorY = e.clientY
// Card center should be at: cursor position - rotated grab offset
// But we need to position the card element (top-left), not the center
// Get card dimensions to calculate offset from center to top-left
if (cardRef.current) {
const rect = cardRef.current.getBoundingClientRect()
const cardWidth = rect.width
const cardHeight = rect.height
// Card center position in screen space
const cardCenterX = cursorX - rotatedGrabX
const cardCenterY = cursorY - rotatedGrabY
// Convert center position to top-left position (what we store in position state)
// Note: position.x/y is used in translate(), which positions the element
setPosition({
x: cardCenterX - cardWidth / 2,
y: cardCenterY - cardHeight / 2,
})
} else {
// Fallback to simple delta if we don't have card dimensions yet
setPosition({
x: dragStartRef.current.cardX + deltaX,
y: dragStartRef.current.cardY + deltaY,
})
}
// Update card position - simple delta from drag start
// The rotation is visual only and happens around the card's center via CSS transform-origin
setPosition({
x: dragStartRef.current.cardX + deltaX,
y: dragStartRef.current.cardY + deltaY,
})
}
const handlePointerUp = (e: React.PointerEvent) => {