Merge pull request #119 from mathuo/118-enhance-api

feat: add clear method and fix .orientation setter

packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts

@@ -100,6 +100,10 @@ class ClassUnderTest extends BaseGrid<TestPanel> {
     public toJSON(): object {
         return {};
     }
+
+    public clear(): void {
+        //
+    }
 }
 
 describe('baseComponentGridview', () => {

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

@@ -43,6 +43,7 @@ export interface CommonApi<T = any> {
     layout(width: number, height: number): void;
     fromJSON(data: T): void;
     toJSON(): T;
+    clear(): void;
 }
 
 export class SplitviewApi implements CommonApi<SerializedSplitview> {
@@ -127,6 +128,10 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
     toJSON(): SerializedSplitview {
         return this.component.toJSON();
     }
+
+    clear(): void {
+        this.component.clear();
+    }
 }
 
 export class PaneviewApi implements CommonApi<SerializedPaneview> {
@@ -214,6 +219,10 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
     toJSON(): SerializedPaneview {
         return this.component.toJSON();
     }
+
+    clear(): void {
+        this.component.clear();
+    }
 }
 
 export class GridviewApi implements CommonApi<SerializedGridview> {
@@ -309,6 +318,10 @@ export class GridviewApi implements CommonApi<SerializedGridview> {
     toJSON(): SerializedGridview {
         return this.component.toJSON();
     }
+
+    clear(): void {
+        this.component.clear();
+    }
 }
 
 export class DockviewApi implements CommonApi<SerializedDockview> {
@@ -453,4 +466,8 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
     toJSON(): SerializedDockview {
         return this.component.toJSON();
     }
+
+    clear(): void {
+        this.component.clear();
+    }
 }

packages/dockview/src/dockview/dockviewComponent.ts

@@ -125,7 +125,7 @@ export class DockviewComponent
 {
   private _deserializer: IPanelDeserializer | undefined;
   private _api: DockviewApi;
-  private _options: DockviewComponentOptions;
+  private _options: Exclude<DockviewComponentOptions, 'orientation'>;
 
   private readonly _onTabContextMenu = new Emitter<TabContextMenuEvent>();
   readonly onTabContextMenu: Event<TabContextMenuEvent> =
@@ -237,7 +237,7 @@ export class DockviewComponent
   updateOptions(options: DockviewComponentUpdateOptions): void {
       const hasOrientationChanged =
           typeof options.orientation === 'string' &&
-          this.options.orientation !== options.orientation;
+          this.gridview.orientation !== options.orientation;
 
       this._options = { ...this.options, ...options };
 
@@ -333,25 +333,7 @@ export class DockviewComponent
   }
 
   fromJSON(data: SerializedDockview): void {
-      const groups = Array.from(this._groups.values()).map((_) => _.value);
+      this.clear()
-
-      const hasActiveGroup = !!this.activeGroup;
-      const hasActivePanel = !!this.activePanel
-
-      for (const group of groups) {
-          // remove the group will automatically remove the panels
-          this.removeGroup(group, true);
-      }
-
-      if (hasActiveGroup) {
-        this.doSetGroupActive(undefined);
-      }
-
-      if( hasActivePanel) {
-        this._onDidActivePanelChange.fire(undefined);
-      }
-
-      this.gridview.clear();
 
       if (!this.deserializer) {
           throw new Error('invalid deserializer');
@@ -414,6 +396,28 @@ export class DockviewComponent
       this._onDidLayoutFromJSON.fire();
   }
 
+  clear():void {
+    const groups = Array.from(this._groups.values()).map((_) => _.value);
+
+    const hasActiveGroup = !!this.activeGroup;
+    const hasActivePanel = !!this.activePanel
+
+    for (const group of groups) {
+        // remove the group will automatically remove the panels
+        this.removeGroup(group, true);
+    }
+
+    if (hasActiveGroup) {
+      this.doSetGroupActive(undefined);
+    }
+
+    if( hasActivePanel) {
+      this._onDidActivePanelChange.fire(undefined);
+    }
+
+    this.gridview.clear();
+  }
+
   closeAllGroups(): void {
       for (const entry of this._groups.entries()) {
           const [_, group] = entry;

packages/dockview/src/gridview/baseComponentGridview.ts

@@ -61,6 +61,7 @@ export interface IBaseGrid<T extends IGridPanelView> {
     getPanel(id: string): T | undefined;
     toJSON(): object;
     fromJSON(data: any): void;
+    clear(): void;
     layout(width: number, height: number, force?: boolean): void;
     setVisible(panel: T, visible: boolean): void;
     isVisible(panel: T): boolean;
@@ -173,6 +174,8 @@ export abstract class BaseGrid<T extends IGridPanelView>
 
     public abstract fromJSON(data: any): void;
 
+    public abstract clear(): void;
+
     public setVisible(panel: T, visible: boolean) {
         this.gridview.setViewVisible(getGridLocation(panel.element), visible);
         this._onDidLayoutChange.fire();

packages/dockview/src/gridview/gridviewComponent.ts

@@ -78,7 +78,7 @@ export class GridviewComponent
     extends BaseGrid<GridviewPanel>
     implements IGridviewComponent
 {
-    private _options: GridviewComponentOptions;
+    private _options: Exclude<GridviewComponentOptions, 'orientation'>;
     private _deserializer: IPanelDeserializer | undefined;
 
     private readonly _onDidLayoutfromJSON = new Emitter<void>();
@@ -124,7 +124,7 @@ export class GridviewComponent
     updateOptions(options: Partial<GridviewComponentUpdateOptions>): void {
         const hasOrientationChanged =
             typeof options.orientation === 'string' &&
-            this.options.orientation !== options.orientation;
+            this.gridview.orientation !== options.orientation;
 
         this._options = { ...this.options, ...options };
 
@@ -173,22 +173,10 @@ export class GridviewComponent
     }
 
     public fromJSON(serializedGridview: SerializedGridview) {
+        this.clear();
+
         const { grid, activePanel } = serializedGridview;
 
-        const hasActiveGroup = this.activeGroup;
-
-        const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
-        for (const group of groups) {
-            group.disposable.dispose();
-            this.doRemoveGroup(group.value, { skipActive: true });
-        }
-
-        if (hasActiveGroup) {
-            this.doSetGroupActive(undefined);
-        }
-
-        this.gridview.clear();
-
         const queue: Function[] = [];
 
         this.gridview.deserialize(grid, {
@@ -244,6 +232,22 @@ export class GridviewComponent
         this._onDidLayoutfromJSON.fire();
     }
 
+    clear(): void {
+        const hasActiveGroup = this.activeGroup;
+
+        const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
+        for (const group of groups) {
+            group.disposable.dispose();
+            this.doRemoveGroup(group.value, { skipActive: true });
+        }
+
+        if (hasActiveGroup) {
+            this.doSetGroupActive(undefined);
+        }
+
+        this.gridview.clear();
+    }
+
     movePanel(
         panel: GridviewPanel,
         options: { direction: Direction; reference: string; size?: number }

packages/dockview/src/paneview/paneviewComponent.ts

@@ -113,6 +113,7 @@ export interface IPaneviewComponent extends IDisposable {
     getPanel(id: string): IPaneviewPanel | undefined;
     movePanel(from: number, to: number): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;
+    clear(): void;
 }
 
 export class PaneviewComponent
@@ -343,17 +344,12 @@ export class PaneviewComponent
     }
 
     fromJSON(serializedPaneview: SerializedPaneview): void {
+        this.clear();
+
         const { views, size } = serializedPaneview;
 
         const queue: Function[] = [];
 
-        for (const [_, value] of this._viewDisposables.entries()) {
-            value.dispose();
-        }
-        this._viewDisposables.clear();
-
-        this.paneview.dispose();
-
         this.paneview = new Paneview(this.element, {
             orientation: Orientation.VERTICAL,
             descriptor: {
@@ -437,6 +433,15 @@ export class PaneviewComponent
         this._onDidLayoutfromJSON.fire();
     }
 
+    clear(): void {
+        for (const [_, value] of this._viewDisposables.entries()) {
+            value.dispose();
+        }
+        this._viewDisposables.clear();
+
+        this.paneview.dispose();
+    }
+
     private doAddPanel(panel: PaneFramework) {
         const disposable = panel.onDidDrop((event) => {
             this._onDidDrop.fire(event);

packages/dockview/src/splitview/splitviewComponent.ts

@@ -72,6 +72,7 @@ export interface ISplitviewComponent extends IDisposable {
     removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
     setVisible(panel: ISplitviewPanel, visible: boolean): void;
     movePanel(from: number, to: number): void;
+    clear(): void;
 }
 
 /**
@@ -334,14 +335,9 @@ export class SplitviewComponent
     }
 
     fromJSON(serializedSplitview: SerializedSplitview): void {
-        const { views, orientation, size, activeView } = serializedSplitview;
+        this.clear();
 
-        for (const [_, value] of this._panels.entries()) {
+        const { views, orientation, size, activeView } = serializedSplitview;
-            value.disposable.dispose();
-            value.value.dispose();
-        }
-        this._panels.clear();
-        this.splitview.dispose();
 
         const queue: Function[] = [];
 
@@ -409,6 +405,15 @@ export class SplitviewComponent
         this._onDidLayoutfromJSON.fire();
     }
 
+    clear(): void {
+        for (const [_, value] of this._panels.entries()) {
+            value.disposable.dispose();
+            value.value.dispose();
+        }
+        this._panels.clear();
+        this.splitview.dispose();
+    }
+
     dispose(): void {
         for (const [_, value] of this._panels.entries()) {
             value.disposable.dispose();