chore: align api with existing components

Author: mathuo

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

@@ -51,7 +51,10 @@ import {
     DockviewWillDropEvent,
     WillShowOverlayLocationEvent,
 } from '../dockview/dockviewGroupPanelModel';
-import { PaneviewComponentOptions } from '../paneview/options';
+import {
+    PaneviewComponentOptions,
+    PaneviewDndOverlayEvent,
+} from '../paneview/options';
 import { SplitviewComponentOptions } from '../splitview/options';
 import { GridviewComponentOptions } from '../gridview/options';
 
@@ -295,18 +298,11 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
      * 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<PaneviewDropEvent> {
-        const emitter = new Emitter<PaneviewDropEvent>();
-
-        const disposable = this.component.onDidDrop((e) => {
-            emitter.fire({ ...e, api: this });
-        });
-
-        emitter.dispose = () => {
-            disposable.dispose();
-            emitter.dispose();
-        };
+        return this.component.onDidDrop;
+    }
 
-        return emitter.event;
+    get onUnhandledDragOverEvent(): Event<PaneviewDndOverlayEvent> {
+        return this.component.onUnhandledDragOverEvent;
     }
 
     constructor(private readonly component: IPaneviewComponent) {}

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

@@ -16,6 +16,7 @@ import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
 import { IGroupHeaderProps } from './framework';
 import { FloatingGroupOptions } from './dockviewComponent';
 import { Contraints } from '../gridview/gridviewPanel';
+import { AcceptableEvent, IAcceptableEvent } from '../events';
 
 export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
@@ -65,34 +66,26 @@ export interface DockviewOptions {
     noPanelsOverlay?: 'emptyGroup' | 'watermark';
 }
 
-export interface DockviewDndOverlayEvent {
+export interface DockviewDndOverlayEvent extends IAcceptableEvent {
     nativeEvent: DragEvent;
     target: DockviewGroupDropLocation;
     position: Position;
     group?: DockviewGroupPanel;
     getData: () => PanelTransfer | undefined;
-    //
-    isAccepted: boolean;
-    accept(): void;
 }
 
-export class DockviewUnhandledDragOverEvent implements DockviewDndOverlayEvent {
-    private _isAccepted = false;
-
-    get isAccepted(): boolean {
-        return this._isAccepted;
-    }
-
+export class DockviewUnhandledDragOverEvent
+    extends AcceptableEvent
+    implements DockviewDndOverlayEvent
+{
     constructor(
         readonly nativeEvent: DragEvent,
         readonly target: DockviewGroupDropLocation,
         readonly position: Position,
         readonly getData: () => PanelTransfer | undefined,
         readonly group?: DockviewGroupPanel
-    ) {}
-
-    accept(): void {
-        this._isAccepted = true;
+    ) {
+        super();
     }
 }
 

packages/dockview-core/src/events.ts

@@ -41,6 +41,23 @@ export class DockviewEvent implements IDockviewEvent {
     }
 }
 
+export interface IAcceptableEvent {
+    readonly isAccepted: boolean;
+    accept(): void;
+}
+
+export class AcceptableEvent implements IAcceptableEvent {
+    private _isAccepted = false;
+
+    get isAccepted(): boolean {
+        return this._isAccepted;
+    }
+
+    accept(): void {
+        this._isAccepted = true;
+    }
+}
+
 class LeakageMonitor {
     readonly events = new Map<Event<any>, Stacktrace>();
 

packages/dockview-core/src/paneview/draggablePaneviewPanel.ts

@@ -6,9 +6,13 @@ import {
     PaneTransfer,
 } from '../dnd/dataTransfer';
 import { Droptarget, DroptargetEvent } from '../dnd/droptarget';
-import { Emitter } from '../events';
+import { Emitter, Event } from '../events';
 import { IDisposable } from '../lifecycle';
 import { Orientation } from '../splitview/splitview';
+import {
+    PaneviewDndOverlayEvent,
+    PaneviewUnhandledDragOverEvent,
+} from './options';
 import { IPaneviewComponent } from './paneviewComponent';
 import {
     IPaneviewPanel,
@@ -29,6 +33,11 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
     private readonly _onDidDrop = new Emitter<PaneviewDropEvent>();
     readonly onDidDrop = this._onDidDrop.event;
 
+    private readonly _onUnhandledDragOverEvent =
+        new Emitter<PaneviewDndOverlayEvent>();
+    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent> =
+        this._onUnhandledDragOverEvent.event;
+
     constructor(
         private readonly accessor: IPaneviewComponent,
         id: string,
@@ -40,6 +49,8 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
     ) {
         super(id, component, headerComponent, orientation, isExpanded, true);
 
+        this.addDisposables(this._onDidDrop, this._onUnhandledDragOverEvent);
+
         if (!disableDnd) {
             this.initDragFeatures();
         }
@@ -76,7 +87,7 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
             overlayModel: {
                 activationSize: { type: 'percentage', value: 50 },
             },
-            canDisplayOverlay: (event) => {
+            canDisplayOverlay: (event, position) => {
                 const data = getPaneData();
 
                 if (data) {
@@ -88,15 +99,16 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
                     }
                 }
 
-                if (this.accessor.options.showDndOverlay) {
-                    return this.accessor.options.showDndOverlay({
-                        nativeEvent: event,
-                        getData: getPaneData,
-                        panel: this,
-                    });
-                }
+                const firedEvent = new PaneviewUnhandledDragOverEvent(
+                    event,
+                    position,
+                    getPaneData,
+                    this
+                );
+
+                this._onUnhandledDragOverEvent.fire(firedEvent);
 
-                return false;
+                return firedEvent.isAccepted;
             },
         });
 

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

@@ -1,11 +1,12 @@
+import { PaneTransfer } from '../dnd/dataTransfer';
+import { Position } from '../dnd/droptarget';
 import { CreateComponentOptions } from '../dockview/options';
-import { PaneviewDndOverlayEvent } from './paneviewComponent';
-import { IPanePart } from './paneviewPanel';
+import { AcceptableEvent, IAcceptableEvent } from '../events';
+import { IPanePart, IPaneviewPanel } from './paneviewPanel';
 
 export interface PaneviewOptions {
     disableAutoResizing?: boolean;
     disableDnd?: boolean;
-    showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
     className?: string;
 }
 
@@ -27,9 +28,29 @@ export const PROPERTY_KEYS_PANEVIEW: (keyof PaneviewOptions)[] = (() => {
     const properties: Record<keyof PaneviewOptions, undefined> = {
         disableAutoResizing: undefined,
         disableDnd: undefined,
-        showDndOverlay: undefined,
         className: undefined,
     };
 
     return Object.keys(properties) as (keyof PaneviewOptions)[];
 })();
+
+export interface PaneviewDndOverlayEvent extends IAcceptableEvent {
+    nativeEvent: DragEvent;
+    position: Position;
+    panel: IPaneviewPanel;
+    getData: () => PaneTransfer | undefined;
+}
+
+export class PaneviewUnhandledDragOverEvent
+    extends AcceptableEvent
+    implements PaneviewDndOverlayEvent
+{
+    constructor(
+        readonly nativeEvent: DragEvent,
+        readonly position: Position,
+        readonly getData: () => PaneTransfer | undefined,
+        readonly panel: IPaneviewPanel
+    ) {
+        super();
+    }
+}

packages/dockview-core/src/paneview/paneviewComponent.ts

@@ -6,7 +6,7 @@ import {
     MutableDisposable,
 } from '../lifecycle';
 import { LayoutPriority, Orientation, Sizing } from '../splitview/splitview';
-import { PaneviewComponentOptions } from './options';
+import { PaneviewComponentOptions, PaneviewDndOverlayEvent } from './options';
 import { Paneview } from './paneview';
 import { IPanePart, PaneviewPanel, IPaneviewPanel } from './paneviewPanel';
 import {
@@ -22,12 +22,6 @@ import { Classnames } from '../dom';
 
 const nextLayoutId = sequentialNumberGenerator();
 
-export interface PaneviewDndOverlayEvent {
-    nativeEvent: DragEvent;
-    panel: IPaneviewPanel;
-    getData: () => PaneTransfer | undefined;
-}
-
 export interface SerializedPaneviewPanel {
     snap?: boolean;
     priority?: LayoutPriority;
@@ -109,6 +103,7 @@ export interface IPaneviewComponent extends IDisposable {
     readonly onDidDrop: Event<PaneviewDropEvent>;
     readonly onDidLayoutChange: Event<void>;
     readonly onDidLayoutFromJSON: Event<void>;
+    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent>;
     addPanel<T extends object = Parameters>(
         options: AddPaneviewComponentOptions<T>
     ): IPaneviewPanel;
@@ -146,6 +141,11 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
     private readonly _onDidRemoveView = new Emitter<PaneviewPanel>();
     readonly onDidRemoveView = this._onDidRemoveView.event;
 
+    private readonly _onUnhandledDragOverEvent =
+        new Emitter<PaneviewDndOverlayEvent>();
+    readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent> =
+        this._onUnhandledDragOverEvent.event;
+
     private readonly _classNames: Classnames;
 
     get id(): string {
@@ -204,7 +204,8 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
             this._onDidLayoutfromJSON,
             this._onDidDrop,
             this._onDidAddView,
-            this._onDidRemoveView
+            this._onDidRemoveView,
+            this._onUnhandledDragOverEvent
         );
 
         this._classNames = new Classnames(this.element);
@@ -442,9 +443,14 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
     }
 
     private doAddPanel(panel: PaneFramework): void {
-        const disposable = panel.onDidDrop((event) => {
-            this._onDidDrop.fire(event);
-        });
+        const disposable = new CompositeDisposable(
+            panel.onDidDrop((event) => {
+                this._onDidDrop.fire(event);
+            }),
+            panel.onUnhandledDragOverEvent((event) => {
+                this._onUnhandledDragOverEvent.fire(event);
+            })
+        );
 
         this._viewDisposables.set(panel.id, disposable);
     }

packages/dockview/src/paneview/paneview.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {
     PaneviewPanelApi,
-    PaneviewDndOverlayEvent,
     PaneviewApi,
     PaneviewDropEvent,
     createPaneview,
@@ -32,7 +31,6 @@ export interface IPaneviewReactProps extends PaneviewOptions {
         string,
         React.FunctionComponent<IPaneviewPanelProps>
     >;
-    showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
     onDidDrop?(event: PaneviewDropEvent): void;
 }