mapbox / mapbox/mapbox-gl-draw

Drawing a LineString prematurely completes final double tap on touch devices

Open
#1,212 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug
Dominant language
JavaScript
Stars
1.1k
Forks
612
Avg merge
8d 9h
Merged PRs (30d)
5

Description

mapbox-gl-js version: 3.1.2
mapbox-gl-draw version: 1.4.3

Steps to Trigger Behavior
  1. Begin drawing a LineString.
  2. Note that completing the line with a mouse click twice on the same vertex is a precisely triggered operation and works great.
  3. Note that completing the line with a touch device often happens prematurely. This happens because multiple touchStart messages often happen within the 25 pixel touchBuffer quite accidentally in the course of attempting to make a single tap. Reducing the size of touchBuffer slightly improves the situation, but it is still a significant problem on an iPhone 13, and presumably most touch devices.
Expected Behavior

Drawing lines should work on touch devices.

Actual Behavior

Drawing lines terminates prematurely in ~25% of attempts.

Diagnosis

In draw_line_string.js line drawing completion is handled identically for both mouse click and touch.

DrawLineString.onTap = DrawLineString.onClick = function(state, e) {
  if (CommonSelectors.isVertex(e)) return this.clickOnVertex(state, e);
  this.clickAnywhere(state, e);
};

I believe that to solve this problem, a debounce needs to be applied to only the onTap path, so that additional taps within (say) 300mS of the first tap are ignored.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in draw_line_string.js at the shared DrawLineString.onTap and onClick handler, then inspect how touch events reach completion. Reproduce the premature ending on a touch device and verify that repeated taps within the proposed interval are ignored without changing the mouse double-click behavior. Done means drawing a LineString no longer terminates prematurely during an ordinary touch tap.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.