biodiv / contactjs

Pointer gestures for your webapp
MIT License
77 stars 6 forks source link

pointerupEvent should be pointercancelEvent? #3

Closed digi-chris closed 2 years ago

digi-chris commented 2 years ago

I'm trying to debug an issue I'm having with contact.js when using it via Chromium on a Raspberry Pi with touchscreen. It seems like a pointer-down event cancels early and fires onPointerCancel when you start panning, which then stops any pan/swipe event from working.

I'm not really sure if this is something specific to Chromium or the touchscreen drivers, but while debugging this I was noticing an error firing in the console relating to pointerupEvent being undefined.

This is the code causing the issue:

    onPointerCancel (pointercancelEvent) {

        this.onPointerUp(pointerupEvent);

        if (this.DEBUG == true){
            console.log("[Contact] pointercancel detected");
        }

    }

This line:

https://github.com/biodiv/contactjs/blob/17d6df979a2642a6ce132c8e16727005fe805db4/src/contact.js#L137

Looks like 'pointerupEvent' should be 'pointercancelEvent'?

biodiv commented 2 years ago

Does this problem also occur if you pan very slowly?

If not, the problem is most likely the pointerLeave event. If you pan fast, the pointer/finger might leave the element, although it always had contact with the screen. The pointer/finger movement is faster than the screen refreshes or the animation is played. In this case pointerLeave is triggered which ends the pan gesture. Can you confirm this behaviour?

The solution then is to not make pointerLeave end the gesture.

pointerLeave (pointer is moved out of the element) is different from pointerUp (pointer is removed from the surface).

biodiv commented 2 years ago

Try to comment out line line 167 of contact.js

onPointerOut (pointeroutEvent){

    //this.onPointerUp(pointeroutEvent);  <---- comment out this line

    if (this.DEBUG == true){
    console.log("[Contact] pointerout detected");
    }
}
biodiv commented 2 years ago

I think I found a solution to the problem using setPointerCapture. Please try the current version (contactjs v1.0.7). w3c element.setPointerCapture spec