Files
mtg-online-drafter/docs/development/devlog/2025-12-18-041500_touch_resize.md

1.2 KiB

Work Plan - Touch Resize Implementation

Request

The user reported that resizing handles were not working on touchscreen devices.

Changes

  • DraftView.tsx:

    • Replaced handleMouseDown, onMouseMove, onMouseUp with unified handleResizeStart, onResizeMove, onResizeEnd.
    • Added logic to detect touches in event object and extract clientX/clientY from the first touch point.
    • Attached onTouchStart to sidebar and pool resize handles.
    • Added passive: false to touch event listeners (via useEffect logic or direct attach) to call e.preventDefault(), preventing page scrolling while dragging. Note: Implemented in the handler function with if (e.cancelable) e.preventDefault().
    • Added touch-none utility class to resize handles to structurally prevent browser touch actions.
  • DeckBuilderView.tsx:

    • Implemented the exact same unified handler logic as DraftView.
    • Updated both Sidebar (vertical) and Pool (horizontal) resize handles with onTouchStart.

Verification

  • Touch: Dragging handles on a touchscreen (mobile/tablet) should now resize the panels smoothly.
  • Mouse: Mouse interaction remains unchanged and performant (using requestAnimationFrame).