dockview 1.2.0 → 1.4.0

package/dist/esm/dockview/dockviewComponent.d.ts

@@ -1,16 +1,16 @@
 import { SerializedGridObject } from '../gridview/gridview';
 import { Position } from '../dnd/droptarget';
-import { GroupviewPanelState, IGroupPanel } from '../groupview/groupPanel';
+import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
 import { Event } from '../events';
 import { IWatermarkRenderer } from '../groupview/types';
 import { IPanelDeserializer } from './deserializer';
-import { AddGroupOptions, AddPanelOptions, DockviewOptions as DockviewComponentOptions, MovementOptions, TabContextMenuEvent } from './options';
+import { AddGroupOptions, AddPanelOptions, DockviewComponentOptions, MovementOptions, TabContextMenuEvent } from './options';
 import { BaseGrid, IBaseGrid } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { LayoutMouseEvent } from '../groupview/tab';
 import { Orientation } from '../splitview/core/splitview';
 import { GroupOptions, GroupPanelViewState, GroupviewDropEvent } from '../groupview/groupview';
-import { GroupviewPanel } from '../groupview/groupviewPanel';
+import { GroupPanel } from '../groupview/groupviewPanel';
 export interface PanelReference {
     update: (event: {
         params: {
@@ -30,7 +30,7 @@ export interface SerializedDockview {
         [key: string]: GroupviewPanelState;
     };
     activeGroup?: string;
-    options: {
+    options?: {
         tabHeight?: number;
     };
 }
@@ -38,21 +38,21 @@ export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptio
 export interface DockviewDropEvent extends GroupviewDropEvent {
     api: DockviewApi;
 }
-export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> {
-    readonly activePanel: IGroupPanel | undefined;
+export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
+    readonly activePanel: IDockviewPanel | undefined;
     readonly totalPanels: number;
-    readonly panels: IGroupPanel[];
+    readonly panels: IDockviewPanel[];
     readonly onDidDrop: Event<DockviewDropEvent>;
     tabHeight: number | undefined;
     deserializer: IPanelDeserializer | undefined;
     updateOptions(options: DockviewComponentUpdateOptions): void;
-    moveGroupOrPanel(referenceGroup: GroupviewPanel, groupId: string, itemId: string, target: Position, index?: number): void;
-    doSetGroupActive: (group: GroupviewPanel, skipFocus?: boolean) => void;
-    removeGroup: (group: GroupviewPanel) => void;
+    moveGroupOrPanel(referenceGroup: GroupPanel, groupId: string, itemId: string, target: Position, index?: number): void;
+    doSetGroupActive: (group: GroupPanel, skipFocus?: boolean) => void;
+    removeGroup: (group: GroupPanel) => void;
     options: DockviewComponentOptions;
-    addPanel(options: AddPanelOptions): IGroupPanel;
-    removePanel(panel: IGroupPanel): void;
-    getGroupPanel: (id: string) => IGroupPanel | undefined;
+    addPanel(options: AddPanelOptions): IDockviewPanel;
+    removePanel(panel: IDockviewPanel): void;
+    getGroupPanel: (id: string) => IDockviewPanel | undefined;
     fireMouseEvent(event: LayoutMouseEvent): void;
     createWatermarkComponent(): IWatermarkRenderer;
     addEmptyGroup(options?: AddGroupOptions): void;
@@ -61,16 +61,16 @@ export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> {
     onTabContextMenu: Event<TabContextMenuEvent>;
     moveToNext(options?: MovementOptions): void;
     moveToPrevious(options?: MovementOptions): void;
-    setActivePanel(panel: IGroupPanel): void;
+    setActivePanel(panel: IDockviewPanel): void;
     focus(): void;
     toJSON(): SerializedDockview;
     fromJSON(data: SerializedDockview): void;
-    readonly onDidRemovePanel: Event<IGroupPanel>;
-    readonly onDidAddPanel: Event<IGroupPanel>;
+    readonly onDidRemovePanel: Event<IDockviewPanel>;
+    readonly onDidAddPanel: Event<IDockviewPanel>;
     readonly onDidLayoutfromJSON: Event<void>;
-    readonly onDidActivePanelChange: Event<IGroupPanel | undefined>;
+    readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
 }
-export declare class DockviewComponent extends BaseGrid<GroupviewPanel> implements IDockviewComponent {
+export declare class DockviewComponent extends BaseGrid<GroupPanel> implements IDockviewComponent {
     private _deserializer;
     private _api;
     private _options;
@@ -81,26 +81,26 @@ export declare class DockviewComponent extends BaseGrid<GroupviewPanel> implemen
     private readonly _onDidDrop;
     readonly onDidDrop: Event<DockviewDropEvent>;
     private readonly _onDidRemovePanel;
-    readonly onDidRemovePanel: Event<IGroupPanel>;
+    readonly onDidRemovePanel: Event<IDockviewPanel>;
     private readonly _onDidAddPanel;
-    readonly onDidAddPanel: Event<IGroupPanel>;
+    readonly onDidAddPanel: Event<IDockviewPanel>;
     private readonly _onDidLayoutfromJSON;
     readonly onDidLayoutfromJSON: Event<void>;
     private readonly _onDidActivePanelChange;
-    readonly onDidActivePanelChange: Event<IGroupPanel | undefined>;
+    readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
     get totalPanels(): number;
-    get panels(): IGroupPanel[];
+    get panels(): IDockviewPanel[];
     get deserializer(): IPanelDeserializer | undefined;
     set deserializer(value: IPanelDeserializer | undefined);
     get options(): DockviewComponentOptions;
-    get activePanel(): IGroupPanel | undefined;
+    get activePanel(): IDockviewPanel | undefined;
     set tabHeight(height: number | undefined);
     get tabHeight(): number | undefined;
     constructor(element: HTMLElement, options: DockviewComponentOptions);
     updateOptions(options: DockviewComponentUpdateOptions): void;
     focus(): void;
-    getGroupPanel(id: string): IGroupPanel | undefined;
-    setActivePanel(panel: IGroupPanel): void;
+    getGroupPanel(id: string): IDockviewPanel | undefined;
+    setActivePanel(panel: IDockviewPanel): void;
     moveToNext(options?: MovementOptions): void;
     moveToPrevious(options?: MovementOptions): void;
     /**
@@ -112,20 +112,21 @@ export declare class DockviewComponent extends BaseGrid<GroupviewPanel> implemen
     fromJSON(data: SerializedDockview): void;
     closeAllGroups(): void;
     fireMouseEvent(event: LayoutMouseEvent): void;
-    addPanel(options: AddPanelOptions): IGroupPanel;
-    removePanel(panel: IGroupPanel, options?: {
+    addPanel(options: AddPanelOptions): IDockviewPanel;
+    removePanel(panel: IDockviewPanel, options?: {
         removeEmptyGroup: boolean;
+        skipDispose: boolean;
     }): void;
     createWatermarkComponent(): IWatermarkRenderer;
     addEmptyGroup(options: AddGroupOptions): void;
-    removeGroup(group: GroupviewPanel, skipActive?: boolean): void;
-    moveGroupOrPanel(referenceGroup: GroupviewPanel, groupId: string, itemId: string, target: Position, index?: number): void;
-    doSetGroupActive(group: GroupviewPanel | undefined, skipFocus?: boolean): void;
-    createGroup(options?: GroupOptions): GroupviewPanel;
-    private _addPanel;
+    removeGroup(group: GroupPanel, skipActive?: boolean): void;
+    moveGroupOrPanel(referenceGroup: GroupPanel, groupId: string, itemId: string, target: Position, index?: number): void;
+    doSetGroupActive(group: GroupPanel | undefined, skipFocus?: boolean): void;
+    createGroup(options?: GroupOptions): GroupPanel;
+    private createPanel;
     private createContentComponent;
     private createTabComponent;
-    private addPanelToNewGroup;
+    private createGroupAtLocation;
     private findGroup;
     dispose(): void;
 }

package/dist/esm/dockview/dockviewComponent.js

@@ -14,7 +14,7 @@ import { MouseEventKind } from '../groupview/tab';
 import { Orientation } from '../splitview/core/splitview';
 import { DefaultTab } from './components/tab/defaultTab';
 import { GroupChangeKind2, } from '../groupview/groupview';
-import { GroupviewPanel } from '../groupview/groupviewPanel';
+import { GroupPanel } from '../groupview/groupviewPanel';
 import { DefaultGroupPanelView } from './defaultGroupPanelView';
 const nextGroupId = sequentialNumberGenerator();
 export class DockviewComponent extends BaseGrid {
@@ -65,7 +65,7 @@ export class DockviewComponent extends BaseGrid {
         return this.panels.length;
     }
     get panels() {
-        return this.groups.flatMap((group) => group.model.panels);
+        return this.groups.flatMap((group) => group.panels);
     }
     get deserializer() {
         return this._deserializer;
@@ -81,12 +81,12 @@ export class DockviewComponent extends BaseGrid {
         if (!activeGroup) {
             return undefined;
         }
-        return activeGroup.model.activePanel;
+        return activeGroup.activePanel;
     }
     set tabHeight(height) {
         this.options.tabHeight = height;
         this._groups.forEach((value) => {
-            value.value.model.tabHeight = height;
+            value.value.model.header.height = height;
         });
     }
     get tabHeight() {
@@ -109,9 +109,6 @@ export class DockviewComponent extends BaseGrid {
         return this.panels.find((panel) => panel.id === id);
     }
     setActivePanel(panel) {
-        if (!panel.group) {
-            throw new Error(`Panel ${panel.id} has no associated group`);
-        }
         this.doSetGroupActive(panel.group);
         panel.group.model.openPanel(panel);
     }
@@ -124,8 +121,8 @@ export class DockviewComponent extends BaseGrid {
             options.group = this.activeGroup;
         }
         if (options.includePanel && options.group) {
-            if (options.group.model.activePanel !==
-                options.group.model.panels[options.group.model.panels.length - 1]) {
+            if (options.group.activePanel !==
+                options.group.panels[options.group.panels.length - 1]) {
                 options.group.model.moveToNext({ suppressRoll: true });
                 return;
             }
@@ -143,8 +140,8 @@ export class DockviewComponent extends BaseGrid {
             options.group = this.activeGroup;
         }
         if (options.includePanel && options.group) {
-            if (options.group.model.activePanel !==
-                options.group.model.panels[0]) {
+            if (options.group.activePanel !==
+                options.group.panels[0]) {
                 options.group.model.moveToPrevious({ suppressRoll: true });
                 return;
             }
@@ -192,9 +189,9 @@ export class DockviewComponent extends BaseGrid {
             throw new Error('no deserializer provided');
         }
         this.gridview.deserialize(grid, new DefaultDeserializer(this, {
-            createPanel: (id) => {
+            createPanel: (id, group) => {
                 const panelData = panels[id];
-                return this.deserializer.fromJSON(panelData);
+                return this.deserializer.fromJSON(panelData, group);
             },
         }));
         if (typeof activeGroup === 'string') {
@@ -225,7 +222,9 @@ export class DockviewComponent extends BaseGrid {
     }
     addPanel(options) {
         var _a, _b;
-        const panel = this._addPanel(options);
+        if (this.panels.find((_) => _.id === options.id)) {
+            throw new Error(`panel with id ${options.id} already exists`);
+        }
         let referenceGroup;
         if ((_a = options.position) === null || _a === void 0 ? void 0 : _a.referencePanel) {
             const referencePanel = this.getGroupPanel(options.position.referencePanel);
@@ -237,29 +236,42 @@ export class DockviewComponent extends BaseGrid {
         else {
             referenceGroup = this.activeGroup;
         }
+        let panel;
         if (referenceGroup) {
             const target = toTarget(((_b = options.position) === null || _b === void 0 ? void 0 : _b.direction) || 'within');
             if (target === Position.Center) {
+                panel = this.createPanel(options, referenceGroup);
                 referenceGroup.model.openPanel(panel);
             }
             else {
                 const location = getGridLocation(referenceGroup.element);
                 const relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
-                this.addPanelToNewGroup(panel, relativeLocation);
+                const group = this.createGroupAtLocation(relativeLocation);
+                panel = this.createPanel(options, group);
+                group.model.openPanel(panel);
             }
         }
         else {
-            this.addPanelToNewGroup(panel);
+            const group = this.createGroupAtLocation();
+            panel = this.createPanel(options, group);
+            group.model.openPanel(panel);
         }
         return panel;
     }
-    removePanel(panel, options = { removeEmptyGroup: true }) {
+    removePanel(panel, options = {
+        removeEmptyGroup: true,
+        skipDispose: false,
+    }) {
         const group = panel.group;
         if (!group) {
             throw new Error(`cannot remove panel ${panel.id}. it's missing a group.`);
         }
         group.model.removePanel(panel);
-        if (group.model.size === 0 && options.removeEmptyGroup) {
+        panel.dispose();
+        const retainGroupForWatermark = this.size === 1;
+        if (!retainGroupForWatermark &&
+            group.size === 0 &&
+            options.removeEmptyGroup) {
             this.removeGroup(group);
         }
     }
@@ -292,10 +304,11 @@ export class DockviewComponent extends BaseGrid {
         }
     }
     removeGroup(group, skipActive = false) {
-        const panels = [...group.model.panels]; // reassign since group panels will mutate
+        const panels = [...group.panels]; // reassign since group panels will mutate
         for (const panel of panels) {
             this.removePanel(panel, {
                 removeEmptyGroup: false,
+                skipDispose: false,
             });
         }
         super.doRemoveGroup(group, { skipActive });
@@ -319,7 +332,7 @@ export class DockviewComponent extends BaseGrid {
         else {
             const referenceLocation = getGridLocation(referenceGroup.element);
             const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-            if (sourceGroup && sourceGroup.model.size < 2) {
+            if (sourceGroup && sourceGroup.size < 2) {
                 const [targetParentLocation, to] = tail(targetLocation);
                 const sourceLocation = getGridLocation(sourceGroup.element);
                 const [sourceParentLocation, from] = tail(sourceLocation);
@@ -348,7 +361,8 @@ export class DockviewComponent extends BaseGrid {
                     throw new Error(`No panel with id ${itemId}`);
                 }
                 const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-                this.addPanelToNewGroup(groupItem, dropLocation);
+                const group = this.createGroupAtLocation(dropLocation);
+                group.model.openPanel(groupItem);
             }
         }
     }
@@ -356,8 +370,8 @@ export class DockviewComponent extends BaseGrid {
         var _a, _b;
         const isGroupAlreadyFocused = this._activeGroup === group;
         super.doSetGroupActive(group, skipFocus);
-        if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.model.activePanel)) {
-            this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.model.activePanel);
+        if (!isGroupAlreadyFocused && ((_a = this._activeGroup) === null || _a === void 0 ? void 0 : _a.activePanel)) {
+            this._onDidActivePanelChange.fire((_b = this._activeGroup) === null || _b === void 0 ? void 0 : _b.activePanel);
         }
     }
     createGroup(options) {
@@ -378,7 +392,8 @@ export class DockviewComponent extends BaseGrid {
                 id = nextGroupId.next();
             }
         }
-        const view = new GroupviewPanel(this, id, options);
+        const view = new GroupPanel(this, id, options);
+        view.init({ params: {}, containerApi: null }); // required to initialized .part and allow for correct disposal of group
         if (!this._groups.has(view.id)) {
             const disposable = new CompositeDisposable(view.model.onMove((event) => {
                 const { groupId, itemId, target, index } = event;
@@ -408,16 +423,16 @@ export class DockviewComponent extends BaseGrid {
         // not an ideal pattern
         view.initialize();
         if (typeof this.options.tabHeight === 'number') {
-            view.model.tabHeight = this.options.tabHeight;
+            view.model.header.height = this.options.tabHeight;
         }
         return view;
     }
-    _addPanel(options) {
+    createPanel(options, group) {
         const view = new DefaultGroupPanelView({
             content: this.createContentComponent(options.id, options.component),
             tab: this.createTabComponent(options.id, options.tabComponent),
         });
-        const panel = new DockviewGroupPanel(options.id, this, this._api);
+        const panel = new DockviewGroupPanel(options.id, this, this._api, group);
         panel.init({
             view,
             title: options.title || options.id,
@@ -434,10 +449,10 @@ export class DockviewComponent extends BaseGrid {
         var _a;
         return createComponent(id, componentName, this.options.tabComponents || {}, this.options.frameworkTabComponents, (_a = this.options.frameworkComponentFactory) === null || _a === void 0 ? void 0 : _a.tab, () => new DefaultTab());
     }
-    addPanelToNewGroup(panel, location = [0]) {
+    createGroupAtLocation(location = [0]) {
         const group = this.createGroup();
         this.doAddGroup(group, location);
-        group.model.openPanel(panel);
+        return group;
     }
     findGroup(panel) {
         var _a;

package/dist/esm/dockview/dockviewGroupPanel.d.ts

@@ -1,11 +1,11 @@
 import { DockviewApi } from '../api/component.api';
 import { DockviewPanelApiImpl } from '../api/groupPanelApi';
-import { GroupPanelUpdateEvent, GroupviewPanelState, IGroupPanel, IGroupPanelInitParameters } from '../groupview/groupPanel';
-import { GroupviewPanel } from '../groupview/groupviewPanel';
+import { GroupPanelUpdateEvent, GroupviewPanelState, IDockviewPanel, IGroupPanelInitParameters } from '../groupview/groupPanel';
+import { GroupPanel } from '../groupview/groupviewPanel';
 import { CompositeDisposable } from '../lifecycle';
 import { IGroupPanelView } from './defaultGroupPanelView';
 import { DockviewComponent } from './dockviewComponent';
-export declare class DockviewGroupPanel extends CompositeDisposable implements IGroupPanel {
+export declare class DockviewGroupPanel extends CompositeDisposable implements IDockviewPanel {
     readonly id: string;
     private readonly containerApi;
     private readonly mutableDisposable;
@@ -18,16 +18,16 @@ export declare class DockviewGroupPanel extends CompositeDisposable implements I
     get params(): any;
     get title(): string;
     get suppressClosable(): boolean;
-    get group(): GroupviewPanel | undefined;
+    get group(): GroupPanel;
     get view(): IGroupPanelView | undefined;
-    constructor(id: string, accessor: DockviewComponent, containerApi: DockviewApi);
+    constructor(id: string, accessor: DockviewComponent, containerApi: DockviewApi, group: GroupPanel);
     init(params: IGroupPanelInitParameters): void;
     focus(): void;
     toJSON(): GroupviewPanelState;
     setTitle(title: string): void;
     setSuppressClosable(suppressClosable: boolean): void;
     update(event: GroupPanelUpdateEvent): void;
-    updateParentGroup(group: GroupviewPanel, isGroupActive: boolean): void;
+    updateParentGroup(group: GroupPanel, isGroupActive: boolean): void;
     layout(width: number, height: number): void;
     dispose(): void;
 }

package/dist/esm/dockview/dockviewGroupPanel.js

@@ -1,13 +1,14 @@
 import { DockviewPanelApiImpl } from '../api/groupPanelApi';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 export class DockviewGroupPanel extends CompositeDisposable {
-    constructor(id, accessor, containerApi) {
+    constructor(id, accessor, containerApi, group) {
         super();
         this.id = id;
         this.containerApi = containerApi;
         this.mutableDisposable = new MutableDisposable();
         this._suppressClosable = false;
         this._title = '';
+        this._group = group;
         this.api = new DockviewPanelApiImpl(this, this._group);
         this.addDisposables(this.api.onActiveChange(() => {
             accessor.setActivePanel(this);
@@ -104,13 +105,13 @@ export class DockviewGroupPanel extends CompositeDisposable {
         (_a = this.view) === null || _a === void 0 ? void 0 : _a.updateParentGroup(this._group, this._group.model.isPanelActive(this));
     }
     layout(width, height) {
-        var _a, _b;
+        var _a;
         // the obtain the correct dimensions of the content panel we must deduct the tab height
         this.api._onDidPanelDimensionChange.fire({
             width,
-            height: height - (((_a = this.group) === null || _a === void 0 ? void 0 : _a.model.tabHeight) || 0),
+            height: height - (this.group.model.header.height || 0),
         });
-        (_b = this.view) === null || _b === void 0 ? void 0 : _b.layout(width, height);
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.layout(width, height);
     }
     dispose() {
         var _a;

package/dist/esm/dockview/options.d.ts

@@ -1,9 +1,9 @@
 import { DockviewApi } from '../api/component.api';
 import { Direction } from '../gridview/baseComponentGridview';
 import { IGridView } from '../gridview/gridview';
-import { IGroupPanel } from '../groupview/groupPanel';
+import { IDockviewPanel } from '../groupview/groupPanel';
 import { IContentRenderer, ITabRenderer, WatermarkConstructor, IWatermarkRenderer } from '../groupview/types';
-import { GroupviewPanel } from '../groupview/groupviewPanel';
+import { GroupPanel } from '../groupview/groupviewPanel';
 import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
 import { FrameworkFactory } from '../types';
 import { DockviewDropTargets } from '../groupview/dnd';
@@ -15,7 +15,7 @@ export interface GroupPanelFrameworkComponentFactory {
 export interface TabContextMenuEvent {
     event: MouseEvent;
     api: DockviewApi;
-    panel: IGroupPanel;
+    panel: IDockviewPanel;
 }
 export interface DockviewRenderFunctions {
     tabComponents?: {
@@ -39,12 +39,11 @@ export interface ViewFactoryData {
     content: string;
     tab?: string;
 }
-export interface DockviewOptions extends DockviewRenderFunctions {
+export interface DockviewComponentOptions extends DockviewRenderFunctions {
     watermarkComponent?: WatermarkConstructor;
     watermarkFrameworkComponent?: any;
     frameworkComponentFactory?: GroupPanelFrameworkComponentFactory;
     tabHeight?: number;
-    debug?: boolean;
     orientation?: Orientation;
     styles?: ISplitviewStyles;
     showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean;
@@ -76,5 +75,5 @@ export interface MovementOptions2 {
 }
 export interface MovementOptions extends MovementOptions2 {
     includePanel?: boolean;
-    group?: GroupviewPanel;
+    group?: GroupPanel;
 }

package/dist/esm/gridview/baseComponentGridview.d.ts

@@ -36,7 +36,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;
 }
@@ -82,9 +81,5 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Composi
     moveToNext(options?: MovementOptions2): void;
     moveToPrevious(options?: MovementOptions2): void;
     layout(width: number, height: number, forceResize?: boolean): void;
-    /**
-     * Resize the layout to fit the parent container
-     */
-    resizeToFit(): void;
     dispose(): void;
 }

package/dist/esm/gridview/baseComponentGridview.js

@@ -100,6 +100,7 @@ export class BaseGrid extends CompositeDisposable {
         const view = this.gridview.remove(group, Sizing.Distribute);
         if (item && !(options === null || options === void 0 ? void 0 : options.skipDispose)) {
             item.disposable.dispose();
+            item.value.dispose();
             this._groups.delete(group.id);
         }
         this._onDidRemoveGroup.fire(group);
@@ -174,22 +175,15 @@ export class BaseGrid extends CompositeDisposable {
         this.element.style.width = `${width}px`;
         this.gridview.layout(width, height);
     }
-    /**
-     * Resize the layout to fit the parent container
-     */
-    resizeToFit() {
-        if (!this.element.parentElement) {
-            return;
-        }
-        const { width, height } = this.element.parentElement.getBoundingClientRect();
-        this.layout(width, height);
-    }
     dispose() {
         super.dispose();
         this._onDidActiveGroupChange.dispose();
         this._onDidAddGroup.dispose();
         this._onDidRemoveGroup.dispose();
         this._onDidLayoutChange.dispose();
+        for (const group of this.groups) {
+            group.dispose();
+        }
         this.gridview.dispose();
     }
 }

package/dist/esm/gridview/basePanelView.js

@@ -66,7 +66,9 @@ export class BasePanelView extends CompositeDisposable {
         };
     }
     dispose() {
+        var _a;
         super.dispose();
         this.api.dispose();
+        (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
     }
 }

package/dist/esm/gridview/branchNode.js

@@ -201,7 +201,7 @@ export class BranchNode extends CompositeDisposable {
     }
     setupChildrenEvents() {
         this._childrenDisposable.dispose();
-        this._childrenDisposable = Event.any(...this.children.map((c) => c.onDidChange))((e) => {
+        this._childrenDisposable = Event.any(...this.children.map((c) => c.onDidChange))(() => {
             /**
              * indicate a change has occured to allows any re-rendering but don't bubble
              * event because that was specific to this branch

package/dist/esm/gridview/gridview.d.ts

@@ -57,9 +57,9 @@ export interface SerializedGridObject<T> {
     size?: number;
     visible?: boolean;
 }
-export interface ISerializedLeafNode {
+export interface ISerializedLeafNode<T = any> {
     type: 'leaf';
-    data: any;
+    data: T;
     size: number;
     visible?: boolean;
 }

package/dist/esm/gridview/gridview.js

@@ -352,7 +352,7 @@ export class Gridview {
         const [parentIndex, ...__] = [...rest].reverse();
         const isSiblingVisible = parent.isChildVisible(0);
         parent.removeChild(0, sizing);
-        const sizes = grandParent.children.map((size, i) => grandParent.getChildSize(i));
+        const sizes = grandParent.children.map((_size, i) => grandParent.getChildSize(i));
         grandParent.removeChild(parentIndex, sizing);
         if (sibling instanceof BranchNode) {
             sizes.splice(parentIndex, 1, ...sibling.children.map((c) => c.size));

package/dist/esm/gridview/gridviewComponent.d.ts

@@ -5,12 +5,8 @@ import { GridviewComponentOptions } from './options';
 import { BaseGrid, Direction, IBaseGrid, IGridPanelView } from './baseComponentGridview';
 import { GridviewPanel, GridviewInitParameters, GridPanelViewState, IGridviewPanel } from './gridviewPanel';
 import { BaseComponentOptions } from '../panel/types';
-import { GridviewPanelApiImpl } from '../api/gridviewPanelApi';
 import { Orientation, Sizing } from '../splitview/core/splitview';
 import { Event } from '../events';
-interface PanelReference {
-    api: GridviewPanelApiImpl;
-}
 export interface SerializedGridview {
     grid: {
         height: number;
@@ -21,14 +17,13 @@ export interface SerializedGridview {
     activePanel?: string;
 }
 export interface AddComponentOptions extends BaseComponentOptions {
-    size?: number;
     minimumWidth?: number;
     maximumWidth?: number;
     minimumHeight?: number;
     maximumHeight?: number;
     position?: {
         direction: Direction;
-        reference: string;
+        referencePanel: string;
     };
     location?: number[];
 }
@@ -40,11 +35,11 @@ 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;
-    fromJSON(serializedGridview: SerializedGridview, deferComponentLayout?: boolean): void;
+    fromJSON(serializedGridview: SerializedGridview): void;
     toJSON(): SerializedGridview;
     movePanel(panel: IGridviewPanel, options: {
         direction: Direction;
@@ -77,16 +72,15 @@ export declare class GridviewComponent extends BaseGrid<GridviewPanel> implement
     setActive(panel: GridviewPanel): void;
     toggleVisibility(panel: GridviewPanel): void;
     focus(): void;
-    fromJSON(serializedGridview: SerializedGridview, deferComponentLayout?: boolean): void;
+    fromJSON(serializedGridview: SerializedGridview): void;
     movePanel(panel: GridviewPanel, options: {
         direction: Direction;
         reference: string;
         size?: number;
     }): void;
-    addPanel(options: AddComponentOptions): PanelReference;
+    addPanel(options: AddComponentOptions): IGridviewPanel;
     private registerPanel;
     moveGroup(referenceGroup: IGridPanelComponentView, groupId: string, target: Position): void;
     removeGroup(group: GridviewPanel): void;
     dispose(): void;
 }
-export {};