feat: mobile touch support with pinch-zoom (Closes #4) #20

Closed

pawtrick wants to merge 1 commit from feat/mobile-touch-events into main

pawtrick commented

2026-05-15 00:59:57 +00:00

Member

Closes #4

Changes

Touch Events (client/app.js)

Unified pointer event handlers for mouse + touch (no more return on touch)
Single finger tap: place pixel at coords
Single finger drag: pan the board (with drag threshold to distinguish from taps)
Two finger pinch: zoom in/out with scale limits (1x–40x)
Prevented context menu on long press
Prevented iOS Safari bounce scroll on canvas

Responsive CSS (client/style.css)

touch-action: none on .canvasFrame to prevent browser gesture conflicts
768px breakpoint (tablet): sidebar collapses to top, palette wraps 12-col, controls shrink
480px breakpoint (mobile): further compact header, hide volume slider, 8-col palette

Testing

Single tap places pixel (no drag threshold crossed)
Drag pans correctly (threshold prevents accidental placement)
Pinch zoom scales smoothly between 1x–40x
No browser scroll/zoom interference on touch devices
Layout adapts at tablet and mobile breakpoints

Closes #4 ## Changes ### Touch Events (client/app.js) - Unified pointer event handlers for mouse + touch (no more `return` on touch) - **Single finger tap**: place pixel at coords - **Single finger drag**: pan the board (with drag threshold to distinguish from taps) - **Two finger pinch**: zoom in/out with scale limits (1x–40x) - Prevented context menu on long press - Prevented iOS Safari bounce scroll on canvas ### Responsive CSS (client/style.css) - `touch-action: none` on `.canvasFrame` to prevent browser gesture conflicts - **768px breakpoint** (tablet): sidebar collapses to top, palette wraps 12-col, controls shrink - **480px breakpoint** (mobile): further compact header, hide volume slider, 8-col palette ## Testing - Single tap places pixel (no drag threshold crossed) - Drag pans correctly (threshold prevents accidental placement) - Pinch zoom scales smoothly between 1x–40x - No browser scroll/zoom interference on touch devices - Layout adapts at tablet and mobile breakpoints

pawtrick added 1 commit

2026-05-15 00:59:57 +00:00

feat: mobile touch support with pinch-zoom and responsive layout (Closes #4 )

CI / test (pull_request) Successful in 8s

Details

993cfe12c9

- Replace touch-blocking pointer events with unified mouse+touch handlers
- Single finger: tap to place, drag to pan
- Two fingers: pinch to zoom in/out
- Add touch-action: none on canvas frame to prevent browser gestures
- Add responsive CSS: sidebar collapses, palette wraps, controls adapt
- Breakpoints: 768px (tablet), 480px (mobile)
- Prevent context menu on long press
- Prevent iOS Safari bounce scroll on canvas

Closes #4

pawtrick closed this pull request

2026-05-15 01:04:17 +00:00