dockview-core 1.9.1 → 1.10.0

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

@@ -21,4 +21,3 @@ export declare class DockviewFloatingGroupPanel extends CompositeDisposable impl
         width: number;
     }>): void;
 }
-//# sourceMappingURL=dockviewFloatingGroupPanel.d.ts.map

package/dist/esm/dockview/dockviewFloatingGroupPanel.js

@@ -10,4 +10,3 @@ export class DockviewFloatingGroupPanel extends CompositeDisposable {
         this.overlay.setBounds(bounds);
     }
 }
-//# sourceMappingURL=dockviewFloatingGroupPanel.js.map

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

@@ -22,10 +22,10 @@ export declare class DockviewGroupPanel extends GridviewPanel<DockviewGroupPanel
     set locked(value: DockviewGroupPanelLocked);
     get header(): IHeader;
     constructor(accessor: DockviewComponent, id: string, options: GroupOptions);
+    focus(): void;
     initialize(): void;
     setActive(isActive: boolean): void;
     layout(width: number, height: number): void;
     getComponent(): IFrameworkPart;
     toJSON(): any;
 }
-//# sourceMappingURL=dockviewGroupPanel.d.ts.map

package/dist/esm/dockview/dockviewGroupPanel.js

@@ -33,6 +33,12 @@ export class DockviewGroupPanel extends GridviewPanel {
         this.api.initialize(this); // cannot use 'this' after after 'super' call
         this._model = new DockviewGroupPanelModel(this.element, accessor, id, options, this);
     }
+    focus() {
+        if (!this.api.isActive) {
+            this.api.setActive();
+        }
+        super.focus();
+    }
     initialize() {
         this._model.initialize();
     }
@@ -51,4 +57,3 @@ export class DockviewGroupPanel extends GridviewPanel {
         return this.model.toJSON();
     }
 }
-//# sourceMappingURL=dockviewGroupPanel.js.map

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

@@ -1,7 +1,8 @@
+import { DockviewApi } from '../api/component.api';
 import { PanelTransfer } from '../dnd/dataTransfer';
-import { Position } from '../dnd/droptarget';
+import { Position, WillShowOverlayEvent } from '../dnd/droptarget';
 import { DockviewComponent } from './dockviewComponent';
-import { Event } from '../events';
+import { DockviewEvent, Event, IDockviewEvent } from '../events';
 import { IViewSize } from '../gridview/gridview';
 import { CompositeDisposable } from '../lifecycle';
 import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
@@ -9,19 +10,7 @@ import { GroupDragEvent, TabDragEvent } from './components/titlebar/tabsContaine
 import { DockviewDropTargets } from './types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
-export interface DndService {
-    canDisplayOverlay(group: IDockviewGroupPanelModel, event: DragEvent, target: DockviewDropTargets): boolean;
-    onDrop(group: IDockviewGroupPanelModel, event: DragEvent, position: Position, index?: number): void;
-}
-export interface IGroupItem {
-    id: string;
-    header: {
-        element: HTMLElement;
-    };
-    body: {
-        element: HTMLElement;
-    };
-}
+import { OverlayRenderContainer } from '../overlayRenderContainer';
 interface GroupMoveEvent {
     groupId: string;
     itemId?: string;
@@ -31,6 +20,7 @@ interface GroupMoveEvent {
 interface CoreGroupOptions {
     locked?: DockviewGroupPanelLocked;
     hideHeader?: boolean;
+    skipSetActive?: boolean;
 }
 export interface GroupOptions extends CoreGroupOptions {
     readonly panels?: IDockviewPanel[];
@@ -42,19 +32,44 @@ export interface GroupPanelViewState extends CoreGroupOptions {
     activeView?: string;
     id: string;
 }
-export interface GroupviewChangeEvent {
+export interface DockviewGroupChangeEvent {
     readonly panel: IDockviewPanel;
 }
-export interface GroupviewDropEvent {
-    readonly nativeEvent: DragEvent;
-    readonly position: Position;
-    readonly index?: number;
+export declare class DockviewDidDropEvent extends DockviewEvent {
+    private readonly options;
+    get nativeEvent(): DragEvent;
+    get position(): Position;
+    get panel(): IDockviewPanel | undefined;
+    get group(): DockviewGroupPanel | undefined;
+    get api(): DockviewApi;
+    constructor(options: {
+        readonly nativeEvent: DragEvent;
+        readonly position: Position;
+        readonly panel?: IDockviewPanel;
+        getData(): PanelTransfer | undefined;
+        group?: DockviewGroupPanel;
+        api: DockviewApi;
+    });
     getData(): PanelTransfer | undefined;
 }
+export declare class DockviewWillDropEvent extends DockviewDidDropEvent {
+    private readonly _kind;
+    get kind(): DockviewGroupDropLocation;
+    constructor(options: {
+        readonly nativeEvent: DragEvent;
+        readonly position: Position;
+        readonly panel?: IDockviewPanel;
+        getData(): PanelTransfer | undefined;
+        kind: DockviewGroupDropLocation;
+        group?: DockviewGroupPanel;
+        api: DockviewApi;
+    });
+}
 export interface IHeader {
     hidden: boolean;
 }
 export type DockviewGroupPanelLocked = boolean | 'no-drop-target';
+export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content';
 export interface IDockviewGroupPanelModel extends IPanel {
     readonly isActive: boolean;
     readonly size: number;
@@ -62,10 +77,11 @@ export interface IDockviewGroupPanelModel extends IPanel {
     readonly activePanel: IDockviewPanel | undefined;
     readonly header: IHeader;
     readonly isContentFocused: boolean;
-    readonly onDidDrop: Event<GroupviewDropEvent>;
-    readonly onDidAddPanel: Event<GroupviewChangeEvent>;
-    readonly onDidRemovePanel: Event<GroupviewChangeEvent>;
-    readonly onDidActivePanelChange: Event<GroupviewChangeEvent>;
+    readonly onDidDrop: Event<DockviewDidDropEvent>;
+    readonly onWillDrop: Event<DockviewWillDropEvent>;
+    readonly onDidAddPanel: Event<DockviewGroupChangeEvent>;
+    readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>;
+    readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
     readonly onMove: Event<GroupMoveEvent>;
     locked: DockviewGroupPanelLocked;
     setActive(isActive: boolean): void;
@@ -92,7 +108,26 @@ export interface IDockviewGroupPanelModel extends IPanel {
     }): void;
     canDisplayOverlay(event: DragEvent, position: Position, target: DockviewDropTargets): boolean;
 }
-export type DockviewGroupLocation = 'grid' | 'floating' | 'popout';
+export type DockviewGroupLocation = {
+    type: 'grid';
+} | {
+    type: 'floating';
+} | {
+    type: 'popout';
+    getWindow: () => Window;
+};
+export declare class WillShowOverlayLocationEvent implements IDockviewEvent {
+    private readonly event;
+    private _kind;
+    get kind(): DockviewGroupDropLocation;
+    get nativeEvent(): DragEvent;
+    get position(): Position;
+    get defaultPrevented(): boolean;
+    preventDefault(): void;
+    constructor(event: WillShowOverlayEvent, options: {
+        kind: DockviewGroupDropLocation;
+    });
+}
 export declare class DockviewGroupPanelModel extends CompositeDisposable implements IDockviewGroupPanelModel {
     private readonly container;
     private accessor;
@@ -118,17 +153,22 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     private readonly _onMove;
     readonly onMove: Event<GroupMoveEvent>;
     private readonly _onDidDrop;
-    readonly onDidDrop: Event<GroupviewDropEvent>;
+    readonly onDidDrop: Event<DockviewDidDropEvent>;
+    private readonly _onWillDrop;
+    readonly onWillDrop: Event<DockviewWillDropEvent>;
+    private readonly _onWillShowOverlay;
+    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
     private readonly _onTabDragStart;
     readonly onTabDragStart: Event<TabDragEvent>;
     private readonly _onGroupDragStart;
     readonly onGroupDragStart: Event<GroupDragEvent>;
     private readonly _onDidAddPanel;
-    readonly onDidAddPanel: Event<GroupviewChangeEvent>;
+    readonly onDidAddPanel: Event<DockviewGroupChangeEvent>;
     private readonly _onDidRemovePanel;
-    readonly onDidRemovePanel: Event<GroupviewChangeEvent>;
+    readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>;
     private readonly _onDidActivePanelChange;
-    readonly onDidActivePanelChange: Event<GroupviewChangeEvent>;
+    readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
+    private readonly _api;
     get element(): HTMLElement;
     get activePanel(): IDockviewPanel | undefined;
     get locked(): DockviewGroupPanelLocked;
@@ -143,6 +183,10 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     get location(): DockviewGroupLocation;
     set location(value: DockviewGroupLocation);
     constructor(container: HTMLElement, accessor: DockviewComponent, id: string, options: GroupOptions, groupPanel: DockviewGroupPanel);
+    focusContent(): void;
+    private _overwriteRenderContainer;
+    set renderContainer(value: OverlayRenderContainer | null);
+    get renderContainer(): OverlayRenderContainer;
     initialize(): void;
     rerender(panel: IDockviewPanel): void;
     indexOf(panel: IDockviewPanel): number;
@@ -161,17 +205,19 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     focus(): void;
     openPanel(panel: IDockviewPanel, options?: {
         index?: number;
-        skipFocus?: boolean;
-        skipSetPanelActive?: boolean;
+        skipSetActive?: boolean;
         skipSetGroupActive?: boolean;
     }): void;
-    removePanel(groupItemOrId: IDockviewPanel | string): IDockviewPanel;
+    removePanel(groupItemOrId: IDockviewPanel | string, options?: {
+        skipSetActive?: boolean;
+        skipSetActiveGroup?: boolean;
+    }): IDockviewPanel;
     closeAllPanels(): void;
     closePanel(panel: IDockviewPanel): void;
     private doClose;
     isPanelActive(panel: IDockviewPanel): boolean;
     updateActions(element: HTMLElement | undefined): void;
-    setActive(isGroupActive: boolean, skipFocus?: boolean, force?: boolean): void;
+    setActive(isGroupActive: boolean, force?: boolean): void;
     layout(width: number, height: number): void;
     private _removePanel;
     private doRemovePanel;
@@ -184,4 +230,3 @@ export declare class DockviewGroupPanelModel extends CompositeDisposable impleme
     dispose(): void;
 }
 export {};
-//# sourceMappingURL=dockviewGroupPanelModel.d.ts.map

package/dist/esm/dockview/dockviewGroupPanelModel.js

@@ -1,10 +1,64 @@
 import { DockviewApi } from '../api/component.api';
 import { getPanelData } from '../dnd/dataTransfer';
 import { isAncestor, toggleClass } from '../dom';
-import { addDisposableListener, Emitter } from '../events';
+import { addDisposableListener, DockviewEvent, Emitter, } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { ContentContainer, } from './components/panel/content';
 import { TabsContainer, } from './components/titlebar/tabsContainer';
+export class DockviewDidDropEvent extends DockviewEvent {
+    get nativeEvent() {
+        return this.options.nativeEvent;
+    }
+    get position() {
+        return this.options.position;
+    }
+    get panel() {
+        return this.options.panel;
+    }
+    get group() {
+        return this.options.group;
+    }
+    get api() {
+        return this.options.api;
+    }
+    constructor(options) {
+        super();
+        this.options = options;
+    }
+    getData() {
+        return this.options.getData();
+    }
+}
+export class DockviewWillDropEvent extends DockviewDidDropEvent {
+    get kind() {
+        return this._kind;
+    }
+    constructor(options) {
+        super(options);
+        this._kind = options.kind;
+    }
+}
+export class WillShowOverlayLocationEvent {
+    get kind() {
+        return this._kind;
+    }
+    get nativeEvent() {
+        return this.event.nativeEvent;
+    }
+    get position() {
+        return this.event.position;
+    }
+    get defaultPrevented() {
+        return this.event.defaultPrevented;
+    }
+    preventDefault() {
+        this.event.preventDefault();
+    }
+    constructor(event, options) {
+        this.event = event;
+        this._kind = options.kind;
+    }
+}
 export class DockviewGroupPanelModel extends CompositeDisposable {
     get element() {
         throw new Error('not supported');
@@ -50,7 +104,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this._location = value;
         toggleClass(this.container, 'dv-groupview-floating', false);
         toggleClass(this.container, 'dv-groupview-popout', false);
-        switch (value) {
+        switch (value.type) {
             case 'grid':
                 this.contentContainer.dropTarget.setTargetZones([
                     'top',
@@ -86,7 +140,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.groupPanel = groupPanel;
         this._isGroupActive = false;
         this._locked = false;
-        this._location = 'grid';
+        this._location = { type: 'grid' };
         this.mostRecentlyUsed = [];
         this._onDidChange = new Emitter();
         this.onDidChange = this._onDidChange.event;
@@ -97,6 +151,10 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.onMove = this._onMove.event;
         this._onDidDrop = new Emitter();
         this.onDidDrop = this._onDidDrop.event;
+        this._onWillDrop = new Emitter();
+        this.onWillDrop = this._onWillDrop.event;
+        this._onWillShowOverlay = new Emitter();
+        this.onWillShowOverlay = this._onWillShowOverlay.event;
         this._onTabDragStart = new Emitter();
         this.onTabDragStart = this._onTabDragStart.event;
         this._onGroupDragStart = new Emitter();
@@ -107,46 +165,69 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.onDidRemovePanel = this._onDidRemovePanel.event;
         this._onDidActivePanelChange = new Emitter();
         this.onDidActivePanelChange = this._onDidActivePanelChange.event;
+        this._overwriteRenderContainer = null;
         toggleClass(this.container, 'groupview', true);
+        this._api = new DockviewApi(this.accessor);
         this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
         this.contentContainer = new ContentContainer(this.accessor, this);
         container.append(this.tabsContainer.element, this.contentContainer.element);
         this.header.hidden = !!options.hideHeader;
         this.locked = (_a = options.locked) !== null && _a !== void 0 ? _a : false;
-        this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this.tabsContainer.onTabDragStart((event) => {
+        this.addDisposables(this._onTabDragStart, this._onGroupDragStart, this._onWillShowOverlay, this.tabsContainer.onTabDragStart((event) => {
             this._onTabDragStart.fire(event);
         }), this.tabsContainer.onGroupDragStart((event) => {
             this._onGroupDragStart.fire(event);
         }), this.tabsContainer.onDrop((event) => {
-            this.handleDropEvent(event.event, 'center', event.index);
+            this.handleDropEvent('header', event.event, 'center', event.index);
         }), this.contentContainer.onDidFocus(() => {
-            this.accessor.doSetGroupActive(this.groupPanel, true);
+            this.accessor.doSetGroupActive(this.groupPanel);
         }), this.contentContainer.onDidBlur(() => {
             // noop
         }), this.contentContainer.dropTarget.onDrop((event) => {
-            this.handleDropEvent(event.nativeEvent, event.position);
-        }), this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
+            this.handleDropEvent('content', event.nativeEvent, event.position);
+        }), this.tabsContainer.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(event);
+        }), this.contentContainer.dropTarget.onWillShowOverlay((event) => {
+            this._onWillShowOverlay.fire(new WillShowOverlayLocationEvent(event, {
+                kind: 'content',
+            }));
+        }), this._onMove, this._onDidChange, this._onDidDrop, this._onWillDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
+    }
+    focusContent() {
+        this.contentContainer.element.focus();
+    }
+    set renderContainer(value) {
+        this.panels.forEach((panel) => {
+            this.renderContainer.detatch(panel);
+        });
+        this._overwriteRenderContainer = value;
+        this.panels.forEach((panel) => {
+            this.rerender(panel);
+        });
+    }
+    get renderContainer() {
+        var _a;
+        return ((_a = this._overwriteRenderContainer) !== null && _a !== void 0 ? _a : this.accessor.overlayRenderContainer);
     }
     initialize() {
-        var _a, _b;
-        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.panels) {
+        if (this.options.panels) {
             this.options.panels.forEach((panel) => {
                 this.doAddPanel(panel);
             });
         }
-        if ((_b = this.options) === null || _b === void 0 ? void 0 : _b.activePanel) {
+        if (this.options.activePanel) {
             this.openPanel(this.options.activePanel);
         }
         // must be run after the constructor otherwise this.parent may not be
         // correctly initialized
-        this.setActive(this.isActive, true, true);
+        this.setActive(this.isActive, true);
         this.updateContainer();
         if (this.accessor.options.createRightHeaderActionsElement) {
             this._rightHeaderActions =
                 this.accessor.options.createRightHeaderActionsElement(this.groupPanel);
             this.addDisposables(this._rightHeaderActions);
             this._rightHeaderActions.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 api: this.groupPanel.api,
             });
             this.tabsContainer.setRightActionsElement(this._rightHeaderActions.element);
@@ -156,7 +237,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
                 this.accessor.options.createLeftHeaderActionsElement(this.groupPanel);
             this.addDisposables(this._leftHeaderActions);
             this._leftHeaderActions.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 api: this.groupPanel.api,
             });
             this.tabsContainer.setLeftActionsElement(this._leftHeaderActions.element);
@@ -166,7 +247,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
                 this.accessor.options.createPrefixHeaderActionsElement(this.groupPanel);
             this.addDisposables(this._prefixHeaderActions);
             this._prefixHeaderActions.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 api: this.groupPanel.api,
             });
             this.tabsContainer.setPrefixActionsElement(this._prefixHeaderActions.element);
@@ -246,34 +327,45 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         //noop
     }
     focus() {
-        var _a, _b;
-        (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        var _a;
+        (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus();
     }
     openPanel(panel, options = {}) {
+        /**
+         * set the panel group
+         * add the panel
+         * check if group active
+         * check if panel active
+         */
         if (typeof options.index !== 'number' ||
             options.index > this.panels.length) {
             options.index = this.panels.length;
         }
-        const skipSetPanelActive = !!options.skipSetPanelActive;
-        const skipSetGroupActive = !!options.skipSetGroupActive;
+        const skipSetActive = !!options.skipSetActive;
         // ensure the group is updated before we fire any events
-        panel.updateParentGroup(this.groupPanel, true);
+        panel.updateParentGroup(this.groupPanel, {
+            skipSetActive: options.skipSetActive,
+        });
+        this.doAddPanel(panel, options.index, {
+            skipSetActive: skipSetActive,
+        });
         if (this._activePanel === panel) {
-            if (!skipSetGroupActive) {
-                this.accessor.doSetGroupActive(this.groupPanel);
-            }
+            this.contentContainer.renderPanel(panel, { asActive: true });
             return;
         }
-        this.doAddPanel(panel, options.index, skipSetPanelActive);
-        if (!skipSetPanelActive) {
+        if (!skipSetActive) {
             this.doSetActivePanel(panel);
         }
-        if (!skipSetGroupActive) {
-            this.accessor.doSetGroupActive(this.groupPanel, !!options.skipFocus);
+        if (!options.skipSetGroupActive) {
+            this.accessor.doSetGroupActive(this.groupPanel);
+        }
+        if (!options.skipSetActive) {
+            this.updateContainer();
         }
-        this.updateContainer();
     }
-    removePanel(groupItemOrId) {
+    removePanel(groupItemOrId, options = {
+        skipSetActive: false,
+    }) {
         const id = typeof groupItemOrId === 'string'
             ? groupItemOrId
             : groupItemOrId.id;
@@ -281,7 +373,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         if (!panelToRemove) {
             throw new Error('invalid operation');
         }
-        return this._removePanel(panelToRemove);
+        return this._removePanel(panelToRemove, options);
     }
     closeAllPanels() {
         if (this.panels.length > 0) {
@@ -307,12 +399,8 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     updateActions(element) {
         this.tabsContainer.setRightActionsElement(element);
     }
-    setActive(isGroupActive, skipFocus = false, force = false) {
-        var _a, _b, _c, _d;
+    setActive(isGroupActive, force = false) {
         if (!force && this.isActive === isGroupActive) {
-            if (!skipFocus) {
-                (_b = (_a = this._activePanel) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-            }
             return;
         }
         this._isGroupActive = isGroupActive;
@@ -323,11 +411,6 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             this.doSetActivePanel(this.panels[0]);
         }
         this.updateContainer();
-        if (isGroupActive) {
-            if (!skipFocus) {
-                (_d = (_c = this._activePanel) === null || _c === void 0 ? void 0 : _c.focus) === null || _d === void 0 ? void 0 : _d.call(_c);
-            }
-        }
     }
     layout(width, height) {
         var _a;
@@ -338,17 +421,22 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             this._activePanel.layout(this._width, this._height);
         }
     }
-    _removePanel(panel) {
+    _removePanel(panel, options) {
         const isActivePanel = this._activePanel === panel;
         this.doRemovePanel(panel);
         if (isActivePanel && this.panels.length > 0) {
             const nextPanel = this.mostRecentlyUsed[0];
-            this.openPanel(nextPanel);
+            this.openPanel(nextPanel, {
+                skipSetActive: options.skipSetActive,
+                skipSetGroupActive: options.skipSetActiveGroup,
+            });
         }
         if (this._activePanel && this.panels.length === 0) {
             this.doSetActivePanel(undefined);
         }
-        this.updateContainer();
+        if (!options.skipSetActive) {
+            this.updateContainer();
+        }
         return panel;
     }
     doRemovePanel(panel) {
@@ -363,13 +451,13 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         }
         this._onDidRemovePanel.fire({ panel });
     }
-    doAddPanel(panel, index = this.panels.length, skipSetActive = false) {
+    doAddPanel(panel, index = this.panels.length, options = { skipSetActive: false }) {
         const existingPanel = this._panels.indexOf(panel);
         const hasExistingPanel = existingPanel > -1;
         this.tabsContainer.show();
         this.contentContainer.show();
         this.tabsContainer.openPanel(panel, index);
-        if (!skipSetActive) {
+        if (!options.skipSetActive) {
             this.contentContainer.openPanel(panel);
         }
         if (hasExistingPanel) {
@@ -381,12 +469,17 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this._onDidAddPanel.fire({ panel });
     }
     doSetActivePanel(panel) {
+        if (this._activePanel === panel) {
+            return;
+        }
         this._activePanel = panel;
         if (panel) {
             this.tabsContainer.setActivePanel(panel);
             panel.layout(this._width, this._height);
             this.updateMru(panel);
-            this._onDidActivePanelChange.fire({ panel });
+            this._onDidActivePanelChange.fire({
+                panel,
+            });
         }
     }
     updateMru(panel) {
@@ -398,11 +491,11 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
     updateContainer() {
         var _a, _b;
         toggleClass(this.container, 'empty', this.isEmpty);
-        this.panels.forEach((panel) => panel.updateParentGroup(this.groupPanel, this.isActive));
+        this.panels.forEach((panel) => panel.runEvents());
         if (this.isEmpty && !this.watermark) {
             const watermark = this.accessor.createWatermarkComponent();
             watermark.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 group: this.groupPanel,
             });
             this.watermark = watermark;
@@ -435,10 +528,32 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         }
         return false;
     }
-    handleDropEvent(event, position, index) {
+    handleDropEvent(type, event, position, index) {
         if (this.locked === 'no-drop-target') {
             return;
         }
+        function getKind() {
+            switch (type) {
+                case 'header':
+                    return typeof index === 'number' ? 'tab' : 'header_space';
+                case 'content':
+                    return 'content';
+            }
+        }
+        const panel = typeof index === 'number' ? this.panels[index] : undefined;
+        const willDropEvent = new DockviewWillDropEvent({
+            nativeEvent: event,
+            position,
+            panel,
+            getData: () => getPanelData(),
+            kind: getKind(),
+            group: this.groupPanel,
+            api: this._api,
+        });
+        this._onWillDrop.fire(willDropEvent);
+        if (willDropEvent.defaultPrevented) {
+            return;
+        }
         const data = getPanelData();
         if (data && data.viewId === this.accessor.id) {
             if (data.panelId === null) {
@@ -471,12 +586,14 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
             });
         }
         else {
-            this._onDidDrop.fire({
+            this._onDidDrop.fire(new DockviewDidDropEvent({
                 nativeEvent: event,
                 position,
-                index,
+                panel,
                 getData: () => getPanelData(),
-            });
+                group: this.groupPanel,
+                api: this._api,
+            }));
         }
     }
     dispose() {
@@ -484,6 +601,7 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         super.dispose();
         (_a = this.watermark) === null || _a === void 0 ? void 0 : _a.element.remove();
         (_c = (_b = this.watermark) === null || _b === void 0 ? void 0 : _b.dispose) === null || _c === void 0 ? void 0 : _c.call(_b);
+        this.watermark = undefined;
         for (const panel of this.panels) {
             panel.dispose();
         }
@@ -491,4 +609,3 @@ export class DockviewGroupPanelModel extends CompositeDisposable {
         this.contentContainer.dispose();
     }
 }
-//# sourceMappingURL=dockviewGroupPanelModel.js.map