Fix qml item behavior

Rybalka.Yaroslav

I have code on qml, which should divide it on 4 squares by click.

@
import QtQuick 2.0

Rectangle {
Component {
id: squareComponent
Rectangle {
property int sideLenght: 500
width: sideLenght
height: sideLenght
color: "orange"
MouseArea {
anchors.fill: parent
onClicked: {
var first = squareComponent.createObject(parent)
var second = squareComponent.createObject(parent)
var third = squareComponent.createObject(parent)
var fourth = squareComponent.createObject(parent)

                var sideLenght = parent.sideLenght / 2

                first.sideLenght = sideLenght
                second.sideLenght = sideLenght
                third.sideLenght = sideLenght
                fourth.sideLenght = sideLenght

                var x = parent.x
                var y = parent.y
                console.log(x, y)

                first.x = x
                first.y = y
                first.color = "red"
                console.log("first", first.x, first.y)

                second.x = first.x + sideLenght
                second.y = first.y
                second.color = "orange"
                console.log("second", second.x, second.y)

                third.x = first.x
                third.y = first.y + sideLenght
                third.color = "blue"
                console.log("third", third.x, third.y)

                fourth.x = first.x + sideLenght
                fourth.y = first.y + sideLenght
                fourth.color = "black"
                console.log("fourth", fourth.x, fourth.y, "\n\n")

                parent.sideLenght = 0
            }
        }
    }
}

Component.onCompleted: squareComponent.createObject(parent)

}
@

They are divided, but divided only correct square (0, 0), others are with an offset for x or y by the amount of the parent. Qt 5.0.1. How do I fix this behavior, is it a bug?

Logging says that the elements are right, but they are not in fact.

Jens

The problem is that you are mixing the parent with the "parent" id.

Try this: (oh and it is spelled "length" :)
@import QtQuick 2.0

Rectangle {
width: 500
height: 500
id: root

Component {
    id: squareComponent
    Rectangle {
        property int sideLength: 500
        width: sideLength
        height: sideLength
        color: "orange"
        MouseArea {
            anchors.fill: parent

            onClicked: {
                var first = squareComponent.createObject(root)
                var second = squareComponent.createObject(root)
                var third = squareComponent.createObject(root)
                var fourth = squareComponent.createObject(root)

                var sideLength = parent.sideLength / 2

                first.sideLength = sideLength
                second.sideLength = sideLength
                third.sideLength = sideLength
                fourth.sideLength = sideLength

                var x = parent.x
                var y = parent.y
                console.log(x, y)

                first.x = x
                first.y = y
                first.color = "red"
                console.log("first", first.x, first.y)

                second.x = first.x + sideLength
                second.y = first.y
                second.color = "orange"
                console.log("second", second.x, second.y)

                third.x = first.x
                third.y = first.y + sideLength
                third.color = "blue"
                console.log("third", third.x, third.y)

                fourth.x = first.x + sideLength
                fourth.y = first.y + sideLength
                fourth.color = "black"
                console.log("fourth", fourth.x, fourth.y, "\n\n")

                parent.sideLength = 0
            }
        }
    }
}

Component.onCompleted: squareComponent.createObject(root)

}
@