feat: simplify public api

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

@@ -33,16 +33,20 @@ import { GroupviewPanel, IGroupviewPanel } from '../groupview/groupviewPanel';
 import { Emitter, Event } from '../events';
 import { PaneviewDropEvent } from '../react';
 
-export interface CommonApi {
+export interface CommonApi<T = any> {
     readonly height: number;
     readonly width: number;
     readonly onDidLayoutChange: Event<void>;
+    readonly onDidLayoutFromJSON: Event<void>;
     focus(): void;
     layout(width: number, height: number): void;
     resizeToFit(): void;
+    fromJSON(data: T): void;
+
+    toJSON(): T;
 }
 
-export class SplitviewApi implements CommonApi {
+export class SplitviewApi implements CommonApi<SerializedSplitview> {
     get minimumSize(): number {
         return this.component.minimumSize;
     }
@@ -67,6 +71,10 @@ export class SplitviewApi implements CommonApi {
         return this.component.orientation;
     }
 
+    get onDidLayoutFromJSON(): Event<void> {
+        return this.component.onDidLayoutFromJSON;
+    }
+
     get onDidLayoutChange(): Event<void> {
         return this.component.onDidLayoutChange;
     }
@@ -125,8 +133,8 @@ export class SplitviewApi implements CommonApi {
         this.component.movePanel(from, to);
     }
 
-    fromJSON(data: SerializedSplitview, deferComponentLayout?: boolean): void {
+    fromJSON(data: SerializedSplitview): void {
-        this.component.fromJSON(data, deferComponentLayout);
+        this.component.fromJSON(data);
     }
 
     toJSON(): SerializedSplitview {
@@ -134,7 +142,7 @@ export class SplitviewApi implements CommonApi {
     }
 }
 
-export class PaneviewApi implements CommonApi {
+export class PaneviewApi implements CommonApi<SerializedPaneview> {
     get minimumSize(): number {
         return this.component.minimumSize;
     }
@@ -155,6 +163,10 @@ export class PaneviewApi implements CommonApi {
         return this.component.onDidLayoutChange;
     }
 
+    get onDidLayoutFromJSON(): Event<void> {
+        return this.component.onDidLayoutFromJSON;
+    }
+
     get onDidAddView(): Event<IPaneviewPanel> {
         return this.component.onDidAddView;
     }
@@ -212,8 +224,8 @@ export class PaneviewApi implements CommonApi {
         this.component.resizeToFit();
     }
 
-    fromJSON(data: SerializedPaneview, deferComponentLayout?: boolean): void {
+    fromJSON(data: SerializedPaneview): void {
-        this.component.fromJSON(data, deferComponentLayout);
+        this.component.fromJSON(data);
     }
 
     toJSON(): SerializedPaneview {
@@ -221,7 +233,7 @@ export class PaneviewApi implements CommonApi {
     }
 }
 
-export class GridviewApi implements CommonApi {
+export class GridviewApi implements CommonApi<SerializedGridview> {
     get minimumHeight(): number {
         return this.component.minimumHeight;
     }
@@ -323,8 +335,8 @@ export class GridviewApi implements CommonApi {
         this.component.setActive(panel);
     }
 
-    fromJSON(data: SerializedGridview, deferComponentLayout?: boolean): void {
+    fromJSON(data: SerializedGridview): void {
-        return this.component.fromJSON(data, deferComponentLayout);
+        return this.component.fromJSON(data);
     }
 
     toJSON(): SerializedGridview {
@@ -332,7 +344,7 @@ export class GridviewApi implements CommonApi {
     }
 }
 
-export class DockviewApi implements CommonApi {
+export class DockviewApi implements CommonApi<SerializedDockview> {
     get width(): number {
         return this.component.width;
     }
@@ -389,7 +401,7 @@ export class DockviewApi implements CommonApi {
         return this.component.onDidRemovePanel;
     }
 
-    get onDidLayoutfromJSON(): Event<void> {
+    get onDidLayoutFromJSON(): Event<void> {
         return this.component.onDidLayoutfromJSON;
     }
 

packages/dockview/src/dockview/dockviewComponent.ts

@@ -416,15 +416,15 @@ export class DockviewComponent
         let referenceGroup: GroupviewPanel | undefined;
 
         if (options.position?.referencePanel) {
-            const referencePanel = this.getGroupPanel(
+          const referencePanel = this.getGroupPanel(
-                options.position.referencePanel
+              options.position.referencePanel
-            );
+          );
 
-            if (!referencePanel) {
+          if (!referencePanel) {
-                throw new Error(
+              throw new Error(
-                    `referencePanel ${options.position.referencePanel} does not exist`
+                  `referencePanel ${options.position.referencePanel} does not exist`
-                );
+              );
-            }
+          }
 
             referenceGroup = this.findGroup(referencePanel);
         } else {

packages/dockview/src/gridview/gridviewComponent.ts

@@ -38,7 +38,6 @@ export interface SerializedGridview {
 }
 
 export interface AddComponentOptions extends BaseComponentOptions {
-    size?: number;
     minimumWidth?: number;
     maximumWidth?: number;
     minimumHeight?: number;
@@ -67,10 +66,7 @@ export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
     toggleVisibility(panel: IGridviewPanel): void;
     focus(): void;
-    fromJSON(
+    fromJSON(serializedGridview: SerializedGridview): void;
-        serializedGridview: SerializedGridview,
-        deferComponentLayout?: boolean
-    ): void;
     toJSON(): SerializedGridview;
     movePanel(
         panel: IGridviewPanel,
@@ -182,10 +178,7 @@ export class GridviewComponent
         this.activeGroup?.focus();
     }
 
-    public fromJSON(
+    public fromJSON(serializedGridview: SerializedGridview) {
-        serializedGridview: SerializedGridview,
-        deferComponentLayout?: boolean
-    ) {
         const { grid, activePanel } = serializedGridview;
 
         const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
@@ -237,13 +230,7 @@ export class GridviewComponent
 
         this.layout(this.width, this.height, true);
 
-        if (deferComponentLayout) {
+        queue.forEach((f) => f());
-            setTimeout(() => {
-                queue.forEach((f) => f());
-            }, 0);
-        } else {
-            queue.forEach((f) => f());
-        }
 
         if (typeof activePanel === 'string') {
             const panel = this.getPanel(activePanel);

packages/dockview/src/panel/types.ts

@@ -35,4 +35,5 @@ export interface BaseComponentOptions {
     params?: Parameters;
     snap?: boolean;
     priority?: LayoutPriority;
+    size?: number;
 }

packages/dockview/src/paneview/paneviewComponent.ts

@@ -102,13 +102,11 @@ export interface IPaneviewComponent extends IDisposable {
     readonly onDidRemoveView: Event<PaneviewPanel>;
     readonly onDidDrop: Event<PaneviewDropEvent2>;
     readonly onDidLayoutChange: Event<void>;
+    readonly onDidLayoutFromJSON: Event<void>;
     addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
     layout(width: number, height: number): void;
     toJSON(): SerializedPaneview;
-    fromJSON(
+    fromJSON(serializedPaneview: SerializedPaneview): void;
-        serializedPaneview: SerializedPaneview,
-        deferComponentLayout?: boolean
-    ): void;
     resizeToFit(): void;
     focus(): void;
     getPanels(): IPaneviewPanel[];
@@ -126,6 +124,9 @@ export class PaneviewComponent
     private _viewDisposables = new Map<string, IDisposable>();
     private _paneview!: Paneview;
 
+    private readonly _onDidLayoutfromJSON = new Emitter<void>();
+    readonly onDidLayoutFromJSON: Event<void> = this._onDidLayoutfromJSON.event;
+
     private readonly _onDidLayoutChange = new Emitter<void>();
     readonly onDidLayoutChange: Event<void> = this._onDidLayoutChange.event;
 
@@ -188,6 +189,7 @@ export class PaneviewComponent
 
         this.addDisposables(
             this._onDidLayoutChange,
+            this._onDidLayoutfromJSON,
             this._onDidDrop,
             this._onDidAddView,
             this._onDidRemoveView
@@ -353,10 +355,7 @@ export class PaneviewComponent
         };
     }
 
-    fromJSON(
+    fromJSON(serializedPaneview: SerializedPaneview): void {
-        serializedPaneview: SerializedPaneview,
-        deferComponentLayout?: boolean
-    ): void {
         const { views, size } = serializedPaneview;
 
         const queue: Function[] = [];
@@ -446,13 +445,9 @@ export class PaneviewComponent
 
         this.layout(this.width, this.height);
 
-        if (deferComponentLayout) {
+        queue.forEach((f) => f());
-            setTimeout(() => {
+
-                queue.forEach((f) => f());
+        this._onDidLayoutfromJSON.fire();
-            }, 0);
-        } else {
-            queue.forEach((f) => f());
-        }
     }
 
     private doAddPanel(panel: PaneFramework) {

packages/dockview/src/splitview/splitviewComponent.ts

@@ -41,7 +41,6 @@ export interface SerializedSplitview {
 }
 
 export interface AddSplitviewComponentOptions extends BaseComponentOptions {
-    size?: number;
     index?: number;
     minimumSize?: number;
     maximumSize?: number;
@@ -61,15 +60,13 @@ export interface ISplitviewComponent extends IDisposable {
     readonly orientation: Orientation;
     readonly onDidAddView: Event<IView>;
     readonly onDidRemoveView: Event<IView>;
+    readonly onDidLayoutFromJSON: Event<void>;
     updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
     addPanel(options: AddSplitviewComponentOptions): void;
     layout(width: number, height: number): void;
     onDidLayoutChange: Event<void>;
     toJSON(): SerializedSplitview;
-    fromJSON(
+    fromJSON(serializedSplitview: SerializedSplitview): void;
-        serializedSplitview: SerializedSplitview,
-        deferComponentLayout?: boolean
-    ): void;
     resizeToFit(): void;
     focus(): void;
     getPanel(id: string): ISplitviewPanel | undefined;
@@ -93,6 +90,9 @@ export class SplitviewComponent
     private panels = new Map<string, IValueDisposable<SplitviewPanel>>();
     private _options: SplitviewComponentOptions;
 
+    private readonly _onDidLayoutfromJSON = new Emitter<void>();
+    readonly onDidLayoutFromJSON: Event<void> = this._onDidLayoutfromJSON.event;
+
     private readonly _onDidAddView = new Emitter<IView>();
     readonly onDidAddView = this._onDidAddView.event;
 
@@ -172,6 +172,7 @@ export class SplitviewComponent
         this.addDisposables(
             this._disposable,
             this._onDidAddView,
+            this._onDidLayoutfromJSON,
             this._onDidRemoveView,
             this._onDidLayoutChange
         );
@@ -345,10 +346,7 @@ export class SplitviewComponent
         };
     }
 
-    fromJSON(
+    fromJSON(serializedSplitview: SerializedSplitview): void {
-        serializedSplitview: SerializedSplitview,
-        deferComponentLayout = false
-    ): void {
         const { views, orientation, size, activeView } = serializedSplitview;
 
         for (const [_, value] of this.panels.entries()) {
@@ -412,13 +410,7 @@ export class SplitviewComponent
 
         this.layout(this.width, this.height);
 
-        if (deferComponentLayout) {
+        queue.forEach((f) => f());
-            setTimeout(() => {
-                queue.forEach((f) => f());
-            }, 0);
-        } else {
-            queue.forEach((f) => f());
-        }
 
         if (typeof activeView === 'string') {
             const panel = this.getPanel(activeView);
@@ -426,6 +418,8 @@ export class SplitviewComponent
                 this.setActive(panel);
             }
         }
+
+        this._onDidLayoutfromJSON.fire();
     }
 
     dispose() {