Feature: flag to hide empty tabsets but not delete them

[PimpMX]

Hi, we're currently developing a product based on the FlexLayout and we have a specific use case where we either have to be able to add new tabsets (currently there is no action that supports this) or be able to define a layout which contains empty tabsets, which serve the purpose of being placeholders for future insertion of tabs through actions.

This serves the purpose of being able to programatically open tabs (in our placeholder tabsets) left and right of our main tabset and have them appear only when they're not empty. In our case we have a pdf editor in the center tabset of the row node, and we'd like to be able to split documents or open other documents left and right of our main editor tab and also be able to apply application state (stored in the url query string, we store which documents are open and how the editors are aligned in the layout) at startup time or when receiving a message from our MQTT broker

To demonstrate what we're looking for and for further discussion, i've created this fork which introduces our desired functionality

Fork-Changes

• Introduced a new boolean global var "tabSetEnableHideWhenEmpty" (tabSetEnableDeleteWhenEmpty's little brother)
• Introduced a new optional boolean attribute on ITabSetAttribute called "enableHideWhenEmpty" which inherits from "tabSetEnableHideWhenEmpty"
• Added a new layout called "ecmind" which has a row node which contains three tabsets, the left and right one are empty and the middle one is filled. The layout has "tabSetEnableHideWhenEmpty" set to true
• Adjusted the Row.tsx so that tabsets that are empty do not get rendered when they have no children and "enableHideWhenEmpty" is set to true
• When starting the demo and selecting the "ecmind" layout two additional buttons appear next to "Add Active", "Add to left empty Tabset" and "Add to right empty Tabset" clicking these inserts a tab into the empty tabsets, demonstrating that the tabsets appear once they're not empty anymore

[dheerajawale-svg]

When will this PR be merged?

[powerdragonfire]

When will this PR be merged?

Needed this feature, feel free to use flexycakes until author merges: https://github.com/powerdragonfire/flexycakes

[PimpMX]

@dheerajawale-svg @powerdragonfire I found some issues with my solution. With this state of the PR, when you have the demo layout and only add one tabset on the left or right so that one tabset is still hidden, the draggable divider behaves very weirdly. It only moves in one direction and not the amount you drag. One more issue is that if a rownode is filled only with hidden tabsets a divider is rendered even though the entire rownode is empty, causing them to be rendered at the sides where no bordering rownode/tabset is present, at least no visible ones

I resolved this issue in the fork we're using internally, I will add this fix to this PR tomorrow

Additionally, I'm going to be working on the drag and drop events actually moving dropped nodes into hidden empty neighbours if there is a neighbour tabset node that is hidden. Currently, if you drag n drop a node at the border to a currently hidden tabset it is not inserted into the hidden one, making it visible. The FlexLayout instead creates a new tabset

[PimpMX]

Previous behaviour of the splitter when only one tabset is added left or right in the ECMind layout in the Demo

This is now fixed, the next step would be to work on the drag and drop to insert into hidden tabsets. The FlexLayout currently behaves weirdly sometimes when dropping a tabset at a border to a hidden tabset. Additionally, the layout breaks then sometimes and the newly dropped tab doesn't have a draggable splitter anymore

[powerdragonfire]

@PimpMX I added this to mine: https://github.com/powerdragonfire/flexycakes

Did see this issue, possible to check the commit for steps you took to resolve? Even better to add PR if at all possible. Thanks so much for this feature - think it'll be hugely popular.

I'll do testing on my part

[PimpMX]

@PimpMX I added this to mine: https://github.com/powerdragonfire/flexycakes

Did see this issue, possible to check the commit for steps you took to resolve? Even better to add PR if at all possible. Thanks so much for this feature - think it'll be hugely popular.

I'll do testing on my part

Already added the fix to this draft in 594500a so feel free to merge it to your fork