How do I set min-sizes in pixels? about split-me HOT 4 OPEN

Hi there,
At the moment split-me only supports percentage sizes (also for min/max), but I think it would be a valuable addition to make it support other units such as px, em, rem.

I'm hoping to get some time to sit down and think the logic through, so that everything is self-consistent even when different units are mixed together.

I'm gonna keep this issue open, and keep you posted when I have some updates.

And of course, if you have the time/will/skills to implement it on your own, feel free to open a pull request!

from split-me.

I might do it when I find time before you @alesgenova, so keep us updated.

from split-me.

I think it would be better to have the top/left values as absolute pixels instead of percentages, but re-doing that is a bit much work IMO. Also, I quite like the idea to not have to recalculate the sizes if you only use percentages. But recalculation is required if one of the provided values are absolute or are not relative to the host.

I've done the basic conversion, but there are some open things needed to be discussed:

In order to let split-me work properly, getComputedStyle is required to calculate the sizes.
This is an expensive task and forces an reflow. It's not noticable in a minimal example, but may get exponentially larger the more instances you use.

Additionally, we now have to calculate the sizes twice, once for an initial paint and an following one that uses the first paint to determine the dimensions of the component host.

Furthermore, when the window is resized, we now also have to re-check the min/max values in order to fix the relative values again.

I didn't bother the touch the resize function as this requires the mouse cursor position, which is not existant on window resize.
I've tried to use forceUpdate in the hope's the top/left values may fix without an call to resize, but sadly no results.
I also tried to use inline styles such as min-width/height and max-width/height, but that just breaks the dividers, so we have to fix the top/left values in order to fix the container.

Regarding the units, I think we don't have to support every single possible unit there is, I'd argue nobody would set centimeters, inches, or points for splitters, as this is more commonly used for print stylesheets.

You may argue about the ch unit, so character-width. In my example, I'm using an instance of monaco on one side of split-me, which is preferably a min-width of 80ch + a fixed pixel width of the minimap. But even then, I'd calculate the 80ch myself and set the resulting pixels directly to split-me.

Here is my commit.
Simply pull my fork, run npm install && npm start and you'll have everything setup to check it out.

from split-me.

I agree with the points you raised, as soon as the size of one of the areas is in absolute units it gets more complicated and expensive.

I'm looking at the current code, and I see that all the slots are children on a display: flex parent. What if we applied flexGrow: 1 to one of the slots, so that it will take up any unused space that will be left over when the sum of the percentage sizes and the absolute size doesn't add up to 100%?

This way we could avoid recalculating the sizes each time the window is resized.

from split-me.