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

[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

[jivansh77]

@walterbender @pikurasa 2 finger scrolling now works the way it used to but does not trigger the zoom and the direction is fixed on both touch devices as well as laptops

[jivansh77]

I am now working on the block functionality for laptops with touch screens, that should fix dragging blocks, long press

[walterbender]

Thx for the update.

[walterbender]

Everything except the block functions are working really well.

[jivansh77]

@walterbender I have used coordinate transformation for this fix, but still facing an issue, if u move the blocks entirely, then it is opening helpful wheel when long-pressing, still working on this

[jivansh77]

But so far, you can test the long-press,

IMG_4736.mp4

[walterbender]

I think you will need logic along the lines of this:

touching a block? yes? drag? no? long touch? no? run block
touching a block? yes? drag? no? long touch? yes? block context window
touching a block? yes? drag? yes? drag block

[github-actions]

This pull request has been open for more than 60 days without any activity. It will be closed in 3 days unless the stale label is removed or commented on.

[walterbender]

It would be really nice to finish this up.

[pikurasa]

@jivansh77 How is this going?

Is there anything new to test?

[jivansh77]

@pikurasa, my end sem exam prep is going on right now, so things have been a bit busy. Also, the touchscreen laptop I was using for testing isn’t working properly at the moment.
I’ll try to catch up as soon as I can and will let you know if anything new comes up to test

[pikurasa]

my end sem exam prep is going on right now, so things have been a bit busy. Also, the touchscreen laptop I was using for testing isn’t working properly at the moment.
I’ll try to catch up as soon as I can and will let you know if anything new comes up to test

Ok.

Do your best on exams!

[github-actions]

This pull request has been open for more than 60 days without any activity. It will be closed in 3 days unless the stale label is removed or commented on.

[github-actions]

Closed pull request due to inactivity for more than 63 days.