1.2 KiB
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,onMouseUpwith unifiedhandleResizeStart,onResizeMove,onResizeEnd. - Added logic to detect
touchesin event object and extractclientX/clientYfrom the first touch point. - Attached
onTouchStartto sidebar and pool resize handles. - Added
passive: falseto touch event listeners (viauseEffectlogic or direct attach) to calle.preventDefault(), preventing page scrolling while dragging. Note: Implemented in the handler function withif (e.cancelable) e.preventDefault(). - Added
touch-noneutility class to resize handles to structurally prevent browser touch actions.
- Replaced
-
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).