Merge pull request #92 from mathuo/90-api-enhancements

feat: api improvements

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

@@ -24,7 +24,6 @@ describe('component.api', () => {
                 'onDidRemoveView',
                 'panels',
                 'focus',
-                'resizeToFit',
                 'toJSON',
             ];
 
@@ -54,9 +53,8 @@ describe('component.api', () => {
                 'onDidLayoutChange',
                 'onDidAddView',
                 'onDidRemoveView',
-                'getPanels',
+                'panels',
                 'focus',
-                'resizeToFit',
                 'toJSON',
             ];
 
@@ -88,7 +86,6 @@ describe('component.api', () => {
                 'onDidLayoutChange',
                 'orientation',
                 'focus',
-                'resizeToFit',
                 'toJSON',
                 'onDidActiveGroupChange',
                 'onDidAddGroup',
@@ -130,7 +127,6 @@ describe('component.api', () => {
                 'activePanel',
                 'focus',
                 'closeAllGroups',
-                'resizeToFit',
                 'toJSON',
                 'onDidActiveGroupChange',
                 'onDidAddGroup',

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

@@ -1,4 +1,5 @@
 import {
+    DockviewDropEvent,
     IDockviewComponent,
     SerializedDockview,
 } from '../dockview/dockviewComponent';
@@ -40,9 +41,7 @@ export interface CommonApi<T = any> {
     readonly onDidLayoutFromJSON: Event<void>;
     focus(): void;
     layout(width: number, height: number): void;
-    resizeToFit(): void;
     fromJSON(data: T): void;
-
     toJSON(): T;
 }
 
@@ -71,6 +70,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 +104,6 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
         this.component.setVisible(panel, isVisible);
     }
 
-    getPanels(): ISplitviewPanel[] {
-        return this.component.panels;
-    }
-
     focus(): void {
         this.component.focus();
     }
@@ -125,10 +124,6 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
         return this.component.addPanel(options);
     }
 
-    resizeToFit(): void {
-        this.component.resizeToFit();
-    }
-
     movePanel(from: number, to: number): void {
         this.component.movePanel(from, to);
     }
@@ -159,6 +154,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,10 +191,6 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
 
     constructor(private readonly component: IPaneviewComponent) {}
 
-    getPanels(): IPaneviewPanel[] {
-        return this.component.getPanels();
-    }
-
     removePanel(panel: IPaneviewPanel): void {
         this.component.removePanel(panel);
     }
@@ -220,10 +215,6 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
         return this.component.addPanel(options);
     }
 
-    resizeToFit(): void {
-        this.component.resizeToFit();
-    }
-
     fromJSON(data: SerializedPaneview): void {
         this.component.fromJSON(data);
     }
@@ -315,10 +306,6 @@ export class GridviewApi implements CommonApi<SerializedGridview> {
         this.component.movePanel(panel, options);
     }
 
-    resizeToFit(): void {
-        this.component.resizeToFit();
-    }
-
     getPanel(id: string): IGridviewPanel | undefined {
         return this.component.getPanel(id);
     }
@@ -409,6 +396,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;
     }
@@ -471,10 +462,6 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         this.component.removeGroup(<GroupviewPanel>group);
     }
 
-    resizeToFit(): void {
-        return this.component.resizeToFit();
-    }
-
     getGroup(id: string): IGroupviewPanel | undefined {
         return this.component.getPanel(id);
     }

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/gridview/baseComponentGridview.ts

@@ -62,7 +62,6 @@ export interface IBaseGrid<T extends IGridPanelView> {
     toJSON(): object;
     fromJSON(data: any): void;
     layout(width: number, height: number, force?: boolean): void;
-    resizeToFit(): void;
     setVisible(panel: T, visible: boolean): void;
     isVisible(panel: T): boolean;
 }
@@ -299,18 +298,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
         this.gridview.layout(width, height);
     }
 
-    /**
-     * Resize the layout to fit the parent container
-     */
-    public resizeToFit(): void {
-        if (!this.element.parentElement) {
-            return;
-        }
-        const { width, height } =
-            this.element.parentElement.getBoundingClientRect();
-        this.layout(width, height);
-    }
-
     public dispose(): void {
         super.dispose();
 

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>;
@@ -107,9 +108,7 @@ export interface IPaneviewComponent extends IDisposable {
     layout(width: number, height: number): void;
     toJSON(): SerializedPaneview;
     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 +138,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 +291,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 +304,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 {
@@ -316,18 +315,6 @@ export class PaneviewComponent
         this.paneview.layout(size, orthogonalSize);
     }
 
-    /**
-     * Resize the layout to fit the parent container
-     */
-    resizeToFit(): void {
-        if (!this.element.parentElement) {
-            return;
-        }
-        const { width, height } =
-            this.element.parentElement.getBoundingClientRect();
-        this.layout(width, height);
-    }
-
     toJSON(): SerializedPaneview {
         const maximum = (value: number) =>
             value === Number.MAX_SAFE_INTEGER ||

packages/dockview/src/splitview/splitviewComponent.ts

@@ -68,12 +68,10 @@ export interface ISplitviewComponent extends IDisposable {
     onDidLayoutChange: Event<void>;
     toJSON(): SerializedSplitview;
     fromJSON(serializedSplitview: SerializedSplitview): void;
-    resizeToFit(): void;
     focus(): void;
     getPanel(id: string): ISplitviewPanel | undefined;
     setActive(view: ISplitviewPanel, skipFocus?: boolean): void;
     removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
-
     setVisible(panel: ISplitviewPanel, visible: boolean): void;
     movePanel(from: number, to: number): void;
 }
@@ -103,14 +101,14 @@ export class SplitviewComponent
     private readonly _onDidLayoutChange = new Emitter<void>();
     readonly onDidLayoutChange: Event<void> = this._onDidLayoutChange.event;
 
-    get options(): SplitviewComponentOptions {
-        return this._options;
-    }
-
     get panels(): SplitviewPanel[] {
         return this.splitview.getViews();
     }
 
+    get options(): SplitviewComponentOptions {
+        return this._options;
+    }
+
     get length(): number {
         return this._panels.size;
     }
@@ -297,18 +295,6 @@ export class SplitviewComponent
         return view;
     }
 
-    /**
-     * Resize the layout to fit the parent container
-     */
-    resizeToFit(): void {
-        if (!this.element.parentElement) {
-            return;
-        }
-        const { width, height } =
-            this.element.parentElement.getBoundingClientRect();
-        this.layout(width, height);
-    }
-
     layout(width: number, height: number): void {
         const [size, orthogonalSize] =
             this.splitview.orientation === Orientation.HORIZONTAL