Linking the states of nested dock instances

[zhengminhui]

Describe the bug
When we dynamically add a panel inside a nested dockview, it cannot save to local storage.

To Reproduce
Please check this codesandbox.
https://codesandbox.io/p/sandbox/save-state-with-nested-dock-ggqrlm?file=%2Fsrc%2Fapp.tsx%3A46%2C11-46%2C33

Steps to reproduce the behavior:

1. First reset the layout to default status.
2. Click on 'Add nested panel'
3. Click on 'add a sub nested panel' inside the nested panel
4. Click on 'Save layout'.
5. Refresh page.

Expected behavior
'sub-panel-in-the-nested-did-not-save' should be created after refreshing page.

Screenshots

Could you take a look at this issue, please? Thanks.

[zhengminhui]

I guess the problem is because when we create a nested dockview, it will create a new API instance. However when we save the state by calling toJson we just handled the parent/container API. But I'm not sure how to merge/combine these apis into one and save to localstorage.

[mathuo]

By creating another dock within the panel of an existing dock you are creating a new instance of the dock component. They are not linked internally in any way and do not know about each other.

Currently it is expected that the if the user creates a nested dock they save that nested dock state seperately and use their application state (perhaps associate that nested layout with the id of the panel it's nested within) to link everything back together. Think of the nested dock JSON as just some application state you would associate with that panel within your application.

I will leave the issue open for discussion though.

[zhengminhui]

Thanks for your confirmation. Now I save and re-read them separately under different localstorage keys and it works fine.
The reason I asked at first is because I'm not sure if the API instances are isolated or like a tree structure.

Thank you very much and I really like your library.