Specify the drag threshold for OnPickTrigger?

Questions
, ,
1

When using OnPickTrigger, if you press down, drag a bit, then let go, the “click” (or “tap” if using mobile) will not happen.

How do we adjust the threshold (distance) that cancels the click?

2

Maybe you can save the start drag position (with initial value: null) when OnPickDownTrigger is triggered and execute your logic on pointerup-listener/observer if start drag position != null and dragged distance towards end position is below the threshold distance, also reset start position to null. Don’t forget to pass pickedMesh like start drag position to executed code of pointerup.

OnPickTrigger seems to be similar to mouse/pointer click-events, which only triggers if pointer was down and up, so on pointer up (at drag end) there is no mesh under the picking cursor.

2 Likes
3

cc @PolygonalSun

4

Thanks, I know, I did it that way initially but using OnPickTrigger is nice and concise. It is more work tracking the drag. Might be nice to give OnPickTrigger a threshold option.

It is similar to pointer click events, yeah.

With Babylon it seems to have a threshold even if at the end of the drag the pointer is still over the same object. For example, if I let go of the pointer on the same object after moving a little, and the pointer never went off that object, OnPickTrigger is not triggered if I moved far enough.

DOM click however does not have a threshold. However in the DOM people typically are not also dragging to rotate a scene, usually clicking on buttons, so the click always works inside the button without threshold.

5

Oh I see, you wanted to reduce.

Actually I found a threshold it is the DragMovementThreshold of InputManager:

Default should be 10 (pixels). It’s a public static variable, so you should be able to change it.

1 Like
6

Oh ok. It isn’t clear how to apply that to OnPickTrigger. How does it factor into this code?

    const actionManager = new ActionManager(this.scene);
    mesh.actionManager = actionManager;

    actionManager.registerAction(
        new ExecuteCodeAction(ActionManager.OnPickTrigger, (event) => {
            console.log('clicked')
        })
    );
7

Its a global variable and not just for Actions. If you are okay with applying it globally, then just change it to the desired distance in pixels:

BABYLON.Scene.DragMovementThreshold = 5; // or i.e. 20, you have to tweak to your desire

const actionManager = new ActionManager(this.scene);
// rest of your code ...

Be aware that the “distance” is checked separately for x and y distance. OnPickTrigger can only trigger when it has not swiped. It has swiped when distance was greater than threshold.

If you would want to use it just for this specific action, then you would need a logic to manage it in pointer listeners/observables.

Edit: Have to correct myself DragMovementThreshold is accessed by Scene not InputManager! I updated the code above.

1 Like