feat: api improvements

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

@@ -22,7 +22,7 @@ describe('component.api', () => {
                 'onDidLayoutChange',
                 'onDidAddView',
                 'onDidRemoveView',
-                'getPanels',
+                'panels',
                 'focus',
                 'resizeToFit',
                 'toJSON',
@@ -54,7 +54,7 @@ describe('component.api', () => {
                 'onDidLayoutChange',
                 'onDidAddView',
                 'onDidRemoveView',
-                'getPanels',
+                'panels',
                 'focus',
                 'resizeToFit',
                 'toJSON',

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

@@ -1,4 +1,5 @@
 import {
+    DockviewDropEvent,
     IDockviewComponent,
     SerializedDockview,
 } from '../dockview/dockviewComponent';
@@ -71,6 +72,10 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
         return this.component.orientation;
     }
 
+    get panels(): ISplitviewPanel[] {
+        return this.component.panels;
+    }
+
     get onDidLayoutFromJSON(): Event<void> {
         return this.component.onDidLayoutFromJSON;
     }
@@ -101,10 +106,6 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
         this.component.setVisible(panel, isVisible);
     }
 
-    getPanels(): ISplitviewPanel[] {
-        return this.component.getPanels();
-    }
-
     focus(): void {
         this.component.focus();
     }
@@ -159,6 +160,10 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
         return this.component.width;
     }
 
+    get panels(): IPaneviewPanel[] {
+        return this.component.panels;
+    }
+
     get onDidLayoutChange(): Event<void> {
         return this.component.onDidLayoutChange;
     }
@@ -192,8 +197,8 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
 
     constructor(private readonly component: IPaneviewComponent) {}
 
-    getPanels(): IPaneviewPanel[] {
+    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel {
-        return this.component.getPanels();
+        return this.component.addPanel(options);
     }
 
     removePanel(panel: IPaneviewPanel): void {
@@ -216,10 +221,6 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
         this.component.layout(width, height);
     }
 
-    addPanel(options: AddPaneviewComponentOptions): void {
-        this.component.addPanel(options);
-    }
-
     resizeToFit(): void {
         this.component.resizeToFit();
     }
@@ -409,6 +410,10 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         return this.component.onDidLayoutChange;
     }
 
+    get onDidDrop(): Event<DockviewDropEvent> {
+        return this.component.onDidDrop;
+    }
+
     get panels(): IGroupPanel[] {
         return this.component.panels;
     }

packages/dockview/src/api/groupPanelApi.ts

@@ -16,8 +16,7 @@ export interface SuppressClosableEvent {
  * omit visibility modifiers since the visibility of a single group doesn't make sense
  * because it belongs to a groupview
  */
-export interface DockviewPanelApi
+export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible'> {
-    extends Omit<GridviewPanelApi, 'setVisible' | 'visible'> {
     readonly group: GroupviewPanel | undefined;
     readonly isGroupActive: boolean;
     readonly title: string;

packages/dockview/src/paneview/draggablePaneviewPanel.ts

@@ -115,10 +115,10 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
             return;
         }
 
-        const allPanels = containerApi.getPanels();
+        const allPanels = containerApi.panels;
 
         const fromIndex = allPanels.indexOf(existingPanel);
-        let toIndex = containerApi.getPanels().indexOf(this);
+        let toIndex = containerApi.panels.indexOf(this);
 
         if (
             event.position === Position.Left ||

packages/dockview/src/paneview/paneviewComponent.ts

@@ -98,6 +98,7 @@ export interface IPaneviewComponent extends IDisposable {
     readonly height: number;
     readonly minimumSize: number;
     readonly maximumSize: number;
+    readonly panels: IPaneviewPanel[];
     readonly onDidAddView: Event<PaneviewPanel>;
     readonly onDidRemoveView: Event<PaneviewPanel>;
     readonly onDidDrop: Event<PaneviewDropEvent2>;
@@ -109,7 +110,6 @@ export interface IPaneviewComponent extends IDisposable {
     fromJSON(serializedPaneview: SerializedPaneview): void;
     resizeToFit(): void;
     focus(): void;
-    getPanels(): IPaneviewPanel[];
     removePanel(panel: IPaneviewPanel): void;
     getPanel(id: string): IPaneviewPanel | undefined;
     movePanel(from: number, to: number): void;
@@ -139,6 +139,10 @@ export class PaneviewComponent
     private readonly _onDidRemoveView = new Emitter<PaneviewPanel>();
     readonly onDidRemoveView = this._onDidRemoveView.event;
 
+    get panels(): PaneviewPanel[] {
+        return this.paneview.getPanes();
+    }
+
     set paneview(value: Paneview) {
         this._paneview = value;
 
@@ -288,12 +292,8 @@ export class PaneviewComponent
         return view;
     }
 
-    getPanels(): PaneviewPanel[] {
-        return this.paneview.getPanes();
-    }
-
     removePanel(panel: PaneviewPanel) {
-        const views = this.getPanels();
+        const views = this.panels;
         const index = views.findIndex((_) => _ === panel);
         this.paneview.removePane(index);
 
@@ -305,7 +305,7 @@ export class PaneviewComponent
     }
 
     getPanel(id: string): PaneviewPanel | undefined {
-        return this.getPanels().find((view) => view.id === id);
+        return this.panels.find((view) => view.id === id);
     }
 
     layout(width: number, height: number): void {

packages/dockview/src/splitview/splitviewComponent.ts

@@ -61,6 +61,7 @@ export interface ISplitviewComponent extends IDisposable {
     readonly onDidAddView: Event<IView>;
     readonly onDidRemoveView: Event<IView>;
     readonly onDidLayoutFromJSON: Event<void>;
+    readonly panels: SplitviewPanel[];
     updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
     addPanel(options: AddSplitviewComponentOptions): void;
     layout(width: number, height: number): void;
@@ -72,7 +73,6 @@ export interface ISplitviewComponent extends IDisposable {
     getPanel(id: string): ISplitviewPanel | undefined;
     setActive(view: ISplitviewPanel, skipFocus?: boolean): void;
     removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
-    getPanels(): SplitviewPanel[];
     setVisible(panel: ISplitviewPanel, visible: boolean): void;
     movePanel(from: number, to: number): void;
 }
@@ -87,7 +87,7 @@ export class SplitviewComponent
     private _disposable = new MutableDisposable();
     private _splitview!: Splitview;
     private _activePanel: SplitviewPanel | undefined;
-    private panels = new Map<string, IValueDisposable<SplitviewPanel>>();
+    private _panels = new Map<string, IValueDisposable<SplitviewPanel>>();
     private _options: SplitviewComponentOptions;
 
     private readonly _onDidLayoutfromJSON = new Emitter<void>();
@@ -102,6 +102,10 @@ export class SplitviewComponent
     private readonly _onDidLayoutChange = new Emitter<void>();
     readonly onDidLayoutChange: Event<void> = this._onDidLayoutChange.event;
 
+    get panels(): SplitviewPanel[] {
+        return this.splitview.getViews();
+    }
+
     get options() {
         return this._options;
     }
@@ -149,7 +153,7 @@ export class SplitviewComponent
     }
 
     get length() {
-        return this.panels.size;
+        return this._panels.size;
     }
 
     constructor(
@@ -204,14 +208,14 @@ export class SplitviewComponent
     }
 
     setVisible(panel: SplitviewPanel, visible: boolean) {
-        const index = this.getPanels().indexOf(panel);
+        const index = this.panels.indexOf(panel);
         this.splitview.setViewVisible(index, visible);
     }
 
     setActive(view: SplitviewPanel, skipFocus?: boolean) {
         this._activePanel = view;
 
-        this.getPanels()
+        this.panels
             .filter((v) => v !== view)
             .forEach((v) => {
                 v.api._onDidActiveChange.fire({ isActive: false });
@@ -225,12 +229,8 @@ export class SplitviewComponent
         }
     }
 
-    getPanels(): SplitviewPanel[] {
-        return this.splitview.getViews();
-    }
-
     removePanel(panel: SplitviewPanel, sizing?: Sizing) {
-        const disposable = this.panels.get(panel.id);
+        const disposable = this._panels.get(panel.id);
 
         if (!disposable) {
             throw new Error(`unknown splitview panel ${panel.id}`);
@@ -239,23 +239,23 @@ export class SplitviewComponent
         disposable.disposable.dispose();
         disposable.value.dispose();
 
-        this.panels.delete(panel.id);
+        this._panels.delete(panel.id);
 
-        const index = this.getPanels().findIndex((_) => _ === panel);
+        const index = this.panels.findIndex((_) => _ === panel);
         this.splitview.removeView(index, sizing);
 
-        const panels = this.getPanels();
+        const panels = this.panels;
         if (panels.length > 0) {
             this.setActive(panels[panels.length - 1]);
         }
     }
 
     getPanel(id: string): SplitviewPanel | undefined {
-        return this.getPanels().find((view) => view.id === id);
+        return this.panels.find((view) => view.id === id);
     }
 
     addPanel(options: AddSplitviewComponentOptions): void {
-        if (this.panels.has(options.id)) {
+        if (this._panels.has(options.id)) {
             throw new Error(`panel ${options.id} already exists`);
         }
 
@@ -322,7 +322,7 @@ export class SplitviewComponent
             this.setActive(view, true);
         });
 
-        this.panels.set(view.id, { disposable, value: view });
+        this._panels.set(view.id, { disposable, value: view });
     }
 
     toJSON(): SerializedSplitview {
@@ -349,11 +349,11 @@ export class SplitviewComponent
     fromJSON(serializedSplitview: SerializedSplitview): void {
         const { views, orientation, size, activeView } = serializedSplitview;
 
-        for (const [_, value] of this.panels.entries()) {
+        for (const [_, value] of this._panels.entries()) {
             value.disposable.dispose();
             value.value.dispose();
         }
-        this.panels.clear();
+        this._panels.clear();
         this.splitview.dispose();
 
         const queue: Function[] = [];
@@ -366,7 +366,7 @@ export class SplitviewComponent
                 views: views.map((view) => {
                     const data = view.data;
 
-                    if (this.panels.has(data.id)) {
+                    if (this._panels.has(data.id)) {
                         throw new Error(`panel ${data.id} already exists`);
                     }
 
@@ -423,11 +423,11 @@ export class SplitviewComponent
     }
 
     dispose() {
-        for (const [_, value] of this.panels.entries()) {
+        for (const [_, value] of this._panels.entries()) {
             value.disposable.dispose();
             value.value.dispose();
         }
-        this.panels.clear();
+        this._panels.clear();
 
         this.splitview.dispose();