Propagate hover events to several MouseAreas

DimanNe

There is propagateComposedEvents property in "MouseArea":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html, but it propagates ONLY mouse click events, and does NOT propagate hover events.

This behavior hinders to do something like "this":http://stackoverflow.com/questions/18135262/how-can-i-implement-this-scenario-using-qml

If I place bigger MouseArea with z: -1 and smaller MouseArea with z: 1 then bigger MouseArea receive onExited signal each time I enter in smaller MouseArea which is error and strange behaviour, strictly speaking (because mouse coords are still in bigger MouseArea rectangle).

So, is there any solution?
How I can propagate hover events in two or more items, or
how I can achieve behaviour shown in "this example":http://stackoverflow.com/questions/18135262/how-can-i-implement-this-scenario-using-qml?

bobweaver

Simple make states for each state of the elements in the View then you can use things like if statements or case statements to change these properties In Other words, Try not to set your elements up to work on MouseArea but on properties And set the Elements properties to work on the set properties I hope that this helps if not here is example

EDIT

I added the color to be transparent. if there is no mouse what so ever. If I was using a Image I would use opacity then add a bunch of Behaviors also But this is a working

example :

@import QtQuick 2.0
Rectangle {
width: 360
height: 360
property string state1:"OutMouse"
property string state2: "OutMouse"
property string state3: "OutMouse"
property string state4: "OutMouse"
Rectangle{
id:blueRec
width: parent.width
height: parent.height / 6
color: state1 === "InMouse" ? "blue" : "green"
MouseArea{
anchors.fill: blueRec
hoverEnabled: true
onEntered: state1 = "InMouse"
onExited: {
if (state1 === state2 || state3 || state4){
state1 = "InMouse"
}
if(state1 !== state2 || state3 || state4)
{
state1 = "OutMouse"
}
}
}
Text {
text: state1=== "InMouse"? qsTr("foo") :"bar"
anchors.centerIn: blueRec
}
Row{
width: parent.width
height: parent.height / 4

        spacing: 2
        anchors{
            left: parent.left
            verticalCenter:  blueRec.verticalCenter
            leftMargin: blueRec.width / 12
        }
        Rectangle{
            id: rec1
            height: parent.height;
            width: height
            color: {
                if  ( state3 === "InMouse")
                    return "gray"
                if (state1 === "OutMouse")
                    return "transparent"
                else
                    return "white"}
            MouseArea{
                id: rec1M
                anchors.fill: parent
                hoverEnabled: true
                onEntered:{
                    state1 = "InMouse"
                    state2 = "InMouse"
                }
                onExited: state2 = "OutMouse"
            }
        }
        
        Rectangle{
            id: rec2
            height: parent.height ;
            width: height
            color: {
                if  (state3 === "InMouse")
                    return "gray"
                if (state1 === "OutMouse")
                    return "transparent"
                else
                    return "white"
            }
            MouseArea{
                id: rec2M
                anchors.fill: parent
                hoverEnabled: true
                onEntered:{
                    state1 = "InMouse"
                    state3 = "InMouse"
                }
                onExited: state3 = "OutMouse"
            }
        }
        
        Rectangle{
            id: rec3
            height: parent.height;
            width: height
            color:{
                if  (state4 === "InMouse")
                    return "gray"
                if (state1 === "OutMouse")
                    return "transparent"
                else
                    return "white"
            }
            MouseArea{
                id:  rec3M
                anchors.fill: parent
                hoverEnabled: true
                onEntered:{
                    state4 = "InMouse"
                    state1 = "InMouse"
                }
                onExited: state4 = "OutMouse"
            }
        }
    }
}

}

@

DimanNe

Thank you for reply, your example really works, but there is one flaw.

You implicitly assume that you can change code of smaller rectangles, so smaller rectangles knows that they placed in some bigger one, they must set its property to some value, furthermore bigger rectangle knows about all smaller ones, it know names of its properties and so on...

All these conflicts with case when you develop reusable, library-like, scalable qml components.

Actually I want to write qml component, in which I can place arbitrary content, and, in case if this content will not find room in component, component will offer facility to temporary expand. Here is some screenshots

!http://img-fotki.yandex.ru/get/9303/11330794.1c/0_a5570_95cd1970_orig!
!http://img-fotki.yandex.ru/get/4906/11330794.1c/0_a5571_599897fb_orig!

Realization in second screenshot could be better - without green arrow and (most important) without need to press this green arrow, if I could shrink by timer. If there is no mouse in expanded area for 10 seconds it shrinks automatically.

But in this case I must know where is mouse... And this leads to my initial question...

bobweaver

Do you have these examples and pictures in a repository somewhere that is public that I can look at ? I have done what you are showing in the pictures above I used a model and a view and each models currentItem().width on a count to make these changes happen. The delegate sends a signal. But I am not sure that I understand what it is that you are trying to do.If it would be better to make something like a marquee for your Pictures and or my big questions where is the data coming from ? Like the Pictures the On Clicked and Entered and Exit ect. are these just buttons in a delegate ? Just keep in mind that you can set signal to things also. Also just wanted to say that the BigRec knows nothing about the smaller Rec in my examples All it knows about is the property string state[1,2] at any rate If you post some example code. I will take a look at it. Have a good one.

DimanNe

Ok, "here":https://docs.google.com/file/d/0B4r5nJvpzEHGenVuSUJCQUtyWkU/edit?usp=sharing is full example

Build

run

press expand button

then move mouse to red rectangle and you shall see message "Entered" in console (Ok)

then move it to some toolbutton in the red rectangle and you shall see message "Exited" (error, mouse still in red rectangle!)

The rectangle is in hover_events/ExpansibleBar.qml:19