Fixed size panel during container resize

[timdown]

Thank you for this library. It very nearly does everything needed for the application I'm working on. One thing missing is the ability to have a panel whose absolute size does not change when its container is resized. VS Code's side bar is a good example of this, as illustrated in #114. The requirement is:

• The panel should stay the same size when its container is resized. Other panels in the group should adjust to fill the remaining space
• The panel should otherwise be resizable via a resizer in the usual way

I've tried to do this using a ResizeObserver, getSize and resize; it pretty much works but the resizer wobbles a bit as you resize, and it feels dirty given that the library also has a ResizeObserver doing a similar job. I'd make an example on CodeSandbox but its latest version of the library is 0.0.37. This is the kind of thing I tried:

function FixedPanelExample() {
  const fixedPanelRef = useRef<ImperativePanelHandle>(null)
  const fixedPanelPixelWidthRef = useRef(0)

  function updateFixedPanelWidthRef() {
    fixedPanelPixelWidthRef.current =
      fixedPanelRef.current?.getSize('pixels') || 0
  }

  useLayoutEffect(() => {
    updateFixedPanelWidthRef()

    const groupElement = document.querySelector(
      `[data-panel-group-id="fixedPanelGroup"]`
    )
    if (!groupElement) return

    const resizeObserver = new ResizeObserver(() => {
      fixedPanelRef.current?.resize(fixedPanelPixelWidthRef.current, 'pixels')
    })

    resizeObserver.observe(groupElement)

    return () => resizeObserver.unobserve(groupElement)
  }, [])

  return (
    <PanelGroup id="fixedPanelGroup" direction="horizontal">
      <Panel
        id="fixedPanel"
        ref={fixedPanelRef}
        defaultSize={20}
        collapsible
        onResize={updateFixedPanelWidthRef}
      >
        Fixed under container resize
      </Panel>
      <PanelResizeHandle style={{ backgroundColor: 'black', width: '10px' }} />
      <Panel collapsible>Fluid</Panel>
    </PanelGroup>
  )
}

Could a better implementation be added to the library or is there a better way to do this now?

[bvaughn]

This doesn't sound like a use case I want to support. It sounds pretty niche (and I think supporting it in the library would be pretty complicated). Good luck though!

[timdown]

Fair enough. I am surprised it's niche, because it's precisely what VS Code does, but the lack of other requests for this suggests you're right.

[bvaughn]

That's true! First time I've heard of it though. :)

[city17]

I'm looking for the exact same functionality, would be great if this were possible.

[bvaughn]

This is not a feature I have any plans to support. (Not saying it's unreasonable, just that I don't have time/energy to support it.)

[pkelaita]

I'm surprised this is niche as well! I've been looking for a way to do this for a collapsable sidebar. Any chance plans to support this have changed?

[bvaughn]

Nope. Not a use case I’ve ever had.