rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-08-14 13:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

add drag intercept events

Browse Source
This commit is contained in:
mathuo 2023-08-19 15:43:46 +01:00
parent 2aa700bca0
commit 821c2f5c44
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
9 changed files with 135 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/dockview-core/src/__tests__/dnd/groupDragHandler.spec.ts
View File

@ -2,6 +2,7 @@ import { fireEvent } from '@testing-library/dom';
import { GroupDragHandler } from '../../dnd/groupDragHandler';
import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer';
import { DockviewComponent } from '../../dockview/dockviewComponent';
describe('groupDragHandler', () => {
test('that the dnd transfer object is setup and torndown', () => {
@ -16,7 +17,11 @@ describe('groupDragHandler', () => {
});
const group = new groupMock();
const cut = new GroupDragHandler(element, 'test_accessor_id', group);
const cut = new GroupDragHandler(
element,
{ id: 'test_accessor_id' } as DockviewComponent,
group
);
fireEvent.dragStart(element, new Event('dragstart'));
@ -54,7 +59,11 @@ describe('groupDragHandler', () => {
});
const group = new groupMock();
const cut = new GroupDragHandler(element, 'accessor_id', group);
const cut = new GroupDragHandler(
element,
{ id: 'accessor_id' } as DockviewComponent,
group
);
const event = new KeyboardEvent('dragstart', { shiftKey: false });
@ -82,7 +91,11 @@ describe('groupDragHandler', () => {
});
const group = new groupMock();
const cut = new GroupDragHandler(element, 'accessor_id', group);
const cut = new GroupDragHandler(
element,
{ id: 'accessor_id' } as DockviewComponent,
group
);
const event = new KeyboardEvent('dragstart', { shiftKey: false });

48
packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts
View File

@ -1,16 +1,24 @@
import { fireEvent } from '@testing-library/dom';
import { LocalSelectionTransfer, PanelTransfer } from '../../../dnd/dataTransfer';
import {
LocalSelectionTransfer,
PanelTransfer,
} from '../../../dnd/dataTransfer';
import { DockviewComponent } from '../../../dockview/dockviewComponent';
import { DockviewGroupPanel } from '../../../dockview/dockviewGroupPanel';
import { DockviewGroupPanelModel } from '../../../dockview/dockviewGroupPanelModel';
import { Tab } from '../../../dockview/components/tab/tab';
import { IDockviewPanel } from '../../../dockview/dockviewPanel';
describe('tab', () => {
test('that empty tab has inactive-tab class', () => {
const accessorMock = jest.fn();
const groupMock = jest.fn();
const cut = new Tab('panelId', new accessorMock(), new groupMock());
const cut = new Tab(
{ id: 'panelId' } as IDockviewPanel,
new accessorMock(),
new groupMock()
);
expect(cut.element.className).toBe('tab inactive-tab');
});
@ -19,7 +27,11 @@ describe('tab', () => {
const accessorMock = jest.fn();
const groupMock = jest.fn();
const cut = new Tab('panelId', new accessorMock(), new groupMock());
const cut = new Tab(
{ id: 'panelId' } as IDockviewPanel,
new accessorMock(),
new groupMock()
);
cut.setActive(true);
expect(cut.element.className).toBe('tab active-tab');
@ -54,7 +66,11 @@ describe('tab', () => {
const accessor = new accessorMock() as DockviewComponent;
const groupPanel = new groupPanelMock() as DockviewGroupPanel;
const cut = new Tab('panelId', accessor, groupPanel);
const cut = new Tab(
{ id: 'panelId' } as IDockviewPanel,
accessor,
groupPanel
);
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
() => 100
@ -99,7 +115,11 @@ describe('tab', () => {
const accessor = new accessorMock() as DockviewComponent;
const groupPanel = new groupPanelMock() as DockviewGroupPanel;
const cut = new Tab('panel1', accessor, groupPanel);
const cut = new Tab(
{ id: 'panel1' } as IDockviewPanel,
accessor,
groupPanel
);
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
() => 100
@ -149,7 +169,11 @@ describe('tab', () => {
const accessor = new accessorMock() as DockviewComponent;
const groupPanel = new groupPanelMock() as DockviewGroupPanel;
const cut = new Tab('panel1', accessor, groupPanel);
const cut = new Tab(
{ id: 'panel1' } as IDockviewPanel,
accessor,
groupPanel
);
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
() => 100
@ -199,7 +223,11 @@ describe('tab', () => {
const accessor = new accessorMock() as DockviewComponent;
const groupPanel = new groupPanelMock() as DockviewGroupPanel;
const cut = new Tab('panel1', accessor, groupPanel);
const cut = new Tab(
{ id: 'panel1' } as IDockviewPanel,
accessor,
groupPanel
);
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
() => 100
@ -255,7 +283,11 @@ describe('tab', () => {
const accessor = new accessorMock() as DockviewComponent;
const groupPanel = new groupPanelMock() as DockviewGroupPanel;
const cut = new Tab('panel1', accessor, groupPanel);
const cut = new Tab(
{ id: 'panel1' } as IDockviewPanel,
accessor,
groupPanel
);
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
() => 100

3
packages/dockview-core/src/dnd/abstractDragHandler.ts
View File

@ -35,8 +35,6 @@ export abstract class DragHandler extends CompositeDisposable {
this.addDisposables(
this._onDragStart,
addDisposableListener(this.el, 'dragstart', (event) => {
this._onDragStart.fire(event);
if (event.defaultPrevented || this.isCancelled(event)) {
event.preventDefault();
return;
@ -63,6 +61,7 @@ export abstract class DragHandler extends CompositeDisposable {
setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
this.dataDisposable.value = this.getData(event);
this._onDragStart.fire(event);
if (event.dataTransfer) {
event.dataTransfer.effectAllowed = 'move';

5
packages/dockview-core/src/dnd/groupDragHandler.ts
View File

@ -1,3 +1,4 @@
import { DockviewComponent } from '../dockview/dockviewComponent';
import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
import { quasiPreventDefault } from '../dom';
import { addDisposableListener } from '../events';
@ -12,7 +13,7 @@ export class GroupDragHandler extends DragHandler {
constructor(
element: HTMLElement,
private readonly accessorId: string,
private readonly accessor: DockviewComponent,
private readonly group: DockviewGroupPanel
) {
super(element);
@ -47,7 +48,7 @@ export class GroupDragHandler extends DragHandler {
const dataTransfer = dragEvent.dataTransfer;
this.panelTransfer.setData(
[new PanelTransfer(this.accessorId, this.group.id, null)],
[new PanelTransfer(this.accessor.id, this.group.id, null)],
PanelTransfer.prototype
);

2
packages/dockview-core/src/dockview/components/tab/tab.ts
View File

@ -26,7 +26,7 @@ class TabDragHandler extends DragHandler {
super(element);
}
getData(): IDisposable {
getData(event: DragEvent): IDisposable {
this.panelTransfer.setData(
[new PanelTransfer(this.accessor.id, this.group.id, this.panel.id)],
PanelTransfer.prototype

32
packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
View File

@ -18,7 +18,12 @@ export interface TabDropIndexEvent {
export interface TabDragEvent {
readonly nativeEvent: DragEvent;
readonly panel?: IDockviewPanel;
readonly panel: IDockviewPanel;
}
export interface GroupDragEvent {
readonly nativeEvent: DragEvent;
readonly group: DockviewGroupPanel;
}
export interface ITabsContainer extends IDisposable {
@ -29,7 +34,8 @@ export interface ITabsContainer extends IDisposable {
delete: (id: string) => void;
indexOf: (id: string) => number;
onDrop: Event<TabDropIndexEvent>;
onDragStart: Event<TabDragEvent>;
onTabDragStart: Event<TabDragEvent>;
onGroupDragStart: Event<GroupDragEvent>;
setActive: (isGroupActive: boolean) => void;
setActivePanel: (panel: IDockviewPanel) => void;
isActive: (tab: ITab) => boolean;
@ -61,8 +67,12 @@ export class TabsContainer
private readonly _onDrop = new Emitter<TabDropIndexEvent>();
readonly onDrop: Event<TabDropIndexEvent> = this._onDrop.event;
private readonly _onDragStart = new Emitter<TabDragEvent>();
readonly onDragStart: Event<TabDragEvent> = this._onDragStart.event;
private readonly _onTabDragStart = new Emitter<TabDragEvent>();
readonly onTabDragStart: Event<TabDragEvent> = this._onTabDragStart.event;
private readonly _onGroupDragStart = new Emitter<GroupDragEvent>();
readonly onGroupDragStart: Event<GroupDragEvent> =
this._onGroupDragStart.event;
get panels(): string[] {
return this.tabs.map((_) => _.value.panel.id);
@ -140,7 +150,11 @@ export class TabsContainer
) {
super();
this.addDisposables(this._onDrop, this._onDragStart);
this.addDisposables(
this._onDrop,
this._onTabDragStart,
this._onGroupDragStart
);
this._element = document.createElement('div');
this._element.className = 'tabs-and-actions-container';
@ -190,6 +204,12 @@ export class TabsContainer
this.addDisposables(
this.voidContainer,
this.voidContainer.onDragStart((event) => {
this._onGroupDragStart.fire({
nativeEvent: event,
group: this.group,
});
}),
this.voidContainer.onDrop((event) => {
this._onDrop.fire({
event: event.nativeEvent,
@ -302,7 +322,7 @@ export class TabsContainer
const disposable = new CompositeDisposable(
tab.onDragStart((event) => {
this._onDragStart.fire({ nativeEvent: event, panel });
this._onTabDragStart.fire({ nativeEvent: event, panel });
}),
tab.onChanged((event) => {
const isFloatingGroupsEnabled =

9
packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
View File

@ -15,6 +15,9 @@ export class VoidContainer extends CompositeDisposable {
private readonly _onDrop = new Emitter<DroptargetEvent>();
readonly onDrop: Event<DroptargetEvent> = this._onDrop.event;
private readonly _onDragStart = new Emitter<DragEvent>();
readonly onDragStart = this._onDragStart.event;
get element(): HTMLElement {
return this._element;
}
@ -33,12 +36,13 @@ export class VoidContainer extends CompositeDisposable {
this.addDisposables(
this._onDrop,
this._onDragStart,
addDisposableListener(this._element, 'click', () => {
this.accessor.doSetGroupActive(this.group);
})
);
const handler = new GroupDragHandler(this._element, accessor.id, group);
const handler = new GroupDragHandler(this._element, accessor, group);
this.voidDropTarget = new Droptarget(this._element, {
acceptedTargetZones: ['center'],
@ -68,6 +72,9 @@ export class VoidContainer extends CompositeDisposable {
this.addDisposables(
handler,
handler.onDragStart((event) => {
this._onDragStart.fire(event);
}),
this.voidDropTarget.onDrop((event) => {
this._onDrop.fire(event);
}),

35
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -50,6 +50,10 @@ import {
DockviewFloatingGroupPanel,
IDockviewFloatingGroupPanel,
} from './dockviewFloatingGroupPanel';
import {
GroupDragEvent,
TabDragEvent,
} from './components/titlebar/tabsContainer';
export interface PanelReference {
update: (event: { params: { [key: string]: any } }) => void;
@ -130,6 +134,8 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
readonly onDidAddPanel: Event<IDockviewPanel>;
readonly onDidLayoutFromJSON: Event<void>;
readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
readonly onWillDragPanel: Event<TabDragEvent>;
readonly onWillDragGroup: Event<GroupDragEvent>;
addFloatingGroup(
item: IDockviewPanel | DockviewGroupPanel,
coord?: { x: number; y: number }
@ -146,6 +152,13 @@ export class DockviewComponent
private _options: Exclude<DockviewComponentOptions, 'orientation'>;
private watermark: IWatermarkRenderer | null = null;
readonly _onWillDragPanel = new Emitter<TabDragEvent>();
readonly onWillDragPanel: Event<TabDragEvent> = this._onWillDragPanel.event;
readonly _onWillDragGroup = new Emitter<GroupDragEvent>();
readonly onWillDragGroup: Event<GroupDragEvent> =
this._onWillDragGroup.event;
private readonly _onDidDrop = new Emitter<DockviewDropEvent>();
readonly onDidDrop: Event<DockviewDropEvent> = this._onDidDrop.event;
@ -204,6 +217,12 @@ export class DockviewComponent
toggleClass(this.gridview.element, 'dv-dockview', true);
this.addDisposables(
this._onWillDragPanel,
this._onWillDragGroup,
this._onDidActivePanelChange,
this._onDidAddPanel,
this._onDidRemovePanel,
this._onDidLayoutFromJSON,
this._onDidDrop,
Event.any(
this.onDidAddGroup,
@ -1157,8 +1176,11 @@ export class DockviewComponent
if (!this._groups.has(view.id)) {
const disposable = new CompositeDisposable(
view.model.onDragStart((event) => {
this.onDragStart(event);
view.model.onTabDragStart((event) => {
this._onWillDragPanel.fire(event);
}),
view.model.onGroupDragStart((event) => {
this._onWillDragGroup.fire(event);
}),
view.model.onMove((event) => {
const { groupId, itemId, target, index } = event;
@ -1235,13 +1257,4 @@ export class DockviewComponent
group.value.model.containsPanel(panel)
)?.value;
}
public dispose(): void {
this._onDidActivePanelChange.dispose();
this._onDidAddPanel.dispose();
this._onDidRemovePanel.dispose();
this._onDidLayoutFromJSON.dispose();
super.dispose();
}
}

20
packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
View File

@ -12,6 +12,7 @@ import {
IContentContainer,
} from './components/panel/content';
import {
GroupDragEvent,
ITabsContainer,
TabDragEvent,
TabsContainer,
@ -92,6 +93,8 @@ export interface IDockviewGroupPanelModel extends IPanel {
readonly onDidRemovePanel: Event<GroupviewChangeEvent>;
readonly onDidActivePanelChange: Event<GroupviewChangeEvent>;
readonly onMove: Event<GroupMoveEvent>;
readonly onTabDragStart: Event<TabDragEvent>;
readonly onGroupDragStart: Event<GroupDragEvent>;
locked: boolean;
setActive(isActive: boolean): void;
initialize(): void;
@ -159,8 +162,12 @@ export class DockviewGroupPanelModel
private readonly _onDidDrop = new Emitter<GroupviewDropEvent>();
readonly onDidDrop: Event<GroupviewDropEvent> = this._onDidDrop.event;
private readonly _onDragStart = new Emitter<TabDragEvent>();
readonly onDragStart: Event<TabDragEvent> = this._onDragStart.event;
private readonly _onTabDragStart = new Emitter<TabDragEvent>();
readonly onTabDragStart: Event<TabDragEvent> = this._onTabDragStart.event;
private readonly _onGroupDragStart = new Emitter<GroupDragEvent>();
readonly onGroupDragStart: Event<GroupDragEvent> =
this._onGroupDragStart.event;
private readonly _onDidAddPanel = new Emitter<GroupviewChangeEvent>();
readonly onDidAddPanel: Event<GroupviewChangeEvent> =
@ -310,8 +317,13 @@ export class DockviewGroupPanelModel
this.locked = !!options.locked;
this.addDisposables(
this.tabsContainer.onDragStart((event) => {
this._onDragStart.fire(event);
this._onTabDragStart,
this._onGroupDragStart,
this.tabsContainer.onTabDragStart((event) => {
this._onTabDragStart.fire(event);
}),
this.tabsContainer.onGroupDragStart((event) => {
this._onGroupDragStart.fire(event);
}),
this.tabsContainer.onDrop((event) => {
this.handleDropEvent(event.event, 'center', event.index);