Propagate hover events to several MouseAreas



  • 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?



  • 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"
                }
            }
        }
    }
    

    }

    @



  • 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...



  • 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.



  • 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.