Affect which panels resize when window resizes

[leobudima]

First of all, thanks so much for an amazing library - was very happy to find it and the feature set and implementation is excellent.

One last challenge I have is that I have a left and a right sidebar, with main content being in the center. If I increase the window size by dragging it to the right, I would want the center panel to stretch, but sidebars to remain at their preferredSize.

By default, all panels will stretch proportionally, and when I set the proportionalLayout to false, only the right sidebar resizes :)

Any hint as to how I can affect this behaviour?

Thanks!

[johnwalley]

Hi @leobudima. Thanks for the feedback.

I can't test the behaviour you see at the moment (not at a computer) but it sounds very believable (i've not explicitly tried to handle it so it doesn't surprise me).

The underlying VS Code implementation has a concept of low and high priority panes which affects how space gets apportioned when the component is resized. I think this should do what we want, so it would become a question of how to expose this functionality via the React components.

Off the top of my head it could either be:

• expose lowPriority and highPriority as Pane props
• piggy-back off the preferredSize property, i.e. if you set preferredSize then internally they get flagged as the correct priority

We can track progress in this ticket.

I'll start by updating the Advanced VS Code story to use left and right sidebars (much like the real VS Code).

[johnwalley]

I've updated the story.

The sidebars and central content all resize proportionally as you described. I'll write the new code when I next get the chance.

[leobudima]

Thanks for looking into this, @johnwalley !

I think both approaches are good (new priority flag, or preferredSize), so whatever is easier to implement. If it helps at all:

• preferredSize affecting this behaviour makes sense since it would be actually keeping the "preferred size" this way

• but having a new property allows for additional flexibility, if you want for preferredSize to keep doing only what it's doing now and not be included in this case as well

I guess if concept of priority was needed in VSC, it's likely that other cases exist which might benefit from this approach, that you might like to cover in the future, so potentially another point for this approach.

Cheers!

[johnwalley]

Hi @leobudima. I've created #267 which implements a new priority prop for panes. It needs some testing but it looks promising so far. The PR includes an updated advanced story which gives the sidebars low priority and the content between them high priority. This should mean that the content resizes first (until it reaches its minimum size).

[johnwalley]

You know what, let's get this out there and see what people think. I've released this as v1.13.0.

[leobudima]

Hi @johnwalley, thanks so much for you effort on this - I updated the release version and tested the new prop - added "LOW" to sidebars, "HIGH" to the center content pane, and set the proportionalLayout prop to false - works flawlessly and behaves exactly as desireable in my case! Thanks again so much - I see that the implementation wasn't that small and simple.