Skip to content

feat: replace mouse/touch events with pointer events#879

Merged
tomkp merged 2 commits intomasterfrom
feature/pointer-events
Feb 18, 2026
Merged

feat: replace mouse/touch events with pointer events#879
tomkp merged 2 commits intomasterfrom
feature/pointer-events

Conversation

@tomkp
Copy link
Owner

@tomkp tomkp commented Feb 18, 2026

Summary

  • Replaces separate mouse and touch event handlers with unified Pointer Events API
  • Implements pointer capture for better drag UX (prevents cursor blinking during resize)
  • Simplifies the useResizer hook by consolidating event handling

Changes

  • useResizer.ts: Replaced handleMouseDown, handleTouchStart, handleTouchEnd with single handlePointerDown. Updated global listeners to use pointermove, pointerup, pointercancel
  • Divider.tsx: Changed from onMouseDown/onTouchStart/onTouchEnd to single onPointerDown prop
  • SplitPane.tsx: Updated to use new handlePointerDown from useResizer hook
  • types/index.ts: Updated DividerProps to use onPointerDown, changed ResizeEvent.source from 'mouse' | 'touch' to 'pointer'
  • test/setup.ts: Added PointerEvent polyfill for jsdom testing

Breaking Changes

Custom divider components will need to update their props:

  • Replace onMouseDown, onTouchStart, onTouchEnd with onPointerDown

Benefits

  1. Better UX: Pointer capture prevents cursor blinking during drag
  2. Simpler code: Single event handler instead of separate mouse/touch logic
  3. Unified input: Handles mouse, touch, and pen input consistently
  4. Modern standard: Pointer Events are the recommended approach for pointing device input

Browser Support

Pointer Events are supported in all modern browsers (IE11+, Chrome 55+, Firefox 59+, Safari 13+).

Test Plan

  • All existing tests updated and passing
  • New tests for pointer capture behavior
  • Tests for touch and pen input via pointer events
  • TypeScript type checking passes
  • Linting and formatting pass

Closes #878

- Use unified Pointer Events API for all drag interactions (mouse, touch, pen)
- Implement pointer capture for better drag UX (prevents cursor blinking)
- Simplify useResizer hook by removing separate mouse/touch handlers
- Update DividerProps to use onPointerDown instead of onMouseDown/onTouchStart/onTouchEnd
- Update ResizeEvent source type from 'mouse' | 'touch' to 'pointer'
- Add PointerEvent polyfill for jsdom in test setup

Closes #878
- Filter pointer events by pointerId to handle multi-touch correctly
- Explicitly release pointer capture on drag end
- Add tests for multi-touch scenarios and pointer capture release
@tomkp tomkp merged commit c8452c8 into master Feb 18, 2026
1 check passed
@tomkp tomkp deleted the feature/pointer-events branch February 18, 2026 09:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace mousedown/touchstart/touchend with pointerdown/pointerup

1 participant