Tracking mouse movement during Button pressed

[Eeli K]

I want to track mouse/touch movement (coordinates inside the Window or more specifically inside a MouseArea inside the main view) while a Controls 2 Button is pressed down. The movement starts when the user presses the button down. Then he/she moves mouse/finger while the button is pressed, inside the MouseArea which is larger than the button. Then he/she releases it. I have several such buttons close to each other and the user can move the mouse/finger freely in the screen so that it can go above other similar buttons and other items. The MouseArea itself isn't important, only that I can track the mouse movement while a button is pressed so that I can send forward information about movement.

Is there any simple way to do it? If not, how about a non-simple way?

[raven-worx]

@Eeli-K
most examples of MouseArea are covering this no? Actually thats almost the whole purpose of the MouseArea element

[Eeli K]

I have read the documentation back and forth but haven't looked at all possible examples in Qt's example app collection.

I don't know how to let the MouseArea receive all the position changed events and simultaneously propagating all the events to other items so that other item's behavior doesn't change. Maybe the greatest problem is that I can't use

MouseArea {
  onPressed: {mouse.accepted = false}
}

to propagate events to other items because then the area stops reveiving events, as the documentation says. So what's left to do is to find the item which is under the event coordinates (by handling coordinate conversion and item child structrue) and "manually" handling its properties. Then I would have to replicate every item's behavior in the MouseArea event handling code.

So I repeat my problem: is there a way to receive mouse coordinates in MouseArea (or in some other way) but let the UI work exactly as it works without the MouseArea, in a simple way which doesn't require knowledge about the other parts or the exact structure of the UI?

[raven-worx]

@Eeli-K
Does the following do what you want?

MouseArea {
       anchors.fill: parent
       propagateComposedEvents: true
       onClicked: {
                mouse.accepted = false
        }
        onPositionChanged: {
                console.log( mouse.x + "," + mouse.y )
                mouse.accepted = false
        }
}

[Eeli K]

@raven-worx said in Tracking mouse movement during Button pressed:

@Eeli-K
Does the following do what you want?

Unfortunately not. Here's a small application...

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    Item {
        anchors.fill: parent
        MouseArea {
            id: mouseArea
            z: 2
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: {
                console.log("clicked on area")
                mouse.accepted = false
            }

            onPositionChanged: {
                console.log("mouse position changed", mouse.x, mouse.y);
                mouse.accepted = false
            }
            onPressed: {
                console.log("mouse pressed on area")
                //mouse.accepted = false
            }
        }
        Button {
            id: button
            onPressedChanged: {
                console.log(button.pressed)
            }
            onClicked: {
                console.log("buttonClicked")
            }
        }
    }
}

MouseArea.onPressed either has "mouse.accepted = false" or not. In both cases it doesn't do what I want. Either Button doesn't get all the events or the MouseArea doesn't get the following events.

[Eeli K]

I think I found a satisfying solution.

Button {
            MouseArea {
                id:buttonMouseArea
                anchors.fill: parent
                onPositionChanged: {
                    console.log("mouse position changed on button area", mouse.x, mouse.y);
                }
                onPressed: {
                    mouse.accepted = true
                    button.down = true
                }
                onReleased: {
                    mouse.accepted = true
                    button.down = false
                }
            ...

The secret is that when the button is pressed the mouse area receives events even outside the area (actually even beyond the application window on desktop!). Therefore it works as I want it to.