Merge branch 'master' of https://github.com/mathuo/dockview into 460-locked-mode-prevent-all-mouse-resizing

.github/workflows/deploy-docs.yml

@@ -2,8 +2,6 @@ name: Deploy Docs
 
 on:
     workflow_dispatch:
-    schedule:
-        - cron: '0 3 * * *' # every day at 3 am UTC
 
 jobs:
     deploy-nightly-demo-app:
@@ -14,7 +12,7 @@ jobs:
             - name: Use Node.js
               uses: actions/setup-node@v3
               with:
-                  node-version: '18.x'
+                  node-version: '20.x'
 
             - uses: actions/cache@v3
               with:

.github/workflows/main.yml

@@ -14,7 +14,7 @@ jobs:
             - name: Use Node.js
               uses: actions/setup-node@v3
               with:
-                  node-version: '18.x'
+                  node-version: '20.x'
 
             - uses: actions/cache@v3
               with:

.github/workflows/publish.yml

@@ -18,7 +18,7 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v3
               with:
-                  node-version: '18.x'
+                  node-version: '20.x'
                   registry-url: 'https://registry.npmjs.org'
 
             - uses: actions/cache@v3
@@ -46,7 +46,7 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v3
               with:
-                  node-version: '18.x'
+                  node-version: '20.x'
                   registry-url: 'https://registry.npmjs.org'
 
             - uses: actions/cache@v3

packages/dockview-core/src/__tests__/dockview/components/panel/content.spec.ts

@@ -62,16 +62,19 @@ describe('contentContainer', () => {
 
         const disposable = new CompositeDisposable();
 
-        const dockviewComponent = jest.fn<DockviewComponent, []>(() => {
+        const overlayRenderContainer = new OverlayRenderContainer(
-            return {
+            document.createElement('div')
-                renderer: 'onlyWhenVisibile',
+        );
-                overlayRenderContainer: new OverlayRenderContainer(
-                    document.createElement('div')
-                ),
-            } as DockviewComponent;
-        });
 
-        const cut = new ContentContainer(dockviewComponent(), jest.fn() as any);
+        const cut = new ContentContainer(
+            fromPartial<DockviewComponent>({
+                renderer: 'onlyWhenVisibile',
+                overlayRenderContainer,
+            }),
+            fromPartial<DockviewGroupPanelModel>({
+                renderContainer: overlayRenderContainer,
+            })
+        );
 
         disposable.addDisposables(
             cut.onDidFocus(() => {
@@ -84,12 +87,12 @@ describe('contentContainer', () => {
 
         const contentRenderer = new TestContentRenderer('id-1');
 
-        const panel = {
+        const panel = fromPartial<IDockviewPanel>({
             view: {
                 content: contentRenderer,
-            } as Partial<IDockviewPanelModel>,
+            },
             api: { renderer: 'onlyWhenVisibile' },
-        } as Partial<IDockviewPanel>;
+        });
 
         cut.openPanel(panel as IDockviewPanel);
 
@@ -151,13 +154,17 @@ describe('contentContainer', () => {
     });
 
     test("that panels renderered as 'onlyWhenVisibile' are removed when closed", () => {
+        const overlayRenderContainer = fromPartial<OverlayRenderContainer>({
+            detatch: jest.fn(),
+        });
+
         const cut = new ContentContainer(
             fromPartial<DockviewComponent>({
-                overlayRenderContainer: {
+                overlayRenderContainer,
-                    detatch: jest.fn(),
-                },
             }),
-            fromPartial<DockviewGroupPanelModel>({})
+            fromPartial<DockviewGroupPanelModel>({
+                renderContainer: overlayRenderContainer,
+            })
         );
 
         const panel1 = fromPartial<IDockviewPanel>({

packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts

@@ -1,6 +1,5 @@
 import { DockviewComponent } from '../../dockview/dockviewComponent';
 import {
-    DockviewDropTargets,
     GroupPanelPartInitParameters,
     IContentRenderer,
     ITabRenderer,
@@ -2974,7 +2973,7 @@ describe('dockviewComponent', () => {
         expect(showDndOverlay).toHaveBeenCalledWith({
             nativeEvent: eventLeft,
             position: 'left',
-            target: DockviewDropTargets.Edge,
+            target: 'edge',
             getData: getPanelData,
         });
         expect(showDndOverlay).toBeCalledTimes(1);
@@ -2993,7 +2992,7 @@ describe('dockviewComponent', () => {
         expect(showDndOverlay).toHaveBeenCalledWith({
             nativeEvent: eventRight,
             position: 'right',
-            target: DockviewDropTargets.Edge,
+            target: 'edge',
             getData: getPanelData,
         });
         expect(showDndOverlay).toBeCalledTimes(2);
@@ -3012,7 +3011,7 @@ describe('dockviewComponent', () => {
         expect(showDndOverlay).toHaveBeenCalledWith({
             nativeEvent: eventTop,
             position: 'top',
-            target: DockviewDropTargets.Edge,
+            target: 'edge',
             getData: getPanelData,
         });
         expect(showDndOverlay).toBeCalledTimes(3);
@@ -3031,7 +3030,7 @@ describe('dockviewComponent', () => {
         expect(showDndOverlay).toHaveBeenCalledWith({
             nativeEvent: eventBottom,
             position: 'bottom',
-            target: DockviewDropTargets.Edge,
+            target: 'edge',
             getData: getPanelData,
         });
         expect(showDndOverlay).toBeCalledTimes(4);
@@ -3067,7 +3066,7 @@ describe('dockviewComponent', () => {
         expect(showDndOverlay).toHaveBeenCalledWith({
             nativeEvent: eventTop,
             position: 'center',
-            target: DockviewDropTargets.Edge,
+            target: 'edge',
             getData: getPanelData,
         });
         expect(showDndOverlay).toBeCalledTimes(5);
@@ -4435,44 +4434,12 @@ describe('dockviewComponent', () => {
                                 cb();
                             }
                         }),
+                    removeEventListener: jest.fn(),
                     close: jest.fn(),
                 })
             );
         });
 
-        test('that can remove a popout group', async () => {
-            const container = document.createElement('div');
-
-            const dockview = new DockviewComponent({
-                parentElement: container,
-                components: {
-                    default: PanelContentPartTest,
-                },
-                tabComponents: {
-                    test_tab_id: PanelTabPartTest,
-                },
-                orientation: Orientation.HORIZONTAL,
-            });
-
-            dockview.layout(1000, 500);
-
-            const panel1 = dockview.addPanel({
-                id: 'panel_1',
-                component: 'default',
-            });
-
-            await dockview.addPopoutGroup(panel1);
-
-            expect(dockview.panels.length).toBe(1);
-            expect(dockview.groups.length).toBe(2);
-            expect(panel1.api.group.api.location.type).toBe('popout');
-
-            dockview.removePanel(panel1);
-
-            expect(dockview.panels.length).toBe(0);
-            expect(dockview.groups.length).toBe(0);
-        });
-
         test('add a popout group', async () => {
             const container = document.createElement('div');
 
@@ -4512,6 +4479,39 @@ describe('dockviewComponent', () => {
             expect(dockview.panels.length).toBe(2);
         });
 
+        test('that can remove a popout group', async () => {
+            const container = document.createElement('div');
+
+            const dockview = new DockviewComponent({
+                parentElement: container,
+                components: {
+                    default: PanelContentPartTest,
+                },
+                tabComponents: {
+                    test_tab_id: PanelTabPartTest,
+                },
+                orientation: Orientation.HORIZONTAL,
+            });
+
+            dockview.layout(1000, 500);
+
+            const panel1 = dockview.addPanel({
+                id: 'panel_1',
+                component: 'default',
+            });
+
+            await dockview.addPopoutGroup(panel1);
+
+            expect(dockview.panels.length).toBe(1);
+            expect(dockview.groups.length).toBe(2);
+            expect(panel1.api.group.api.location.type).toBe('popout');
+
+            dockview.removePanel(panel1);
+
+            expect(dockview.panels.length).toBe(0);
+            expect(dockview.groups.length).toBe(0);
+        });
+
         test('move from fixed to popout group and back', async () => {
             const container = document.createElement('div');
 

packages/dockview-core/src/api/component.api.ts

@@ -1,5 +1,4 @@
 import {
-    DockviewDropEvent,
     IDockviewComponent,
     SerializedDockview,
 } from '../dockview/dockviewComponent';
@@ -43,6 +42,11 @@ import {
     TabDragEvent,
 } from '../dockview/components/titlebar/tabsContainer';
 import { Box } from '../types';
+import {
+    DockviewDidDropEvent,
+    DockviewWillDropEvent,
+    WillShowOverlayLocationEvent,
+} from '../dockview/dockviewGroupPanelModel';
 
 export interface CommonApi<T = any> {
     readonly height: number;
@@ -648,10 +652,27 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
     /**
      * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
      */
-    get onDidDrop(): Event<DockviewDropEvent> {
+    get onDidDrop(): Event<DockviewDidDropEvent> {
         return this.component.onDidDrop;
     }
 
+    /**
+     * Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and
+     * prevent the event from occuring using the standard `preventDefault()` syntax.
+     *
+     * Preventing certain events may causes unexpected behaviours, use carefully.
+     */
+    get onWillDrop(): Event<DockviewWillDropEvent> {
+        return this.component.onWillDrop;
+    }
+
+    /**
+     *
+     */
+    get onWillShowOverlay(): Event<WillShowOverlayLocationEvent> {
+        return this.component.onWillShowOverlay;
+    }
+
     /**
      * Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
      */

packages/dockview-core/src/dnd/droptarget.ts

@@ -1,10 +1,37 @@
 import { toggleClass } from '../dom';
-import { Emitter, Event } from '../events';
+import { DockviewEvent, Emitter, Event } from '../events';
 import { CompositeDisposable } from '../lifecycle';
 import { DragAndDropObserver } from './dnd';
 import { clamp } from '../math';
 import { Direction } from '../gridview/baseComponentGridview';
 
+export interface DroptargetEvent {
+    readonly position: Position;
+    readonly nativeEvent: DragEvent;
+}
+
+export class WillShowOverlayEvent
+    extends DockviewEvent
+    implements DroptargetEvent
+{
+    get nativeEvent(): DragEvent {
+        return this.options.nativeEvent;
+    }
+
+    get position(): Position {
+        return this.options.position;
+    }
+
+    constructor(
+        private readonly options: {
+            nativeEvent: DragEvent;
+            position: Position;
+        }
+    ) {
+        super();
+    }
+}
+
 export function directionToPosition(direction: Direction): Position {
     switch (direction) {
         case 'above':
@@ -39,11 +66,6 @@ export function positionToDirection(position: Position): Direction {
     }
 }
 
-export interface DroptargetEvent {
-    readonly position: Position;
-    readonly nativeEvent: DragEvent;
-}
-
 export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
 
 export type CanDisplayOverlay =
@@ -70,6 +92,12 @@ const DEFAULT_SIZE: MeasuredValue = {
 const SMALL_WIDTH_BOUNDARY = 100;
 const SMALL_HEIGHT_BOUNDARY = 100;
 
+export interface DroptargetOptions {
+    canDisplayOverlay: CanDisplayOverlay;
+    acceptedTargetZones: Position[];
+    overlayModel?: DroptargetOverlayModel;
+}
+
 export class Droptarget extends CompositeDisposable {
     private targetElement: HTMLElement | undefined;
     private overlayElement: HTMLElement | undefined;
@@ -79,6 +107,10 @@ export class Droptarget extends CompositeDisposable {
     private readonly _onDrop = new Emitter<DroptargetEvent>();
     readonly onDrop: Event<DroptargetEvent> = this._onDrop.event;
 
+    private readonly _onWillShowOverlay = new Emitter<WillShowOverlayEvent>();
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent> =
+        this._onWillShowOverlay.event;
+
     readonly dnd: DragAndDropObserver;
 
     private static USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
@@ -89,11 +121,7 @@ export class Droptarget extends CompositeDisposable {
 
     constructor(
         private readonly element: HTMLElement,
-        private readonly options: {
+        private readonly options: DroptargetOptions
-            canDisplayOverlay: CanDisplayOverlay;
-            acceptedTargetZones: Position[];
-            overlayModel?: DroptargetOverlayModel;
-        }
     ) {
         super();
 
@@ -142,6 +170,22 @@ export class Droptarget extends CompositeDisposable {
                     return;
                 }
 
+                const willShowOverlayEvent = new WillShowOverlayEvent({
+                    nativeEvent: e,
+                    position: quadrant,
+                });
+
+                /**
+                 * Provide an opportunity to prevent the overlay appearing and in turn
+                 * any dnd behaviours
+                 */
+                this._onWillShowOverlay.fire(willShowOverlayEvent);
+
+                if (willShowOverlayEvent.defaultPrevented) {
+                    this.removeDropTarget();
+                    return;
+                }
+
                 if (typeof this.options.canDisplayOverlay === 'boolean') {
                     if (!this.options.canDisplayOverlay) {
                         this.removeDropTarget();
@@ -192,7 +236,7 @@ export class Droptarget extends CompositeDisposable {
             },
         });
 
-        this.addDisposables(this._onDrop, this.dnd);
+        this.addDisposables(this._onDrop, this._onWillShowOverlay, this.dnd);
     }
 
     setTargetZones(acceptedTargetZones: Position[]): void {

packages/dockview-core/src/dockview/components/panel/content.ts

@@ -10,7 +10,6 @@ import { DockviewComponent } from '../../dockviewComponent';
 import { Droptarget } from '../../../dnd/droptarget';
 import { DockviewGroupPanelModel } from '../../dockviewGroupPanelModel';
 import { getPanelData } from '../../../dnd/dataTransfer';
-import { DockviewDropTargets } from '../../types';
 
 export interface IContentContainer extends IDisposable {
     readonly dropTarget: Droptarget;
@@ -95,11 +94,7 @@ export class ContentContainer
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
 
-                return this.group.canDisplayOverlay(
+                return this.group.canDisplayOverlay(event, position, 'panel');
-                    event,
-                    position,
-                    DockviewDropTargets.Panel
-                );
             },
         });
 
@@ -138,7 +133,7 @@ export class ContentContainer
 
         switch (panel.api.renderer) {
             case 'onlyWhenVisibile':
-                this.accessor.overlayRenderContainer.detatch(panel);
+                this.group.renderContainer.detatch(panel);
                 if (this.panel) {
                     if (doRender) {
                         this._element.appendChild(
@@ -154,7 +149,7 @@ export class ContentContainer
                 ) {
                     this._element.removeChild(panel.view.content.element);
                 }
-                container = this.accessor.overlayRenderContainer.attach({
+                container = this.group.renderContainer.attach({
                     panel,
                     referenceContainer: this,
                 });

packages/dockview-core/src/dockview/components/tab/tab.ts

@@ -7,9 +7,14 @@ import {
 } from '../../../dnd/dataTransfer';
 import { toggleClass } from '../../../dom';
 import { DockviewComponent } from '../../dockviewComponent';
-import { DockviewDropTargets, ITabRenderer } from '../../types';
+import { ITabRenderer } from '../../types';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
-import { DroptargetEvent, Droptarget } from '../../../dnd/droptarget';
+import {
+    DroptargetEvent,
+    Droptarget,
+    Position,
+    WillShowOverlayEvent,
+} from '../../../dnd/droptarget';
 import { DragHandler } from '../../../dnd/abstractDragHandler';
 import { IDockviewPanel } from '../../dockviewPanel';
 
@@ -40,18 +45,9 @@ class TabDragHandler extends DragHandler {
     }
 }
 
-export interface ITab extends IDisposable {
+export class Tab extends CompositeDisposable {
-    readonly panel: IDockviewPanel;
-    readonly element: HTMLElement;
-    setContent: (element: ITabRenderer) => void;
-    onChanged: Event<MouseEvent>;
-    onDrop: Event<DroptargetEvent>;
-    setActive(isActive: boolean): void;
-}
-
-export class Tab extends CompositeDisposable implements ITab {
     private readonly _element: HTMLElement;
-    private readonly droptarget: Droptarget;
+    private readonly dropTarget: Droptarget;
     private content: ITabRenderer | undefined = undefined;
 
     private readonly _onChanged = new Emitter<MouseEvent>();
@@ -63,6 +59,8 @@ export class Tab extends CompositeDisposable implements ITab {
     private readonly _onDragStart = new Emitter<DragEvent>();
     readonly onDragStart = this._onDragStart.event;
 
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
+
     public get element(): HTMLElement {
         return this._element;
     }
@@ -88,7 +86,7 @@ export class Tab extends CompositeDisposable implements ITab {
             this.panel
         );
 
-        this.droptarget = new Droptarget(this._element, {
+        this.dropTarget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
                 if (this.group.locked) {
@@ -112,11 +110,13 @@ export class Tab extends CompositeDisposable implements ITab {
                 return this.group.model.canDisplayOverlay(
                     event,
                     position,
-                    DockviewDropTargets.Tab
+                    'tab'
                 );
             },
         });
 
+        this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
+
         this.addDisposables(
             this._onChanged,
             this._onDropped,
@@ -132,10 +132,10 @@ export class Tab extends CompositeDisposable implements ITab {
 
                 this._onChanged.fire(event);
             }),
-            this.droptarget.onDrop((event) => {
+            this.dropTarget.onDrop((event) => {
                 this._onDropped.fire(event);
             }),
-            this.droptarget
+            this.dropTarget
         );
     }
 

packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts

@@ -4,12 +4,14 @@ import {
     IValueDisposable,
 } from '../../../lifecycle';
 import { addDisposableListener, Emitter, Event } from '../../../events';
-import { ITab, Tab } from '../tab/tab';
+import { Tab } from '../tab/tab';
-import { DockviewComponent } from '../../dockviewComponent';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { VoidContainer } from './voidContainer';
 import { toggleClass } from '../../../dom';
 import { DockviewPanel, IDockviewPanel } from '../../dockviewPanel';
+import { DockviewComponent } from '../../dockviewComponent';
+import { WillShowOverlayEvent } from '../../../dnd/droptarget';
+import { DockviewGroupDropLocation } from '../../dockviewGroupPanelModel';
 
 export interface TabDropIndexEvent {
     readonly event: DragEvent;
@@ -30,17 +32,21 @@ export interface ITabsContainer extends IDisposable {
     readonly element: HTMLElement;
     readonly panels: string[];
     readonly size: number;
+    readonly onDrop: Event<TabDropIndexEvent>;
+    readonly onTabDragStart: Event<TabDragEvent>;
+    readonly onGroupDragStart: Event<GroupDragEvent>;
+    readonly onWillShowOverlay: Event<{
+        event: WillShowOverlayEvent;
+        kind: DockviewGroupDropLocation;
+    }>;
     hidden: boolean;
-    delete: (id: string) => void;
+    delete(id: string): void;
-    indexOf: (id: string) => number;
+    indexOf(id: string): number;
-    onDrop: Event<TabDropIndexEvent>;
+    setActive(isGroupActive: boolean): void;
-    onTabDragStart: Event<TabDragEvent>;
+    setActivePanel(panel: IDockviewPanel): void;
-    onGroupDragStart: Event<GroupDragEvent>;
+    isActive(tab: Tab): boolean;
-    setActive: (isGroupActive: boolean) => void;
+    closePanel(panel: IDockviewPanel): void;
-    setActivePanel: (panel: IDockviewPanel) => void;
+    openPanel(panel: IDockviewPanel, index?: number): void;
-    isActive: (tab: ITab) => boolean;
-    closePanel: (panel: IDockviewPanel) => void;
-    openPanel: (panel: IDockviewPanel, index?: number) => void;
     setRightActionsElement(element: HTMLElement | undefined): void;
     setLeftActionsElement(element: HTMLElement | undefined): void;
     setPrefixActionsElement(element: HTMLElement | undefined): void;
@@ -59,7 +65,7 @@ export class TabsContainer
     private readonly preActionsContainer: HTMLElement;
     private readonly voidContainer: VoidContainer;
 
-    private tabs: IValueDisposable<ITab>[] = [];
+    private tabs: IValueDisposable<Tab>[] = [];
     private selectedIndex = -1;
     private rightActions: HTMLElement | undefined;
     private leftActions: HTMLElement | undefined;
@@ -77,6 +83,15 @@ export class TabsContainer
     readonly onGroupDragStart: Event<GroupDragEvent> =
         this._onGroupDragStart.event;
 
+    private readonly _onWillShowOverlay = new Emitter<{
+        event: WillShowOverlayEvent;
+        kind: DockviewGroupDropLocation;
+    }>();
+    readonly onWillShowOverlay: Event<{
+        event: WillShowOverlayEvent;
+        kind: DockviewGroupDropLocation;
+    }> = this._onWillShowOverlay.event;
+
     get panels(): string[] {
         return this.tabs.map((_) => _.value.panel.id);
     }
@@ -150,7 +165,7 @@ export class TabsContainer
         return this._element;
     }
 
-    public isActive(tab: ITab): boolean {
+    public isActive(tab: Tab): boolean {
         return (
             this.selectedIndex > -1 &&
             this.tabs[this.selectedIndex].value === tab
@@ -167,12 +182,6 @@ export class TabsContainer
     ) {
         super();
 
-        this.addDisposables(
-            this._onDrop,
-            this._onTabDragStart,
-            this._onGroupDragStart
-        );
-
         this._element = document.createElement('div');
         this._element.className = 'tabs-and-actions-container';
 
@@ -182,27 +191,6 @@ export class TabsContainer
             this.accessor.options.singleTabMode === 'fullwidth'
         );
 
-        this.addDisposables(
-            this.accessor.onDidAddPanel((e) => {
-                if (e.api.group === this.group) {
-                    toggleClass(
-                        this._element,
-                        'dv-single-tab',
-                        this.size === 1
-                    );
-                }
-            }),
-            this.accessor.onDidRemovePanel((e) => {
-                if (e.api.group === this.group) {
-                    toggleClass(
-                        this._element,
-                        'dv-single-tab',
-                        this.size === 1
-                    );
-                }
-            })
-        );
-
         this.rightActionsContainer = document.createElement('div');
         this.rightActionsContainer.className = 'right-actions-container';
 
@@ -224,6 +212,28 @@ export class TabsContainer
         this._element.appendChild(this.rightActionsContainer);
 
         this.addDisposables(
+            this.accessor.onDidAddPanel((e) => {
+                if (e.api.group === this.group) {
+                    toggleClass(
+                        this._element,
+                        'dv-single-tab',
+                        this.size === 1
+                    );
+                }
+            }),
+            this.accessor.onDidRemovePanel((e) => {
+                if (e.api.group === this.group) {
+                    toggleClass(
+                        this._element,
+                        'dv-single-tab',
+                        this.size === 1
+                    );
+                }
+            }),
+            this._onWillShowOverlay,
+            this._onDrop,
+            this._onTabDragStart,
+            this._onGroupDragStart,
             this.voidContainer,
             this.voidContainer.onDragStart((event) => {
                 this._onGroupDragStart.fire({
@@ -237,6 +247,9 @@ export class TabsContainer
                     index: this.tabs.length,
                 });
             }),
+            this.voidContainer.onWillShowOverlay((event) => {
+                this._onWillShowOverlay.fire({ event, kind: 'header_space' });
+            }),
             addDisposableListener(
                 this.voidContainer.element,
                 'mousedown',
@@ -286,7 +299,7 @@ export class TabsContainer
     }
 
     private addTab(
-        tab: IValueDisposable<ITab>,
+        tab: IValueDisposable<Tab>,
         index: number = this.tabs.length
     ): void {
         if (index < 0 || index > this.tabs.length) {
@@ -396,10 +409,13 @@ export class TabsContainer
                     event: event.nativeEvent,
                     index: this.tabs.findIndex((x) => x.value === tab),
                 });
+            }),
+            tab.onWillShowOverlay((event) => {
+                this._onWillShowOverlay.fire({ event, kind: 'tab' });
             })
         );
 
-        const value: IValueDisposable<ITab> = { value: tab, disposable };
+        const value: IValueDisposable<Tab> = { value: tab, disposable };
 
         this.addTab(value, index);
     }

packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts

@@ -1,16 +1,19 @@
 import { last } from '../../../array';
 import { getPanelData } from '../../../dnd/dataTransfer';
-import { Droptarget, DroptargetEvent } from '../../../dnd/droptarget';
+import {
+    Droptarget,
+    DroptargetEvent,
+    WillShowOverlayEvent,
+} from '../../../dnd/droptarget';
 import { GroupDragHandler } from '../../../dnd/groupDragHandler';
 import { DockviewComponent } from '../../dockviewComponent';
 import { addDisposableListener, Emitter, Event } from '../../../events';
 import { CompositeDisposable } from '../../../lifecycle';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
-import { DockviewDropTargets } from '../../types';
 
 export class VoidContainer extends CompositeDisposable {
     private readonly _element: HTMLElement;
-    private readonly voidDropTarget: Droptarget;
+    private readonly dropTraget: Droptarget;
 
     private readonly _onDrop = new Emitter<DroptargetEvent>();
     readonly onDrop: Event<DroptargetEvent> = this._onDrop.event;
@@ -18,6 +21,8 @@ export class VoidContainer extends CompositeDisposable {
     private readonly _onDragStart = new Emitter<DragEvent>();
     readonly onDragStart = this._onDragStart.event;
 
+    readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
+
     get element(): HTMLElement {
         return this._element;
     }
@@ -44,7 +49,7 @@ export class VoidContainer extends CompositeDisposable {
 
         const handler = new GroupDragHandler(this._element, accessor, group);
 
-        this.voidDropTarget = new Droptarget(this._element, {
+        this.dropTraget = new Droptarget(this._element, {
             acceptedTargetZones: ['center'],
             canDisplayOverlay: (event, position) => {
                 const data = getPanelData();
@@ -62,23 +67,21 @@ export class VoidContainer extends CompositeDisposable {
                     return last(this.group.panels)?.id !== data.panelId;
                 }
 
-                return group.model.canDisplayOverlay(
+                return group.model.canDisplayOverlay(event, position, 'panel');
-                    event,
-                    position,
-                    DockviewDropTargets.Panel
-                );
             },
         });
 
+        this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
+
         this.addDisposables(
             handler,
             handler.onDragStart((event) => {
                 this._onDragStart.fire(event);
             }),
-            this.voidDropTarget.onDrop((event) => {
+            this.dropTraget.onDrop((event) => {
                 this._onDrop.fire(event);
             }),
-            this.voidDropTarget
+            this.dropTraget
         );
     }
 }

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -13,13 +13,9 @@ import {
 import { tail, sequenceEquals, remove } from '../array';
 import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
 import { CompositeDisposable, Disposable, IDisposable } from '../lifecycle';
-import { Event, Emitter } from '../events';
+import { Event, Emitter, addDisposableWindowListener } from '../events';
 import { Watermark } from './components/watermark/watermark';
-import {
+import { IWatermarkRenderer, GroupviewPanelState } from './types';
-    IWatermarkRenderer,
-    GroupviewPanelState,
-    DockviewDropTargets,
-} from './types';
 import { sequentialNumberGenerator } from '../math';
 import { DefaultDockviewDeserialzier } from './deserializer';
 import { createComponent } from '../panel/componentFactory';
@@ -44,7 +40,9 @@ import { Orientation, Sizing } from '../splitview/splitview';
 import {
     GroupOptions,
     GroupPanelViewState,
-    GroupviewDropEvent,
+    DockviewDidDropEvent,
+    DockviewWillDropEvent,
+    WillShowOverlayLocationEvent,
 } from './dockviewGroupPanelModel';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
@@ -230,18 +228,16 @@ export type DockviewComponentUpdateOptions = Pick<
     | 'disableFloatingGroups'
     | 'floatingGroupBounds'
     | 'rootOverlayModel'
+    | 'disableDnd'
 >;
 
-export interface DockviewDropEvent extends GroupviewDropEvent {
-    api: DockviewApi;
-    group: DockviewGroupPanel | null;
-}
-
 export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly activePanel: IDockviewPanel | undefined;
     readonly totalPanels: number;
     readonly panels: IDockviewPanel[];
-    readonly onDidDrop: Event<DockviewDropEvent>;
+    readonly onDidDrop: Event<DockviewDidDropEvent>;
+    readonly onWillDrop: Event<DockviewWillDropEvent>;
+    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
     readonly orientation: Orientation;
     updateOptions(options: DockviewComponentUpdateOptions): void;
     moveGroupOrPanel(
@@ -311,8 +307,16 @@ export class DockviewComponent
     readonly onWillDragGroup: Event<GroupDragEvent> =
         this._onWillDragGroup.event;
 
-    private readonly _onDidDrop = new Emitter<DockviewDropEvent>();
+    private readonly _onDidDrop = new Emitter<DockviewDidDropEvent>();
-    readonly onDidDrop: Event<DockviewDropEvent> = this._onDidDrop.event;
+    readonly onDidDrop: Event<DockviewDidDropEvent> = this._onDidDrop.event;
+
+    private readonly _onWillDrop = new Emitter<DockviewWillDropEvent>();
+    readonly onWillDrop: Event<DockviewWillDropEvent> = this._onWillDrop.event;
+
+    private readonly _onWillShowOverlay =
+        new Emitter<WillShowOverlayLocationEvent>();
+    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent> =
+        this._onWillShowOverlay.event;
 
     private readonly _onDidRemovePanel = new Emitter<IDockviewPanel>();
     readonly onDidRemovePanel: Event<IDockviewPanel> =
@@ -392,11 +396,13 @@ export class DockviewComponent
             this.overlayRenderContainer,
             this._onWillDragPanel,
             this._onWillDragGroup,
+            this._onWillShowOverlay,
             this._onDidActivePanelChange,
             this._onDidAddPanel,
             this._onDidRemovePanel,
             this._onDidLayoutFromJSON,
             this._onDidDrop,
+            this._onWillDrop,
             Event.any(
                 this.onDidAddGroup,
                 this.onDidRemoveGroup
@@ -475,7 +481,7 @@ export class DockviewComponent
                     return this.options.showDndOverlay({
                         nativeEvent: event,
                         position: position,
-                        target: DockviewDropTargets.Edge,
+                        target: 'edge',
                         getData: getPanelData,
                     });
                 }
@@ -489,6 +495,22 @@ export class DockviewComponent
 
         this.addDisposables(
             this._rootDropTarget.onDrop((event) => {
+                const willDropEvent = new DockviewWillDropEvent({
+                    nativeEvent: event.nativeEvent,
+                    position: event.position,
+                    panel: undefined,
+                    api: this._api,
+                    group: undefined,
+                    getData: getPanelData,
+                    kind: 'content',
+                });
+
+                this._onWillDrop.fire(willDropEvent);
+
+                if (willDropEvent.defaultPrevented) {
+                    return;
+                }
+
                 const data = getPanelData();
 
                 if (data) {
@@ -499,12 +521,16 @@ export class DockviewComponent
                         'center'
                     );
                 } else {
-                    this._onDidDrop.fire({
+                    this._onDidDrop.fire(
-                        ...event,
+                        new DockviewDidDropEvent({
-                        api: this._api,
+                            nativeEvent: event.nativeEvent,
-                        group: null,
+                            position: event.position,
-                        getData: getPanelData,
+                            panel: undefined,
-                    });
+                            api: this._api,
+                            group: undefined,
+                            getData: getPanelData,
+                        })
+                    );
                 }
             }),
             this._rootDropTarget
@@ -536,12 +562,15 @@ export class DockviewComponent
             from: DockviewGroupPanel;
             to: DockviewGroupPanel;
         }) {
+            const activePanel = options.from.activePanel;
             const panels = [...options.from.panels].map((panel) =>
                 options.from.model.removePanel(panel)
             );
 
             panels.forEach((panel) => {
-                options.to.model.openPanel(panel);
+                options.to.model.openPanel(panel, {
+                    skipSetPanelActive: activePanel !== panel,
+                });
             });
         }
 
@@ -599,10 +628,18 @@ export class DockviewComponent
                     return;
                 }
 
+                const gready = document.createElement('div');
+                gready.className = 'dv-overlay-render-container';
+
+                const overlayRenderContainer = new OverlayRenderContainer(
+                    gready
+                );
+
                 const referenceGroup =
                     item instanceof DockviewPanel ? item.group : item;
 
                 const group = this.createGroup({ id: groupId });
+                group.model.renderContainer = overlayRenderContainer;
 
                 if (item instanceof DockviewPanel) {
                     const panel = referenceGroup.model.removePanel(item);
@@ -612,9 +649,13 @@ export class DockviewComponent
                         from: referenceGroup,
                         to: group,
                     });
-                    referenceGroup.api.setHidden(false);
+                    referenceGroup.api.setHidden(true);
                 }
 
+                popoutContainer.classList.add('dv-dockview');
+                popoutContainer.style.overflow = 'hidden';
+                popoutContainer.appendChild(gready);
+
                 popoutContainer.appendChild(group.element);
 
                 group.model.location = {
@@ -630,6 +671,19 @@ export class DockviewComponent
                 };
 
                 popoutWindowDisposable.addDisposables(
+                    /**
+                     * ResizeObserver seems slow here, I do not know why but we don't need it
+                     * since we can reply on the window resize event as we will occupy the full
+                     * window dimensions
+                     */
+                    addDisposableWindowListener(
+                        _window.window!,
+                        'resize',
+                        () => {
+                            group.layout(window.innerWidth, window.innerHeight);
+                        }
+                    ),
+                    overlayRenderContainer,
                     Disposable.from(() => {
                         if (this.getPanel(referenceGroup.id)) {
                             moveGroupWithoutDestroying({
@@ -641,12 +695,16 @@ export class DockviewComponent
                                 referenceGroup.api.setHidden(false);
                             }
 
-                            this.doRemoveGroup(group);
+                            this.doRemoveGroup(group, {
+                                skipPopoutAssociated: true,
+                            });
                         } else {
                             const removedGroup = this.doRemoveGroup(group, {
                                 skipDispose: true,
                                 skipActive: true,
                             });
+                            removedGroup.model.renderContainer =
+                                this.overlayRenderContainer;
                             removedGroup.model.location = { type: 'grid' };
                             this.doAddGroup(removedGroup, [0]);
                         }
@@ -1459,6 +1517,7 @@ export class DockviewComponent
             | {
                   skipActive?: boolean;
                   skipDispose?: boolean;
+                  skipPopoutAssociated?: boolean;
               }
             | undefined
     ): DockviewGroupPanel {
@@ -1498,7 +1557,9 @@ export class DockviewComponent
 
             if (selectedGroup) {
                 if (!options?.skipDispose) {
-                    this.doRemoveGroup(selectedGroup.referenceGroup);
+                    if (!options?.skipPopoutAssociated) {
+                        this.removeGroup(selectedGroup.referenceGroup);
+                    }
 
                     selectedGroup.popoutGroup.dispose();
                     this._groups.delete(group.id);
@@ -1753,11 +1814,18 @@ export class DockviewComponent
                     this.moveGroupOrPanel(view, groupId, itemId, target, index);
                 }),
                 view.model.onDidDrop((event) => {
-                    this._onDidDrop.fire({
+                    this._onDidDrop.fire(event);
-                        ...event,
+                }),
-                        api: this._api,
+                view.model.onWillDrop((event) => {
-                        group: view,
+                    this._onWillDrop.fire(event);
-                    });
+                }),
+                view.model.onWillShowOverlay((event) => {
+                    if (this.options.disableDnd) {
+                        event.event.preventDefault();
+                        return;
+                    }
+
+                    this._onWillShowOverlay.fire(event);
                 }),
                 view.model.onDidAddPanel((event) => {
                     this._onDidAddPanel.fire(event.panel);

packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts

@@ -1,9 +1,14 @@
 import { DockviewApi } from '../api/component.api';
 import { getPanelData, PanelTransfer } from '../dnd/dataTransfer';
-import { Position } from '../dnd/droptarget';
+import { Position, WillShowOverlayEvent } from '../dnd/droptarget';
 import { DockviewComponent } from './dockviewComponent';
 import { isAncestor, toggleClass } from '../dom';
-import { addDisposableListener, Emitter, Event } from '../events';
+import {
+    addDisposableListener,
+    DockviewEvent,
+    Emitter,
+    Event,
+} from '../events';
 import { IViewSize } from '../gridview/gridview';
 import { CompositeDisposable } from '../lifecycle';
 import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
@@ -21,26 +26,7 @@ import { DockviewDropTargets, IWatermarkRenderer } from './types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
 import { IHeaderActionsRenderer } from './options';
-
+import { OverlayRenderContainer } from '../overlayRenderContainer';
-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 };
-}
 
 interface GroupMoveEvent {
     groupId: string;
@@ -66,15 +52,69 @@ export interface GroupPanelViewState extends CoreGroupOptions {
     id: string;
 }
 
-export interface GroupviewChangeEvent {
+export interface DockviewGroupChangeEvent {
     readonly panel: IDockviewPanel;
 }
 
-export interface GroupviewDropEvent {
+export class DockviewDidDropEvent extends DockviewEvent {
-    readonly nativeEvent: DragEvent;
+    get nativeEvent(): DragEvent {
-    readonly position: Position;
+        return this.options.nativeEvent;
-    readonly index?: number;
+    }
-    getData(): PanelTransfer | undefined;
+
+    get position(): Position {
+        return this.options.position;
+    }
+
+    get panel(): IDockviewPanel | undefined {
+        return this.options.panel;
+    }
+
+    get group(): DockviewGroupPanel | undefined {
+        return this.options.group;
+    }
+
+    get api(): DockviewApi {
+        return this.options.api;
+    }
+
+    constructor(
+        private readonly options: {
+            readonly nativeEvent: DragEvent;
+            readonly position: Position;
+            readonly panel?: IDockviewPanel;
+            getData(): PanelTransfer | undefined;
+            group?: DockviewGroupPanel;
+            api: DockviewApi;
+        }
+    ) {
+        super();
+    }
+
+    getData(): PanelTransfer | undefined {
+        return this.options.getData();
+    }
+}
+
+export class DockviewWillDropEvent extends DockviewDidDropEvent {
+    private readonly _kind: DockviewGroupDropLocation;
+
+    get kind(): DockviewGroupDropLocation {
+        return this._kind;
+    }
+
+    constructor(options: {
+        readonly nativeEvent: DragEvent;
+        readonly position: Position;
+        readonly panel?: IDockviewPanel;
+        getData(): PanelTransfer | undefined;
+        kind: DockviewGroupDropLocation;
+        group?: DockviewGroupPanel;
+        api: DockviewApi;
+    }) {
+        super(options);
+
+        this._kind = options.kind;
+    }
 }
 
 export interface IHeader {
@@ -83,6 +123,8 @@ export interface IHeader {
 
 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;
@@ -90,10 +132,11 @@ export interface IDockviewGroupPanelModel extends IPanel {
     readonly activePanel: IDockviewPanel | undefined;
     readonly header: IHeader;
     readonly isContentFocused: boolean;
-    readonly onDidDrop: Event<GroupviewDropEvent>;
+    readonly onDidDrop: Event<DockviewDidDropEvent>;
-    readonly onDidAddPanel: Event<GroupviewChangeEvent>;
+    readonly onWillDrop: Event<DockviewWillDropEvent>;
-    readonly onDidRemovePanel: Event<GroupviewChangeEvent>;
+    readonly onDidAddPanel: Event<DockviewGroupChangeEvent>;
-    readonly onDidActivePanelChange: Event<GroupviewChangeEvent>;
+    readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>;
+    readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
     readonly onMove: Event<GroupMoveEvent>;
     locked: DockviewGroupPanelLocked;
     setActive(isActive: boolean): void;
@@ -135,6 +178,11 @@ export type DockviewGroupLocation =
     | { type: 'floating' }
     | { type: 'popout'; getWindow: () => Window };
 
+export interface WillShowOverlayLocationEvent {
+    event: WillShowOverlayEvent;
+    kind: DockviewGroupDropLocation;
+}
+
 export class DockviewGroupPanelModel
     extends CompositeDisposable
     implements IDockviewGroupPanelModel
@@ -165,8 +213,16 @@ export class DockviewGroupPanelModel
     private readonly _onMove = new Emitter<GroupMoveEvent>();
     readonly onMove: Event<GroupMoveEvent> = this._onMove.event;
 
-    private readonly _onDidDrop = new Emitter<GroupviewDropEvent>();
+    private readonly _onDidDrop = new Emitter<DockviewDidDropEvent>();
-    readonly onDidDrop: Event<GroupviewDropEvent> = this._onDidDrop.event;
+    readonly onDidDrop: Event<DockviewDidDropEvent> = this._onDidDrop.event;
+
+    private readonly _onWillDrop = new Emitter<DockviewWillDropEvent>();
+    readonly onWillDrop: Event<DockviewWillDropEvent> = this._onWillDrop.event;
+
+    private readonly _onWillShowOverlay =
+        new Emitter<WillShowOverlayLocationEvent>();
+    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent> =
+        this._onWillShowOverlay.event;
 
     private readonly _onTabDragStart = new Emitter<TabDragEvent>();
     readonly onTabDragStart: Event<TabDragEvent> = this._onTabDragStart.event;
@@ -175,19 +231,22 @@ export class DockviewGroupPanelModel
     readonly onGroupDragStart: Event<GroupDragEvent> =
         this._onGroupDragStart.event;
 
-    private readonly _onDidAddPanel = new Emitter<GroupviewChangeEvent>();
+    private readonly _onDidAddPanel = new Emitter<DockviewGroupChangeEvent>();
-    readonly onDidAddPanel: Event<GroupviewChangeEvent> =
+    readonly onDidAddPanel: Event<DockviewGroupChangeEvent> =
         this._onDidAddPanel.event;
 
-    private readonly _onDidRemovePanel = new Emitter<GroupviewChangeEvent>();
+    private readonly _onDidRemovePanel =
-    readonly onDidRemovePanel: Event<GroupviewChangeEvent> =
+        new Emitter<DockviewGroupChangeEvent>();
+    readonly onDidRemovePanel: Event<DockviewGroupChangeEvent> =
         this._onDidRemovePanel.event;
 
     private readonly _onDidActivePanelChange =
-        new Emitter<GroupviewChangeEvent>();
+        new Emitter<DockviewGroupChangeEvent>();
-    readonly onDidActivePanelChange: Event<GroupviewChangeEvent> =
+    readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent> =
         this._onDidActivePanelChange.event;
 
+    private readonly _api: DockviewApi;
+
     get element(): HTMLElement {
         throw new Error('not supported');
     }
@@ -301,6 +360,8 @@ export class DockviewGroupPanelModel
 
         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);
@@ -316,6 +377,7 @@ export class DockviewGroupPanelModel
         this.addDisposables(
             this._onTabDragStart,
             this._onGroupDragStart,
+            this._onWillShowOverlay,
             this.tabsContainer.onTabDragStart((event) => {
                 this._onTabDragStart.fire(event);
             }),
@@ -323,8 +385,14 @@ export class DockviewGroupPanelModel
                 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);
             }),
@@ -332,25 +400,57 @@ export class DockviewGroupPanelModel
                 // noop
             }),
             this.contentContainer.dropTarget.onDrop((event) => {
-                this.handleDropEvent(event.nativeEvent, event.position);
+                this.handleDropEvent(
+                    'content',
+                    event.nativeEvent,
+                    event.position
+                );
+            }),
+            this.tabsContainer.onWillShowOverlay((event) => {
+                this._onWillShowOverlay.fire(event);
+            }),
+            this.contentContainer.dropTarget.onWillShowOverlay((event) => {
+                this._onWillShowOverlay.fire({ event, kind: 'content' });
             }),
             this._onMove,
             this._onDidChange,
             this._onDidDrop,
+            this._onWillDrop,
             this._onDidAddPanel,
             this._onDidRemovePanel,
             this._onDidActivePanelChange
         );
     }
 
+    private _overwriteRenderContainer: OverlayRenderContainer | null = null;
+
+    set renderContainer(value: OverlayRenderContainer | null) {
+        this.panels.forEach((panel) => {
+            this.renderContainer.detatch(panel);
+        });
+
+        this._overwriteRenderContainer = value;
+
+        this.panels.forEach((panel) => {
+            this.rerender(panel);
+        });
+    }
+
+    get renderContainer(): OverlayRenderContainer {
+        return (
+            this._overwriteRenderContainer ??
+            this.accessor.overlayRenderContainer
+        );
+    }
+
     initialize(): void {
-        if (this.options?.panels) {
+        if (this.options.panels) {
             this.options.panels.forEach((panel) => {
                 this.doAddPanel(panel);
             });
         }
 
-        if (this.options?.activePanel) {
+        if (this.options.activePanel) {
             this.openPanel(this.options.activePanel);
         }
 
@@ -366,7 +466,7 @@ export class DockviewGroupPanelModel
                 );
             this.addDisposables(this._rightHeaderActions);
             this._rightHeaderActions.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 api: this.groupPanel.api,
             });
             this.tabsContainer.setRightActionsElement(
@@ -381,7 +481,7 @@ export class DockviewGroupPanelModel
                 );
             this.addDisposables(this._leftHeaderActions);
             this._leftHeaderActions.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 api: this.groupPanel.api,
             });
             this.tabsContainer.setLeftActionsElement(
@@ -396,7 +496,7 @@ export class DockviewGroupPanelModel
                 );
             this.addDisposables(this._prefixHeaderActions);
             this._prefixHeaderActions.init({
-                containerApi: new DockviewApi(this.accessor),
+                containerApi: this._api,
                 api: this.groupPanel.api,
             });
             this.tabsContainer.setPrefixActionsElement(
@@ -735,7 +835,7 @@ export class DockviewGroupPanelModel
         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;
@@ -778,6 +878,7 @@ export class DockviewGroupPanelModel
     }
 
     private handleDropEvent(
+        type: 'header' | 'content',
         event: DragEvent,
         position: Position,
         index?: number
@@ -786,6 +887,34 @@ export class DockviewGroupPanelModel
             return;
         }
 
+        function getKind(): DockviewGroupDropLocation {
+            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) {
@@ -824,12 +953,16 @@ export class DockviewGroupPanelModel
                 index,
             });
         } else {
-            this._onDidDrop.fire({
+            this._onDidDrop.fire(
-                nativeEvent: event,
+                new DockviewDidDropEvent({
-                position,
+                    nativeEvent: event,
-                index,
+                    position,
-                getData: () => getPanelData(),
+                    panel,
-            });
+                    getData: () => getPanelData(),
+                    group: this.groupPanel,
+                    api: this._api,
+                })
+            );
         }
     }
 

packages/dockview-core/src/dockview/options.ts

@@ -103,6 +103,7 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     debug?: boolean;
     rootOverlayModel?: DroptargetOverlayModel;
     locked?: boolean;
+    disableDnd?: boolean;
 }
 
 export interface PanelOptions<P extends object = Parameters> {

packages/dockview-core/src/dockview/types.ts

@@ -7,12 +7,7 @@ import { Optional } from '../types';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelRenderer } from '../overlayRenderContainer';
 
-export enum DockviewDropTargets {
+export type DockviewDropTargets = 'tab' | 'panel' | 'tabContainer' | 'edge';
-    Tab,
-    Panel,
-    TabContainer,
-    Edge,
-}
 
 export interface HeaderPartInitParameters {
     title: string;

packages/dockview-core/src/events.ts

@@ -24,6 +24,18 @@ export namespace Event {
     };
 }
 
+export class DockviewEvent {
+    private _defaultPrevented = false;
+
+    get defaultPrevented(): boolean {
+        return this._defaultPrevented;
+    }
+
+    preventDefault(): void {
+        this._defaultPrevented = true;
+    }
+}
+
 class LeakageMonitor {
     readonly events = new Map<Event<any>, Stacktrace>();
 

packages/dockview/src/dockview/dockview.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
     DockviewComponent,
-    DockviewDropEvent,
+    DockviewWillDropEvent,
     DockviewDndOverlayEvent,
     GroupPanelFrameworkComponentFactory,
     DockviewPanelApi,
@@ -12,6 +12,7 @@ import {
     IHeaderActionsRenderer,
     DockviewPanelRenderer,
     DroptargetOverlayModel,
+    DockviewDidDropEvent,
 } from 'dockview-core';
 import { ReactPanelContentPart } from './reactContentPart';
 import { ReactPanelHeaderPart } from './reactHeaderPart';
@@ -61,7 +62,8 @@ export interface IDockviewReactProps {
     components: PanelCollection<IDockviewPanelProps>;
     tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
     watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
-    onDidDrop?: (event: DockviewDropEvent) => void;
+    onDidDrop?: (event: DockviewDidDropEvent) => void;
+    onWillDrop?: (event: DockviewWillDropEvent) => void;
     showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
     hideBorders?: boolean;
     className?: string;
@@ -82,6 +84,7 @@ export interface IDockviewReactProps {
     defaultRenderer?: DockviewPanelRenderer;
     rootOverlayModel?: DroptargetOverlayModel;
     locked?: boolean;
+    disableDnd?: boolean;
 }
 
 const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
@@ -185,6 +188,7 @@ export const DockviewReact = React.forwardRef(
                 debug: props.debug,
                 rootOverlayModel: props.rootOverlayModel,
                 locked: props.locked,
+                disableDnd: props.disableDnd,
             });
 
             const { clientWidth, clientHeight } = domRef.current;
@@ -209,6 +213,16 @@ export const DockviewReact = React.forwardRef(
             dockviewRef.current.locked = !!props.locked;
         }, [props.locked]);
 
+        React.useEffect(() => {
+            if (!dockviewRef.current) {
+                return;
+            }
+
+            dockviewRef.current.updateOptions({
+                disableDnd: props.disableDnd,
+            });
+        }, [props.disableDnd]);
+
         React.useEffect(() => {
             if (!dockviewRef.current) {
                 return () => {
@@ -227,6 +241,24 @@ export const DockviewReact = React.forwardRef(
             };
         }, [props.onDidDrop]);
 
+        React.useEffect(() => {
+            if (!dockviewRef.current) {
+                return () => {
+                    // noop
+                };
+            }
+
+            const disposable = dockviewRef.current.onWillDrop((event) => {
+                if (props.onWillDrop) {
+                    props.onWillDrop(event);
+                }
+            });
+
+            return () => {
+                disposable.dispose();
+            };
+        }, [props.onWillDrop]);
+
         React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;