[BUG] Cant drag presets on laptop touchscreen

[Julusian]

Is this a bug in companion itself or a module?

• I believe this to be a bug in companion

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

It is not possible to drag presets onto buttons with a touchscreen on a desktop os (windows, ubuntu etc)

Environment (please complete the following information)

- OS: Ubuntu 22.04/Windows 11
- Browser: Chrome 104
- Companion Version: 2.3.0

Additional context

No response

[Julusian]

Looking into this, the library we use (react-dnd) has a html5 backend and a touch backend. You can only have one of them enabled at once.

Maybe we can use the touch backend as it has 'buggy' support for mouse events, but I am concerned it will cause issues with the much more common use case of using a mouse.

There is a community package for multi-backend use, but that is looking rather unmaintained and will force us to remain on older versions of react-dnd.

Or we could fork something and have our own combined backend, but that sounds like a lot of work to test thoroughly enough to have confidence in.

Maybe someone else has some ideas on how we can approach this?

[MeestorX]

Do you know what sort of bugs the touch backend causes for mouse events? If not, maybe you could you do a fork with the touch backend installed and I'll (and hopefully others) could test it to see whether or not there's any mouse issues...

[Julusian]

All the docs say is:

The vagueness of it is what puts me off trying it. Is it buggy depending on where/how it is used in the page? Or perhaps some browsers?

[MeestorX]

Understood. That is very vague, which also might lead me to believe that there's not so much of an issue (since nobody has commented on it). What do you think about trying a fork for testing? Or is it a simple change in my code to change modes?

[MeestorX]

Also, any idea why drag/drop works fine on iOS devices?

[Julusian]

not sure. The docs also say

The HTML5 backend does not support the touch events. So it will not work on tablet and mobile devices.

so I can only guess that ios is emulating mouse events for some reason.

It looks like we need to switch the backend for android, as it isnt working with touch there. But switching to it for just android will be pretty safe

What do you think about trying a fork for testing?

I don't see any harm in trying that.
In the next beta build, you will find this at the bottom of the Settings tab.

The choice is stored locally by your browser.

In a very quick test it appears to work fine for me, other than the preview of what is being dragged is not shown.
I really dont know how much it needs to be tested before it can be considered safe though

[MeestorX]

I'd like to test this once you have time to merge it with input-toggle

[dnmeid]

@Julusian At another project I did, I had the same problem and after evaluating several packages I ended up using https://www.npmjs.com/package/react-drag-drop-container. It was quite nice to work with, the concept of the container is very easy. Also I could easily implement highlighting all valid drop targets when dragging.

[Julusian]

https://www.npmjs.com/package/@hello-pangea/dnd looks like another decent candidate