SplitLayout: non-proportional splitter position

[rolfsmeds]

Describe your motivation

The splitter position is currently always proportional to the width of the SplitLayout, which means that, as the SplitLayout shrinks and grows along the split's axis, both sides of the split scale proportionately.

This is fine in many cases, but sometimes you would need one side to stay unchanged, so that only the other side of the split scales (until the SplitLayout's total size is smaller than the "fixed" side of course).

Describe the solution you'd like

A way to set the splitter position to be "fixed" in relation to one of the sides, e.g. through an API that lets you define either side as the "split position anchor".

(In order to really make this work properly in the Flow component, it would also need a split position setter overload that takes a non-percentual size as argument, e.g. setSplitterPosition("300px")).

Describe alternatives you've considered

No response

Additional context

No response

[JayKayDeon]

Some inspiration: there is a component for the angular framework that offers some advanced options for nesting layouts (https://angular-split.github.io/). Using that split-component you can easily do something like this:

Note: the middle (yellow) area has a minimum width, moving the left section will respect this one...

[DiegoCardoso]

A prototype that implements the feature can be found on this branch: https://github.com/vaadin/web-components/tree/proto/split-layout/split-position-anchor.

The main difference is to set the flex-basis of the element to be used as the anchor with its initial size (width or height) alongside changing its flex-grow and flex-shrink to 0, to make it always have the defined size. That can be verified working in the example below:

split-layout-anchor.mp4

Some findings:

• It needs to be verified that having different flex-grow/flex-shrink values for the elements might cause some undesirable effects. Just as a reference, the angular-split component shared by @JayKayDeon here, defines flex-grow/flex-shrink as 0 for elements with defined size and 1, otherwise)
• As it can be seen in the example if the SplitLayout size shrinks more than the anchor element size, it won't shrink with it, maintaining its size, which will cause content to be hidden by the overflow
• In some scenarios (like the one on the example, with a nested SplitLayout), the calculation of the anchor initial size might be off, so it needs to be defined how to calculate it properly in cases where the size is not explicitly defined.

[tomivirkki]

Hi @JayKayDeon, a somewhat similar-looking layout can be produced with two split layouts using the following setup. Not sure if this fully covers your use case:

<vaadin-split-layout style="width: 900px; height: 400px; outline: 1px solid black">
  <div>Left</div>
  <vaadin-split-layout style="height: 100%">
    <div style="min-width: 300px; background: lightyellow">Middle</div>
    <div style="max-width: 300px">Right</div>
  </vaadin-split-layout>
</vaadin-split-layout>

Kapture.2024-05-21.at.11.57.04.mp4

---

Update by @DiegoCardoso

The same example, but with Flow:

SplitLayout outerLayout = new SplitLayout();
SplitLayout innerLayout = new SplitLayout();
outerLayout.addToPrimary(new Span("left"));
outerLayout.addToSecondary(innerLayout);
innerLayout.addToPrimary(new Span("middle"));
innerLayout.addToSecondary(new Span("right"));

outerLayout.getStyle().setOutline("1px solid black");
outerLayout.setHeight("400px");
outerLayout.setWidth("900px");

innerLayout.setPrimaryStyle("background", "lightyellow");

// This is the important part
innerLayout.setPrimaryStyle("min-width", "300px");
innerLayout.setSecondaryStyle("max-width", "300px");

add(outerLayout);