Long press to select objects on mobile / tablet / touch devices & simple press to pan

[kirill-konshin]

I've put together a demo https://jsfiddle.net/dfuse/xhy5j9dp/ with desired functionality:

1. Press & drag = pan
2. Longpress & drag = selection

Demo works fine, but I am wondering if there's a more elegant solution?

In essence, the demo works like this:

1. I set up simple listeners for panning as in http://fabricjs.com/fabric-intro-part-5 and a timeout
2. If timeout hits, simple listeners are disposed
3. Create a rect, that represents selection (side question, is there a way to draw helper objects not on the main canvas?)
4. Dynamically adjust rect on mouse events
5. Once mouse is released I go through all objects and find if they intersect with rect http://fabricjs.com/intersection
6. Create new ActiveSelection with filtered objects, dispose rect

Additionally I've created a small visual clue for longpress. For sake of demo I'm not using true mobile handlers, just regular mouse handlers.

Screen.Recording.2022-01-11.at.4.04.02.PM.mp4

[asturur]

let me see if there is a nice solution.
your fiddle work and that is great already, maybe we can use internals a bit better to see if we can write less code.

[AlbertBadias]

Hi! any progressions on this?
I've try it on tablet but the panning mode makes the elements dissapear, and the long press it's a little bit tricky.

On pc works amazing btw :)

[ShaMan123]

You should use groupSelector logic I believe