Panel collapse mode

[bvaughn]

Panels in VS Code can be fully collapsed when shrunk past a certain point.

https://user-images.githubusercontent.com/29597/209335964-d77100b8-8a81-4c21-9b9c-2aa18474076e.mp4

This is an interesting UX that might be worth copying (if it can be done without adding a lot of complexity).

[bvaughn]

PanelGroup works differently than VS Code in a significant way here– resizing one panel doesn't cause others to shrink, in VS Code (unlike in Chrome devtools).

If we move forward with this feature, we'll need to add a constraint that a panel can't be collapsed as a result of resizing another panel– only when it is the thing being resized.

https://user-images.githubusercontent.com/29597/209372424-628b561c-a98f-46cc-a2fe-5f63f16e5e4a.mp4

[JeyRathnam]

Kinda unrelated to the issue, but the attached video files don't work on Firefox I guess, I get "No video with supported format and MIME type found".

[jyash97]

Maybe this is unrelated to this issue, but fixing the size of a specific panel could be a usecase I find appealing. We have a 3 layout panel, and the rightmost panel stays the same width. There's a way to make it work without any change. I find it be more useful if it was a prop based thing per Panel

[bvaughn]

@jyash97 I don't think it would make sense to add a fixed size attribute exactly, because you could accomplish that already either by doing this:

<PanelGroup direction="horizontal">
  <Panel>
    {/*...*/}
  </Panel>
  <ResizeHandle />
  <Panel>
    {/*...*/}
  </Panel>
  <ResizeHandle />
  <Panel defaultSize={30} minSize={30} maxSize={30}>
    {/*...*/}
  </Panel>
</PanelGroup>

Or this:

<PanelGroup direction="horizontal">
  <Panel>
    {/*...*/}
  </Panel>
  <ResizeHandle />
  <Panel>
    {/*...*/}
  </Panel>

  <div className="fixed-size-panel">
    {/*...*/}
  </div>
</PanelGroup>

[jyash97]

Oh okay, just saw maxSize prop. Thanks for the clarification, I knew about the second option and first also makes sense.

Thanks

[bvaughn]

Note to self: This library might be worth looking at how they accomplish their panel snap: https://github.com/orefalo/svelte-splitpanes

It seems like it has a similar UX to this library.

[bvaughn]

After some consideration, I think I'll go with a boolean attribute for this library– maybe collapsible. It can work along with minSize to determine the point past which a panel collapses.

[bvaughn]

v0.0.27