Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Switch from legacy mouse/touch events to newer pointer events #5505

Closed
bhousel opened this issue Nov 20, 2018 · 2 comments
Closed

Switch from legacy mouse/touch events to newer pointer events #5505

bhousel opened this issue Nov 20, 2018 · 2 comments
Assignees
@quincylvania
Labels
touch-stylus An issue with touchscreen or pen input usability An issue with ease-of-use or design
Milestone
2.18.0

Comments

@bhousel
Copy link
Member

bhousel commented Nov 20, 2018 •
edited
Loading

This is a followup from #5492

iD's support for touchscreens is not great. We have a lot of legacy code that is really built for mouse interaction, while everywhere people using touch devices.

Supporting touch devices has been tricky because of browser incompatibilities. iD builds on d3 (particularly d3-zoom ) for map interaction, and it works ok, but we need to add a lot of workarounds.

Pointer Events are the more modern and now better supported way of handling user input across different kinds of devices.

More info:
https://medium.com/@wesharehoodies/pointer-events-with-react-the-why-how-what-617a5b51dbb2

There's no rush to switch, but some things to consider:

  • iD currently supports 2 finger panning and pinch-zoom gestures in Chrome, Firefox, Safari (via wheel events)
  • iD does not currently support these gestures in Edge or IE11 (Edge didn't implement the wheel event workaround)
  • caniuse shows Pointer Events are supported in all those browsers, except Safari
    • Safari tech preview supports them as experimental feature, so they are coming eventually
    • Safari supports something called Gesture Events instead, and we handle them already.

Originally posted by @bhousel in #5492 (comment)
@bhousel bhousel added usability An issue with ease-of-use or design touch-stylus An issue with touchscreen or pen input labels Nov 20, 2018
This was referenced Dec 11, 2018
Open
Closed
@quincylvania quincylvania mentioned this issue Jul 11, 2019
Closed
@quincylvania quincylvania mentioned this issue Feb 28, 2020
Closed
@quincylvania quincylvania added the iD v3 Ideas and issues for the next major iD version label Feb 28, 2020
@quincylvania
Copy link
Collaborator

All major browsers now support pointer events, covering 86% of global users according to caniuse. I imagine it's an even higher percentage of iD users. I think it's time to try making pointer events standard as we work towards better mobile support in v3. We can fallback to the old events for unsupporting browsers.

quincylvania added a commit that referenced this issue Feb 28, 2020
@quincylvania
Rename d3_zoom object to disambiguate from zoom level variables (re: #…
3ae009e 
…5505)
quincylvania added a commit that referenced this issue Mar 4, 2020
@quincylvania
Use pointer events for hovering and selecting data on supported platf…
c41e0b9 
…orms (re: #5505)

Fix issue where Apple Pencil stylus could not select map data (close #7396)
Fix issue where features could not be selected in a single tap on iPad (close #7380)
This was referenced Mar 4, 2020
Closed
Closed
quincylvania added a commit that referenced this issue Mar 5, 2020
@quincylvania
Use pointer events for map zooming and panning where supported (close #…
1147438 
…6598, re: #5505)
@quincylvania quincylvania added this to the Next Release milestone Mar 5, 2020
@quincylvania quincylvania self-assigned this Mar 5, 2020
quincylvania added a commit that referenced this issue Mar 5, 2020
@quincylvania
Use pointer events for node dragging and drawing (re: #5505)
83a51a4 
Enable dragging nodes with touches and styluses (close #7415)
zlavergne pushed a commit to KaartGroup/iD that referenced this issue Mar 10, 2020
@quincylvania @zlavergne
Rename d3_zoom object to disambiguate from zoom level variables (re: o…
4c55049 
…penstreetmap#5505)
zlavergne pushed a commit to KaartGroup/iD that referenced this issue Mar 10, 2020
@quincylvania @zlavergne
Use pointer events for hovering and selecting data on supported platf…
b7e6bb2 
…orms (re: openstreetmap#5505)

Fix issue where Apple Pencil stylus could not select map data (close openstreetmap#7396)
Fix issue where features could not be selected in a single tap on iPad (close openstreetmap#7380)
zlavergne pushed a commit to KaartGroup/iD that referenced this issue Mar 10, 2020
@quincylvania @zlavergne
Use pointer events for map zooming and panning where supported (close o…
a3b0dcd 
…penstreetmap#6598, re: openstreetmap#5505)
zlavergne pushed a commit to KaartGroup/iD that referenced this issue Mar 10, 2020
@quincylvania @zlavergne
Use pointer events for node dragging and drawing (re: openstreetmap#5505
a1edf3a 
)

Enable dragging nodes with touches and styluses (close openstreetmap#7415)
quincylvania added a commit that referenced this issue Mar 13, 2020
@quincylvania
Replace mouse and touch events with pointer events in popover.js (re: #…
de1bfe6 
…5505)
quincylvania added a commit that referenced this issue Mar 13, 2020
@quincylvania
Use pointer events instead of mouse events for lasso selection (re: #…
dd9c30b 
…5505)
quincylvania added a commit that referenced this issue Mar 25, 2020
@quincylvania
Fix issue where the edit menu would not disappear sometimes (close #7143
5c2a96d 
)

Properly disable dragging the map under the edit menu for pointer events (re: #5505)
@quincylvania quincylvania mentioned this issue Apr 2, 2020
Closed
@quincylvania quincylvania modified the milestones: 3.0.0, 2.18.0 May 5, 2020
@quincylvania quincylvania removed the iD v3 Ideas and issues for the next major iD version label May 5, 2020
quincylvania added a commit that referenced this issue May 8, 2020
@quincylvania
Use pointer events for resizing the photoviewer on supported devices …
a781847 
…(re: #5505)
quincylvania added a commit that referenced this issue May 8, 2020
@quincylvania
Use pointer events in welcome walkthrough chapter on supported device…
a16a95e 
…s (re: #5505)
@quincylvania quincylvania mentioned this issue May 8, 2020
Closed
quincylvania added a commit that referenced this issue May 8, 2020
@quincylvania
Use pointer events for the background offset on supported devices (re: …
e838d06 
…#5505)
quincylvania added a commit that referenced this issue May 8, 2020
@quincylvania
Use pointer events in raw tag editor when supported (re: #5505)
edc3284
quincylvania added a commit that referenced this issue May 8, 2020
@quincylvania
Continue zoom/pan of map when a down pointer moves off the map (re: #…
5a8f573 
…5505)

Fix possibly #6745
@quincylvania quincylvania mentioned this issue May 8, 2020
Closed
quincylvania added a commit that referenced this issue May 8, 2020
@quincylvania
Update more mouse events to use pointer events if available (re: #5505)
95dc16b
@quincylvania
Copy link
Collaborator

We've made a lot of progress with this switch! Here are a few things you can now do on touch devices that were impossible or buggy before:

  • Draw ways
  • Drag nodes
  • Double tap to add nodes to ways
  • Select features with one tap
  • Pan and pinch the map on Edge
  • Use styluses
  • Drag to change the imagery offset
  • Resize the photo viewer

While there are still more opportunities to improve touch interactions, I'm considering the meat of this issue complete. Further work can be split into more specific issues.

@quincylvania quincylvania mentioned this issue May 19, 2020
Closed
quincylvania added a commit that referenced this issue May 21, 2020
@quincylvania
Enable sidebar resizing with touch input using pointer events (re: #5505
5cb23ac 
)
@quincylvania quincylvania mentioned this issue May 29, 2020
Open
@quincylvania quincylvania mentioned this issue Jul 20, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@quincylvania quincylvania

Labels
touch-stylus An issue with touchscreen or pen input usability An issue with ease-of-use or design
Projects
None yet
Milestone
2.18.0
Development

No branches or pull requests
2 participants
@bhousel @quincylvania