Different PointerDragBehavior from babylon 6 to 7-8

Bugs
1

PointerDragBehavior in version 8 right click causes the drag to end. This did not happen in Babylon version 6 and we are using right click as a secondary action while the user the dragging. Is there any solution or workaround in version 8?

3

Hi @kpp16, I looked into this today, and the behavior of cancelling the drag when a second button on the same pointer was pressed was required to fix a related issue when dragging a gizmo. If you rely on the user being able to use another button on the same pointer during a drag, and you’re not using the gizmo, then an optional flag on the PointerDragBehavior to allow the second button without cancelling the drag solve this for you?

Thanks!

4

Thanks for the clarification! Yes, adding an optional flag to allow the second button without canceling the drag would definitely help in my case.

5 
var createScene = function () {
    // Your existing scene setup...
    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(1, 5, -10), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;
    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
    sphere.rotation.x = Math.PI/2;
    sphere.position.y = 1;
    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

    var pointerDragBehavior = new BABYLON.PointerDragBehavior({dragAxis: new BABYLON.Vector3(1,0,0)});
    pointerDragBehavior.useObjectOrientationForDragging = false;

    // Track drag state
    let isDragging = false;
    let dragStartPointerId = null;

    pointerDragBehavior.onDragStartObservable.add((event) => {
        isDragging = true;
        dragStartPointerId = event.pointerId;
    });

    pointerDragBehavior.onDragObservable.add((event) => {
        console.log(event.pointerInfo.event.inputIndex);
    });

    pointerDragBehavior.onDragEndObservable.add((event) => {
        isDragging = false;
        dragStartPointerId = null;
        console.log("dragEnd");
    });

    // Handle right-click during drag without ending the drag
    scene.onPointerObservable.add((pointerInfo) => {
        if (pointerInfo.event.button === 2 && // Right click
            pointerInfo.type === BABYLON.PointerEventTypes.POINTERDOWN &&
            isDragging && 
            pointerInfo.event.pointerId === dragStartPointerId) {
            
            // Perform your secondary action here
            console.log("Right-click secondary action during drag");
            
            // Prevent the event from bubbling and ending the drag
            pointerInfo.event.preventDefault();
            pointerInfo.event.stopPropagation();
        }
    });

    sphere.addBehavior(pointerDragBehavior);
    return scene;
};
6

I copy-pasted this into the Babylon.js Playground, but the pointer drag still ends when I right-click during a drag.

7

cc @amoebachant

8

Hey @kpp16, tomorrow I’m going to look into adding that flag for you. @kakao thanks for trying to help out with a workaround!

9

Hi @kpp16 - I just merged a fix
that adds a allowOtherButtonsDuringDrag flag you can use to get the behavior you want. Here’s a playground that uses the build from the PR to show it working in your scenario: https://playground.babylonjs.com/?snapshot=refs/pull/16805/merge#YEZPVT#2689

Let me know how that works out for you!

10

Hey @amoebachant this flag works perfectly — thanks!

11

Great, so glad that worked for you!