Pan event firing after pinch event without lifting fingers

paul-mediakitchen commented 2 years ago

Hello Firstly, thank you for creating this. I have tried various libraries including HammerJS and InteractJS and both failed me for multitouch with multiple users. Your library so far is looking incredibly promising. I do have one issue though that I wanted to run by you. I want to include pan, rotation and pinch in my app. What I am experiencing which I want to check is the expected behaviour is when I do a pinch, a pan is also taking place after the pinchend despite not lifting my fingers from the touch table. It is possible one or both fingers leave the element that is being pinched but I am definitely not lifting my fingers off the table. This behaviour seems wrong as it caused my element being pinch zoomed to move off to the right or left. Can you confirm if this is the expected behaviour.

I did try to eliminate this as follows but this appeared to have no effect:

          let pan = new Contact.Pan(modal);
          let pinch = new Contact.Pinch(modal);

          pan.block(pinch);
          pinch.block(pan);

Looking at my console with debugging for gestures I see the following:

[Gestures] firing event: pinchend App.vue:246 pinchend contact.module.js:972 [Gestures] running recognition for pan contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: false] minValue: 1, maxValue: 1, current value: 1 contact.module.js:884 [Gestures] checking duration[gesture.isActive: false] minValue: 0, maxValue: null, current value: 226.60000002384186 contact.module.js:884 [Gestures] checking currentSpeed[gesture.isActive: false] minValue: null, maxValue: null, current value: 3216.6920023552966 contact.module.js:884 [Gestures] checking averageSpeed[gesture.isActive: false] minValue: null, maxValue: null, current value: 0 contact.module.js:884 [Gestures] checking finalSpeed[gesture.isActive: false] minValue: null, maxValue: null, current value: null contact.module.js:884 [Gestures] checking distance[gesture.isActive: false] minValue: 10, maxValue: null, current value: 353.83612025908263 contact.module.js:1162 [Gestures] firing event: panstart App.vue:288 panstart contact.module.js:1097 [Gestures] detected and firing event pan contact.module.js:1132 [Gestures] detected and firing event panleft contact.module.js:972 [Gestures] running recognition for rotate contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: false] minValue: 2, maxValue: 2, current value: 1 contact.module.js:890 dismissing minrotate: required pointerCount: 2, current value: 1 contact.module.js:972 [Gestures] running recognition for pinch contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: false] minValue: 2, maxValue: 2, current value: 1 contact.module.js:890 dismissing minpinch: required pointerCount: 2, current value: 1 contact.module.js:972 [Gestures] running recognition for pan contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: true] minValue: 1, maxValue: 1, current value: 1 contact.module.js:884 [Gestures] checking duration[gesture.isActive: true] minValue: null, maxValue: null, current value: 226.60000002384186 contact.module.js:884 [Gestures] checking currentSpeed[gesture.isActive: true] minValue: null, maxValue: null, current value: 3216.6920023552966 contact.module.js:884 [Gestures] checking averageSpeed[gesture.isActive: true] minValue: null, maxValue: null, current value: 0 contact.module.js:884 [Gestures] checking finalSpeed[gesture.isActive: true] minValue: null, maxValue: null, current value: null contact.module.js:884 [Gestures] checking distance[gesture.isActive: true] minValue: null, maxValue: null, current value: 353.83612025908263 contact.module.js:1097 [Gestures] detected and firing event pan contact.module.js:1132 [Gestures] detected and firing event panleft contact.module.js:972 [Gestures] running recognition for rotate contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: false] minValue: 2, maxValue: 2, current value: 1 contact.module.js:890 dismissing minrotate: required pointerCount: 2, current value: 1 contact.module.js:972 [Gestures] running recognition for pinch contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: false] minValue: 2, maxValue: 2, current value: 1 contact.module.js:890 dismissing minpinch: required pointerCount: 2, current value: 1 contact.module.js:972 [Gestures] running recognition for pan contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: true] minValue: 1, maxValue: 1, current value: 1 contact.module.js:884 [Gestures] checking duration[gesture.isActive: true] minValue: null, maxValue: null, current value: 233.39999997615814 contact.module.js:884 [Gestures] checking currentSpeed[gesture.isActive: true] minValue: null, maxValue: null, current value: 3063.383870866316 contact.module.js:884 [Gestures] checking averageSpeed[gesture.isActive: true] minValue: null, maxValue: null, current value: 0 contact.module.js:884 [Gestures] checking finalSpeed[gesture.isActive: true] minValue: null, maxValue: null, current value: null contact.module.js:884 [Gestures] checking distance[gesture.isActive: true] minValue: null, maxValue: null, current value: 314.91586177898375 contact.module.js:1097 [Gestures] detected and firing event pan contact.module.js:1132 [Gestures] detected and firing event panleft contact.module.js:1357 [Pan] preventing touchmove default contact.module.js:972 [Gestures] running recognition for rotate contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: false] minValue: 2, maxValue: 2, current value: 1 contact.module.js:890 dismissing minrotate: required pointerCount: 2, current value: 1 contact.module.js:972 [Gestures] running recognition for pinch contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: false] minValue: 2, maxValue: 2, current value: 1 contact.module.js:890 dismissing minpinch: required pointerCount: 2, current value: 1 contact.module.js:972 [Gestures] running recognition for pan contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: true] minValue: 1, maxValue: 1, current value: 1 contact.module.js:884 [Gestures] checking duration[gesture.isActive: true] minValue: null, maxValue: null, current value: 248.30000001192093 contact.module.js:884 [Gestures] checking currentSpeed[gesture.isActive: true] minValue: null, maxValue: null, current value: 2725.1942100459755 contact.module.js:884 [Gestures] checking averageSpeed[gesture.isActive: true] minValue: null, maxValue: null, current value: 0 contact.module.js:884 [Gestures] checking finalSpeed[gesture.isActive: true] minValue: null, maxValue: null, current value: null contact.module.js:884 [Gestures] checking distance[gesture.isActive: true] minValue: null, maxValue: null, current value: 320.7553584899245 contact.module.js:1097 [Gestures] detected and firing event pan contact.module.js:1132 [Gestures] detected and firing event panleft contact.module.js:1357 [Pan] preventing touchmove default contact.module.js:972 [Gestures] running recognition for rotate contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: false] minValue: 2, maxValue: 2, current value: 1 contact.module.js:890 dismissing minrotate: required pointerCount: 2, current value: 1 contact.module.js:972 [Gestures] running recognition for pinch contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: false] minValue: 2, maxValue: 2, current value: 1 contact.module.js:890 dismissing minpinch: required pointerCount: 2, current value: 1 contact.module.js:972 [Gestures] running recognition for pan contact.module.js:884 [Gestures] checking pointerCount[gesture.isActive: true] minValue: 1, maxValue: 1, current value: 1 contact.module.js:884 [Gestures] checking duration[gesture.isActive: true] minValue: null, maxValue: null, current value: 255.39999997615814 contact.module.js:884 [Gestures] checking currentSpeed[gesture.isActive: true] minValue: null, maxValue: null, current value: 2455.679987135455 contact.module.js:884 [Gestures] checking averageSpeed[gesture.isActive: true] minValue: null, maxValue: null, current value: 0 contact.module.js:884 [Gestures] checking finalSpeed[gesture.isActive: true] minValue: null, maxValue: null, current value: null contact.module.js:884 [Gestures] checking distance[gesture.isActive: true] minValue: null, maxValue: null, current value: 252.1983346495373 contact.module.js:1097 [Gestures] detected and firing event pan contact.module.js:1132 [Gestures] detected and firing event panleft contact.module.js:1357 [Pan] preventing touchmove default contact.module.js:972 [Gestures] running recognition for rotate contact.module.js:922 [Gestures] dismissing rotate: requiresActivePointer required: true, actual value: false contact.module.js:972 [Gestures] running recognition for pinch contact.module.js:922 [Gestures] dismissing pinch: requiresActivePointer required: true, actual value: false contact.module.js:972 [Gestures] running recognition for pan contact.module.js:922 [Gestures] dismissing pan: requiresActivePointer required: true, actual value: false contact.module.js:1097 [Gestures] detected and firing event swipe contact.module.js:1132 [Gestures] detected and firing event swipeleft contact.module.js:1184 [Gestures] firing event: panend App.vue:310 panend

paul-mediakitchen commented 2 years ago

Ideally I would like it to work as follows App detects gesture and performs that gesture User needs to lift fingers off the touch screen before they can perform another gesture on this particular dom element As the app is multiuser - each user needs to be able to operate independently.

biodiv commented 2 years ago

Thanks for the input, and thanks for proving log data. For your scenario, I am thinking about adding two options:

simultaneousGestures(Boolean). Globally disables or enables the possibility for simultaneous gestures.
consecutiveGestures (Boolean). If disabled, the user has to lift the finger(s) before a gesture of a different type than the first detected gesture can be detected

In your case, are more than one user using the same physical device at the same time, or are different physical devices using the same website/app at the same time?

biodiv commented 2 years ago

these options are now implemented in v2.0

biodiv / contactjs

Pan event firing after pinch event without lifting fingers #14