Drag resizable layout?

[UditDey]

I am writing a GUI application with Rust and I'm considering moving to sixtyfps. The application will need 4 grid squares that can be resized by dragging (demonstrated in the attached video)

2021-07-21.17-27-22.mp4

Is this kind of drag resizable layout supported right now? From what I've gathered the layouts seem to be fixed in size

[ogoffart]

Hi,
We don't have a widget to do that, but that's possible to implement "manually"

Here is a quick & dirty way to do it:

HorizontalSplit := Rectangle {
    property<float> proportion: 50%;
    property<float> actual_proportion: touch.pressed ? touch.new_proportion : proportion;

    // This area covers the whole rectangle, but there it can only be clicked form the handle because
    // there is a TouchArea in sub rectangles
    touch := TouchArea {
        property <float> new_proportion: max(0.05, min(0.95, proportion + (mouse_x - pressed_x) / root.width));
        clicked => {
            proportion = new_proportion;
        }
    }

    r1 := Rectangle {
        height: 100%;
        width: actual_proportion * parent.width -  handle.width/2;
        TouchArea {}
        Rectangle { background: blue; }
    }

    handle := Rectangle {
        x: r1.width;
        height: 100%;
        width: 8px;
        background: @linear-gradient(0deg, #ddd, #aaa );
    }

    r2 := Rectangle {
        height: 100%;
        width: (1 - actual_proportion) * parent.width - handle.width / 2;
        x: handle.x + handle.width;
        TouchArea {}
        Rectangle { background: red; }
    }
}


Win := Window {
    HorizontalSplit { }
}

Online preview: https://sixtyfps.io/releases/0.1.0/editor/?snippet=HorizontalSplit+%3A%3D+Rectangle+%7B%0A++property%3Cfloat%3E+proportion%3A+50%25%3B%0A++property%3Cfloat%3E+actual_proportion%3A+touch.pressed+%3F+touch.new_proportion+%3A+proportion%3B%0A%0A++%2F%2F+This+area+covers+the+whole+rectangle%2C+but+there+it+can+only+be+clicked+form+the+handle+because%0A++%2F%2F+there+is+a+TouchArea+in+sub+rectangles%0A++touch+%3A%3D+TouchArea+%7B%0A++++property+%3Cfloat%3E+new_proportion%3A+max%280.05%2C+min%280.95%2C+proportion+%2B+%28mouse_x+-+pressed_x%29+%2F+root.width%29%29%3B%0A++++clicked+%3D%3E+%7B%0A++++++proportion+%3D+new_proportion%3B%0A++++%7D%0A++%7D%0A%0A++r1+%3A%3D+Rectangle+%7B%0A++++height%3A+100%25%3B%0A++++width%3A+actual_proportion+*+parent.width+-++handle.width%2F2%3B%0A++++TouchArea+%7B%7D%0A++++Rectangle+%7B+background%3A+blue%3B+%7D%0A++%7D%0A%0A++handle+%3A%3D+Rectangle+%7B%0A++++x%3A+r1.width%3B%0A++++height%3A+100%25%3B%0A++++width%3A+8px%3B%0A++++background%3A+%40linear-gradient%280deg%2C+%23ddd%2C+%23aaa+%29%3B%0A++%7D%0A%0A++r2+%3A%3D+Rectangle+%7B%0A++++height%3A+100%25%3B%0A++++width%3A+%281+-+actual_proportion%29+*+parent.width+-+handle.width+%2F+2%3B%0A++++x%3A+handle.x+%2B+handle.width%3B%0A++++TouchArea+%7B%7D%0A++++Rectangle+%7B+background%3A+red%3B+%7D%0A++%7D%0A%7D%0AWin+%3A%3D+Window+%7B%0A++HorizontalSplit+%7B+%7D%0A%7D%0A

We eventually need to add this as part of one of our widget.

[UditDey]

Thanks! This should work fine, implementing this manually is no problem. Maybe as an inbuilt solution the grid layout widget could be modified to include this functionality?

[UditDey]

Hey, I tried generalising your solution into a VerticalSplit widget and I tried this:

export VerticalSplit := Rectangle {
    property<Rectangle> rect_one;
    property<Rectangle> rect_two;
    property<float> proportion: 50%;

    property<float> actual_proportion: touch.pressed ? touch.new_proportion : proportion;

    touch := TouchArea {
        property<float> new_proportion: max(0.05, min(0.95, proportion + (mouse_x - pressed_x) / root.width));
        clicked => { proportion = new_proportion; }
    }

    r1 := Rectangle {
        height: 100%;
        width: actual_proportion * parent.width -  handle.width / 2;
        TouchArea {}
        rect_one
    }

    handle := Rectangle {
        x: r1.width;
        height: 100%;
        width: 8px;
        background: @linear-gradient(0deg, #ddd, #aaa);
    }

    r2 := Rectangle {
        height: 100%;
        width: (1 - actual_proportion) * parent.width - handle.width / 2;
        x: handle.x + handle.width;
        TouchArea {}
        rect_two
    }
}

I seem to have misunderstood the syntax because sixtyfps-viewer complains:

error: Parse error
  --> ./widgets.60:17:17
   |
17 |         rect_one
   |                 ^
error: Parse error
  --> ./widgets.60:32:17
   |
32 |         rect_two
   |                 ^

I don't think @children should be used here because there's only 2 children with this kind of widget, so I declared the child rectangles as properties and that's where the problem is. What should be the right way to achieve this?

[ogoffart]

One cannot have property<Rectangle> or use property as element.

Indeed @children will not work for the reason you say.

We will need to extend the compiler so you can have several @children. Or have some expression like @child(0) and @child(1)
But this is not yet implemented.

[UditDey]

Yeah it would be useful if @children behaved like an indexable array, or atleast an iterable array. For the meantime I'm not gonna make a generalised widget, I'll repeat the code for the 4 panes I'll need

[AlexanderHeim]

For anyone out there looking for a quick implementation of "VerticalSplit" like the horizontal one above, here's an implementation:

VerticalSplit := Rectangle {
    property<float> proportion: 50%;
    property<float> actual_proportion: touch.pressed ? touch.new_proportion : proportion;

    touch := TouchArea {
        property<float> new_proportion: max(0.05, min(0.95, parent.proportion + (mouse_y - pressed_y) / parent.height));
        clicked => {
            parent.proportion = new_proportion;
        }
    }

    r1 := Rectangle {
        width: 100%;
        height: parent.actual_proportion * parent.height - handle.height/2;
        TouchArea {  }
        Rectangle { background: blue; }
    }

    handle := Rectangle {
        y: r1.height;
        height: 10px;
        width: 100%;
    }

    r2 := Rectangle {
        width: 100%;
        height: (1 - parent.actual_proportion) * parent.height - handle.height / 2;
        y: handle.y + handle.height;
        TouchArea {}
        Rectangle { background: red; }
    }
}