mirror of
https://github.com/mathuo/dockview
synced 2025-07-24 10:56:05 +00:00
Merge pull request #185 from mathuo/176-dnd-to-edge-of-dockview
feat: dnd edge custom dnd handles
This commit is contained in:
commit
200e1c4ccb
@ -4,6 +4,7 @@ import {
|
|||||||
directionToPosition,
|
directionToPosition,
|
||||||
Droptarget,
|
Droptarget,
|
||||||
Position,
|
Position,
|
||||||
|
positionToDirection,
|
||||||
} from '../../dnd/droptarget';
|
} from '../../dnd/droptarget';
|
||||||
import { fireEvent } from '@testing-library/dom';
|
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', () => {
|
test('non-directional', () => {
|
||||||
let position: Position | undefined = undefined;
|
let position: Position | undefined = undefined;
|
||||||
|
|
||||||
|
@ -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 {
|
export interface DroptargetEvent {
|
||||||
readonly position: Position;
|
readonly position: Position;
|
||||||
readonly nativeEvent: DragEvent;
|
readonly nativeEvent: DragEvent;
|
||||||
|
@ -80,7 +80,7 @@ export type DockviewComponentUpdateOptions = Pick<
|
|||||||
|
|
||||||
export interface DockviewDropEvent extends GroupviewDropEvent {
|
export interface DockviewDropEvent extends GroupviewDropEvent {
|
||||||
api: DockviewApi;
|
api: DockviewApi;
|
||||||
group: GroupPanel;
|
group: GroupPanel | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
|
export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
|
||||||
@ -276,6 +276,13 @@ export class DockviewComponent
|
|||||||
data.panelId || undefined,
|
data.panelId || undefined,
|
||||||
'center'
|
'center'
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
this._onDidDrop.fire({
|
||||||
|
...event,
|
||||||
|
api: this._api,
|
||||||
|
group: null,
|
||||||
|
getData: getPanelData,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
@ -27,7 +27,11 @@ export * from './react'; // TODO: should be conditional on whether user wants th
|
|||||||
|
|
||||||
export { Event } from './events';
|
export { Event } from './events';
|
||||||
export { IDisposable } from './lifecycle';
|
export { IDisposable } from './lifecycle';
|
||||||
export { Position as DropTargetDirections } from './dnd/droptarget';
|
export {
|
||||||
|
Position,
|
||||||
|
positionToDirection,
|
||||||
|
directionToPosition,
|
||||||
|
} from './dnd/droptarget';
|
||||||
export {
|
export {
|
||||||
FocusEvent,
|
FocusEvent,
|
||||||
PanelDimensionChangeEvent,
|
PanelDimensionChangeEvent,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user