feat: dnd control changes

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

@@ -1,6 +1,5 @@
 import { DockviewComponent } from '../../dockview/dockviewComponent';
 import {
-    DockviewDropTargets,
     GroupPanelPartInitParameters,
     IContentRenderer,
     ITabRenderer,
@@ -2967,7 +2966,7 @@ describe('dockviewComponent', () => {
         expect(showDndOverlay).toHaveBeenCalledWith({
             nativeEvent: eventLeft,
             position: 'left',
-            target: DockviewDropTargets.Edge,
+            target: 'edge',
             getData: getPanelData,
         });
         expect(showDndOverlay).toBeCalledTimes(1);
@@ -2986,7 +2985,7 @@ describe('dockviewComponent', () => {
         expect(showDndOverlay).toHaveBeenCalledWith({
             nativeEvent: eventRight,
             position: 'right',
-            target: DockviewDropTargets.Edge,
+            target: 'edge',
             getData: getPanelData,
         });
         expect(showDndOverlay).toBeCalledTimes(2);
@@ -3005,7 +3004,7 @@ describe('dockviewComponent', () => {
         expect(showDndOverlay).toHaveBeenCalledWith({
             nativeEvent: eventTop,
             position: 'top',
-            target: DockviewDropTargets.Edge,
+            target: 'edge',
             getData: getPanelData,
         });
         expect(showDndOverlay).toBeCalledTimes(3);
@@ -3024,7 +3023,7 @@ describe('dockviewComponent', () => {
         expect(showDndOverlay).toHaveBeenCalledWith({
             nativeEvent: eventBottom,
             position: 'bottom',
-            target: DockviewDropTargets.Edge,
+            target: 'edge',
             getData: getPanelData,
         });
         expect(showDndOverlay).toBeCalledTimes(4);
@@ -3060,7 +3059,7 @@ describe('dockviewComponent', () => {
         expect(showDndOverlay).toHaveBeenCalledWith({
             nativeEvent: eventTop,
             position: 'center',
-            target: DockviewDropTargets.Edge,
+            target: 'edge',
             getData: getPanelData,
         });
         expect(showDndOverlay).toBeCalledTimes(5);

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(
-                    event,
-                    position,
-                    DockviewDropTargets.Panel
-                );
+                return this.group.canDisplayOverlay(event, position, 'panel');
             },
         });
 

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

@@ -7,7 +7,7 @@ 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 { DragHandler } from '../../../dnd/abstractDragHandler';
@@ -112,7 +112,7 @@ export class Tab extends CompositeDisposable implements ITab {
                 return this.group.model.canDisplayOverlay(
                     event,
                     position,
-                    DockviewDropTargets.Tab
+                    'tab'
                 );
             },
         });

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

@@ -6,7 +6,6 @@ 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;
@@ -62,11 +61,7 @@ export class VoidContainer extends CompositeDisposable {
                     return last(this.group.panels)?.id !== data.panelId;
                 }
 
-                return group.model.canDisplayOverlay(
-                    event,
-                    position,
-                    DockviewDropTargets.Panel
-                );
+                return group.model.canDisplayOverlay(event, position, 'panel');
             },
         });
 

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

@@ -10,11 +10,7 @@ import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
 import { CompositeDisposable, Disposable } from '../lifecycle';
 import { Event, Emitter } from '../events';
 import { Watermark } from './components/watermark/watermark';
-import {
-    IWatermarkRenderer,
-    GroupviewPanelState,
-    DockviewDropTargets,
-} from './types';
+import { IWatermarkRenderer, GroupviewPanelState } from './types';
 import { sequentialNumberGenerator } from '../math';
 import { DefaultDockviewDeserialzier } from './deserializer';
 import { createComponent } from '../panel/componentFactory';
@@ -455,7 +451,7 @@ export class DockviewComponent
                     return this.options.showDndOverlay({
                         nativeEvent: event,
                         position: position,
-                        target: DockviewDropTargets.Edge,
+                        target: 'edge',
                         getData: getPanelData,
                     });
                 }

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

@@ -22,26 +22,6 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
 import { IHeaderActionsRenderer } from './options';
 
-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;
     itemId?: string;
@@ -321,7 +301,12 @@ 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);
@@ -330,7 +315,11 @@ export class DockviewGroupPanelModel
                 // noop
             }),
             this.contentContainer.dropTarget.onDrop((event) => {
-                this.handleDropEvent(event.nativeEvent, event.position);
+                this.handleDropEvent(
+                    'content',
+                    event.nativeEvent,
+                    event.position
+                );
             }),
             this._onMove,
             this._onDidChange,
@@ -775,6 +764,7 @@ export class DockviewGroupPanelModel
     }
 
     private handleDropEvent(
+        type: 'header' | 'content',
         event: DragEvent,
         position: Position,
         index?: number
@@ -783,6 +773,17 @@ export class DockviewGroupPanelModel
             return;
         }
 
+        function getKind(): 'tab' | 'header_space' | 'content' {
+            switch (type) {
+                case 'header':
+                    return typeof index === 'number' ? 'tab' : 'header_space';
+                case 'content':
+                    return 'content';
+            }
+        }
+
+        const kind = getKind();
+
         const data = getPanelData();
 
         if (data && data.viewId === this.accessor.id) {
@@ -790,6 +791,7 @@ export class DockviewGroupPanelModel
                 // this is a group move dnd event
                 const { groupId } = data;
 
+                // TODO: intercept
                 this._onMove.fire({
                     target: position,
                     groupId: groupId,
@@ -814,6 +816,7 @@ export class DockviewGroupPanelModel
                 }
             }
 
+            // TODO: intercept
             this._onMove.fire({
                 target: position,
                 groupId: data.groupId,

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 {
-    Tab,
-    Panel,
-    TabContainer,
-    Edge,
-}
+export type DockviewDropTargets = 'tab' | 'panel' | 'tabContainer' | 'edge';
 
 export interface HeaderPartInitParameters {
     title: string;