Allotment.Pane size

[smu-cns]

Hello John,

I am creating an editor and want to add a new Allotment.Pane dynamically from an array. However, doing so will render the new pane with the minimum size only (30px). When I double click on the sash, the pane is resized correctly. Is there any way to force this? I looked into the code and it seems adding a new pane should distribute the panes correctly. Any idea?

Thanks,

Stefan

[johnwalley]

Hi Stefan. This is a perfect use case for Allotment (it's based on VS Code after all) so it definitely should work. However, as you've discovered, it doesn't.

Evenly distributing the space between the panes feels like a good default. It's how the VS Code editor panes behave.

And as you point out, the code does look like it should do this.

I'll aim to fix this next opportunity I have, probably tomorrow. I'll let you know when I publish an updated version.

[smu-cns]

That would be really great. Thank you John!

[johnwalley]

I've published v1.2.1 with a fix. If you could give it a try and let me know how you get on that would be great.

Thanks

[smu-cns]

Yes - adding works as expected. Thank you!

There is an issue now when removing the pane. The space will not get reassigned. The middle pane was removed in the screenshot:

When you remove the view, the space should be redistributed however. In removeView, the last lines are:

if (sizing && sizing.type === "distribute") {
      this.distributeViewSizes();
}

[johnwalley]

I'll have a look at this too. I'm missing test cases for removing panes in the middle so first thing I'll do i add them and see what needs to be done.

[smu-cns]

Thank you again. In 1.2.0 this did not happen reproducible. So somehow the internal state seems to be messed up from the additional layouting.

[johnwalley]

Do you have an example I could look at? I'm struggling to reproduce it in the hastily put together test I've created.

I'm offline for the rest of the day but will take another look tomorrow.

[johnwalley]

I've published a new version with a fix: https://www.npmjs.com/package/allotment/v/1.5.2.

I was failing to maintain the ordering between the React components and the internal view items. Bit of a blind spot made worse by all my test cases never changing the order!

If you could let me know if this fixes your issue when you get the chance that'd be great 🙏 .

[smu-cns]

Thanks for the fast response and the release.
Unfortunately the issue is still there. I tried in my real application and in the sandbox.

[johnwalley]

Could you try 1.6.0? I think I included the wrong build in 1.5.2 😕

[smu-cns]

I tried in my sandbox - Looks good!
Will try it in the app later this day.

Thank you!

[smu-cns]

Hello John - it works like charm!