Merge branch 'master' of https://github.com/mathuo/dockview into 84-add-ability-to-have-fixed-panel-with-no-tab-in-dockviewreact

lerna.json

@@ -2,7 +2,7 @@
     "packages": [
         "packages/*"
     ],
-    "version": "1.3.0",
+    "version": "1.3.1",
     "command": {
         "publish": {
             "message": "chore(release): publish %s"

packages/dockview-demo/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview-demo",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

packages/dockview-demo/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dockview-demo",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Demo project for https://github.com/mathuo/dockview",
   "scripts": {
     "build": "npm run build-webpack && npm run build-storybook",
@@ -15,7 +15,7 @@
   "license": "MIT",
   "dependencies": {
     "@mdx-js/react": "^2.1.1",
-    "dockview": "^1.3.0",
+    "dockview": "^1.3.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "recoil": "^0.7.2"

packages/dockview/package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "dockview",
-	"version": "1.3.0",
+	"version": "1.3.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {

packages/dockview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dockview",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

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

@@ -1,4 +1,3 @@
-import { DockviewComponent } from '../..';
 import {
     SplitviewApi,
     PaneviewApi,
@@ -8,6 +7,7 @@ import {
 import { GridviewComponent } from '../../gridview/gridviewComponent';
 import { PaneviewComponent } from '../../paneview/paneviewComponent';
 import { SplitviewComponent } from '../../splitview/splitviewComponent';
+import { DockviewComponent } from '../../dockview/dockviewComponent';
 
 describe('component.api', () => {
     describe('splitview', () => {
@@ -22,9 +22,8 @@ describe('component.api', () => {
                 'onDidLayoutChange',
                 'onDidAddView',
                 'onDidRemoveView',
-                'getPanels',
+                '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.getPanels();
-    }
-
     focus(): void {
         this.component.focus();
     }
@@ -121,12 +120,8 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
         return this.component.layout(width, height);
     }
 
-    addPanel(options: AddSplitviewComponentOptions): void {
+    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel {
-        this.component.addPanel(options);
+        return this.component.addPanel(options);
-    }
-
-    resizeToFit(): void {
-        this.component.resizeToFit();
     }
 
     movePanel(from: number, to: number): void {
@@ -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);
     }
@@ -216,12 +211,8 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
         this.component.layout(width, height);
     }
 
-    addPanel(options: AddPaneviewComponentOptions): void {
+    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel {
-        this.component.addPanel(options);
+        return this.component.addPanel(options);
-    }
-
-    resizeToFit(): void {
-        this.component.resizeToFit();
     }
 
     fromJSON(data: SerializedPaneview): void {
@@ -300,8 +291,8 @@ export class GridviewApi implements CommonApi<SerializedGridview> {
         this.component.layout(width, height, force);
     }
 
-    addPanel(options: AddComponentOptions): void {
+    addPanel(options: AddComponentOptions): IGridviewPanel {
-        this.component.addPanel(options);
+        return this.component.addPanel(options);
     }
 
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void {
@@ -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/dnd/droptarget.scss

@@ -15,26 +15,24 @@
             height: 100%;
             width: 100%;
             background-color: var(--dv-drag-over-background-color);
-
+            transition: top 70ms ease-out,left 70ms ease-out,width 70ms ease-out,height 70ms ease-out,opacity .15s ease-out;
-            transition-duration: 0.15s;
-            transition-timing-function: ease-out;
             will-change: transform;
             pointer-events: none;
 
             &.left {
-              transform: translateX(-25%) scaleX(50%)
+              transform: translateX(-25%) scaleX(0.5)
             }
 
             &.right {
-              transform: translateX(25%) scaleX(50%)
+              transform: translateX(25%) scaleX(0.5)
             }
 
             &.top {
-              transform: translateY(-25%) scaleY(50%);
+              transform: translateY(-25%) scaleY(0.5);
             }
 
             &.bottom {
-              transform: translateY(25%) scaleY(50%);
+              transform: translateY(25%) scaleY(0.5);
             }
 
             &.small-top {

packages/dockview/src/dockview/options.ts

@@ -54,7 +54,6 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     watermarkFrameworkComponent?: any;
     frameworkComponentFactory?: GroupPanelFrameworkComponentFactory;
     tabHeight?: number;
-    debug?: boolean;
     orientation?: Orientation;
     styles?: ISplitviewStyles;
     showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean;

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

@@ -44,7 +44,7 @@ export interface AddComponentOptions extends BaseComponentOptions {
     maximumHeight?: number;
     position?: {
         direction: Direction;
-        reference: string;
+        referencePanel: string;
     };
     location?: number[];
 }
@@ -62,7 +62,7 @@ export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
     readonly orientation: Orientation;
     readonly onDidLayoutFromJSON: Event<void>;
     updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
-    addPanel(options: AddComponentOptions): void;
+    addPanel(options: AddComponentOptions): IGridviewPanel;
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
     toggleVisibility(panel: IGridviewPanel): void;
     focus(): void;
@@ -273,17 +273,17 @@ export class GridviewComponent
         this.doAddGroup(removedPanel, relativeLocation, options.size);
     }
 
-    public addPanel(options: AddComponentOptions): void {
+    public addPanel(options: AddComponentOptions): IGridviewPanel {
         let relativeLocation: number[] = options.location || [0];
 
-        if (options.position?.reference) {
+        if (options.position?.referencePanel) {
             const referenceGroup = this._groups.get(
-                options.position.reference
+                options.position.referencePanel
             )?.value;
 
             if (!referenceGroup) {
                 throw new Error(
-                    `reference group ${options.position.reference} does not exist`
+                    `reference group ${options.position.referencePanel} does not exist`
                 );
             }
 
@@ -329,6 +329,8 @@ export class GridviewComponent
         this.registerPanel(view);
 
         this.doAddGroup(view, relativeLocation, options.size);
+
+        return view;
     }
 
     private registerPanel(panel: GridviewPanel) {

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/react/dockview/dockview.tsx

@@ -36,11 +36,10 @@ export interface DockviewReadyEvent {
 }
 
 export interface IDockviewReactProps {
-    components?: PanelCollection<IDockviewPanelProps>;
+    components: PanelCollection<IDockviewPanelProps>;
     tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
     watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
-    onReady?: (event: DockviewReadyEvent) => void;
+    onReady: (event: DockviewReadyEvent) => void;
-    debug?: boolean;
     tabHeight?: number;
     onTabContextMenu?: (event: TabContextMenuEvent) => void;
     onDidDrop?: (event: DockviewDropEvent) => void;
@@ -127,7 +126,6 @@ export const DockviewReact = React.forwardRef(
                 frameworkComponents: props.components,
                 frameworkTabComponents: props.tabComponents,
                 tabHeight: props.tabHeight,
-                debug: props.debug,
                 watermarkFrameworkComponent: props.watermarkComponent,
                 styles: props.hideBorders
                     ? { separatorBorder: 'transparent' }

packages/dockview/src/react/gridview/gridview.tsx

@@ -22,8 +22,8 @@ export interface IGridviewPanelProps<T extends { [index: string]: any } = any>
 }
 
 export interface IGridviewReactProps {
-    orientation: Orientation;
+    orientation?: Orientation;
-    onReady?: (event: GridviewReadyEvent) => void;
+    onReady: (event: GridviewReadyEvent) => void;
     components: PanelCollection<IGridviewPanelProps>;
     hideBorders?: boolean;
     className?: string;
@@ -64,7 +64,7 @@ export const GridviewReact = React.forwardRef(
                     typeof props.proportionalLayout === 'boolean'
                         ? props.proportionalLayout
                         : true,
-                orientation: props.orientation,
+                orientation: props.orientation || Orientation.HORIZONTAL,
                 frameworkComponents: props.components,
                 frameworkComponentFactory: {
                     createComponent: (id: string, componentId, component) => {

packages/dockview/src/react/paneview/paneview.tsx

@@ -27,8 +27,8 @@ export interface PaneviewDropEvent extends PaneviewDropEvent2 {
 }
 
 export interface IPaneviewReactProps {
-    onReady?: (event: PaneviewReadyEvent) => void;
+    onReady: (event: PaneviewReadyEvent) => void;
-    components?: PanelCollection<IPaneviewPanelProps>;
+    components: PanelCollection<IPaneviewPanelProps>;
     headerComponents?: PanelCollection<IPaneviewPanelProps>;
     className?: string;
     disableAutoResizing?: boolean;

packages/dockview/src/react/splitview/splitview.tsx

@@ -22,8 +22,8 @@ export interface ISplitviewPanelProps<T extends { [index: string]: any } = any>
 }
 
 export interface ISplitviewReactProps {
-    orientation: Orientation;
+    orientation?: Orientation;
-    onReady?: (event: SplitviewReadyEvent) => void;
+    onReady: (event: SplitviewReadyEvent) => void;
     components: PanelCollection<ISplitviewPanelProps>;
     proportionalLayout?: boolean;
     hideBorders?: boolean;
@@ -58,7 +58,7 @@ export const SplitviewReact = React.forwardRef(
 
         React.useEffect(() => {
             const splitview = new SplitviewComponent(domRef.current!, {
-                orientation: props.orientation,
+                orientation: props.orientation || Orientation.HORIZONTAL,
                 frameworkComponents: props.components,
                 frameworkWrapper: {
                     createComponent: (

packages/dockview/src/splitview/splitviewComponent.ts

@@ -61,18 +61,17 @@ 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;
+    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel;
     layout(width: number, height: number): void;
     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;
-    getPanels(): SplitviewPanel[];
     setVisible(panel: ISplitviewPanel, visible: boolean): void;
     movePanel(from: number, to: number): void;
 }
@@ -87,7 +86,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,15 +101,23 @@ export class SplitviewComponent
     private readonly _onDidLayoutChange = new Emitter<void>();
     readonly onDidLayoutChange: Event<void> = this._onDidLayoutChange.event;
 
-    get options() {
+    get panels(): SplitviewPanel[] {
+        return this.splitview.getViews();
+    }
+
+    get options(): SplitviewComponentOptions {
         return this._options;
     }
 
-    get orientation() {
+    get length(): number {
+        return this._panels.size;
+    }
+
+    get orientation(): Orientation {
         return this.splitview.orientation;
     }
 
-    get splitview() {
+    get splitview(): Splitview {
         return this._splitview;
     }
 
@@ -128,30 +135,26 @@ export class SplitviewComponent
         );
     }
 
-    get minimumSize() {
+    get minimumSize(): number {
         return this.splitview.minimumSize;
     }
 
-    get maximumSize() {
+    get maximumSize(): number {
         return this.splitview.maximumSize;
     }
 
-    get height() {
+    get height(): number {
         return this.splitview.orientation === Orientation.HORIZONTAL
             ? this.splitview.orthogonalSize
             : this.splitview.size;
     }
 
-    get width() {
+    get width(): number {
         return this.splitview.orientation === Orientation.HORIZONTAL
             ? this.splitview.size
             : this.splitview.orthogonalSize;
     }
 
-    get length() {
-        return this.panels.size;
-    }
-
     constructor(
         private readonly element: HTMLElement,
         options: SplitviewComponentOptions
@@ -195,23 +198,23 @@ export class SplitviewComponent
         );
     }
 
-    focus() {
+    focus(): void {
         this._activePanel?.focus();
     }
 
-    movePanel(from: number, to: number) {
+    movePanel(from: number, to: number): void {
         this.splitview.moveView(from, to);
     }
 
-    setVisible(panel: SplitviewPanel, visible: boolean) {
+    setVisible(panel: SplitviewPanel, visible: boolean): void {
-        const index = this.getPanels().indexOf(panel);
+        const index = this.panels.indexOf(panel);
         this.splitview.setViewVisible(index, visible);
     }
 
-    setActive(view: SplitviewPanel, skipFocus?: boolean) {
+    setActive(view: SplitviewPanel, skipFocus?: boolean): void {
         this._activePanel = view;
 
-        this.getPanels()
+        this.panels
             .filter((v) => v !== view)
             .forEach((v) => {
                 v.api._onDidActiveChange.fire({ isActive: false });
@@ -225,12 +228,8 @@ export class SplitviewComponent
         }
     }
 
-    getPanels(): SplitviewPanel[] {
+    removePanel(panel: SplitviewPanel, sizing?: Sizing): void {
-        return this.splitview.getViews();
+        const disposable = this._panels.get(panel.id);
-    }
-
-    removePanel(panel: SplitviewPanel, sizing?: Sizing) {
-        const disposable = this.panels.get(panel.id);
 
         if (!disposable) {
             throw new Error(`unknown splitview panel ${panel.id}`);
@@ -239,23 +238,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 {
+    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel {
-        if (this.panels.has(options.id)) {
+        if (this._panels.has(options.id)) {
             throw new Error(`panel ${options.id} already exists`);
         }
 
@@ -292,18 +291,8 @@ export class SplitviewComponent
 
         this.doAddView(view);
         this.setActive(view);
-    }
 
-    /**
+        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 {
@@ -314,7 +303,7 @@ export class SplitviewComponent
         this.splitview.layout(size, orthogonalSize);
     }
 
-    private doAddView(view: SplitviewPanel) {
+    private doAddView(view: SplitviewPanel): void {
         const disposable = view.api.onDidFocusChange((event) => {
             if (!event.isFocused) {
                 return;
@@ -322,7 +311,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 +338,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 +355,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`);
                     }
 
@@ -422,12 +411,12 @@ export class SplitviewComponent
         this._onDidLayoutfromJSON.fire();
     }
 
-    dispose() {
+    dispose(): void {
-        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();