---
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)