dockview 1.4.0 → 1.4.3

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;
@@ -38,15 +39,14 @@ export declare class SplitviewApi implements CommonApi<SerializedSplitview> {
     constructor(component: ISplitviewComponent);
     updateOptions(options: SplitviewComponentUpdateOptions): void;
     removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
-    setVisible(panel: ISplitviewPanel, isVisible: boolean): void;
     focus(): void;
     getPanel(id: string): ISplitviewPanel | undefined;
-    setActive(panel: ISplitviewPanel): void;
     layout(width: number, height: number): void;
     addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel;
     movePanel(from: number, to: number): void;
     fromJSON(data: SerializedSplitview): void;
     toJSON(): SerializedSplitview;
+    clear(): void;
 }
 export declare class PaneviewApi implements CommonApi<SerializedPaneview> {
     private readonly component;
@@ -69,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;
@@ -79,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,11 +98,9 @@ export declare class GridviewApi implements CommonApi<SerializedGridview> {
         size?: number;
     }): void;
     getPanel(id: string): IGridviewPanel | undefined;
-    toggleVisibility(panel: IGridviewPanel): void;
-    setVisible(panel: IGridviewPanel, visible: boolean): void;
-    setActive(panel: IGridviewPanel): void;
     fromJSON(data: SerializedGridview): void;
     toJSON(): SerializedGridview;
+    clear(): void;
 }
 export declare class DockviewApi implements CommonApi<SerializedDockview> {
     private readonly component;
@@ -141,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

@@ -42,18 +42,12 @@ export class SplitviewApi {
     removePanel(panel, sizing) {
         this.component.removePanel(panel, sizing);
     }
-    setVisible(panel, isVisible) {
-        this.component.setVisible(panel, isVisible);
-    }
     focus() {
         this.component.focus();
     }
     getPanel(id) {
         return this.component.getPanel(id);
     }
-    setActive(panel) {
-        this.component.setActive(panel);
-    }
     layout(width, height) {
         return this.component.layout(width, height);
     }
@@ -69,6 +63,9 @@ export class SplitviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 export class PaneviewApi {
     constructor(component) {
@@ -136,6 +133,9 @@ export class PaneviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 export class GridviewApi {
     constructor(component) {
@@ -162,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,21 +201,15 @@ export class GridviewApi {
     getPanel(id) {
         return this.component.getPanel(id);
     }
-    toggleVisibility(panel) {
-        this.component.toggleVisibility(panel);
-    }
-    setVisible(panel, visible) {
-        this.component.setVisible(panel, visible);
-    }
-    setActive(panel) {
-        this.component.setActive(panel);
-    }
     fromJSON(data) {
         return this.component.fromJSON(data);
     }
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }
 export class DockviewApi {
     constructor(component) {
@@ -264,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;
@@ -326,4 +320,7 @@ export class DockviewApi {
     toJSON() {
         return this.component.toJSON();
     }
+    clear() {
+        this.component.clear();
+    }
 }

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

@@ -18,7 +18,6 @@ export interface PanelApi {
     readonly onDidFocusChange: Event<FocusEvent>;
     readonly onDidVisibilityChange: Event<VisibilityEvent>;
     readonly onDidActiveChange: Event<ActiveEvent>;
-    readonly onFocusEvent: Event<void>;
     setVisible(isVisible: boolean): void;
     setActive(): void;
     /**
@@ -56,7 +55,7 @@ export declare class PanelApiImpl extends CompositeDisposable implements PanelAp
     private _isVisible;
     private _width;
     private _height;
-    readonly _onDidPanelDimensionChange: Emitter<PanelDimensionChangeEvent>;
+    readonly _onDidDimensionChange: Emitter<PanelDimensionChangeEvent>;
     readonly onDidDimensionsChange: Event<PanelDimensionChangeEvent>;
     readonly _onDidChangeFocus: Emitter<FocusEvent>;
     readonly onDidFocusChange: Event<FocusEvent>;

package/dist/esm/api/panelApi.js

@@ -12,10 +12,10 @@ export class PanelApiImpl extends CompositeDisposable {
         this._isVisible = true;
         this._width = 0;
         this._height = 0;
-        this._onDidPanelDimensionChange = new Emitter({
+        this._onDidDimensionChange = new Emitter({
             replay: true,
         });
-        this.onDidDimensionsChange = this._onDidPanelDimensionChange.event;
+        this.onDidDimensionsChange = this._onDidDimensionChange.event;
         //
         this._onDidChangeFocus = new Emitter({
             replay: true,
@@ -40,7 +40,7 @@ export class PanelApiImpl extends CompositeDisposable {
         //
         this._onActiveChange = new Emitter();
         this.onActiveChange = this._onActiveChange.event;
-        this.addDisposables(this._onDidPanelDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
+        this.addDisposables(this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this.onDidFocusChange((event) => {
             this._isFocused = event.isFocused;
         }), this.onDidActiveChange((event) => {
             this._isActive = event.isActive;

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,23 +2,6 @@ import { CompositeDisposable } from '../../../lifecycle';
 import { ITabRenderer, GroupPanelPartInitParameters } from '../../../groupview/types';
 import { PanelUpdateEvent } from '../../../panel/types';
 import { GroupPanel } from '../../../groupview/groupviewPanel';
-export declare class WrappedTab implements ITabRenderer {
-    private readonly renderer;
-    private readonly _element;
-    constructor(renderer: ITabRenderer);
-    get innerRenderer(): ITabRenderer;
-    get element(): HTMLElement;
-    get id(): string;
-    show(): void;
-    hide(): void;
-    layout(width: number, height: number): void;
-    update(event: PanelUpdateEvent): void;
-    toJSON(): object;
-    focus(): void;
-    init(parameters: GroupPanelPartInitParameters): void;
-    updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
-    dispose(): void;
-}
 export declare class DefaultTab extends CompositeDisposable implements ITabRenderer {
     private _element;
     private _isPanelVisible;

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

@@ -1,52 +1,5 @@
 import { CompositeDisposable } from '../../../lifecycle';
 import { addDisposableListener } from '../../../events';
-export class WrappedTab {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this._element = document.createElement('element');
-        this.show();
-    }
-    get innerRenderer() {
-        return this.renderer;
-    }
-    get element() {
-        return this._element;
-    }
-    get id() {
-        return this.renderer.id;
-    }
-    show() {
-        if (!this.renderer.element.parentElement) {
-            this._element.appendChild(this.renderer.element);
-        }
-    }
-    hide() {
-        if (this.renderer.element.parentElement) {
-            this.renderer.element.remove();
-        }
-    }
-    layout(width, height) {
-        this.renderer.layout(width, height);
-    }
-    update(event) {
-        this.renderer.update(event);
-    }
-    toJSON() {
-        return this.renderer.toJSON();
-    }
-    focus() {
-        this.renderer.focus();
-    }
-    init(parameters) {
-        this.renderer.init(parameters);
-    }
-    updateParentGroup(group, isPanelVisible) {
-        this.renderer.updateParentGroup(group, isPanelVisible);
-    }
-    dispose() {
-        this.renderer.dispose();
-    }
-}
 export class DefaultTab extends CompositeDisposable {
     constructor() {
         super();
@@ -109,14 +62,20 @@ export class DefaultTab extends CompositeDisposable {
         }
     }
     updateParentGroup(group, isPanelVisible) {
+        const changed = this._isPanelVisible !== isPanelVisible ||
+            this._isGroupActive !== group.isActive;
         this._isPanelVisible = isPanelVisible;
         this._isGroupActive = group.isActive;
-        this.render();
+        if (changed) {
+            this.render();
+        }
     }
     layout(_width, _height) {
         // noop
     }
     render() {
-        this._content.textContent = this.params.title;
+        if (this._content.textContent !== this.params.title) {
+            this._content.textContent = this.params.title;
+        }
     }
 }

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

@@ -1,4 +1,3 @@
-import { WrappedTab } from './components/tab/defaultTab';
 import { GroupPanelPartInitParameters, IActionsRenderer, IContentRenderer, ITabRenderer } from '../groupview/types';
 import { GroupPanel } from '../groupview/groupviewPanel';
 import { IDisposable } from '../lifecycle';
@@ -18,7 +17,7 @@ export declare class DefaultGroupPanelView implements IGroupPanelView {
     private readonly _tab;
     private readonly _actions;
     get content(): IContentRenderer;
-    get tab(): WrappedTab;
+    get tab(): ITabRenderer;
     get actions(): IActionsRenderer | undefined;
     constructor(renderers: {
         content: IContentRenderer;

package/dist/esm/dockview/defaultGroupPanelView.js

@@ -1,9 +1,9 @@
-import { DefaultTab, WrappedTab } from './components/tab/defaultTab';
+import { DefaultTab } from './components/tab/defaultTab';
 export class DefaultGroupPanelView {
     constructor(renderers) {
         var _a;
         this._content = renderers.content;
-        this._tab = new WrappedTab((_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab());
+        this._tab = (_a = renderers.tab) !== null && _a !== void 0 ? _a : new DefaultTab();
         this._actions =
             renderers.actions ||
                 (this.content.actions
@@ -43,9 +43,7 @@ export class DefaultGroupPanelView {
     toJSON() {
         return {
             content: this.content.toJSON(),
-            tab: this.tab.innerRenderer instanceof DefaultTab
-                ? undefined
-                : this.tab.toJSON(),
+            tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
         };
     }
     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

@@ -37,6 +37,7 @@ export interface SerializedDockview {
 export declare type DockviewComponentUpdateOptions = Pick<DockviewComponentOptions, 'orientation' | 'components' | 'frameworkComponents' | 'tabComponents' | 'frameworkTabComponents' | 'showDndOverlay' | 'watermarkFrameworkComponent'>;
 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,7 +6,6 @@ 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';
@@ -24,9 +23,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 +31,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 +90,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 +168,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 +179,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 +211,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()) {
@@ -393,13 +419,13 @@ export class DockviewComponent extends BaseGrid {
             }
         }
         const view = new GroupPanel(this, id, options);
-        view.init({ params: {}, containerApi: null }); // required to initialized .part and allow for correct disposal of group
+        view.init({ params: {}, accessor: 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;
                 this.moveGroupOrPanel(view, groupId, itemId, target, index);
             }), view.model.onDidDrop((event) => {
-                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api }));
+                this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: view }));
             }), view.model.onDidGroupChange((event) => {
                 switch (event.kind) {
                     case GroupChangeKind2.ADD_PANEL:
@@ -463,6 +489,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/dockviewGroupPanel.js

@@ -107,7 +107,7 @@ export class DockviewGroupPanel extends CompositeDisposable {
     layout(width, height) {
         var _a;
         // the obtain the correct dimensions of the content panel we must deduct the tab height
-        this.api._onDidPanelDimensionChange.fire({
+        this.api._onDidDimensionChange.fire({
             width,
             height: height - (this.group.model.header.height || 0),
         });

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

@@ -39,6 +39,11 @@ export interface ViewFactoryData {
     content: string;
     tab?: string;
 }
+export interface DockviewDndOverlayEvent {
+    nativeEvent: DragEvent;
+    target: DockviewDropTargets;
+    group: GroupPanel;
+}
 export interface DockviewComponentOptions extends DockviewRenderFunctions {
     watermarkComponent?: WatermarkConstructor;
     watermarkFrameworkComponent?: any;
@@ -46,7 +51,7 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     tabHeight?: number;
     orientation?: Orientation;
     styles?: ISplitviewStyles;
-    showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean;
+    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
 }
 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();