Plotly.js: Add touch event support for lasso/select drag modes

[etpinard]

related to https://github.com/plotly/plotly.js/issues/480 and https://github.com/plotly/plotly.js/issues/1098 but of higher priority.

There a few complications that I can think of:

• Right now, _touch_ on mobile is sorta like a mousemove on desktop: it activates hover. So how would we distinguish between hover, click and select? Maybe under layout.dragmode: 'lasso' // or 'select' hover labels & hover/click event would be turned off on mobile and leaving only selections on _touch_.

It might be nice to review what other interactive graphing libraries out there are doing before going at it.

@dfcreative would you be interested in looking at this?

cc @jackparmer

[dy]

@etpinard sure, I will have a look, sounds fun

[dy]

@etpinard currently we don't have a toolbar on mobiles, because it shows on hover. Probably we should test if it is mobile to show toolbar always, right? Like set displayModeBar: true.

[dy]

WIP https://github.com/dfcreative/plotly.js/tree/select-touch

[dy]

@etpinard we have a problem here. Turns out touch interactions cannot touchstart on one element and then continue touchmove on another element, they require to be consistent in terms of source. But we create dragcover element here once we capture mouse down.

Possible solutions

• create dragcover in select/lasso mode for mobiles once the mode is active
• ignore dragcover and bind touch interactions directly to document
• get rid of dragcover and use touch-pinch module both for mouse/touches

[etpinard]

create dragcover in select/lasso mode for mobile

Creating a mobile-specific dragcover sounds like the way to go.

[dy]

@etpinard should be fixed in https://github.com/plotly/plotly.js/pull/1804

[jackparmer]

Another win for crossfilter 🎉 https://github.com/plotly/plotly.js/issues/1316