Not getting the update list of panels when calling api.panels

[DanielGarciaGuillen]

Describe the bug
Hello, thanks for this package!

I may be doing something wrong, but it seems that api.panels do not return the updated value.
As you can see on the code-sandbox, we set the API to a value on react context so other components can use it, and when trying to console.log(api.panels), the API is not returning the updated value.

https://codesandbox.io/s/green-tree-2xzdl7?file=/src/app.tsx

Steps to reproduce the behavior:

1. Go to the code sandbox
2. Click on the button to add a panel
3. Check the log for api.panels
4. See that is not updating dinamically

Expected behavior
api.panels return the correct information

[mathuo]

Thanks for the description.

Take a read of the below and let me know what you think. I believe the issue here is just a little confusion in terms of how the api object works.

I think one important note is that the api object is not React state. In fact, dockview is mostly written in pure TypeScript for maximum performance and it's internal state has no tie to React. The api object returned is a once-created (singleton) object that can be referenced for the duration of the components lifecycle and there are a number of events attached to the api to listen to state changes such as adding and removing panels.

From the onReady event you can access and maintain a reference to the api from where you can call methods such as api.totalPanels. I've annoted some explainations below based on this screenshot.

Line 67
The api reference never changes so this useEffect block will only ever run once after you have called setApi using your custom React context.

Line 73
The line console.log(api ? api.panels : undefined) will output the list of panels but in your example this line will only be called if the React component re-renders and adding a new panel here won't re-render the DockviewDemo2 component since that component is something defined only in this sandbox and not within the dockview library.

As an example I added another button Call api.panels where you can the list of panels being displayed in the console in this forked sandbox.

If what you wanted to do was listen to the number of panels changing there is an event for this on the api object. The full list of events are listed here but this could be achieved through a useEffect hook similar to this which I have included in the sandbox referenced above and shown below.

[benatross]

Is there a similar function for subscribing to changes to a panel's parameters? I have a custom tab component that relies on the params object of IDockviewPanelHeaderProps, but after calling api.updateParameters on the corresponding panel, my tab component isn't being rerendered.

[DanielGarciaGuillen]

Thanks a lot for the information, I really appreciate!