Binding loop when trying to build a resizable layout

[rscarson]

Having trouble with this component I am building

Without touch.on_handle on line 3 it 'works' but users can drag the resize-handle from outside it's bounds

With it, the compiler complains of a binding loop.

How can I restrict actual_proportion's width-following without the binding loop?

export component VerticalSplit inherits Rectangle {
    in-out property <float> proportion: 50%;
    in-out property <float> actual_proportion: touch.pressed && touch.on_handle ? touch.new_proportion : proportion;

    touch := TouchArea {
        property<float> new_proportion: max(0.05, min(0.95, proportion + (self.mouse-x - self.pressed-x) / root.width));      
        property<bool> on_handle: abs(self.mouse-x - (handle.x)) < 15px;

        mouse-cursor: on_handle ? col-resize : default;
        
        clicked => {
            if on_handle {
                root.proportion = touch.new_proportion;
            }
        }
    }

    left := Rectangle {
        width: actual_proportion * parent.width - handle.width / 2;
    }

    handle := Rectangle {
        x: left.width;
        width: 3px;
        height: parent.height;
        background: @linear-gradient(90deg, #ddd, #aaa);
    }

    right := Rectangle {
        width: (1 - actual_proportion) * parent.width - handle.width / 2;
        x: handle.y + handle.width;
    }
} 

[rscarson]

I also cannot figure out how to allow implementations of it to set children for both the left and right areas, like GridLayout does with Row

[ogoffart]

Maybe have a callback to set a value when the mouse is being pressed, so that doesn't break the loop.

There is an example that do resizing of the tableview header in https://releases.slint.dev/1.7.2/docs/slint/src/recipes/recipes#custom-table-view maybe that can help.

[rscarson]

Thanks!