Mobile layout + touch gestures for the photo-geolocation app#41
Open
itamarwe wants to merge 2 commits into
Open
Mobile layout + touch gestures for the photo-geolocation app#41itamarwe wants to merge 2 commits into
itamarwe wants to merge 2 commits into
Conversation
On narrow screens (<=768px) the desktop three-pane layout collapses to a single pane at a time, chosen by a segmented tab bar: Photo, Map, and Anchors (the sidebar's anchor + pose panels). All panes stay mounted so the map render loop and each view's pan/zoom state survive switching. Adds touch-action: none on the photo frame and map canvas so dragging and tap-to-place work on touchscreens. Desktop layout is unchanged.
Both views now track multiple active pointers. Two fingers pinch to zoom around the gesture midpoint (matching the existing ctrl+wheel anchor-point math) and pan with the midpoint's drift; a single finger pans. When a pinch winds down to one finger the gesture hands back to panning without a jump, and the final lift of a multi-touch gesture is no longer mistaken for a tap that would drop an anchor. Mouse pan/click and trackpad zoom are unchanged.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The GeoPhoto tool was desktop-only (a three-pane flex row). This makes it usable on phones.
Mobile layout
On narrow screens (≤768px) the three-pane layout collapses to one pane at a time, chosen by a segmented tab bar:
The third tab is needed because the 320px sidebar can't be always-on at phone width, and the anchor workflow (add → place photo point → place map point) needs those controls reachable.
All three panes stay mounted at all times — only
data-mobile-viewtoggles which is visible — so the map'srequestAnimationFramerender loop and each view's pan/zoom state survive switching tabs. Desktop is untouched (the tab bar isdisplay:noneabove 768px).Touch gestures
Both the photo view and the map now track multiple active pointers:
touch-action: noneon the photo frame and map canvas keeps these from being eaten by browser scroll/zoom. Mouse pan/click and trackpad zoom are unchanged.Verification
npm run buildpassesInput.dispatchTouchEvent: on both views, pinch-out zooms in, pinch-in zooms out, one-finger drag pans, and a single tap after a pinch still places an anchorhttps://claude.ai/code/session_01Ks6E4VWoN85aX5yQn2Pj5b
Generated by Claude Code