How to select/highlight more than one item in QML GridView?

AmanVirdi

I am displaying some data in the GridView. I need to select more than one item in the gridview by mouse click and at the same time mouse-over effect is there. Grid has two image elements. One image is actual image(i.e. myImage) which is always visible and the second image(i.e. myImageSelected) is used to show selection and hovering by setting opacity of the image(myImageSelected).

Here is my code:

@Rectangle {
property variant items
Component {
id: myDelegate

    Rectangle {
        id: parentItem
        width: grid.cellWidth
        height: grid.cellHeight
        color: "#00000000"

        Image {
            id: myImage
            height: 100
            width: 100
            source: coverart                 //coverart is child of "items" model
            smooth: true
            z: 9
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parentItem.top
            anchors.topMargin: 8
        }

        BorderImage {
            id: myImageSelected
            height: myImage.height + 20
            width: myImage.width + 20
            smooth: true
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: 2
            anchors.top: parentItem.top
            z: 0
            opacity: 0
            source: "qrc:/resources/images/myImage-selected.png"
        }

        MouseArea {
            id: markerArea;
            anchors.fill: parentItem;
            hoverEnabled: true
            
            onEntered: {
                if(myImageSelected.state != "mouse-click") {
                    myImageSelected.state = "mouse-over";
                }
                console.log("onEntered = " + myImageSelected.state);
            }

            onClicked: {
                myImageSelected.state = "mouse-click";
                console.log("onClicked = " + myImageSelected.state);
            }

            onExited: {
                if(myImageSelected.state != "mouse-click") {
                    myImageSelected.state = "";
                }
                console.log("onExited = " + myImageSelected.state);
            }
        }

      
        states: [ State {
                   name: "mouse-over";             //when: markerArea.containsMouse
                   PropertyChanges { target: myImageSelected; opacity: 0.7}
             },
             State {
                  name: "mouse-over";
                  PropertyChanges { target: myImageSelected; opacity: 0.7}
             }
        ]
        transitions: Transition {
            NumberAnimation { properties: "opacity"; easing.type: Easing.InOutQuad; duration: 300 }
        }
    }
}

GridView {
    id: grid
    clip: true
    anchors.fill: parent
    cellWidth: 130 
    cellHeight: 160
    model: items
    focus: true
    delegate: myDelegate
}

}@

Now, the problem is, the states are applied on the mouse events but not visible.
Do you have any idea about this problem? Please tell if I am on right track or this can be done in other way.

Thanks.........

dmcr

Hi,
try to put only one state of the same name (even if the code is the same)

AmanVirdi

Hi,
I tried it but nothing happened visually.
I tried it with on onClicked event.

AmanVirdi

Hi,
It works if I use "when" condition in state as below:

@ states:[
State {
name: "mouse-over"; when: markerArea.containsMouse
PropertyChanges { target: myImageSelected; opacity: 0.7}
},
State{
name: "mouse-click"; when: markerArea.pressed
PropertyChanges { target: myImageSelected; opacity: 1}
}
]@

but it is not stable.

It shows hovering visually but when I press and hold down the mouse button on an item and get mouse cursor out of that item(means dragging without scrolling the grid) and "mouse-click" state visually displays after the "mouse-over" state deactives. The "mouse-click" state is not visible if the item is clicked and cursor is on that item.

Any idea?

dmcr

Well this is quite a classical issue, you may catch the coordinates of the mouse and check whether or not it is inside the MouseArea.
Also you have a onRelease event which is usually better to use than onClicked event.

dmcr

Once i have done this :
@Rectangle{
id : idTX
anchor.fill:.....
MouseArea{
onMousePositionChanged:
{
if( mouse != null)
{
var okX = mouse.x > 0 && mouse.x < idTX.width
var okY = mouse.y > 0 && mouse.y < idTX.height

            if( !(okX && okY ) )
                {/*change your state here you are outside*/}
        }
    }
}

}@

Edit :
onExit do the job !

AmanVirdi

It didn't work for me..

dmcr

Did you try to get some debugging output in the onMousePositionChanged?
your error message is too short :)

AmanVirdi

I put your code into my code like this:

@ onPositionChanged: {
if( mouse != null)
{
var okX = mouse.x > 0 && mouse.x < parentItem.width
var okY = mouse.y > 0 && mouse.y < parentItem.height

                    if( !(okX && okY ) )
                    {
                        /*change your state here you are outside*/
                        console.log("okY = " + okY + " --- okX = " + okY);
                    }
                }
            }@

and the output on console is :
@
okY = false --- okX = false
okY = true --- okX = true
okY = true --- okX = true
@
What should I do now

dmcr

well, i have put it in the code :
when your mouse is outside the rectangle of your mouseArea, ie you pass in the
if( !(okX && okY ) ), then you can change your state as you like

AmanVirdi

Thanks for your ideas it really helped me.
But I was using models and now I am selecting the items using data models.

Thanks.