rspace-online/backlog/tasks/task-6 - Mobile-touch-support-for-canvas.md

id	title	status	assignee	created_date	updated_date	labels	dependencies	priority
task-6	Mobile touch support for canvas	Done		2026-01-02 16:07	2026-01-02 19:15	feature mobile ux		medium

Description

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.

Acceptance Criteria

• #1 Single touch drag works on shapes
• #2 Pinch-to-zoom works on canvas
• #3 Two-finger pan works
• #4 Tested on iOS Safari and Android Chrome

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)