62 lines
1.8 KiB
Markdown
62 lines
1.8 KiB
Markdown
---
|
|
id: task-6
|
|
title: Mobile touch support for canvas
|
|
status: Done
|
|
assignee: []
|
|
created_date: '2026-01-02 16:07'
|
|
updated_date: '2026-01-02 19:15'
|
|
labels:
|
|
- feature
|
|
- mobile
|
|
- ux
|
|
dependencies: []
|
|
priority: medium
|
|
---
|
|
|
|
## Description
|
|
|
|
<!-- SECTION:DESCRIPTION:BEGIN -->
|
|
Enable touch interactions on mobile devices:
|
|
- Touch drag for moving shapes
|
|
- Pinch-to-zoom for canvas
|
|
- Two-finger pan for canvas navigation
|
|
- Touch-friendly resize handles (larger hit areas)
|
|
- Long-press for context menu
|
|
|
|
FolkShape already has touchmove handler, needs enhancement for multi-touch gestures.
|
|
<!-- SECTION:DESCRIPTION:END -->
|
|
|
|
## Acceptance Criteria
|
|
<!-- AC:BEGIN -->
|
|
- [x] #1 Single touch drag works on shapes
|
|
- [x] #2 Pinch-to-zoom works on canvas
|
|
- [x] #3 Two-finger pan works
|
|
- [ ] #4 Tested on iOS Safari and Android Chrome
|
|
<!-- AC:END -->
|
|
|
|
## Notes
|
|
|
|
### Implementation Complete
|
|
|
|
**FolkShape touch handling** (`lib/folk-shape.ts`):
|
|
- Added `#lastTouchPos` and `#isTouchDragging` state tracking
|
|
- Added touchstart, touchmove, touchend event listeners
|
|
- Single-touch drag calculates delta from last position
|
|
- Respects zoom level via `window.visualViewport.scale`
|
|
- Works on header elements and `[data-drag]` containers
|
|
|
|
**Canvas gestures** (`website/canvas.html`):
|
|
- Pinch-to-zoom: Calculates distance change between two touch points
|
|
- Two-finger pan: Tracks center point movement
|
|
- Mouse wheel zoom also added for desktop parity
|
|
- `updateCanvasTransform()` function centralizes transform updates
|
|
- `touch-action: none` CSS prevents browser default gestures
|
|
|
|
**Touch-friendly styles**:
|
|
- Larger resize handles (24px) on touch devices via `@media (pointer: coarse)`
|
|
- Larger rotation handles (32px) for easier grabbing
|
|
|
|
**Remaining**:
|
|
- Device testing on iOS Safari and Android Chrome recommended
|
|
- Long-press context menu not implemented (not critical for MVP)
|