dockview 1.3.1 → 1.4.0

package/dist/esm/api/component.api.d.ts

@@ -1,15 +1,15 @@
-import { IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
+import { DockviewDropEvent, IDockviewComponent, SerializedDockview } from '../dockview/dockviewComponent';
 import { AddGroupOptions, AddPanelOptions, MovementOptions } from '../dockview/options';
 import { Direction } from '../gridview/baseComponentGridview';
 import { AddComponentOptions, IGridviewComponent, SerializedGridview } from '../gridview/gridviewComponent';
 import { IGridviewPanel } from '../gridview/gridviewPanel';
-import { IGroupPanel } from '../groupview/groupPanel';
+import { IDockviewPanel } from '../groupview/groupPanel';
 import { AddPaneviewComponentOptions, SerializedPaneview, IPaneviewComponent } from '../paneview/paneviewComponent';
 import { IPaneviewPanel } from '../paneview/paneviewPanel';
 import { AddSplitviewComponentOptions, ISplitviewComponent, SerializedSplitview, SplitviewComponentUpdateOptions } from '../splitview/splitviewComponent';
 import { IView, Orientation, Sizing } from '../splitview/core/splitview';
 import { ISplitviewPanel } from '../splitview/splitviewPanel';
-import { IGroupviewPanel } from '../groupview/groupviewPanel';
+import { GroupPanel, IGroupviewPanel } from '../groupview/groupviewPanel';
 import { Event } from '../events';
 import { PaneviewDropEvent } from '../react';
 export interface CommonApi<T = any> {
@@ -19,7 +19,6 @@ 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;
 }
@@ -31,6 +30,7 @@ export declare class SplitviewApi implements CommonApi<SerializedSplitview> {
     get width(): number;
     get length(): number;
     get orientation(): Orientation;
+    get panels(): ISplitviewPanel[];
     get onDidLayoutFromJSON(): Event<void>;
     get onDidLayoutChange(): Event<void>;
     get onDidAddView(): Event<IView>;
@@ -39,13 +39,11 @@ export declare class SplitviewApi implements CommonApi<SerializedSplitview> {
     updateOptions(options: SplitviewComponentUpdateOptions): void;
     removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
     setVisible(panel: ISplitviewPanel, isVisible: boolean): void;
-    getPanels(): ISplitviewPanel[];
     focus(): void;
     getPanel(id: string): ISplitviewPanel | undefined;
     setActive(panel: ISplitviewPanel): void;
     layout(width: number, height: number): void;
-    addPanel(options: AddSplitviewComponentOptions): void;
-    resizeToFit(): void;
+    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel;
     movePanel(from: number, to: number): void;
     fromJSON(data: SerializedSplitview): void;
     toJSON(): SerializedSplitview;
@@ -56,20 +54,19 @@ export declare class PaneviewApi implements CommonApi<SerializedPaneview> {
     get maximumSize(): number;
     get height(): number;
     get width(): number;
+    get panels(): IPaneviewPanel[];
     get onDidLayoutChange(): Event<void>;
     get onDidLayoutFromJSON(): Event<void>;
     get onDidAddView(): Event<IPaneviewPanel>;
     get onDidRemoveView(): Event<IPaneviewPanel>;
     get onDidDrop(): Event<PaneviewDropEvent>;
     constructor(component: IPaneviewComponent);
-    getPanels(): IPaneviewPanel[];
     removePanel(panel: IPaneviewPanel): void;
     getPanel(id: string): IPaneviewPanel | undefined;
     movePanel(from: number, to: number): void;
     focus(): void;
     layout(width: number, height: number): void;
-    addPanel(options: AddPaneviewComponentOptions): void;
-    resizeToFit(): void;
+    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
     fromJSON(data: SerializedPaneview): void;
     toJSON(): SerializedPaneview;
 }
@@ -92,14 +89,13 @@ export declare class GridviewApi implements CommonApi<SerializedGridview> {
     constructor(component: IGridviewComponent);
     focus(): void;
     layout(width: number, height: number, force?: boolean): void;
-    addPanel(options: AddComponentOptions): void;
+    addPanel(options: AddComponentOptions): IGridviewPanel;
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
     movePanel(panel: IGridviewPanel, options: {
         direction: Direction;
         reference: string;
         size?: number;
     }): void;
-    resizeToFit(): void;
     getPanel(id: string): IGridviewPanel | undefined;
     toggleVisibility(panel: IGridviewPanel): void;
     setVisible(panel: IGridviewPanel, visible: boolean): void;
@@ -117,32 +113,32 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
     get maximumWidth(): number;
     get size(): number;
     get totalPanels(): number;
-    get onDidActiveGroupChange(): Event<IGroupviewPanel | undefined>;
-    get onDidAddGroup(): Event<IGroupviewPanel>;
-    get onDidRemoveGroup(): Event<IGroupviewPanel>;
-    get onDidActivePanelChange(): Event<IGroupPanel | undefined>;
-    get onDidAddPanel(): Event<IGroupPanel>;
-    get onDidRemovePanel(): Event<IGroupPanel>;
+    get onDidActiveGroupChange(): Event<GroupPanel | undefined>;
+    get onDidAddGroup(): Event<GroupPanel>;
+    get onDidRemoveGroup(): Event<GroupPanel>;
+    get onDidActivePanelChange(): Event<IDockviewPanel | undefined>;
+    get onDidAddPanel(): Event<IDockviewPanel>;
+    get onDidRemovePanel(): Event<IDockviewPanel>;
     get onDidLayoutFromJSON(): Event<void>;
     get onDidLayoutChange(): Event<void>;
-    get panels(): IGroupPanel[];
-    get groups(): IGroupviewPanel[];
-    get activePanel(): IGroupPanel | undefined;
-    get activeGroup(): IGroupviewPanel | undefined;
+    get onDidDrop(): Event<DockviewDropEvent>;
+    get panels(): IDockviewPanel[];
+    get groups(): GroupPanel[];
+    get activePanel(): IDockviewPanel | undefined;
+    get activeGroup(): GroupPanel | undefined;
     constructor(component: IDockviewComponent);
     getTabHeight(): number | undefined;
     setTabHeight(height: number | undefined): void;
     focus(): void;
-    getPanel(id: string): IGroupPanel | undefined;
+    getPanel(id: string): IDockviewPanel | undefined;
     layout(width: number, height: number, force?: boolean): void;
-    addPanel(options: AddPanelOptions): IGroupPanel;
+    addPanel(options: AddPanelOptions): IDockviewPanel;
     addEmptyGroup(options?: AddGroupOptions): void;
     moveToNext(options?: MovementOptions): void;
     moveToPrevious(options?: MovementOptions): void;
     closeAllGroups(): void;
     removeGroup(group: IGroupviewPanel): void;
-    resizeToFit(): void;
-    getGroup(id: string): IGroupviewPanel | undefined;
+    getGroup(id: string): GroupPanel | undefined;
     fromJSON(data: SerializedDockview): void;
     toJSON(): SerializedDockview;
 }

package/dist/esm/api/component.api.js

@@ -21,6 +21,9 @@ export class SplitviewApi {
     get orientation() {
         return this.component.orientation;
     }
+    get panels() {
+        return this.component.panels;
+    }
     get onDidLayoutFromJSON() {
         return this.component.onDidLayoutFromJSON;
     }
@@ -42,9 +45,6 @@ export class SplitviewApi {
     setVisible(panel, isVisible) {
         this.component.setVisible(panel, isVisible);
     }
-    getPanels() {
-        return this.component.getPanels();
-    }
     focus() {
         this.component.focus();
     }
@@ -58,10 +58,7 @@ export class SplitviewApi {
         return this.component.layout(width, height);
     }
     addPanel(options) {
-        this.component.addPanel(options);
-    }
-    resizeToFit() {
-        this.component.resizeToFit();
+        return this.component.addPanel(options);
     }
     movePanel(from, to) {
         this.component.movePanel(from, to);
@@ -89,6 +86,9 @@ export class PaneviewApi {
     get width() {
         return this.component.width;
     }
+    get panels() {
+        return this.component.panels;
+    }
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
@@ -112,9 +112,6 @@ export class PaneviewApi {
         };
         return emitter.event;
     }
-    getPanels() {
-        return this.component.getPanels();
-    }
     removePanel(panel) {
         this.component.removePanel(panel);
     }
@@ -131,10 +128,7 @@ export class PaneviewApi {
         this.component.layout(width, height);
     }
     addPanel(options) {
-        this.component.addPanel(options);
-    }
-    resizeToFit() {
-        this.component.resizeToFit();
+        return this.component.addPanel(options);
     }
     fromJSON(data) {
         this.component.fromJSON(data);
@@ -196,7 +190,7 @@ export class GridviewApi {
         this.component.layout(width, height, force);
     }
     addPanel(options) {
-        this.component.addPanel(options);
+        return this.component.addPanel(options);
     }
     removePanel(panel, sizing) {
         this.component.removePanel(panel, sizing);
@@ -204,9 +198,6 @@ export class GridviewApi {
     movePanel(panel, options) {
         this.component.movePanel(panel, options);
     }
-    resizeToFit() {
-        this.component.resizeToFit();
-    }
     getPanel(id) {
         return this.component.getPanel(id);
     }
@@ -278,6 +269,9 @@ export class DockviewApi {
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
+    get onDidDrop() {
+        return this.component.onDidDrop;
+    }
     get panels() {
         return this.component.panels;
     }
@@ -323,9 +317,6 @@ export class DockviewApi {
     removeGroup(group) {
         this.component.removeGroup(group);
     }
-    resizeToFit() {
-        return this.component.resizeToFit();
-    }
     getGroup(id) {
         return this.component.getPanel(id);
     }

package/dist/esm/api/groupPanelApi.d.ts

@@ -1,15 +1,15 @@
 import { Emitter } from '../events';
 import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi';
-import { IGroupPanel } from '../groupview/groupPanel';
-import { GroupviewPanel } from '../groupview/groupviewPanel';
+import { IDockviewPanel } from '../groupview/groupPanel';
+import { GroupPanel } from '../groupview/groupviewPanel';
 export interface TitleEvent {
     readonly title: string;
 }
 export interface SuppressClosableEvent {
     readonly suppressClosable: boolean;
 }
-export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible' | 'visible'> {
-    readonly group: GroupviewPanel | undefined;
+export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible'> {
+    readonly group: GroupPanel;
     readonly isGroupActive: boolean;
     readonly title: string;
     readonly suppressClosable: boolean;
@@ -33,9 +33,9 @@ export declare class DockviewPanelApiImpl extends GridviewPanelApiImpl implement
     get title(): string;
     get suppressClosable(): boolean;
     get isGroupActive(): boolean;
-    set group(value: GroupviewPanel | undefined);
-    get group(): GroupviewPanel | undefined;
-    constructor(panel: IGroupPanel, group: GroupviewPanel | undefined);
+    set group(value: GroupPanel);
+    get group(): GroupPanel;
+    constructor(panel: IDockviewPanel, group: GroupPanel);
     setTitle(title: string): void;
     close(): void;
 }

package/dist/esm/api/groupPanelApi.js

@@ -16,7 +16,7 @@ export class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         this._onDidGroupChange = new Emitter();
         this.onDidGroupChange = this._onDidGroupChange.event;
         this.disposable = new MutableDisposable();
-        this.group = group;
+        this._group = group;
         this.addDisposables(this.disposable, this._onDidTitleChange, this._titleChanged, this._suppressClosableChanged, this._onDidGroupChange, this._onDidActiveGroupChange);
     }
     get title() {

package/dist/esm/dnd/droptarget.d.ts

@@ -7,12 +7,13 @@ export declare enum Position {
     Right = "Right",
     Center = "Center"
 }
+declare type Quadrant = 'top' | 'bottom' | 'left' | 'right';
 export interface DroptargetEvent {
     position: Position;
     nativeEvent: DragEvent;
 }
 export declare type DropTargetDirections = 'vertical' | 'horizontal' | 'all' | 'none';
-export declare type CanDisplayOverlay = boolean | ((dragEvent: DragEvent) => boolean);
+export declare type CanDisplayOverlay = boolean | ((dragEvent: DragEvent, state: Quadrant | null) => boolean);
 export declare class Droptarget extends CompositeDisposable {
     private readonly element;
     private readonly options;
@@ -34,3 +35,4 @@ export declare class Droptarget extends CompositeDisposable {
     private calculateQuadrant;
     private removeDropTarget;
 }
+export {};

package/dist/esm/dnd/droptarget.js

@@ -23,12 +23,22 @@ export class Droptarget extends CompositeDisposable {
         this.addDisposables(this._onDrop, new DragAndDropObserver(this.element, {
             onDragEnter: () => undefined,
             onDragOver: (e) => {
+                const width = this.element.clientWidth;
+                const height = this.element.clientHeight;
+                if (width === 0 || height === 0) {
+                    return; // avoid div!0
+                }
+                const x = e.offsetX;
+                const y = e.offsetY;
+                const xp = (100 * x) / width;
+                const yp = (100 * y) / height;
+                const quadrant = this.calculateQuadrant(this.options.validOverlays, xp, yp);
                 if (isBooleanValue(this.options.canDisplayOverlay)) {
                     if (!this.options.canDisplayOverlay) {
                         return;
                     }
                 }
-                else if (!this.options.canDisplayOverlay(e)) {
+                else if (!this.options.canDisplayOverlay(e, quadrant)) {
                     return;
                 }
                 if (!this.target) {
@@ -47,16 +57,6 @@ export class Droptarget extends CompositeDisposable {
                 if (!this.target || !this.overlay) {
                     return;
                 }
-                const width = this.target.clientWidth;
-                const height = this.target.clientHeight;
-                if (width === 0 || height === 0) {
-                    return; // avoid div!0
-                }
-                const x = e.offsetX;
-                const y = e.offsetY;
-                const xp = (100 * x) / width;
-                const yp = (100 * y) / height;
-                const quadrant = this.calculateQuadrant(this.options.validOverlays, xp, yp);
                 const isSmallX = width < 100;
                 const isSmallY = height < 100;
                 this.toggleClasses(quadrant, isSmallX, isSmallY);

package/dist/esm/dockview/components/tab/defaultTab.d.ts

@@ -1,7 +1,7 @@
 import { CompositeDisposable } from '../../../lifecycle';
 import { ITabRenderer, GroupPanelPartInitParameters } from '../../../groupview/types';
 import { PanelUpdateEvent } from '../../../panel/types';
-import { GroupviewPanel } from '../../../groupview/groupviewPanel';
+import { GroupPanel } from '../../../groupview/groupviewPanel';
 export declare class WrappedTab implements ITabRenderer {
     private readonly renderer;
     private readonly _element;
@@ -16,7 +16,7 @@ export declare class WrappedTab implements ITabRenderer {
     toJSON(): object;
     focus(): void;
     init(parameters: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
+    updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
     dispose(): void;
 }
 export declare class DefaultTab extends CompositeDisposable implements ITabRenderer {
@@ -37,7 +37,7 @@ export declare class DefaultTab extends CompositeDisposable implements ITabRende
     };
     focus(): void;
     init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
+    updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
     layout(_width: number, _height: number): void;
     private render;
 }

package/dist/esm/dockview/components/watermark/watermark.d.ts

@@ -1,6 +1,6 @@
 import { GroupPanelPartInitParameters, IWatermarkRenderer } from '../../../groupview/types';
 import { CompositeDisposable } from '../../../lifecycle';
-import { GroupviewPanel } from '../../../groupview/groupviewPanel';
+import { GroupPanel } from '../../../groupview/groupviewPanel';
 import { PanelUpdateEvent } from '../../../panel/types';
 export declare class Watermark extends CompositeDisposable implements IWatermarkRenderer {
     private _element;
@@ -13,7 +13,7 @@ export declare class Watermark extends CompositeDisposable implements IWatermark
     toJSON(): {};
     layout(_width: number, _height: number): void;
     init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: GroupviewPanel, _visible: boolean): void;
+    updateParentGroup(group: GroupPanel, _visible: boolean): void;
     get element(): HTMLElement;
     private render;
     dispose(): void;

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

@@ -1,6 +1,6 @@
 import { WrappedTab } from './components/tab/defaultTab';
 import { GroupPanelPartInitParameters, IActionsRenderer, IContentRenderer, ITabRenderer } from '../groupview/types';
-import { GroupviewPanel } from '../groupview/groupviewPanel';
+import { GroupPanel } from '../groupview/groupviewPanel';
 import { IDisposable } from '../lifecycle';
 import { GroupPanelUpdateEvent } from '../groupview/groupPanel';
 export interface IGroupPanelView extends IDisposable {
@@ -10,7 +10,7 @@ export interface IGroupPanelView extends IDisposable {
     update(event: GroupPanelUpdateEvent): void;
     layout(width: number, height: number): void;
     init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
+    updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
     toJSON(): {};
 }
 export declare class DefaultGroupPanelView implements IGroupPanelView {
@@ -26,7 +26,7 @@ export declare class DefaultGroupPanelView implements IGroupPanelView {
         actions?: IActionsRenderer;
     });
     init(params: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void;
+    updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
     layout(width: number, height: number): void;
     update(event: GroupPanelUpdateEvent): void;
     toJSON(): {};

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

@@ -1,14 +1,17 @@
 import { IGridView, ISerializedLeafNode, IViewDeserializer } from '../gridview/gridview';
-import { GroupviewPanelState, IGroupPanel } from '../groupview/groupPanel';
+import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
+import { GroupPanelViewState } from '../groupview/groupview';
+import { GroupPanel } from '../groupview/groupviewPanel';
 import { DockviewComponent } from './dockviewComponent';
 export interface IPanelDeserializer {
-    fromJSON(panelData: GroupviewPanelState): IGroupPanel;
+    fromJSON(panelData: GroupviewPanelState, group: GroupPanel): IDockviewPanel;
+}
+export interface PanelDeserializerOptions {
+    createPanel: (id: string, group: GroupPanel) => IDockviewPanel;
 }
 export declare class DefaultDeserializer implements IViewDeserializer {
     private readonly layout;
     private panelDeserializer;
-    constructor(layout: DockviewComponent, panelDeserializer: {
-        createPanel: (id: string) => IGroupPanel;
-    });
-    fromJSON(node: ISerializedLeafNode): IGridView;
+    constructor(layout: DockviewComponent, panelDeserializer: PanelDeserializerOptions);
+    fromJSON(node: ISerializedLeafNode<GroupPanelViewState>): IGridView;
 }

package/dist/esm/dockview/deserializer.js

@@ -4,17 +4,24 @@ export class DefaultDeserializer {
         this.panelDeserializer = panelDeserializer;
     }
     fromJSON(node) {
-        const children = node.data.views;
-        const active = node.data.activeView;
-        const panels = [];
+        const data = node.data;
+        const children = data.views;
+        const active = data.activeView;
+        const group = this.layout.createGroup({
+            id: data.id,
+            locked: !!data.locked,
+            hideHeader: !!data.hideHeader,
+        });
         for (const child of children) {
-            const panel = this.panelDeserializer.createPanel(child);
-            panels.push(panel);
+            const panel = this.panelDeserializer.createPanel(child, group);
+            const isActive = typeof active === 'string' && active === panel.id;
+            group.model.openPanel(panel, {
+                skipSetActive: !isActive,
+            });
         }
-        return this.layout.createGroup({
-            panels,
-            activePanel: panels.find((p) => p.id === active),
-            id: node.data.id,
-        });
+        if (!group.activePanel && group.panels.length > 0) {
+            group.model.openPanel(group.panels[group.panels.length - 1]);
+        }
+        return group;
     }
 }

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: {
@@ -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,21 +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;
+    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;
 }