fix: Add touchcancel handler to prevent stuck gesture state

[upendra512]

Description

Fixes Issue #75 - Handle touchcancel to prevent stuck drag or pressed input state

Implemented comprehensive touchcancel handling to ensure gesture state is properly cleaned up when touch sequences are interrupted by OS or browser events.

Problem

The gesture tracking system handles touchstart, touchmove, and touchend events, but did not handle touchcancel. On mobile devices, touch sequences can be interrupted and end with touchcancel instead of touchend in scenarios such as:

• OS notifications appearing
• Incoming calls or system overlays
• System gestures (home/back swipe, app switch)
• Browser taking control for scrolling or zooming
• Loss of window focus

When touchcancel occurred without proper handling:

• Drag state remained active (stuck dragging)
• Mouse press remained held
• Gesture tracking stayed in inconsistent state
• User experienced broken input until manually reset

Solution

Added handleTouchCancel function that performs comprehensive cleanup:

1. Touch Tracking Cleanup

• Removes all cancelled touches from ongoingTouches map
• Prevents ghost touches from affecting future gestures

2. Drag State Management

• Clears draggingTimeout to prevent spurious click events
• Releases active drag state if present
• Sends button release event to ensure clean state on remote

3. Gesture State Reset

When all touches are cancelled:

• Sets isTracking to false
• Resets moved flag
• Clears released count
• Resets pinch tracking (lastPinchDist, pinching)

When some touches remain but less than 2:

• Only resets pinch-specific state
• Allows remaining touches to continue normal tracking

Changes

src/hooks/useTrackpadGesture.ts

• Added handleTouchCancel function (+39 lines)
• Comprehensive state cleanup with detailed comments
• Added onTouchCancel to handlers return object

src/components/Trackpad/TouchArea.tsx

• Updated TouchAreaProps interface to include onTouchCancel
• Wired up onTouchCancel event handler in touch area div

src/components/Trackpad/ScreenMirror.tsx

• No changes needed - automatically receives handler via spread operator

Testing Scenarios

This fix handles:

• Notification interrupts during drag
• System gesture interrupts (home, back, app switch)
• Browser scroll/zoom takeover
• Window focus loss
• Multi-touch to single-touch transitions
• Complete touch cancellation

Technical Details

The implementation follows the same pattern as handleTouchEnd but with more aggressive cleanup since touchcancel indicates an abnormal termination. Unlike touchend, we do not attempt to interpret the gesture as a tap/click - we simply ensure all state is safely reset.

Impact

Significantly improves mobile UX reliability by:

• Eliminating stuck drag states
• Preventing phantom button presses
• Ensuring clean gesture reset after interruptions
• Making touch interactions more robust and predictable

Related Issues

Closes #75

Notes

This PR builds on PR #323 which added cleanup for draggingTimeout on unmount. Together, these changes ensure comprehensive lifecycle management for gesture state.

[coderabbitai]

Warning

Rate limit exceeded

@upendra512 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 4 minutes and 10 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: e7e79c6f-094e-4941-a976-eb04941a2ef0

📥 Commits

Reviewing files that changed from the base of the PR and between 25b2382 and 4406efe.

📒 Files selected for processing (2)

• src/components/Trackpad/TouchArea.tsx
• src/hooks/useTrackpadGesture.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}