feat: unify component api methods

README.md

@@ -17,7 +17,7 @@
 ##
 
 A zero dependency layout manager based on the layering of split-view components with ReactJS support.
-- View the live demo [here](https://mathuo.github.io/dockview/). 
+- View the live demo [here](https://mathuo.github.io/dockview/).
 - Storybook demo [here](https://mathuo.github.io/dockview/output/storybook-static).
 - Code examples [here](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories).
 - Generated TypeDocs can be found [here](https://mathuo.github.io/dockview/output/docs/index.html).
@@ -86,9 +86,14 @@ Yes but with some extra work. Dockview is written in plain-old JS so you can eit
 [Component Api](https://mathuo.github.io/dockview/output/docs/classes/paneviewapi.html)
 [Panel Api]()
 
+## Serialization / De-serialization
+All view components support the methods `toJSON()`, `fromJSON(...)` and `onDidLayoutChange()`.
+
+See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d).
+
 ## Theming
 
-The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme. 
+The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme.
 
 
 | CSS Property | Description |
@@ -107,7 +112,7 @@ The theme can be customized using the below set of CSS properties. You can find
 | --dv-tabs-and-actions-container-background-color | - |
 | --dv-tabs-container-scrollbar-color | - |
 | --dv-group-view-background-color | - |
-| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) 
+| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss))
 | --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
 | --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
 | --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |

packages/dockview/README.md

@@ -17,7 +17,7 @@
 ##
 
 A zero dependency layout manager based on the layering of split-view components with ReactJS support.
-- View the live demo [here](https://mathuo.github.io/dockview/). 
+- View the live demo [here](https://mathuo.github.io/dockview/).
 - Storybook demo [here](https://mathuo.github.io/dockview/output/storybook-static).
 - Code examples [here](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories).
 - Generated TypeDocs can be found [here](https://mathuo.github.io/dockview/output/docs/index.html).
@@ -86,9 +86,14 @@ Yes but with some extra work. Dockview is written in plain-old JS so you can eit
 [Component Api](https://mathuo.github.io/dockview/output/docs/classes/paneviewapi.html)
 [Panel Api]()
 
+## Serialization / De-serialization
+All view components support the methods `toJSON()`, `fromJSON(...)` and `onDidLayoutChange()`.
+
+See example [here](https://codesandbox.io/s/workspace-saving-example-euo5d).
+
 ## Theming
 
-The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme. 
+The theme can be customized using the below set of CSS properties. You can find the built in themes [here](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss) which could be used as an example to extend upon or build your own theme.
 
 
 | CSS Property | Description |
@@ -107,7 +112,7 @@ The theme can be customized using the below set of CSS properties. You can find
 | --dv-tabs-and-actions-container-background-color | - |
 | --dv-tabs-container-scrollbar-color | - |
 | --dv-group-view-background-color | - |
-| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss)) 
+| **Dockview -> Tabs** (see [dockviewComponent.scss](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/dockview/dockviewComponent.scss))
 | --dv-activegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in the active group |
 | --dv-activegroup-hiddenpanel-tab-background-color | The background color of the tab for the hidden panel/s in the active group |
 | --dv-inactivegroup-visiblepanel-tab-background-color | The background color of the tab for the visible panel in groups other than the active group |

packages/dockview/src/api/component.api.ts

@@ -6,7 +6,6 @@ import {
     AddGroupOptions,
     AddPanelOptions,
     MovementOptions,
-    PanelOptions,
 } from '../dockview/options';
 import { Direction } from '../gridview/baseComponentGridview';
 import {
@@ -31,8 +30,13 @@ import {
 import { Orientation, Sizing } from '../splitview/core/splitview';
 import { ISplitviewPanel } from '../splitview/splitviewPanel';
 import { GroupviewPanel } from '../groupview/groupviewPanel';
+import { Event } from '../events';
 
-export class SplitviewApi {
+export interface CommonApi {
+    readonly onDidLayoutChange: Event<void>;
+}
+
+export class SplitviewApi implements CommonApi {
     get minimumSize() {
         return this.component.minimumSize;
     }
@@ -116,7 +120,7 @@ export class SplitviewApi {
     }
 }
 
-export class PaneviewApi {
+export class PaneviewApi implements CommonApi {
     get width() {
         return this.component.width;
     }
@@ -180,7 +184,7 @@ export class PaneviewApi {
     }
 }
 
-export class GridviewApi {
+export class GridviewApi implements CommonApi {
     get width() {
         return this.component.width;
     }
@@ -209,6 +213,10 @@ export class GridviewApi {
         return this.component.onGridEvent;
     }
 
+    get onDidLayoutChange() {
+        return this.component.onDidLayoutChange;
+    }
+
     get panels() {
         return this.component.groups;
     }
@@ -279,7 +287,7 @@ export class GridviewApi {
     }
 }
 
-export class DockviewApi {
+export class DockviewApi implements CommonApi {
     get width() {
         return this.component.width;
     }

packages/dockview/src/dockview/dockviewComponent.ts

@@ -118,7 +118,6 @@ export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> {
     focus(): void;
     toJSON(): SerializedDockview;
     fromJSON(data: SerializedDockview): void;
-    onDidLayoutChange: Event<void>;
 }
 
 export class DockviewComponent
@@ -149,9 +148,6 @@ export class DockviewComponent
     private _api: DockviewApi;
     private _options: DockviewComponentOptions;
 
-    private _onDidLayoutChange = new Emitter<void>();
-    readonly onDidLayoutChange = this._onDidLayoutChange.event;
-
     get totalPanels(): number {
         return this._panels.size;
     }
@@ -192,37 +188,6 @@ export class DockviewComponent
 
         this._options = options;
 
-        this.addDisposables(
-            (() => {
-                /**
-                 * TODO Fix this relatively ugly 'merge and delay'
-                 */
-                let timer: any;
-
-                return this.onGridEvent((event) => {
-                    if (
-                        [
-                            GroupChangeKind.ADD_GROUP,
-                            GroupChangeKind.REMOVE_GROUP,
-                            GroupChangeKind.ADD_PANEL,
-                            GroupChangeKind.REMOVE_PANEL,
-                            GroupChangeKind.GROUP_ACTIVE,
-                            GroupChangeKind.PANEL_ACTIVE,
-                            GroupChangeKind.LAYOUT,
-                        ].includes(event.kind)
-                    ) {
-                        if (timer) {
-                            clearTimeout(timer);
-                        }
-                        timer = setTimeout(() => {
-                            this._onDidLayoutChange.fire();
-                            clearTimeout(timer);
-                        });
-                    }
-                });
-            })()
-        );
-
         if (!this.options.components) {
             this.options.components = {};
         }

packages/dockview/src/gridview/baseComponentGridview.ts

@@ -56,6 +56,7 @@ export interface IBaseGrid<T extends IGridPanelView> {
     readonly size: number;
     readonly groups: T[];
     readonly onGridEvent: Event<GroupChangeEvent>;
+    readonly onDidLayoutChange: Event<void>;
     getPanel(id: string): T | undefined;
     toJSON(): object;
     fromJSON(data: any): void;
@@ -78,6 +79,9 @@ export abstract class BaseGrid<T extends IGridPanelView>
     protected readonly _onGridEvent = new Emitter<GroupChangeEvent>();
     readonly onGridEvent: Event<GroupChangeEvent> = this._onGridEvent.event;
 
+    private _onDidLayoutChange = new Emitter<void>();
+    readonly onDidLayoutChange = this._onDidLayoutChange.event;
+
     get id() {
         return this._id;
     }
@@ -141,6 +145,37 @@ export abstract class BaseGrid<T extends IGridPanelView>
                 this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT });
             })
         );
+
+        this.addDisposables(
+            (() => {
+                /**
+                 * TODO Fix this relatively ugly 'merge and delay'
+                 */
+                let timer: any;
+
+                return this.onGridEvent((event) => {
+                    if (
+                        [
+                            GroupChangeKind.ADD_GROUP,
+                            GroupChangeKind.REMOVE_GROUP,
+                            GroupChangeKind.ADD_PANEL,
+                            GroupChangeKind.REMOVE_PANEL,
+                            GroupChangeKind.GROUP_ACTIVE,
+                            GroupChangeKind.PANEL_ACTIVE,
+                            GroupChangeKind.LAYOUT,
+                        ].includes(event.kind)
+                    ) {
+                        if (timer) {
+                            clearTimeout(timer);
+                        }
+                        timer = setTimeout(() => {
+                            this._onDidLayoutChange.fire();
+                            clearTimeout(timer);
+                        });
+                    }
+                });
+            })()
+        );
     }
 
     public abstract toJSON(): object;