Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How do I set min-sizes in pixels? #9

Open
MarcSkovMadsen opened this issue Aug 2, 2020 · 4 comments
Open

How do I set min-sizes in pixels? #9

MarcSkovMadsen opened this issue Aug 2, 2020 · 4 comments
Labels
enhancement New feature or request

Comments

@MarcSkovMadsen
Copy link

MarcSkovMadsen commented Aug 2, 2020 •
edited
Loading

Hi @alesgenova

split-me works really well. Thanks for sharing.

Just a question: How would I set min-sizes in pixels? In my use case (proxy example below) I need the left sidebar to be minimum 200px wide. Is that possible and how?

image

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Split Me Example</title>
    <script src="https://unpkg.com/split-me/dist/split-me.js"></script>
    <style>
        body {
            margin: 0px;
            width: 100vw;
            min-height: 100vh;
        }
        .dark {
            background: black;
            color: white;
        }
        .fill {
            min-height: 100vh;
            width: 100%;
        }
        .red {
            background: red;
        }
        .blue {
            background: blue;
        }
        </style>
    </head>
  <body>
    <split-me n="2" sizes="0.2, 0.8" min-sizes="0.1, 0.0">
        <div slot="0" class="fill dark"></div>
        <div slot="1" class="fill"></div>
      </split-me>
      <style>
        :root split-me {
            --divider-thickness: 8px; /* Thickness of the divider */
            --divider-color: lightgray; /* Background color of the divider */
            --divider-shadow: none; /* Shadow of the divider */
            --divider-image-h: url('https://raw.githubusercontent.com/MarcSkovMadsen/awesome-panel-extensions/master/assets/images/three_dots_vertical_5_18.png'); /* Background image of the divider when d="horizontal" */
            --divider-image-v: url('https://raw.githubusercontent.com/MarcSkovMadsen/awesome-panel-extensions/master/assets/images/three_dots_horizontal_5_18.png'); /* Background image of the divider when d="horizontal" */
        }
      </style>
  </body>

</html>
@alesgenova
Copy link
Owner

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!

@alesgenova alesgenova added the enhancement New feature or request label Aug 5, 2020
@max-scopp
Copy link
Contributor

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

@max-scopp
Copy link
Contributor

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.

@alesgenova
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@max-scopp @alesgenova @MarcSkovMadsen