Pane stretchBar limit

[ugokoli]

How can I limit the stretchbar from adjusting the width of surrounding panes beyond a set limit?

For instance, we could have a limit config object set in StrretchBarConfig, as a result, the user cannot adjust the stretchbar and limit the bordered panes beyond 100px in width or height.

const stretchBar: StretchBarConfig = {
	className: 'vertical-stretch-bar',
	style: (isRow) => ({ cursor: isRow ? 'ew-resize' : 'ns-resize' }),
        limit: '100px'
}

[xcfox]

Thank you very much for your feedback.

I do understand your need: we should be able to limit the size of the panes to avoid unattractive layouts that exceed expectations.
But this goes against the flexibility that react-tile-pane is aiming for.

We can certainly restrict the user from dragging the stretchbar to prevent some pane from exceeding the expected size. But we can't restrict the user from dragging any pane to change the layout, and from closing other panes to make existing panes expand. If you do disable these actions, it suggests that perhaps you don't need react-tile-pane.

My suggestion is that you should rethink your layout. For panes that need to be restricted, consider not putting it into a tiling container, like VS Code's sidebar.

[ugokoli]

I would say the limit is kinda already implemented because the panes currently do not decrease after a particular width.

So, what I'm saying is; can we expose that limiting property and make it optional?
This way, it gives the developer more flexibility to customize the experience for their users.

Think about it.

[xcfox]

I think I understand your needs better: It looks like you need a minWidth property.

Whether it's minWidth or maxWidth, there are many ways for users to bypass the stretchBar.

• With minWidth, the user can make a pane smaller in size by doing the following, in addition to dragging the stretchBar:

  • Drag a pane into another smaller pane so that they form multiple tabs, and the dragged pane will be the same size as the latter;
  • use a TileContainer that fills the page, so that if the user reduces the size of the browser window, all panes will be reduced in size;

• With maxWidth, in addition to dragging the stretchBar, the user can also make the pane larger with:

  • Drag the pane to another larger pane;
  • Close other pane(s) in the container;

While we can restrict the user from dragging the stretchBar, we can't restrict the user from dragging the pane itself or from changing the size of the browser.

Do you have a good handle for the behavior of changing the pane size without using stretchBar?