How to avoid binding loop when binding property to itself + some other property

[ioki9]

Hi, I am trying to write header for my table. Right now I am making it resizeble, but upon binding my column width to itself + mouse position I get binding loop. It works, but I am guessing it is a bad solution after all. Do you guys have any suggestion on how to do it the right way?

Rectangle {
    id:column
    property alias label: columnText.text
    anchors.top: parent.top
    Text{
        id: columnText
        anchors.left: parent.left
        anchors.leftMargin: 5
        anchors.verticalCenter: parent.verticalCenter
        width:parent.width
    }
    MouseArea{
        id:borderMouseArea
        anchors.right: parent.right
        height:parent.height
        width: 5
        hoverEnabled: true
        onPressed: (mouse)=>{
                        mouse.accepted = true
                        parent.width = Qt.binding(function(){return (parent.width + mouseX)})
                        console.log("width:",parent.width,"; mouseX:",mouseX,"; parent.x:",parent.x)
        }
        onReleased:(mouse)=>{
                       parent.width = parent.width
                   }

        Rectangle{
            id:columnBorder
            anchors.right: parent.right
            height:parent.height
            width:1
            color:"darkgrey"
        }
        HoverHandler{
            acceptedPointerTypes: PointerDevice.AllDevices
            cursorShape: Qt.SizeHorCursor
        }
    }

}

[ioki9]

i've just used a bit different approach with onMouseXChanged. Here is my solution if someone needs it.

MouseArea{
        id:borderMouseArea
        anchors.right: parent.right
        height:parent.height
        width: 5
        hoverEnabled: true
        onMouseXChanged: {
            if(pressed){
                parent.width = (parent.width + mouseX) >= minColWidth ? (parent.width + mouseX) : parent.width
            }
        }