New component planned : EdgeSplit

[5argon]

An in-dev component (currently) called SafePosition (#35) can control anchoredPosition that it will move perpendicularly from the edge if its width cause it to overlap with non-safe area or any cutouts.

But there are some design that you would rather move left or right (parallel, not perpendicular) along the edge to resolve cutout problems. For example one common desire is to fit a clock or something on the hole on the corner of iPhoneX, not by moving down from the hole leaving it empty. But on S10+, you want to move the clock a bit left.

But the way of moving it depens on device. If we design a rect which compress itself to the width of "hole" (like the corner of iPhone X) what would happen if it is instead on S10+ where essentially there is no hole to fit? How to design a component so that it works for all devices? As opposed to having to attach HoleFit to not move but scale the size to fit on iPhone, and MoveParallel to not scale but move to the left (or right) on S10+?

I have decided on a design according to this fact :

• Cutouts cannot be on short edge. (Google defined)
• There can only be one cutout per edge. (Google defined)

Therefore there are 3 possible case of spaces along the edge :

1. [Space][**Notch**][Space] (iPhoneX, Note 10+, many other phones)
2. [**Notch**][Space] (No one put notch at left side yet?)
3. [Space][**Notch**] (S10+)

So if we think like this :

1. [Space1][**Notch**][Space2]
2. [**Notch**][Space1][Space2]
3. [Space1][Space2][**Notch**]

i.e. even with 1 space, we treat it like 2 spaces joining together. Then it is possible to design a component which controls 2 spaces and join/split them. Therefore a name is currently called EdgeSplit because you select an edge and specify 2 children RectTransform, then it will try to split or join them.

When joined, there will be some settings (not designed yet) to say which one got more or less space. Possibly by the built in LayoutElement where you can give them min size then we allocate remaining spaces in some way. When split, the width will be fully stretched along the edge for both.

Unlike SafePosition where it partly works with 2019.1 (always move down equal to safe area, don't care about cutouts but they should be inside the safe area) this one requries cutouts API and will do nothing at all on 2019.1