Builtin nested layouts

[ryanhamilton]

Previous users have requested nested tabs as shown below:

Requests:
#426
#190
#157

Currently a dev has to:

1. Created nested FlexLayouts.
2. Add their own nessted component.
3. When that nested component is made, set it's factory to the same factory as parent.
4. Override onTabDrag at every level, to handle dropping in a component to any level.

Proposal:
Allow everyone to create nested layouts seamlessly.
Conceptually a nested layout can be considered as not existing for most use cases.
If you have [a ,[b, c] ] there doesn't have to be a need for most devs to know that b/c are nested.

The framework would
a) Provide a nestedTab as part of it's factory before calling the user defined factory.
b) For all other calls, behave as if the nesting doesn't exist.

Example Image:

Another alternative from a similar layout framework is shown below:

Notice it:

1. Allows grouping tabs and adds a "grouped" tab bar as well as individual tabs.
2. Dragging that "grouped" bar onto an existing tab
3. Creates a new nested tab. To be nice we would be able to add a name to that nested tab.
   But the important part is that the user can created nested tab, without the factory or developer having to do much.

[ryanhamilton]

I experimented with getting this to work for the demo Sublayout using onTabDrag.

Allowing drop ins from the top level to a sublevel is easy, simply check if we are dropping into a "sub" pane and if so add it there. Two problems:

1. Finding the exact rectangle to highlight and drop within would be nicer than generically dropping into topmost part of child.
2. Allowing users to drag back out is very hard. The onTabDrag is only called within the child for windows within itself. No way to see that it's trying to break out.

    onTabDrag = (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation, refresh: () => void) => {
        const tabStorageImpl = over.getExtraData().tabStorage_onTabDrag as ILayoutProps['onTabDrag']
        if (tabStorageImpl) {
            return tabStorageImpl(dragging, over, x, y, location, refresh)
        }

        if(over.getExtraData().model) { //     
            var model:Model = over.getExtraData().model;
            const callback = (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => {
                model.doAction(Actions.addNode(dragging, model.getFirstTabSet().getId(), DockLocation.CENTER, -1));
            };
            return { x: 0, y: 0, width: 55, height: 55, callback: callback, cursor: 'copy'
            };
        }   
}

[ryanhamilton]

I've now got it moving items back from child but I think that's as far as I can take this without advice:
https://github.com/caplin/FlexLayout/pull/437/files