Merge pull request #526 from mathuo/525-onwillshowoverlay-to-handle-edge-drops

handle edge drops for onWillShowOverlay

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

@@ -94,7 +94,7 @@ export class ContentContainer
                     return !groupHasOnePanelAndIsActiveDragElement;
                 }
 
-                return this.group.canDisplayOverlay(event, position, 'panel');
+                return this.group.canDisplayOverlay(event, position, 'content');
             },
         });
 

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

@@ -67,7 +67,11 @@ export class VoidContainer extends CompositeDisposable {
                     return last(this.group.panels)?.id !== data.panelId;
                 }
 
-                return group.model.canDisplayOverlay(event, position, 'panel');
+                return group.model.canDisplayOverlay(
+                    event,
+                    position,
+                    'header_space'
+                );
             },
         });
 

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

@@ -568,6 +568,19 @@ export class DockviewComponent
         });
 
         this.addDisposables(
+            this._rootDropTarget,
+            this._rootDropTarget.onWillShowOverlay((event) => {
+                if (this.gridview.length > 0 && event.position === 'center') {
+                    // option only available when no panels in primary grid
+                    return;
+                }
+
+                this._onWillShowOverlay.fire(
+                    new WillShowOverlayLocationEvent(event, {
+                        kind: 'edge',
+                    })
+                );
+            }),
             this._rootDropTarget.onDrop((event) => {
                 const willDropEvent = new DockviewWillDropEvent({
                     nativeEvent: event.nativeEvent,
@@ -576,7 +589,7 @@ export class DockviewComponent
                     api: this._api,
                     group: undefined,
                     getData: getPanelData,
-                    kind: 'content',
+                    kind: 'edge',
                 });
 
                 this._onWillDrop.fire(willDropEvent);

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

@@ -23,7 +23,7 @@ import {
     TabDragEvent,
     TabsContainer,
 } from './components/titlebar/tabsContainer';
-import { DockviewDropTargets, IWatermarkRenderer } from './types';
+import { IWatermarkRenderer } from './types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
 import { IHeaderActionsRenderer } from './options';
@@ -125,7 +125,11 @@ export interface IHeader {
 
 export type DockviewGroupPanelLocked = boolean | 'no-drop-target';
 
-export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content';
+export type DockviewGroupDropLocation =
+    | 'tab'
+    | 'header_space'
+    | 'content'
+    | 'edge';
 
 export interface IDockviewGroupPanelModel extends IPanel {
     readonly isActive: boolean;
@@ -171,7 +175,7 @@ export interface IDockviewGroupPanelModel extends IPanel {
     canDisplayOverlay(
         event: DragEvent,
         position: Position,
-        target: DockviewDropTargets
+        target: DockviewGroupDropLocation
     ): boolean;
 }
 
@@ -920,7 +924,7 @@ export class DockviewGroupPanelModel
     canDisplayOverlay(
         event: DragEvent,
         position: Position,
-        target: DockviewDropTargets
+        target: DockviewGroupDropLocation
     ): boolean {
         // custom overlay handler
         if (this.accessor.options.showDndOverlay) {

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

@@ -6,7 +6,6 @@ import {
     ITabRenderer,
     WatermarkConstructor,
     IWatermarkRenderer,
-    DockviewDropTargets,
 } from './types';
 import { Parameters } from '../panel/types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
@@ -14,7 +13,7 @@ import { ISplitviewStyles, Orientation } from '../splitview/splitview';
 import { PanelTransfer } from '../dnd/dataTransfer';
 import { IDisposable } from '../lifecycle';
 import { DroptargetOverlayModel, Position } from '../dnd/droptarget';
-import { GroupOptions } from './dockviewGroupPanelModel';
+import { DockviewGroupDropLocation, GroupOptions } from './dockviewGroupPanelModel';
 import { IDockviewPanel } from './dockviewPanel';
 import {
     ComponentConstructor,
@@ -65,7 +64,7 @@ export interface ViewFactoryData {
 
 export interface DockviewDndOverlayEvent {
     nativeEvent: DragEvent;
-    target: DockviewDropTargets;
+    target: DockviewGroupDropLocation;
     position: Position;
     group?: DockviewGroupPanel;
     getData: () => PanelTransfer | undefined;

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

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