TweakPane Sliders do not respond to touch drag events

[maheshkurmi]

Tweakpane ui works fine on touch devices expect that it doesn't respond to touch drag event. In case of slider and color control ui responds to touch down and touch up event but does nothing on drag (with mouse it works fine).
Is it intentional?
FYI dat gui is working good with touch devices.
I am testing on microsoft surface pro 6

[cocopon]

It's not intentional behavior. Works fine on iOS and Android, but I don't have that device so I cannot test with it.

• What is the browser and its version?
• Could you share any helpful information... e.g. screen recording, event log, etc.?

[maheshkurmi]

Yes, I have tested on android and touch events on tweakpane are working like charm !
But on my surface pro, I can't detect touch drag event in tweakpane gui (although it works in other part of app, like pinchzoom and pan events by hammer.js). This is app I am talking about

https://maheshkurmi.github.io/experiments/micrometer

On mobile devices both hammer.js and tweakpane.js work fine simultaneously, so I do not think that there is some conflict due to hammer.js.

[maheshkurmi]

I am on windows 10 Home version 2004
Tested on Edge and chrome (version 90) same result.
BTW how can I get event logs for tweakpane? console doesn't show any output.

[cocopon]

how can I get event logs for tweakpane?

Does the slider in Events section work properly on your device?
https://cocopon.github.io/tweakpane/misc.html#events

[maheshkurmi]

No, the event is fired only on touchdown not on touchmove/touchdrag

[maheshkurmi]

touchdrag event is not firing for tweakpane on other touch windows devices also. I have checked on lenovo touch device also

[cocopon]

Could you test this sketch?
https://codesandbox.io/s/tweakpane-touch-events-test-0pzog

• What is the result of supportsTouch?
• Do you see any logs when you touch the gray pad?

[maheshkurmi]

Although supportsTouch results false, it responds to all events touchstart, touchmove and touchup
It is detecting all events, event log as below

supportsTouch: false
touchstart: 216.5, 168.5
touchmove: 217, 169
touchmove: 218.5, 173.5
touchmove: 219.5, 176
touchmove: 222, 181.5
touchmove: 223.5, 183.5
touchmove: 225.5, 188.5
touchmove: 227, 191
touchmove: 228, 192
touchmove: 227.5, 192.5
touchmove: 228, 192.5
touchmove: 227.5, 192.5
touchmove: 227, 191
touchend

[maheshkurmi]

problem demonstrations video recorded on surface
https://youtu.be/dg_KufatOSc

[maheshkurmi]

Actually
const supportsTouch = document.ontouchstart !== undefined;
resulting supportsTouch as false

while
The following results in supportsTouch as true
const supportsTouch=('ontouchstart' in window) || window.DocumentTouch && window.document instanceof DocumentTouch || window.navigator.maxTouchPoints || window.navigator.msMaxTouchPoints ? true : false; console.log(supporttouch ); //displays false

Note 1: out of above conditions only window.navigator.maxTouchPoints is found to be true
Note2: on redefining function supportsTouch(doc) at line 501 in tweakpane 3.0.0.js as

function supportsTouch(doc) {
     return ('ontouchstart' in window) || window.DocumentTouch && window.document instanceof DocumentTouch || window.navigator.maxTouchPoints || window.navigator.msMaxTouchPoints ? true : false;
     // return doc.ontouchstart !== undefined;
  }

Touch drag starts working on my surface (haven't checked on android device yet)

But above resulted in weird situation,
Now touchpad and mouse are firing click and hover event only, no Press or drag event is fired.

[cocopon]

Thank you for detailed information! It seems that touch event handling works properly but touch devices detection doesn't work.

I updated supportsTouch. Does it work in your environment?
https://codesandbox.io/s/tweakpane-touch-events-test-0pzog

Now touchpad and mouse are firing click and hover event only, no Press or drag event is fired.

It may be caused by ev.preventDefault() in the touchstart handler. This is needed to avoid the conflicts with native page scrolling. touchmove seems to be fired correctly so I think there is no problem... right?

[maheshkurmi]

Support touch is returning true, touch events are working fine on my device, but mouse Events are not working now, sliders or color controls can't be dragged using mouse or touchpad.
In short 'touchmove'/'mousemove is not firing on Tweakpane widgets

To check, I replaced function supportsTouch(doc) in tweakpane.js with following

function supportsTouch(doc) {
       // return doc.ontouchstart !== undefined;
        // For most touch devices: iOS, Android, etc.
        if (document.ontouchstart !== undefined) {
            return true;
        }
        // For touchscreen Windows
        if (
            "maxTouchPoints" in window.navigator &&
            window.navigator.maxTouchPoints > 1
        ) {
            return true;
        }
        return false;
    }

Is changing anything else is also needed to get mouse events working?

[cocopon]

Ah okay, we have to support both mouse and touch input at the same time. The current implementation disables mouse input when a touch device is detected to avoid unexpected conflicts, but it should be removed...? 🤔

Does removing lines as below (line 2002–2009 in tweakpane-3.0.0.js) solve the problem?

- if (supportsTouch(doc)) {
    element.addEventListener('touchstart', this.onTouchStart_);
    element.addEventListener('touchmove', this.onTouchMove_);
    element.addEventListener('touchend', this.onTouchEnd_);
- }
- else {
    element.addEventListener('mousedown', this.onMouseDown_);
- }

[maheshkurmi]

On removing lines you mentioned, Its Working !!! Can it have some side-effect/conflict.
Tested for touch and mouse events (whichever applicable) on following (got no conflict or issue)

1. Microsoft surface
2. Lenovo touch windows Laptop
3. Macbook air
4. Android 10 device
5. iOS 13 device

Thanks a lot ! really teakpane is best UI library I came across, helping me to create interactive simulations without bothering UI on platform.

[cocopon]

Fixed in 3.0.1. Thank you for your help!