Fixes Touch Functionality

[jivansh77]

Description

1. Fixed two-finger scroll direction
2. Added proper handling of horizontal scrolling based on the toggle
3. Long-press opens the context menus

Changes made:

1. Added moveContainer method to handle container scrolling separately from block movement
2. Modified touch event handlers to properly track two-finger scroll positions
3. Updated moveBlock and moveBlockRelative and to skip block movement during two-finger scroll

Testing:

1. Two-finger scrolling with horizontal scrolling enabled and disabled
2. Two-finger scrolling over blocks vs empty canvas areas
3. Proper return to normal block interaction after scrolling ends

Video:

IMG_4595.mp4

Related Issue:

Fixes #4096 - Two-finger scrolling touch functionality

[jivansh77]

@walterbender Should I also incorporate the zoom in/out using 2 fingers in this PR?

[jivansh77]

I am working on the long press to open context menu as well.

[walterbender]

This works well. But perhaps too well. If you long press on a block, you also get the canvas menu. We need to trigger the block menu instead. (This is related to but not the same as #3986)

[jivansh77]

@walterbender Yes I am facing a similar issue, long-pressing on a block is causing an overlap in advanced mode,

IMG_4613.2.mp4

[jivansh77]

On my MacBook as well when right clicking the helpfulwheel appears for some time and this happens in the master branch

Screen.Recording.2024-12-31.at.6.57.40.PM.mov

[jivansh77]

@walterbender now right clicking/long-pressing for some time does not cause an overlap and block menu appears after the helpfulwheel but I'm trying to make it so that it does not appear at all.

[walterbender]

what does closest(."block") do?

[jivansh77]

Before and after,

Screen.Recording.2025-01-01.at.8.42.03.PM.mov

[jivansh77]

@walterbender I added the closest() method to check if the target is a block so that I can prevent the helpful wheel from appearing but it is still an issue, I will remove that

[jivansh77]

The touch devices also dont have the overlap now

IMG_4619.mov

[walterbender]

On my system (Firefox) I can no longer get the block menu, only the canvas menu (even when I long touch on a block).

[walterbender]

But right click on a block still gives me both menus.

[jivansh77]

@walterbender I think u will have to hold the right click for some time for the block menu to open bcos that is triggering a long press, or just simply right click it.
I’m actually a little confused as to what is the expected behavior if u could just elaborate for both touch and mouse

[walterbender]

An even longer press does not bring up the block menu.

[jivansh77]

@walterbender The coordinate checking logic from #4219 seems to be working for now, I have used the logic for touch also

IMG_4623.mov

[jivansh77]

@walterbender I have used the function in blocks.js so long press opens context menus on touch devices while right click is for non-touch devices, pls review

[jivansh77]

@walterbender also initially while clicking on the menus on touch devices the blocks would also get triggered so I have added stoppropagation to prevent this from happening. It now works fine

[walterbender]

Maybe it is just my env. but when I use two-finger touch, it zooms as well as scrolls. We really need to disable the zooming.
Also, long press is still not working for me.

[jivansh77]

@walterbender If I am not wrong you can neither see the block menu nor the helpfulwheel right, only the canvas menu. And you have tested using Firefox?

[jivansh77]

@walterbender Pls test now if it is still zooming when you scroll bcos I am not able to reproduce this. According to me, zooming is only happening using ctrl + scroll, and pinching on the trackpad, but when using two fingers to scroll on my touch device, it is not zooming

[walterbender]

It is better than it was -- long press will bring up the helpful menu.
(zoom is fixed now).

The block help menu is not appearing, however.

[walterbender]

Also, it would be good to be able to drag a block or stack.

[jivansh77]

@walterbender Please check if the block menu is now appearing. Not sure if this fixes the issue, but hold the press for a little longer than you would with the helpfulwheel, block menu should appear

[walterbender]

Not working for me. Sometimes I get the canvas menu. Sometimes I get nothing. I would think the updated logic from #4224 would help.

[jivansh77]

Ok, I will look into it. To confirm you are using a firefox environment right?

[walterbender]

Yes. I have been testing with Firefox on Fedora.

[jivansh77]

@walterbender Pls test it now, most probably this should work

[walterbender]

Everything works except for events associated with blocks. I cannot drag a block or long-press on a block. The standard block piemenus do work (e.g., the pitch menu).

[jivansh77]

@walterbender Not sure if this causes it to work, but for me the dragging of the blocks and the block menu everything is working fine, not sure but I think ur env is causing a mix up between the touch and the mouse events

[walterbender]

I still cannot long press or drag individual blocks. Everything else seems to be working. Perhaps @pikurasa can test?

[pikurasa]

I still cannot long press or drag individual blocks. Everything else seems to be working. Perhaps @pikurasa can test?

Ok. I'm testing this branch on an X-1 laptop (with touchscreen). I'll let you know.

I won't easily be able to test on mobile, which works a bit differently in my experience.

[pikurasa]

I tested this branch on an X-1 with touch screen, running Trisquel (Debian) and Chromium.

The one good thing about this patch is that accidental zooming in and out when using two fingers seems to be fixed. However, other scrolling doesn't seem to be as performative as it is on master. Also, the main issue that blocks are not draggable on master seems not to be fixed on this PR.

While I was doing this, I tried master (via sugarlabs.github.io/music blocks ) on Android (Pixel 9, running Calyx), and it seems to work pretty well. Here's a video where I test various touch functionality, from scrolling the canvas (two finger), to moving blocks (one finger), to moving the mouse glyph (two finger), to clicking on menus, to testing Snake Maker 5000 (touch for an interactive program within MB). All these things worked well enough. My biggest concern would be discover ability: i.e. how would a user find some of that functionality?

[pikurasa]

Here's the video: https://youtu.be/J7-v7CIDO1k

[pikurasa]

Here's a video of a test of master (sugarlabs.github.io/musicblocks/) on an X-1 laptop with touchscreen for comparison: https://youtu.be/1CZPYjzl7ic

[jivansh77]

@walterbender @pikurasa After some logging, I have found out that on laptops with touch screens, a touch is triggering the mousedown event only, I want it to trigger the touchStart event because that is what handles all the touch functionality, this is not the case for mobile devices/tablets which seem to be working

[jivansh77]

I will still work on this to make the scrolling smoother and fix the touch events