An issue on touch events

[March]

Hi.

I'm now working on an android app using Cesium.
I noticed that while swiping the map, if I tap the "overview button" (the square button at the bottom) and then go back to my app, the map doesn't move smooth anymore.

So I tested it in Chrome and Opera mini and Chrome didn't cause the same problem but Opera mini did. Even if I reload the page, the issue continued.

I also tested to detect the view points using the ScreenSpaceEventHandler and javascript's TouchEvent. After causing the issue, ScreenSpaceEventHandler stopped to log the points continuously. But the TouchEvent seems to have no problem.

Is there anyway to prevent or recover this?

This is my code for testing.

var viewer = new Cesium.Viewer('cesiumContainer');

var logMovement = movement => console.log("cesium x: " + movement.endPosition.x + ", y: " + movement.endPosition.y);
var logTouchEvent = event => console.log("js touch x: " + event.changedTouches[0].pageX + ", y: " + event.changedTouches[0].pageY);
document.onmousemove = event => console.log("js mouse x: " + event.clientX + ", y: " + event.clientY);

viewer.screenSpaceEventHandler.setInputAction(logMovement, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
document.getElementById('cesiumContainer').addEventListener("touchmove", logTouchEvent, false);

I tested in Android 8 & 9 with the latest browsers.

Thanks.

[Omar Shehata]

I don't think I've encountered this issue before. Do you know if this happens just in your Android app setup, or does it happen when viewing Sandcastle (https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/) on your Android phone through a browser? Does it happen on desktop browsers for you?

How are you packaging the Android app with Cesium? Are you using Cordova or something else?

[March]

Omar. Thanks to be interested.

This issue happens not only in my app but also in Opera mini, browsing Sandcastle. As far as I know it only happens on Androids excluding Chrome. My Mac and iPad didn't occurred this issue.
I believe this will happen easily. If you have an Android device and downloaded Opera mini and opened Sandcastle, while swiping the map and while your finger is still following the display, with your other hand tap the overview button and go back to Opera mini and you will get the awkward map. And if you're running my test code, I think the log will let you know what's happening.

My App for now, I'm not putting the Cesium.js file inside my app. Nor using other libraries and frameworks such as Cordova or anything else.
Just like it is written in the Tutorials. (https://cesium.com/docs/tutorials/getting-started/#your-first-app)
The html file is on local storage and loading that using WebView.

I believe that Opera mini is using WebView also. So I think this issue is something between WebView and Cesium.
But as Chrome is preventing this issue, I hope there is something I can do.

Thanks

[Omar Shehata]

So just to confirm, your steps are:

1. Open this URL in Android, in Opera Mini
2. Click on the full screen button in the bottom right corner of the app
3. Use your finger to move/drag the map

And the result is that the touch event stops firing? If so, I am unable to recreate this. I'm testing on a Google Pixel 3, Android version 9, Opera Mini version 43. 

Let me know if you have a different setup or if I misunderstood your steps.

[March]

OK. I think my poor english has mislead you.

The button I mentioned is one of the three navigation buttons Androids have.
'back' button, 'home' button and 'overview' button (or maybe you call it 'recents' button).
In this case I am using 'overview' button but the 'home' button will also do the equivalent.
To cause this issue is to intercept the map drag event with these buttons.

Steps
1. Put your device on the table and keep both your hands free.
2. Open Sandcastle with 'Opera mini' and show the globe enough large, to be able to drag from the left to the right of the view.
3. Start dragging from the left toward the right.
4. When your finger is to reach about the center, push the 'overview' button with your other hand.
5. After the screen switched to the 'overview' then end dragging. And go back to 'Opera mini'.
6. Try to drag again and it's it.
If pasting my code or opening the url Omar has prepared, the log from cesium should look odd.


In Pixel 3 these buttons seems to be replaced to gestures. Is that right? So it may not be able to reproduce this issue in the same way.

On Friday, June 21, 2019 at 5:33:29 AM UTC+9, Omar Shehata wrote:
> So just to confirm, your steps are:
>
>

> Open this URL in Android, in Opera MiniClick on the full screen button in the bottom right corner of the appUse your finger to move/drag the map

[Omar Shehata]

I see what you're saying. Thanks for the additional explanation. Those buttons are indeed gestures on the Pixel 3, so that may be why I'm unable to recreate it, but it sounds like the issue is that the event listener for the start of the drag is fired, but the event listener for ending the drag is never fired. Kind of like what would happen if you click inside a canvas, but then release the mouse outside the canvas.

I'm surprised that refreshing the page doesn't fix it. Does closing the browser and opening it again fix it? I think the next step here to debugging is to see if this happens with your own event listener, since this may be a browser/JavaScript bug, not specifically a CesiumJS bug. For reference, this is how Cesium sets up the camera mouse event listeners:

https://github.com/AnalyticalGraphicsInc/cesium/blob/52f7b4ce2fb69d14603c9b69be6304acd5efae2d/Source/Scene/CameraEventAggregator.js#L279-L285

And where the actual event listener is created:

https://github.com/AnalyticalGraphicsInc/cesium/blob/52f7b4ce2fb69d14603c9b69be6304acd5efae2d/Source/Core/ScreenSpaceEventHandler.js#L69

[March]

Hi.

As you suggested I researched around the event setup. And I found for default the events are registered as 'PointerEvent'.
So I made a simple debugging code like this.

document.onpointerdown = (e) => console.log("pointerdown");
document.onpointermove = (e) => console.log("pointermove");
document.onpointerup = (e) => console.log("pointerup");
document.onpointercancel = (e) => console.log("pointercancel");

If I cause this issue, while the 'pointermove' events are invoking, the 'pointercancel' event will invoke, which seems OK.
But after that 'pointercancel' invokes every time I try to drag the map. The cancel event was working like a brake.
I think the 'pointermove' event has got a problem, so it invokes the 'pointercancel' event.

After causing the issue the log looks like this.
pointerdown
pointermove
pointermove
pointercancel

So my solution for now is, force use the 'TouchEvent' instead.
Cesium.FeatureDetection.supportsPointerEvents = ()=>false;

I don't know why but the 'TouchEvent' doesn't cause the same issue.
If somebody knows a better solution I'd like to know.



Answers to your questions.
To recover this issue is to open it in a new tab or quit the browser once.
It didn't recover by reloading or reopening the browser.


Thanks!!