mousearea containsmouse property

[joko]

Hi,

I have some quick questions to clarify:

1) Is there a workaround already for MouseArea containsMouse property when the area moves under the mouse? Based on the docs the property is still outdated.
2) Can parent clip property be overridden by the child? Is there a possible workaround? I tried using Z index but it's not working. I want the child rectangle to overlap from parent where clip property set to true.

Thanks.

[wysota]

1) Is there a workaround already for MouseArea containsMouse property when the area moves under the mouse? Based on the docs the property is still outdated.

What do you mean the property is "outdated"? MouseArea reacts on mouse movement, it has no way of knowing it has moved under the cursor.

2) Can parent clip property be overridden by the child?

No.

Is there a possible workaround?

Make the "child" a "sibling" rather than a child. Or do some smart clipping using shaders.

I want the child rectangle to overlap from parent where clip property set to true.

Why do you enable clipping then?

[joko]

What do you mean the property is "outdated"? MouseArea reacts on mouse movement, it has no way of knowing it has moved under the cursor.

I mean the property is not updated, because when I pressed the mouse and then move it, containsmouse is still true. Am i understanding it correctly?

http://qt-project.org/doc/qt-5/qml-q...ainsMouse-prop

Why do you enable clipping then?

I enabled the parent so that it won't display when scrolled because the other siblings have transparent background.
The rectangle that I wanted to overlap into other parent's siblings is my custom dropdown.

[wysota]

I mean the property is not updated, because when I pressed the mouse and then move it, containsmouse is still true. Am i understanding it correctly?

As I said, the item has no way of knowing what you would like it to know.

I enabled the parent so that it won't display when scrolled because the other siblings have transparent background.
The rectangle that I wanted to overlap into other parent's siblings is my custom dropdown.

Please provide some code demonstrating the problem.

[joko]

As I said, the item has no way of knowing what you would like it to know.

I wanted to bind a highlighted image once it is clicked and hovered then replace it with normal image once mouse position moves.
I used containsMouse however, like i said, the image remained highlighted after I pressed and moves the mouse.

Please provide some code demonstrating the problem.

parent page

Rectangle
{
 
    Rectangle
    {
        id: header
        height: 70
        Layout.fillWidth: true
        color: "#00000000"
 
        Text
        {
            id: title
            text: qsTr("Title")
            color: "#FFFFFF"
        }
    }
 
    Flickable
    {
        id: main
        contentHeight: 200
        anchors.fill: parent
 
        MouseArea
        {
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                closePopup()
            }
        }
 
        Rectangle
        {
           id: body
           anchors {
               top: header.bottom
               left: parent.left
               right: parent.right
           }
 
           RowLayout
                {
                    spacing: 30
                    anchors.fill: parent
                    Rectangle
                    {
                        width: 50
                        Text
                        {
                            id: colorLbl
                            text: qsTr("Color")
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }
 
                    ListModel{
                        id: colors
                        ListElement{
                            item: "Blue"
                        }
                        ListElement{
                            item: "Green"
                        }
                        ListElement{
                            item: "Red"
                        }
                    }
 
                    CustomComboBox
                    {
                        id: colorCmb
                        Layout.fillWidth: true
                        implicitHeight: 30
                        model: colors
                    }
                }
           }
     }
 
    Rectangle
    {
        id: footer
        Layout.fillWidth: true
        color: "#00000000"
        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
 
        Button
        {
            id: backBtn
            text: qsTr("Back")
        }
    }
 
    function closePopup() {
        if(colorCmb.comboState === "visible") {
            colorCmb.comboState = ""
        }
    }
}

Rectangle
{

    Rectangle
    {
        id: header
        height: 70
        Layout.fillWidth: true
        color: "#00000000"

        Text
        {
            id: title
            text: qsTr("Title")
            color: "#FFFFFF"
        }
    }

    Flickable
    {
        id: main
        contentHeight: 200
        anchors.fill: parent

        MouseArea
        {
            id: mouseArea
            anchors.fill: parent
            onClicked: {
                closePopup()
            }
        }

        Rectangle
        {
           id: body
           anchors {
               top: header.bottom
               left: parent.left
               right: parent.right
           }

           RowLayout
                {
                    spacing: 30
                    anchors.fill: parent
                    Rectangle
                    {
                        width: 50
                        Text
                        {
                            id: colorLbl
                            text: qsTr("Color")
                            anchors.verticalCenter: parent.verticalCenter
                        }
                    }

                    ListModel{
                        id: colors
                        ListElement{
                            item: "Blue"
                        }
                        ListElement{
                            item: "Green"
                        }
                        ListElement{
                            item: "Red"
                        }
                    }

                    CustomComboBox
                    {
                        id: colorCmb
                        Layout.fillWidth: true
                        implicitHeight: 30
                        model: colors
                    }
                }
           }
     }

    Rectangle
    {
        id: footer
        Layout.fillWidth: true
        color: "#00000000"
        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }

        Button
        {
            id: backBtn
            text: qsTr("Back")
        }
    }

    function closePopup() {
        if(colorCmb.comboState === "visible") {
            colorCmb.comboState = ""
        }
    }
}

To copy to clipboard, switch view to plain text mode 

CustomComboBox.qml

import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0
 
Item
{
    id: container
 
    property color color: "white"
    property color hoverColor: "#5692c4"
    property int fontSize: 12
    property alias model: listView.model
    property alias comboState: dropDown.state
    property int index: 0
 
    property Component rowDelegate: defaultRowDelegate
 
    signal valueChanged(int id)
 
    Component
    {
        id: defaultRowDelegate
        Text
        {
            anchors {
                fill: parent
                rightMargin: 25
            }
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignRight
            font {
                pointSize: container.fontSize
                family: fontFamily
            }
            text: parent.modelItem.item
        }
    }
 
    Rectangle
    {
        id: main
        anchors.fill: parent
        color: container.color
        clip: true
 
        Image
        {
            id: arrowIcon
            anchors{
                right: main.right
                verticalCenter: parent.verticalCenter
            }
            fillMode: Image.PreserveAspectFit
            source: "/image/arrow_down.png"
        }
    }
 
    Loader
    {
        id: topRow
        anchors.fill: parent
        focus: true
        clip: true
 
        sourceComponent: rowDelegate
        property variant modelItem
    }
 
    MouseArea
    {
        id: mouseArea
        anchors.fill: container
        onClicked: { toggle() }
    }
 
    Rectangle
    {
        id: dropDown
        width: container.width; height: 0
        anchors.top: container.bottom
        anchors.topMargin: -1
 
        clip: true
 
        Behavior on height { NumberAnimation { duration: 100 } }
 
        Component
        {
            id: myDelegate
 
            Rectangle
            {
                width: dropDown.width; height: container.height
                color: "transparent"
 
                Loader
                {
                    id: loader
                    anchors.fill: parent
                    sourceComponent: rowDelegate
 
                    property variant modelItem: model
                }
 
                property variant modelItem: model
 
                MouseArea
                {
                    id: delegateMouseArea
                    anchors.fill: parent
                    onEntered: listView.currentIndex = index
                    onClicked: close(true)
                }
            }
        }
 
        ListView
        {
            id: listView
            width: container.width; height: container.height * count
            delegate: myDelegate
            highlight: Rectangle {
                anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined;
                color: container.hoverColor
            }
            boundsBehavior: Flickable.StopAtBounds
        }
 
        Rectangle
        {
            id: listViewCon
            anchors.fill: listView
            color: "transparent"
            border.color: "lightgray"
            border.width: 1
        }
 
        states: [
            State {
                name: "visible";
                PropertyChanges { target: dropDown; height: container.height * listView.count }
            }
        ]
    }
 
    function toggle() {
        if (dropDown.state === "visible") { close(false) } else { open() }
    }
 
    function open() {
        dropDown.state = "visible"
        listView.currentIndex = container.index
    }
 
    function close(update) {
        dropDown.state = ""
 
        if (update) {
            container.index = listView.currentIndex
            topRow.modelItem = listView.currentItem.modelItem
            valueChanged(listView.currentIndex)
        }
    }
 
    Component.onCompleted: {
        listView.currentIndex = container.index
        if (listView.currentItem)
            topRow.modelItem = listView.currentItem.modelItem
    }
}

import QtQuick 2.0
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0

Item
{
    id: container

    property color color: "white"
    property color hoverColor: "#5692c4"
    property int fontSize: 12
    property alias model: listView.model
    property alias comboState: dropDown.state
    property int index: 0

    property Component rowDelegate: defaultRowDelegate

    signal valueChanged(int id)

    Component
    {
        id: defaultRowDelegate
        Text
        {
            anchors {
                fill: parent
                rightMargin: 25
            }
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignRight
            font {
                pointSize: container.fontSize
                family: fontFamily
            }
            text: parent.modelItem.item
        }
    }

    Rectangle
    {
        id: main
        anchors.fill: parent
        color: container.color
        clip: true

        Image
        {
            id: arrowIcon
            anchors{
                right: main.right
                verticalCenter: parent.verticalCenter
            }
            fillMode: Image.PreserveAspectFit
            source: "/image/arrow_down.png"
        }
    }

    Loader
    {
        id: topRow
        anchors.fill: parent
        focus: true
        clip: true

        sourceComponent: rowDelegate
        property variant modelItem
    }

    MouseArea
    {
        id: mouseArea
        anchors.fill: container
        onClicked: { toggle() }
    }

    Rectangle
    {
        id: dropDown
        width: container.width; height: 0
        anchors.top: container.bottom
        anchors.topMargin: -1

        clip: true

        Behavior on height { NumberAnimation { duration: 100 } }

        Component
        {
            id: myDelegate

            Rectangle
            {
                width: dropDown.width; height: container.height
                color: "transparent"

                Loader
                {
                    id: loader
                    anchors.fill: parent
                    sourceComponent: rowDelegate

                    property variant modelItem: model
                }

                property variant modelItem: model

                MouseArea
                {
                    id: delegateMouseArea
                    anchors.fill: parent
                    onEntered: listView.currentIndex = index
                    onClicked: close(true)
                }
            }
        }

        ListView
        {
            id: listView
            width: container.width; height: container.height * count
            delegate: myDelegate
            highlight: Rectangle {
                anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined;
                color: container.hoverColor
            }
            boundsBehavior: Flickable.StopAtBounds
        }

        Rectangle
        {
            id: listViewCon
            anchors.fill: listView
            color: "transparent"
            border.color: "lightgray"
            border.width: 1
        }

        states: [
            State {
                name: "visible";
                PropertyChanges { target: dropDown; height: container.height * listView.count }
            }
        ]
    }

    function toggle() {
        if (dropDown.state === "visible") { close(false) } else { open() }
    }

    function open() {
        dropDown.state = "visible"
        listView.currentIndex = container.index
    }

    function close(update) {
        dropDown.state = ""

        if (update) {
            container.index = listView.currentIndex
            topRow.modelItem = listView.currentItem.modelItem
            valueChanged(listView.currentIndex)
        }
    }

    Component.onCompleted: {
        listView.currentIndex = container.index
        if (listView.currentItem)
            topRow.modelItem = listView.currentItem.modelItem
    }
}

To copy to clipboard, switch view to plain text mode 

I want the dropdown rectangle from CustomComboBox to overlap into footer rectangle.

[wysota]

And where do you use containsMouse?

[joko]

And where do you use containsMouse?

the containsMouse is not related to the comboBox.

[wysota]

If you want help then please provide code that allows one to reproduce your problem. Posting meaningless code does not help.

[joko]

If you want help then please provide code that allows one to reproduce your problem. Posting meaningless code does not help.

Apologies. I just updated the codes.