Can onDragStartObservable capture what mouse button is used?

there’s a known issue i’m trying to resolve when using Firefox and/or Safari that triggers a created onDragStartObservable on a mesh in our scene when the right mouse button is used. traditionally, most don’t drag with the right mouse button, so i’m wondering if there’s a way to determine what button is contributing to firing the observable, so we can ignore any triggers from the right mouse button? the callback event argument doesn’t supply any information related that i can tell. if this isn’t available, how trivial or otherwise would it be to add? thanks!

to add color to the situation, it looks like on Chrome the dragStart fires as well, but immediately fires dragEnd after the dragStart observable completes, which “simulates” it working as intended, but my expectation is that the right button mouse shouldn’t fire any drag events.

Hi there. At first i was thinking you could get it via event.pointerId . But unfortunately the pointerId seems to be always 1 in this event regardless if the left, right or middle mouse button is clicked. I have coded a kind of solution for your problem anyways in this playground: https://playground.babylonjs.com/#0SLSCF#6

Might not be the best, but it does the trick. Hope i could help :slight_smile:

1 Like

@CLB_ZReality well actually, trying the playground on Firefox still drags when right clicking on the mesh… so, i don’t think the issue is with checking for a right button click within the observable… the issue seems to stem for any mouse button click starting the drag behavior

i added window.addEventListener('contextmenu', (evt) => evt.preventDefault()); to the top of the createScene function to eliminate the native browser context menu from appearing, and you can still right click and drag the box.

ref: https://playground.babylonjs.com/#0SLSCF#7

this seems like something that might need tweaks within babylon’s internals, as adding the drag pointerBehavior applies it to any button click, and still starts the drag of the element, regardless of a check within the observable…

What about enabling/disabling the dragging behavior based on which button was pressed?

2 Likes

that might just do it! i’ll check in the morning. thanks a bunch!

1 Like

Blake’s answer seems to work for me :slight_smile:

In my solution i didn’t get that you meant, the mesh should actually not be able to be dragged anymore. I just thought you don’t wanted the onDragStartObservable to execute it’s code.

yeah, thanks a bunch for showing that solution though! should help if others need that :smiley:

Maybe @PolygonalSun can help.

As there’s no way to distinguish what button is being pressed inside of the onDragStartObservable, using @Blake’s solution is a good approach. I do feel like it’d be important to have a button’s context available inside of the observable though. Lemme see if I can think of any way to get this from the current PointerDragBehavior object.

3 Likes

I was unable to find any good way to get the button pressed by directly using anything within the PointerDragBehavior object. Since the initial intent was to limit certain buttons from initiating the drag, I created a PR to allow the user to specify which buttons can be used: Fix PointerDragBehavior to account for button context, add button filter by PolygonalSun · Pull Request #12499 · BabylonJS/Babylon.js (github.com)

thanks so much for the PR! this will definitely improve the expectations when using the behavior :smiley: can’t wait for the release!

The PR has been merged so the changes should be available in version 5.5.7 when it’s released.