On drag event parameters (DragX, DragY) not taking correct value when working with Containers

[Angelitorl]

Version

• Phaser Version: v3.55.2

• Operating system: Windows 10

Description

I'm trying to create an slider and I've found what seems to be a bug when working with containers: When the drag event occurs, the parameter "DragX" and "DragY" take its values based on the mouse position instead of the world space. The place were the click starts becomes the origin coordinates (0, 0).

Here is a working example of the bug. As you might guess, it's a WIP slider:

Example Test Code

class Example extends Phaser.Scene
{
    constructor () {
        super();
    }

    create () {
        let x = 100;
        let y = 100;
        let width = 100;
        let height = 20;

        let leftEnd = x;
        let rightEnd = x + width;
        
        let progressBox = this.add.graphics();
        progressBox.fillStyle(0x222222, 0.8);
        progressBox.fillRect(x, y, width, height);
        
        let progressBar = this.add.graphics();
        progressBar.clear();
        progressBar.fillStyle(0xffffff, 1);
        progressBar.fillRect(x, y, 0, height);
        progressBar.name = 'progressBar';

        let dragButton = this.add.circle(x, y + height / 2, height / 2 + 0.4 * height, 0x6666ff);
        dragButton.name = 'dragButton';

        let barContainer = this.add.container();
        barContainer.addAt(progressBox, 0);
        barContainer.addAt(progressBar, 1);
        barContainer.addAt(dragButton, 2);
        barContainer.setInteractive(new Phaser.Geom.Rectangle(x, y, width, height), Phaser.Geom.Rectangle.Contains);
        this.input.setDraggable(barContainer);

        this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
            console.log(dragX);
            console.log(dragY);
        });
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: [ Example ]
};

const game = new Phaser.Game(config);