diff --git a/packages/dockview/src/__tests__/dnd/droptarget.spec.ts b/packages/dockview/src/__tests__/dnd/droptarget.spec.ts index 724955434..5875637ec 100644 --- a/packages/dockview/src/__tests__/dnd/droptarget.spec.ts +++ b/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; diff --git a/packages/dockview/src/dnd/droptarget.ts b/packages/dockview/src/dnd/droptarget.ts index 13d6e20ed..8e2c62ad7 100644 --- a/packages/dockview/src/dnd/droptarget.ts +++ b/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; diff --git a/packages/dockview/src/dockview/dockviewComponent.ts b/packages/dockview/src/dockview/dockviewComponent.ts index 7c32f66b1..34458d1e9 100644 --- a/packages/dockview/src/dockview/dockviewComponent.ts +++ b/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 { @@ -276,6 +276,13 @@ export class DockviewComponent data.panelId || undefined, 'center' ); + } else { + this._onDidDrop.fire({ + ...event, + api: this._api, + group: null, + getData: getPanelData, + }); } }) ); diff --git a/packages/dockview/src/index.ts b/packages/dockview/src/index.ts index bb983ef78..7cb102718 100644 --- a/packages/dockview/src/index.ts +++ b/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,