check Hover in pool of rectangles

Anas A. Ismail

Hello Everyone,
I have main Canvas that contains a pool of rectangles I want to show a popup for each hovered rectangle, how could that possibly be done ?
I always can check this with the last created one, but the taken action applied on all of other rectangles.

p3c0

@Anas-A.-Ismail You can add MouseArea inside each Rectangle and set hoverEnabled property to true the when mouse is hovered over these rectangle onEntered event handler is triggerred. You can invoke a popup from there.

Anas A. Ismail

@p3c0 I'm drawing the rectangles dynamically at runtime, so when I hover on one of them, the action accepted from the last created rectangle.

p3c0

@Anas-A.-Ismail Do you mean you are drawing rectangles with Canvas API's ?

Anas A. Ismail

@p3c0 I'm drawing rectangles using Mouse (Drag/Drop) on a Canvas, So I have multiple rectangles on the same Canvas which created dynamically on run time using createObject method, I need to deal with each rectangle separately, like this image here

p3c0

@Anas-A.-Ismail Trying to understand. Did you create Rectangle's using createObject ? In that case you can put MouseArea inside it as said earlier.

Anas A. Ismail

@p3c0 Yes I did that, but hover property applied only on the last created Rectangle, and when I hover on it the wanted action applied on all rectangles like this image, I want to apply this action on each rectangle separately without affecting the others.

Thanks.

p3c0

@Anas-A.-Ismail That's strange. Each Rectangle will have its own MouseArea and which will generate hover events for that particular Item only. Can you post the relevant code ?

Anas A. Ismail

@p3c0
img.qml

Item{
   Canvas{
        id: mainCanvase
        width: 640
        height: 480
        visible: true
        anchors.fill: parent
//        layer.enabled: false
        BoundingBox{
            id: imgBox
        }

        MouseArea{
            property Rectangle boundingBox: null
            property Component commentBox: null
            id: mainCanvaseMouseArea
            anchors.fill: parent

            onPressed: {
               var boundingBoxObj = imgBox.createObject (mainCanvase, {"x" :mouse.x, "y": mouse.y});
                boundingBox = boundingBoxObj;
            }

            onReleased: {
                if((boundingBox.width >2) && (boundingBox.height > 2))
                {
                    boundingBox.createCommentBox();
                    mainCanvaseMouseArea.enabled = false;
                }
                else
                {
                    boundingBox.destroy();
                }
            }

            onPositionChanged: {
                boundingBox.width = (Math.abs (mouse.x - boundingBox.x));
                boundingBox.height = (Math.abs (mouse.y - boundingBox.y));
            }
        }
    }
}

boundingbox.qml

Component{
    id: boundingBoxComponent

    Rectangle{
        id: boundingBoxRect
        objectName: "boundingBoxRect"
        border.color: "red"
        radius: 10
        color: "transparent"
        property color onHoverColor: "blue"
        property color defaultColor: "red"
        property bool isHovered: true
        property Component commentBox: null

        function createCommentBox(){
            commentBox = Qt.createComponent("commentBox.qml")
            commentBox.createObject(boundingBoxRect,{"y": boundingBoxRect.height+5})
        }

        MouseArea{
            id: boundingBoxMouseArea
            //properties
            hoverEnabled: true
            anchors.fill: parent

            //events
            onEntered: {
                parent.border.color = onHoverColor;
                isHovered = true;
            }
            onExited: {
                parent.border.color = defaultColor;
                isHovered = false;
            }
        }
    }
}

p3c0

@Anas-A.-Ismail According to your code property Rectangle boundingBox will always point to the last created or the latest created Item.

Anas A. Ismail

@p3c0 Thank You, your answers were really helpful, it's solved.