Merge pull request #110 from mathuo/109-external-dnd-events

feat: improve dnd events

packages/dockview/src/dnd/droptarget.ts

@@ -11,7 +11,7 @@ export enum Position {
     Center = 'Center',
 }
 
-type Quadrant = 'top' | 'bottom' | 'left' | 'right';
+export type Quadrant = 'top' | 'bottom' | 'left' | 'right';
 
 export interface DroptargetEvent {
     position: Position;

packages/dockview/src/dockview/dockviewComponent.ts

@@ -75,6 +75,7 @@ export type DockviewComponentUpdateOptions = Pick<
 
 export interface DockviewDropEvent extends GroupviewDropEvent {
     api: DockviewApi;
+    group: GroupPanel
 }
 
 export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
@@ -665,7 +666,7 @@ export class DockviewComponent
                     this.moveGroupOrPanel(view, groupId, itemId, target, index);
                 }),
                 view.model.onDidDrop((event) => {
-                    this._onDidDrop.fire({ ...event, api: this._api });
+                    this._onDidDrop.fire({ ...event, api: this._api, group: view });
                 }),
                 view.model.onDidGroupChange((event) => {
                     switch (event.kind) {

packages/dockview/src/dockview/options.ts

@@ -49,6 +49,12 @@ export interface ViewFactoryData {
     tab?: string;
 }
 
+export interface DockviewDndOverlayEvent {
+    nativeEvent: DragEvent;
+    target: DockviewDropTargets;
+    group: GroupPanel;
+}
+
 export interface DockviewComponentOptions extends DockviewRenderFunctions {
     watermarkComponent?: WatermarkConstructor;
     watermarkFrameworkComponent?: any;
@@ -56,7 +62,7 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     tabHeight?: number;
     orientation?: Orientation;
     styles?: ISplitviewStyles;
-    showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean;
+    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
 }
 
 export interface PanelOptions {

packages/dockview/src/groupview/groupview.ts

@@ -659,7 +659,11 @@ export class Groupview extends CompositeDisposable implements IGroupview {
     canDisplayOverlay(event: DragEvent, target: DockviewDropTargets): boolean {
         // custom overlay handler
         if (this.accessor.options.showDndOverlay) {
-            return this.accessor.options.showDndOverlay(event, target);
+            return this.accessor.options.showDndOverlay({
+                nativeEvent: event,
+                target,
+                group: this.accessor.getPanel(this.id)!,
+            });
         }
         return false;
     }

packages/dockview/src/index.ts

@@ -8,6 +8,7 @@ export * from './gridview/baseComponentGridview';
 
 export * from './groupview/panel/content';
 export * from './groupview/tab';
+export * from './groupview/dnd';
 export * from './groupview/types';
 export * from './dockview/options';
 

packages/dockview/src/react/dockview/dockview.tsx

@@ -7,6 +7,7 @@ import { ReactPanelContentPart } from './reactContentPart';
 import { ReactPanelHeaderPart } from './reactHeaderPart';
 import { ReactPanelDeserialzier } from '../deserializer';
 import {
+    DockviewDndOverlayEvent,
     GroupPanelFrameworkComponentFactory,
     TabContextMenuEvent,
 } from '../../dockview/options';
@@ -17,7 +18,6 @@ import { IWatermarkPanelProps, ReactWatermarkPart } from './reactWatermarkPart';
 import { PanelCollection, PanelParameters } from '../types';
 import { watchElementResize } from '../../dom';
 import { IContentRenderer, ITabRenderer } from '../../groupview/types';
-import { DockviewDropTargets } from '../../groupview/dnd';
 
 export interface IGroupPanelBaseProps<T extends {} = Record<string, any>>
     extends PanelParameters<T> {
@@ -43,7 +43,7 @@ export interface IDockviewReactProps {
     tabHeight?: number;
     onTabContextMenu?: (event: TabContextMenuEvent) => void;
     onDidDrop?: (event: DockviewDropEvent) => void;
-    showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean;
+    showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
     hideBorders?: boolean;
     className?: string;
     disableAutoResizing?: boolean;