Library status update: Area size new features 📢

Hi, I’m currently collecting all user scenarios about area size options wanted from opened issues (#4, #55, #82, #97, #101) and pull requests (#32, #36, #115).

Here is my current vision (no code yet, I’m just trying to find a solution satisfying all):

---

New <as-split> properties:

• [unit]="'percent' | 'pixel'" ⬅️ Default to 'percent'.
• [gutterStep]="x" ⬅️ Always in pixels, default to 1.

New <as-split-area> properties:

• [minSize]="y" ⬅️ In selected unit (pixel or percent).
• [maxSize]="z" ⬅️ In selected unit (pixel or percent).
• [lockSize]="true" ⬅️ Shortcut for minSize=maxSize=size.

---

PERCENT MODE Works as today (total sizes should equal 100 else each size equal 100/nbArea):

<as-split unit="percent">
	<as-split-area [size]="30"></as-split-area>
	<as-split-area [size]="40"></as-split-area>
	<as-split-area [size]="30"></as-split-area>
</as-split>

PIXEL MODE In this new mode, a wildcard size area is mandatory (and this area can’t be set to [visible]="false"). Container size can change, pixel values stays the same, wildcard area grow/shrink.

<as-split unit="pixel">
	<as-split-area [size]="200"></as-split-area>
	<as-split-area [size]="'*'"></as-split-area>
	<as-split-area [size]="280"></as-split-area>
</as-split>

---

Why doing this: Because like this, even when container size changes, without window event listener (doing this would be wrong because we can’t presume container is full window, changes could come from layout changes,…), area sizes stays consistent:

• if PERCENT MODE -> Ok no problem, easy for css: flex: 0 0 calc(X% - Ypx);
• if PIXEL MODE -> Wildcard area adapt itself thanks to css flex: 1 1 auto; The same happens if we change direction, it works smoothly!

Mixing pixels and percentages would be more complicated with some edge corner cases… Do you see a real world scenario where mixing percent & pixel for [size]/[minSize]/[maxSize] has an interest?

Things to clarify:

In pixel scenario, what happens:

• When container <as-split> size go under 480px?
• What do you expect as sended size values on (dragStart)/(dragEnd)/… events and dragProgress$ observable? percent, pixel? 344/'*'/280?

I’m waiting for your feedbacks! 😉 I will work on it soon.

[bertrandg]

@BlindDespair @CheNMorD @HugzM New version 3.0.0 just been released! 😉

[BlindDespair]

Hello @bertrandg , I also have a question about release date, do you plan to release v3 any time soon? It doesn’t need to be an exact date, it will just help me plan my work, because my team seems to vote toward this library (if it’s not going to be soon, then we’ll go for v2). Thank you.