svecosystem / paneforge

Resizable pane components for Svelte.
https://paneforge.com
MIT License
370 stars 3 forks source link

Allow max/min size in px #11

Closed ghostdevv closed 6 months ago

ghostdevv commented 6 months ago

Describe the feature in detail (code, mocks, or screenshots encouraged)

I wanna use this for a situation with a collapsible sidebar but because the screen size can be any number of things a percentage unit won't work here. Would be awesome to be able to set a %/px max/min size on a pane for this.

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

No response

huntabyte commented 6 months ago

Hey Ghost! This is a duplicate of #9.

TLDR; this is not something on the roadmap due to the complexity it adds and edge case issues that come with it. Rather than being able to keep it simple as it is today where it uses flex and X/100 which adapts to the container, there would have to be resize observers listening to changes for each element, computing and applying those changes in the appropriate order, and validating the logic for not only each panel but also the entire group and any nested/parent groups.

When I saw how much it is requested as a feature to be added to React Resizable Panels my pride caused me to spend a few weeks attempting to make it work elegantly here, but ultimately came to the same conclusion Bryan has. It introduces far too much complexity with inconsistent behaviors when you introduce conditional rendering, nested groups, etc. that I decided it isn't worth supporting first-party the moment.

I'll provide a guide on how it can be accomplished in user-land to cover cases like you have as soon as I have some time, but leveraging a resize observer and handling those calculations to percentages and updating the min/max props is what it will consist of (you may have already thought about accomplishing it this way). You can select all the handles and elements using the data-* attributes to accomplish such!

I'm also open to exposing a callback like onResize where you'd have a reference to the element and it's size so you could prevent further resizing in that direction if it was above or below your pixel thresholds.

mattgi commented 4 months ago

I'm also open to exposing a callback like onResize where you'd have a reference to the element and it's size so you could prevent further resizing in that direction if it was above or below your pixel thresholds.

like an onBeforeResize that fires before the resize occurs that perhaps returns a Boolean to inform the resize if it should continue?