feat: dnd edge custom dnd handles

packages/dockview/src/__tests__/dnd/droptarget.spec.ts

@@ -4,6 +4,7 @@ import {
     directionToPosition,
     Droptarget,
     Position,
+    positionToDirection,
 } from '../../dnd/droptarget';
 import { fireEvent } from '@testing-library/dom';
 
@@ -44,6 +45,17 @@ describe('droptarget', () => {
         );
     });
 
+    test('positionToDirection', () => {
+        expect(positionToDirection('top')).toBe('above');
+        expect(positionToDirection('bottom')).toBe('below');
+        expect(positionToDirection('left')).toBe('left');
+        expect(positionToDirection('right')).toBe('right');
+        expect(positionToDirection('center')).toBe('within');
+        expect(() => positionToDirection('bad_input' as any)).toThrow(
+            "invalid position 'bad_input'"
+        );
+    });
+
     test('non-directional', () => {
         let position: Position | undefined = undefined;
 

packages/dockview/src/dnd/droptarget.ts

@@ -27,6 +27,23 @@ export function directionToPosition(direction: Direction): Position {
     }
 }
 
+export function positionToDirection(position: Position): Direction {
+    switch (position) {
+        case 'top':
+            return 'above';
+        case 'bottom':
+            return 'below';
+        case 'left':
+            return 'left';
+        case 'right':
+            return 'right';
+        case 'center':
+            return 'within';
+        default:
+            throw new Error(`invalid position '${position}'`);
+    }
+}
+
 export interface DroptargetEvent {
     readonly position: Position;
     readonly nativeEvent: DragEvent;

packages/dockview/src/dockview/dockviewComponent.ts

@@ -80,7 +80,7 @@ export type DockviewComponentUpdateOptions = Pick<
 
 export interface DockviewDropEvent extends GroupviewDropEvent {
     api: DockviewApi;
-    group: GroupPanel;
+    group: GroupPanel | null;
 }
 
 export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
@@ -276,6 +276,13 @@ export class DockviewComponent
                         data.panelId || undefined,
                         'center'
                     );
+                } else {
+                    this._onDidDrop.fire({
+                        ...event,
+                        api: this._api,
+                        group: null,
+                        getData: getPanelData,
+                    });
                 }
             })
         );

packages/dockview/src/index.ts

@@ -27,7 +27,11 @@ export * from './react'; // TODO: should be conditional on whether user wants th
 
 export { Event } from './events';
 export { IDisposable } from './lifecycle';
-export { Position as DropTargetDirections } from './dnd/droptarget';
+export {
+    Position,
+    positionToDirection,
+    directionToPosition,
+} from './dnd/droptarget';
 export {
     FocusEvent,
     PanelDimensionChangeEvent,