Skip to content

Fix two-finger pan while drawing & Added panel resizing surface on mobile devices.#1019

Merged
AndrewSepic merged 4 commits into
mainfrom
as/fix-multi-finger-touches
Jun 26, 2026
Merged

Fix two-finger pan while drawing & Added panel resizing surface on mobile devices.#1019
AndrewSepic merged 4 commits into
mainfrom
as/fix-multi-finger-touches

Conversation

@AndrewSepic

@AndrewSepic AndrewSepic commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

Fix Two-finger pan while drawing (Reported in #974)

  • On touch devices (iPad, iPhone), two-finger pan/zoom gestures during line or polygon drawing were being swallowed by the drawing handlers, preventing Mapbox GL from navigating the map
  • Root cause: touchstart unconditionally called e.preventDefault() and touchend unconditionally called handlers.click(), regardless of how many fingers were involved
  • Fix adds an isMultiTouch ref in both useLineHandlers and usePolygonHandlers — when two or more fingers are detected, touch events are passed through to Mapbox GL rather than treated as drawing actions

How it works

  • touchstart: if touches.length > 1, set isMultiTouch = true and return without calling preventDefault() — the map handles the gesture natively
  • touchmove: bail out if multi-touch, so no phantom point updates during a pan
  • touchend: skip click if isMultiTouch is set; reset the flag only once all fingers have lifted (handles the case where two fingers lift one at a time)

Closes #974

Fix Mobile Panel Resizability

  • On a mobile device the horizontal panel at app bottom did not make a draggable surface visbille or available to click. Forcing the mobile user to not be able to resize the panel, and providing much reduced map surface.
  • This adds CSS styles to ensure that the handle to resizing the panel is visible and can be used on Mobile devices.
Screenshot 2026-06-25 at 2 57 03 PM

Closes #986

Remove LegendContainer & Small Design artifact.

  • There is a very small DOM element visible below the Legend, which was seen and after review this can be removed. I believe our refactor of the Placemark.io legend made this container un-neccesary.
Screenshot 2026-06-25 at 11 40 12 AM

Test plan

  • On a touch device, enter line drawing mode, place a point, then use two fingers to pan/zoom — map should navigate without adding new points
  • Confirm single-finger tap still adds points correctly
  • Repeat for polygon drawing mode
  • Confirm Apple Pencil drawing still works (existing force check in polygon handler is preserved)
  • Confirm a that a draggable handle is visible and can be used on small devices to change the size of the bottom panel.

🤖 Generated with Claude Code

@AndrewSepic AndrewSepic requested a review from a team as a code owner June 25, 2026 15:25
@AndrewSepic AndrewSepic changed the title Fix two-finger pan blocked during line/polygon drawing on touch devices Fix two-finger pan while drawing & Added panel resizing surface on mobile devices. Jun 25, 2026
AndrewSepic and others added 4 commits June 25, 2026 15:11
When drawing a line or polygon, touch events were intercepted
unconditionally — including two-finger pan/zoom gestures — preventing
Mapbox GL from handling native map navigation while a shape was in
progress.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
@AndrewSepic AndrewSepic force-pushed the as/fix-multi-finger-touches branch from e3cb26c to dce2592 Compare June 25, 2026 19:16

@chriswhong chriswhong left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, actually tested this with an iPad and Apple pencil and an iPhone, everything works as expected.

@AndrewSepic AndrewSepic merged commit 584b34f into main Jun 26, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Panels are not resizeable/selectable on Mobile Devices Tablet functionality

2 participants