X doubles when z > 0

ixSci

Hi folks, please see the code below:

@import QtQuick 1.1

Item{
id: container

width: 500
height: 500

Flow{
    id: flow

    property int currentItem: -1
    width: 300
    height: 300

    spacing: 5
    Repeater{
        id: repeater

        model: 3
        Rectangle{
            id: rect

            width: 60
            height: 60
            color: "red"
            states: State{
                name: "active"
                when: flow.currentItem === index
                PropertyChanges{target: rect; height: 80; width: 80; color: "green"; z: 1}
            }
        }

    }
}
MouseArea{
    anchors.fill: flow

    onClicked: flow.currentItem = container.getIndex(mouseX, mouseY)
}

function getIndex(x, y){
    for(var i = 0; i < repeater.count; i++)
        console.log("index=" + i + ", x=" + flow.children[i].x + ", y=" + flow.children[i].y);

    for(var i = 0; i < repeater.count; i++)
    {
        if(x > flow.children[i].x && x < flow.children[i].x + flow.children[i].width)
            if(y > flow.children[i].y && y < flow.children[i].y + flow.children[i].height)
                return i;

    }
    return -1;
}

}
@

and it outputs when you click on some rect first time:
index=0, x=0, y=0
index=1, x=65, y=0
index=2, x=130, y=0

and after the second time(after z was set):
index=0, x=0, y=0
index=1, x=150, y=0
index=2, x=0, y=0

you can see that x has doubled its value after z was set and something strange has happened with the last item coordinates.
While I'm not actually bothering about the last item coordinates I want to know what happened with item's x after its z was set to non negative value.

Thanks!

favoritas37

I don't know if it will correct your problem but either way it would be better to add an extra inactive state to make z equal to zero when not active:

@
states: [
State{
name: "active"
when: flow.currentItem === index
PropertyChanges{target: rect; height: 80; width: 80; color: "green"; z: 1}
},
State{
name: "inactive"
when: flow.currentItem !== index
PropertyChanges{target: rect; height: 60; width: 60; color: "green"; z: 0}
}
]
@

ixSci

favoritas37, z is zero by default so there is no need to add an extra state since it is already in the default one.

favoritas37

Yeah but after making something active, how is it going to get inactive once again if you select something else? That is why i said that. Not for initialization.

ixSci

it will be inactive when flow.currentItem changes. And it will be changed when click on other item. It would work quite good if there was no issue with the coordinates change.

favoritas37

Ok i see, indeed it is a weird problem...

Would you be interested in the following implementation?

@
import QtQuick 1.1

Item{
id: container

width: 500
height: 500

MouseArea{
    anchors.fill: parent
    onClicked: flow.currentItem = -1;
}

Flow{
    id: flow
    property int currentItem: -1

    width: 500
    height: 500

    spacing: 5

    Repeater{
        id: repeater
        width: 500
        height: 500

        model: 4
        Rectangle{
            id: rect

            width: 60
            height: 60
            color: "red"
            states: [
                State{
                    name: "active"
                    when: flow.currentItem === index
                    PropertyChanges{target: rect; height: 80; width: 80; color: "green"; z: 1}
                },
                State{
                    name: "inactive"
                    when: flow.currentItem !== index
                    PropertyChanges{target: rect; height: 60; width: 60; color: "red"; z: 0}
                }
            ]
            MouseArea{
                anchors.fill: parent
                onClicked: flow.currentItem = index
            }
        }
    }
}

}
@

ixSci

It is actually only the part of the bigger problem. So I just want to understand what happens with coordinates.