How to listen to doubleClick and longPress for a GUI Button?

Meshes and Scenes support OnDoublePickTrigger and OnLongPressTrigger.
But how can we handle double-click and long-press triggers for a GUI Button?

In the Docs: GUI - Events I can see that we can handle a click (onPointerClickObservable) and this works in the Playground

Am I missing something, or is this just a missing Feature?
If so: is there an easy way to implement this? Maybe I can reuse the ActionManager somehow or use RxJs (based on onPointerEnterObservable and onPointerOutObservable)?

Let’s ping @PolygonalSun here :slight_smile:

AFAIK, the only way to get double click and long click to work would be to manually implement something using the button’s observables (@carolhmj or @RaananW, feel free to correct me if I’m wrong). For example, you could always store the current time that a pointerdown occurred and then check it in the onPointerClick to see if the time exceeded some value:

var time = 0;
...
    button.onPointerDownObservable.add(function() {
        time = Date.now();
    });
    button.onPointerClickObservable.add(function () {
        const deltaTime = Date.now() - time;

        if (deltaTime >= 500) {
            console.log("Long Click");
        }
...

For double-click, you’d have to check the time between clicks and determine if it’s less than some value:

var clickTime = 0;
...
    button.onPointerClickObservable.add(function () {
        const deltaDoubleTime = Date.now() - clickTime;

        if (deltaDoubleTime < 500) {
            console.log("Double Click");
            // If we have a double-click, reset the timer so that a third click doesn't trigger another double-click
            clickTime = 0;
        }
        else {
            clickTime = Date.now();
        }
...

Putting these together may require some timing checks and logic to prevent unnecessary clicks but this would be the gist of it.

1 Like

@PolygonalSun thanks for the answer. I see what you mean.
This logic becomes quite complicated when we also want to have longPress (then we need a timer).

Should I file a feature-request on GitHub, so that these events will eventually be added to GUI elements in the future?

I’d recommend posting a request on the Feature Requests page of the forum to start out.

Link to related Feature Request: Add doubleClick and longPress for a GUI Button