Enable touch interactions for select/lasso/others

[dy]

Resolves#1790

We have to avoid creating dragCover for touch-only devices, because touchmove, unlike mousemove, requires the same element where touchstart happened.

Is there any particular reason we don't use document for catching mouse events? What makes dragCover different from document?

@etpinard@alexcjohnson

TODO:

• dragCover does not hide cursor for panning and makes it a text cursor, we have to disable
  selection in a way similar to this
• panning/zooming do not work for scatter2d, that is related to gl2d/camera
• no mode cursor for scatter2d gl2d cursor doesn't correspond with chosen modebar tool #1489
• panning is mixed up with page scrolling if body content is long
• double click should reset the selection

[alexcjohnson]

Interesting... I'll have to take a look at this and play with it, but to answer your question:

Is there any particular reason we don't use document for catching mouse events? What makes dragCover different from document?

We wanted users to be able to drag off the edge of the plot, but without interacting with other things they might be dragging over until they mouse up. So for example put two plotly plots next to each other, and pan one of them (or zoom by dragging one axis end) until the cursor is over the other - there should be no hover effects in the second one.

[dy]

@alexcjohnson I don't see any side-effects of panning/dragging over the second plot, although I caught one more bug.

[etpinard]

@dfcreative would you mind making a standalone page with these patches to help us test them?

[dy]

@etpinard sure https://dfcreative.github.io/plotly-contrib/select-touch.html

[etpinard]

https://dfcreative.github.io/plotly-contrib/select-touch.html

Having a bunch of fun playing with ⤴️ on my phone 🎉

@jackparmer wanna give it a shot too?

[etpinard]

@dfcreative Non-blocking for this PR of course, but I'm curious: how hard would it be to mock double-clicks on mobile?

[jackparmer]

very nice! 📱

[etpinard]

Well, this thing look great to me. 🎉

@alexcjohnson any objections to those patches in dragelement.js?

[alexcjohnson]

not blocking, but I'd prefer more parentheses in cases like this - it works fine, but takes me too much mental effort to work out the operator precedence while reading it.

[alexcjohnson]

Yeah, looks great! What would it take to test this?

[dy]

@alexcjohnson emulating touch interactions. Although we had some issues reproducing selection test-cases in CI, so now they are disabled.

[etpinard]

emulating touch interactions.

👍

Although we had some issues reproducing selection test-cases in CI, so now they are disabled.

Right, we have issue for the select tests for scattergl on CI. But, we should be able to test on SVG scatter here: https://github.com/plotly/plotly.js/blob/master/test/jasmine/tests/select_test.js

[dy]

@etpinard@alexcjohnson done.

Probably we may want to enable touch interactions for rangeslider?

[etpinard]

Probably we may want to enable touch interactions for rangeslider?
View changes

That's in -> #1098 would be nice to do at some point.

[dy]

@etpinard may I ask you to run npm run test-jasmine -- select --verbose --nowatch - seems that touches fail in linux

[alexcjohnson]

Looks great to me! FWIW I played with it at 473f72a on desktop, and I saw the issues that led to the creation of the coverSlip in the first place - like if you start a pan and drag off the edge of the plot, it stops dragging, cursor changes, etc. But at e215ffc, dragging off the edge on both mobile and desktop works as desired.

[etpinard]

@etpinard may I ask you to run npm run test-jasmine -- select --verbose --nowatch - seems that touches fail in linux

Yeah, it did fail, but

80db1af made it work on my laptop and on CI.

[etpinard]

✅ on CI, @dfcreative merge away 💃