dockview 1.4.1 → 1.5.0

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

@@ -21,6 +21,7 @@ export interface CommonApi<T = any> {
     layout(width: number, height: number): void;
     fromJSON(data: T): void;
     toJSON(): T;
+    clear(): void;
 }
 export declare class SplitviewApi implements CommonApi<SerializedSplitview> {
     private readonly component;
@@ -45,6 +46,7 @@ export declare class SplitviewApi implements CommonApi<SerializedSplitview> {
     movePanel(from: number, to: number): void;
     fromJSON(data: SerializedSplitview): void;
     toJSON(): SerializedSplitview;
+    clear(): void;
 }
 export declare class PaneviewApi implements CommonApi<SerializedPaneview> {
     private readonly component;
@@ -67,6 +69,7 @@ export declare class PaneviewApi implements CommonApi<SerializedPaneview> {
     addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
     fromJSON(data: SerializedPaneview): void;
     toJSON(): SerializedPaneview;
+    clear(): void;
 }
 export declare class GridviewApi implements CommonApi<SerializedGridview> {
     private readonly component;
@@ -77,9 +80,9 @@ export declare class GridviewApi implements CommonApi<SerializedGridview> {
     get width(): number;
     get height(): number;
     get onDidLayoutChange(): Event<void>;
-    get onDidAddGroup(): Event<IGridviewPanel>;
-    get onDidRemoveGroup(): Event<IGridviewPanel>;
-    get onDidActiveGroupChange(): Event<IGridviewPanel | undefined>;
+    get onDidAddPanel(): Event<IGridviewPanel>;
+    get onDidRemovePanel(): Event<IGridviewPanel>;
+    get onDidActivePanelChange(): Event<IGridviewPanel | undefined>;
     get onDidLayoutFromJSON(): Event<void>;
     get panels(): IGridviewPanel[];
     get orientation(): Orientation;
@@ -97,6 +100,7 @@ export declare class GridviewApi implements CommonApi<SerializedGridview> {
     getPanel(id: string): IGridviewPanel | undefined;
     fromJSON(data: SerializedGridview): void;
     toJSON(): SerializedGridview;
+    clear(): void;
 }
 export declare class DockviewApi implements CommonApi<SerializedDockview> {
     private readonly component;
@@ -136,4 +140,5 @@ export declare class DockviewApi implements CommonApi<SerializedDockview> {
     getGroup(id: string): GroupPanel | undefined;
     fromJSON(data: SerializedDockview): void;
     toJSON(): SerializedDockview;
+    clear(): void;
 }

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

@@ -63,6 +63,9 @@ export class SplitviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 export class PaneviewApi {
     constructor(component) {
@@ -130,6 +133,9 @@ export class PaneviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 export class GridviewApi {
     constructor(component) {
@@ -156,13 +162,13 @@ export class GridviewApi {
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
     }
-    get onDidAddGroup() {
+    get onDidAddPanel() {
         return this.component.onDidAddGroup;
     }
-    get onDidRemoveGroup() {
+    get onDidRemovePanel() {
         return this.component.onDidRemoveGroup;
     }
-    get onDidActiveGroupChange() {
+    get onDidActivePanelChange() {
         return this.component.onDidActiveGroupChange;
     }
     get onDidLayoutFromJSON() {
@@ -201,6 +207,9 @@ export class GridviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 export class DockviewApi {
     constructor(component) {
@@ -249,7 +258,7 @@ export class DockviewApi {
         return this.component.onDidRemovePanel;
     }
     get onDidLayoutFromJSON() {
-        return this.component.onDidLayoutfromJSON;
+        return this.component.onDidLayoutFromJSON;
     }
     get onDidLayoutChange() {
         return this.component.onDidLayoutChange;
@@ -311,4 +320,7 @@ export class DockviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }

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

@@ -7,7 +7,7 @@ export declare enum Position {
     Right = "Right",
     Center = "Center"
 }
-declare type Quadrant = 'top' | 'bottom' | 'left' | 'right';
+export declare type Quadrant = 'top' | 'bottom' | 'left' | 'right';
 export interface DroptargetEvent {
     position: Position;
     nativeEvent: DragEvent;
@@ -35,4 +35,3 @@ export declare class Droptarget extends CompositeDisposable {
     private calculateQuadrant;
     private removeDropTarget;
 }
-export {};

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

@@ -2,6 +2,7 @@ import { CompositeDisposable } from '../../../lifecycle';
 import { ITabRenderer, GroupPanelPartInitParameters } from '../../../groupview/types';
 import { PanelUpdateEvent } from '../../../panel/types';
 import { GroupPanel } from '../../../groupview/groupviewPanel';
+export declare const DEFAULT_TAB_IDENTIFIER = "__default__tab__";
 export declare class DefaultTab extends CompositeDisposable implements ITabRenderer {
     private _element;
     private _isPanelVisible;

package/dist/esm/dockview/components/tab/defaultTab.js

@@ -1,5 +1,7 @@
 import { CompositeDisposable } from '../../../lifecycle';
 import { addDisposableListener } from '../../../events';
+import { createCloseButton } from '../../../svg';
+export const DEFAULT_TAB_IDENTIFIER = '__default__tab__';
 export class DefaultTab extends CompositeDisposable {
     constructor() {
         super();
@@ -19,8 +21,9 @@ export class DefaultTab extends CompositeDisposable {
         this._list = document.createElement('ul');
         this._list.className = 'tab-list';
         //
-        this.action = document.createElement('a');
+        this.action = document.createElement('div');
         this.action.className = 'tab-action';
+        this.action.appendChild(createCloseButton());
         //
         this._element.appendChild(this._content);
         this._element.appendChild(this._actionContainer);
@@ -36,7 +39,7 @@ export class DefaultTab extends CompositeDisposable {
         return this._element;
     }
     get id() {
-        return '__DEFAULT_TAB__';
+        return DEFAULT_TAB_IDENTIFIER;
     }
     update(event) {
         this.params = Object.assign(Object.assign({}, this.params), event.params);

package/dist/esm/dockview/components/watermark/watermark.js

@@ -2,6 +2,7 @@ import { ActionContainer } from '../../../actionbar/actionsContainer';
 import { addDisposableListener } from '../../../events';
 import { toggleClass } from '../../../dom';
 import { CompositeDisposable } from '../../../lifecycle';
+import { createCloseButton } from '../../../svg';
 export class Watermark extends CompositeDisposable {
     constructor() {
         super();
@@ -18,8 +19,9 @@ export class Watermark extends CompositeDisposable {
         const actions = new ActionContainer();
         title.appendChild(emptySpace);
         title.appendChild(actions.element);
-        const closeAnchor = document.createElement('a');
+        const closeAnchor = document.createElement('div');
         closeAnchor.className = 'close-action';
+        closeAnchor.appendChild(createCloseButton());
         actions.add(closeAnchor);
         this.addDisposables(addDisposableListener(closeAnchor, 'click', (ev) => {
             var _a;

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

@@ -1,11 +1,10 @@
-import { GroupPanelPartInitParameters, IActionsRenderer, IContentRenderer, ITabRenderer } from '../groupview/types';
+import { GroupPanelPartInitParameters, IContentRenderer, ITabRenderer } from '../groupview/types';
 import { GroupPanel } from '../groupview/groupviewPanel';
 import { IDisposable } from '../lifecycle';
 import { GroupPanelUpdateEvent } from '../groupview/groupPanel';
 export interface IGroupPanelView extends IDisposable {
     readonly content: IContentRenderer;
     readonly tab?: ITabRenderer;
-    readonly actions?: IActionsRenderer;
     update(event: GroupPanelUpdateEvent): void;
     layout(width: number, height: number): void;
     init(params: GroupPanelPartInitParameters): void;
@@ -15,14 +14,11 @@ export interface IGroupPanelView extends IDisposable {
 export declare class DefaultGroupPanelView implements IGroupPanelView {
     private readonly _content;
     private readonly _tab;
-    private readonly _actions;
     get content(): IContentRenderer;
     get tab(): ITabRenderer;
-    get actions(): IActionsRenderer | undefined;
     constructor(renderers: {
         content: IContentRenderer;
         tab?: ITabRenderer;
-        actions?: IActionsRenderer;
     });
     init(params: GroupPanelPartInitParameters): void;
     updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;

package/dist/esm/dockview/defaultGroupPanelView.js

@@ -4,16 +4,6 @@ export class DefaultGroupPanelView {
         var _a;
         this._content = renderers.content;
         this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
-        this._actions =
-            renderers.actions ||
-                (this.content.actions
-                    ? {
-                        element: this.content.actions,
-                        dispose: () => {
-                            //
-                        },
-                    }
-                    : undefined);
     }
     get content() {
         return this._content;
@@ -21,9 +11,6 @@ export class DefaultGroupPanelView {
     get tab() {
         return this._tab;
     }
-    get actions() {
-        return this._actions;
-    }
     init(params) {
         this.content.init(Object.assign(Object.assign({}, params), { tab: this.tab }));
         this.tab.init(params);
@@ -41,15 +28,17 @@ export class DefaultGroupPanelView {
         this.tab.update(event);
     }
     toJSON() {
+        let tab = this.tab instanceof DefaultTab ? undefined : this.tab.toJSON();
+        if (tab && Object.keys(tab).length === 0) {
+            tab = undefined;
+        }
         return {
             content: this.content.toJSON(),
-            tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
+            tab,
         };
     }
     dispose() {
-        var _a;
         this.content.dispose();
         this.tab.dispose();
-        (_a = this.actions) === null || _a === void 0 ? void 0 : _a.dispose();
     }
 }

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

@@ -1,17 +1,5 @@
-import { IGridView, ISerializedLeafNode, IViewDeserializer } from '../gridview/gridview';
 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, 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: PanelDeserializerOptions);
-    fromJSON(node: ISerializedLeafNode<GroupPanelViewState>): IGridView;
-}

package/dist/esm/dockview/deserializer.js

@@ -1,27 +1 @@
-export class DefaultDeserializer {
-    constructor(layout, panelDeserializer) {
-        this.layout = layout;
-        this.panelDeserializer = panelDeserializer;
-    }
-    fromJSON(node) {
-        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, group);
-            const isActive = typeof active === 'string' && active === panel.id;
-            group.model.openPanel(panel, {
-                skipSetActive: !isActive,
-            });
-        }
-        if (!group.activePanel && group.panels.length > 0) {
-            group.model.openPanel(group.panels[group.panels.length - 1]);
-        }
-        return group;
-    }
-}
+export {};

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

@@ -34,9 +34,10 @@ export interface SerializedDockview {
         tabHeight?: number;
     };
 }
-export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent'>;
+export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent' | 'defaultTabComponent' | 'createGroupControlElement'>;
 export interface DockviewDropEvent extends GroupviewDropEvent {
     api: DockviewApi;
+    group: GroupPanel;
 }
 export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
     readonly activePanel: IDockviewPanel | undefined;
@@ -53,11 +54,9 @@ export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
     addPanel(options: AddPanelOptions): IDockviewPanel;
     removePanel(panel: IDockviewPanel): void;
     getGroupPanel: (id: string) => IDockviewPanel | undefined;
-    fireMouseEvent(event: LayoutMouseEvent): void;
     createWatermarkComponent(): IWatermarkRenderer;
     addEmptyGroup(options?: AddGroupOptions): void;
     closeAllGroups(): void;
-    onTabInteractionEvent: Event<LayoutMouseEvent>;
     onTabContextMenu: Event<TabContextMenuEvent>;
     moveToNext(options?: MovementOptions): void;
     moveToPrevious(options?: MovementOptions): void;
@@ -67,15 +66,13 @@ export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
     fromJSON(data: SerializedDockview): void;
     readonly onDidRemovePanel: Event<IDockviewPanel>;
     readonly onDidAddPanel: Event<IDockviewPanel>;
-    readonly onDidLayoutfromJSON: Event<void>;
+    readonly onDidLayoutFromJSON: Event<void>;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
 }
 export declare class DockviewComponent extends BaseGrid<GroupPanel> implements IDockviewComponent {
     private _deserializer;
     private _api;
     private _options;
-    private readonly _onTabInteractionEvent;
-    readonly onTabInteractionEvent: Event<LayoutMouseEvent>;
     private readonly _onTabContextMenu;
     readonly onTabContextMenu: Event<TabContextMenuEvent>;
     private readonly _onDidDrop;
@@ -84,8 +81,8 @@ export declare class DockviewComponent extends BaseGrid<GroupPanel> implements I
     readonly onDidRemovePanel: Event<IDockviewPanel>;
     private readonly _onDidAddPanel;
     readonly onDidAddPanel: Event<IDockviewPanel>;
-    private readonly _onDidLayoutfromJSON;
-    readonly onDidLayoutfromJSON: Event<void>;
+    private readonly _onDidLayoutFromJSON;
+    readonly onDidLayoutFromJSON: Event<void>;
     private readonly _onDidActivePanelChange;
     readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
     get totalPanels(): number;
@@ -110,6 +107,7 @@ export declare class DockviewComponent extends BaseGrid<GroupPanel> implements I
      */
     toJSON(): SerializedDockview;
     fromJSON(data: SerializedDockview): void;
+    clear(): void;
     closeAllGroups(): void;
     fireMouseEvent(event: LayoutMouseEvent): void;
     addPanel(options: AddPanelOptions): IDockviewPanel;

package/dist/esm/dockview/dockviewComponent.js

@@ -6,14 +6,12 @@ import { CompositeDisposable } from '../lifecycle';
 import { Event, Emitter } from '../events';
 import { Watermark } from './components/watermark/watermark';
 import { sequentialNumberGenerator } from '../math';
-import { DefaultDeserializer } from './deserializer';
 import { createComponent } from '../panel/componentFactory';
 import { BaseGrid, toTarget, } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
 import { MouseEventKind } from '../groupview/tab';
 import { Orientation } from '../splitview/core/splitview';
 import { DefaultTab } from './components/tab/defaultTab';
-import { GroupChangeKind2, } from '../groupview/groupview';
 import { GroupPanel } from '../groupview/groupviewPanel';
 import { DefaultGroupPanelView } from './defaultGroupPanelView';
 const nextGroupId = sequentialNumberGenerator();
@@ -24,9 +22,6 @@ export class DockviewComponent extends BaseGrid {
             orientation: options.orientation || Orientation.HORIZONTAL,
             styles: options.styles,
         });
-        // events
-        this._onTabInteractionEvent = new Emitter();
-        this.onTabInteractionEvent = this._onTabInteractionEvent.event;
         this._onTabContextMenu = new Emitter();
         this.onTabContextMenu = this._onTabContextMenu.event;
         this._onDidDrop = new Emitter();
@@ -35,11 +30,11 @@ export class DockviewComponent extends BaseGrid {
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidAddPanel = new Emitter();
         this.onDidAddPanel = this._onDidAddPanel.event;
-        this._onDidLayoutfromJSON = new Emitter();
-        this.onDidLayoutfromJSON = this._onDidLayoutfromJSON.event;
+        this._onDidLayoutFromJSON = new Emitter();
+        this.onDidLayoutFromJSON = this._onDidLayoutFromJSON.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
-        this.addDisposables(this._onTabInteractionEvent, this._onTabContextMenu, this._onDidDrop, Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
+        this.addDisposables(this._onTabContextMenu, this._onDidDrop, Event.any(this.onDidAddPanel, this.onDidRemovePanel, this.onDidActivePanelChange)(() => {
             this._bufferOnDidLayoutChange.fire();
         }));
         this._options = options;
@@ -94,7 +89,7 @@ export class DockviewComponent extends BaseGrid {
     }
     updateOptions(options) {
         const hasOrientationChanged = typeof options.orientation === 'string' &&
-            this.options.orientation !== options.orientation;
+            this.gridview.orientation !== options.orientation;
         this._options = Object.assign(Object.assign({}, this.options), options);
         if (hasOrientationChanged) {
             this.gridview.orientation = options.orientation;
@@ -172,12 +167,7 @@ export class DockviewComponent extends BaseGrid {
         };
     }
     fromJSON(data) {
-        const groups = Array.from(this._groups.values()).map((_) => _.value);
-        for (const group of groups) {
-            // remove the group will automatically remove the panels
-            this.removeGroup(group, true);
-        }
-        this.gridview.clear();
+        this.clear();
         if (!this.deserializer) {
             throw new Error('invalid deserializer');
         }
@@ -188,12 +178,31 @@ export class DockviewComponent extends BaseGrid {
         if (!this.deserializer) {
             throw new Error('no deserializer provided');
         }
-        this.gridview.deserialize(grid, new DefaultDeserializer(this, {
-            createPanel: (id, group) => {
-                const panelData = panels[id];
-                return this.deserializer.fromJSON(panelData, group);
-            },
-        }));
+        this.gridview.deserialize(grid, {
+            fromJSON: (node) => {
+                const { id, locked, hideHeader, views, activeView } = node.data;
+                const group = this.createGroup({
+                    id,
+                    locked: !!locked,
+                    hideHeader: !!hideHeader,
+                });
+                this._onDidAddGroup.fire(group);
+                for (const child of views) {
+                    const panel = this.deserializer.fromJSON(panels[child], group);
+                    const isActive = typeof activeView === 'string' && activeView === panel.id;
+                    group.model.openPanel(panel, {
+                        skipSetPanelActive: !isActive,
+                        skipSetGroupActive: true
+                    });
+                }
+                if (!group.activePanel && group.panels.length > 0) {
+                    group.model.openPanel(group.panels[group.panels.length - 1], {
+                        skipSetGroupActive: true
+                    });
+                }
+                return group;
+            }
+        });
         if (typeof activeGroup === 'string') {
             const panel = this.getPanel(activeGroup);
             if (panel) {
@@ -201,7 +210,23 @@ export class DockviewComponent extends BaseGrid {
             }
         }
         this.gridview.layout(this.width, this.height);
-        this._onDidLayoutfromJSON.fire();
+        this._onDidLayoutFromJSON.fire();
+    }
+    clear() {
+        const groups = Array.from(this._groups.values()).map((_) => _.value);
+        const hasActiveGroup = !!this.activeGroup;
+        const hasActivePanel = !!this.activePanel;
+        for (const group of groups) {
+            // remove the group will automatically remove the panels
+            this.removeGroup(group, true);
+        }
+        if (hasActiveGroup) {
+            this.doSetGroupActive(undefined);
+        }
+        if (hasActivePanel) {
+            this._onDidActivePanelChange.fire(undefined);
+        }
+        this.gridview.clear();
     }
     closeAllGroups() {
         for (const entry of this._groups.entries()) {
@@ -399,23 +424,13 @@ export class DockviewComponent extends BaseGrid {
                 const { groupId, itemId, target, index } = event;
                 this.moveGroupOrPanel(view, groupId, itemId, target, index);
             }), view.model.onDidDrop((event) => {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api }));
-            }), view.model.onDidGroupChange((event) => {
-                switch (event.kind) {
-                    case GroupChangeKind2.ADD_PANEL:
-                        if (event.panel) {
-                            this._onDidAddPanel.fire(event.panel);
-                        }
-                        break;
-                    case GroupChangeKind2.REMOVE_PANEL:
-                        if (event.panel) {
-                            this._onDidRemovePanel.fire(event.panel);
-                        }
-                        break;
-                    case GroupChangeKind2.PANEL_ACTIVE:
-                        this._onDidActivePanelChange.fire(event.panel);
-                        break;
-                }
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
+            }), view.model.onDidAddPanel((event) => {
+                this._onDidAddPanel.fire(event.panel);
+            }), view.model.onDidRemovePanel((event) => {
+                this._onDidRemovePanel.fire(event.panel);
+            }), view.model.onDidActivePanelChange((event) => {
+                this._onDidActivePanelChange.fire(event.panel);
             }));
             this._groups.set(view.id, { value: view, disposable });
         }
@@ -430,7 +445,7 @@ export class DockviewComponent extends BaseGrid {
     createPanel(options, group) {
         const view = new DefaultGroupPanelView({
             content: this.createContentComponent(options.id, options.component),
-            tab: this.createTabComponent(options.id, options.tabComponent),
+            tab: this.createTabComponent(options.id, options.tabComponent || this.options.defaultTabComponent),
         });
         const panel = new DockviewGroupPanel(options.id, this, this._api, group);
         panel.init({
@@ -463,6 +478,6 @@ export class DockviewComponent extends BaseGrid {
         this._onDidActivePanelChange.dispose();
         this._onDidAddPanel.dispose();
         this._onDidRemovePanel.dispose();
-        this._onDidLayoutfromJSON.dispose();
+        this._onDidLayoutFromJSON.dispose();
     }
 }

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

@@ -7,6 +7,8 @@ import { GroupPanel } from '../groupview/groupviewPanel';
 import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
 import { FrameworkFactory } from '../types';
 import { DockviewDropTargets } from '../groupview/dnd';
+import { PanelTransfer } from '../dnd/dataTransfer';
+import { IGroupControlRenderer } from '../react/dockview/groupControlsRenderer';
 export interface GroupPanelFrameworkComponentFactory {
     content: FrameworkFactory<IContentRenderer>;
     tab: FrameworkFactory<ITabRenderer>;
@@ -39,6 +41,12 @@ export interface ViewFactoryData {
     content: string;
     tab?: string;
 }
+export interface DockviewDndOverlayEvent {
+    nativeEvent: DragEvent;
+    target: DockviewDropTargets;
+    group: GroupPanel;
+    getData: () => PanelTransfer | undefined;
+}
 export interface DockviewComponentOptions extends DockviewRenderFunctions {
     watermarkComponent?: WatermarkConstructor;
     watermarkFrameworkComponent?: any;
@@ -46,7 +54,9 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     tabHeight?: number;
     orientation?: Orientation;
     styles?: ISplitviewStyles;
-    showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean;
+    defaultTabComponent?: string;
+    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
+    createGroupControlElement?: (group: GroupPanel) => IGroupControlRenderer;
 }
 export interface PanelOptions {
     component: string;

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

@@ -1,4 +1,4 @@
-import { Event, TickDelayedEvent } from '../events';
+import { Emitter, Event, TickDelayedEvent } from '../events';
 import { Gridview, IGridView } from './gridview';
 import { Position } from '../dnd/droptarget';
 import { CompositeDisposable, IValueDisposable } from '../lifecycle';
@@ -35,6 +35,7 @@ export interface IBaseGrid<T extends IGridPanelView> {
     getPanel(id: string): T | undefined;
     toJSON(): object;
     fromJSON(data: any): void;
+    clear(): void;
     layout(width: number, height: number, force?: boolean): void;
     setVisible(panel: T, visible: boolean): void;
     isVisible(panel: T): boolean;
@@ -49,7 +50,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Composi
     readonly onDidLayoutChange: Event<void>;
     private readonly _onDidRemoveGroup;
     readonly onDidRemoveGroup: Event<T>;
-    private readonly _onDidAddGroup;
+    protected readonly _onDidAddGroup: Emitter<T>;
     readonly onDidAddGroup: Event<T>;
     private readonly _onDidActiveGroupChange;
     readonly onDidActiveGroupChange: Event<T | undefined>;
@@ -68,6 +69,7 @@ export declare abstract class BaseGrid<T extends IGridPanelView> extends Composi
     constructor(_element: HTMLElement, options: BaseGridOptions);
     abstract toJSON(): object;
     abstract fromJSON(data: any): void;
+    abstract clear(): void;
     setVisible(panel: T, visible: boolean): void;
     isVisible(panel: T): boolean;
     protected doAddGroup(group: T, location?: number[], size?: number): void;

package/dist/esm/gridview/baseComponentGridview.js

@@ -39,7 +39,7 @@ export class BaseGrid extends CompositeDisposable {
         this.element.appendChild(this.gridview.element);
         this.layout(0, 0, true); // set some elements height/widths
         this.addDisposables(this.gridview.onDidChange(() => {
-            this._onDidLayoutChange.fire();
+            this._bufferOnDidLayoutChange.fire();
         }));
         this.addDisposables(Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
             this._bufferOnDidLayoutChange.fire();

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

@@ -71,6 +71,7 @@ export declare class GridviewComponent extends BaseGrid<GridviewPanel> implement
     setActive(panel: GridviewPanel): void;
     focus(): void;
     fromJSON(serializedGridview: SerializedGridview): void;
+    clear(): void;
     movePanel(panel: GridviewPanel, options: {
         direction: Direction;
         reference: string;