rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-01-22 17:35:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #453 from mathuo/395-showdndoverlay-is-not-called-always

Browse Source 
work-in-progress
This commit is contained in:
mathuo 2024-01-29 22:42:22 +00:00 committed by GitHub
commit c2791c6124
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 446 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
View File

@ -1,6 +1,5 @@
import { DockviewComponent } from '../../dockview/dockviewComponent';
import {
DockviewDropTargets,
GroupPanelPartInitParameters,
IContentRenderer,
ITabRenderer,
@ -2974,7 +2973,7 @@ describe('dockviewComponent', () => {
expect(showDndOverlay).toHaveBeenCalledWith({
nativeEvent: eventLeft,
position: 'left',
target: DockviewDropTargets.Edge,
target: 'edge',
getData: getPanelData,
});
expect(showDndOverlay).toBeCalledTimes(1);
@ -2993,7 +2992,7 @@ describe('dockviewComponent', () => {
expect(showDndOverlay).toHaveBeenCalledWith({
nativeEvent: eventRight,
position: 'right',
target: DockviewDropTargets.Edge,
target: 'edge',
getData: getPanelData,
});
expect(showDndOverlay).toBeCalledTimes(2);
@ -3012,7 +3011,7 @@ describe('dockviewComponent', () => {
expect(showDndOverlay).toHaveBeenCalledWith({
nativeEvent: eventTop,
position: 'top',
target: DockviewDropTargets.Edge,
target: 'edge',
getData: getPanelData,
});
expect(showDndOverlay).toBeCalledTimes(3);
@ -3031,7 +3030,7 @@ describe('dockviewComponent', () => {
expect(showDndOverlay).toHaveBeenCalledWith({
nativeEvent: eventBottom,
position: 'bottom',
target: DockviewDropTargets.Edge,
target: 'edge',
getData: getPanelData,
});
expect(showDndOverlay).toBeCalledTimes(4);
@ -3067,7 +3066,7 @@ describe('dockviewComponent', () => {
expect(showDndOverlay).toHaveBeenCalledWith({
nativeEvent: eventTop,
position: 'center',
target: DockviewDropTargets.Edge,
target: 'edge',
getData: getPanelData,
});
expect(showDndOverlay).toBeCalledTimes(5);

25
packages/dockview-core/src/api/component.api.ts
View File

@ -1,5 +1,4 @@
import {
DockviewDropEvent,
IDockviewComponent,
SerializedDockview,
} from '../dockview/dockviewComponent';
@ -43,6 +42,11 @@ import {
TabDragEvent,
} from '../dockview/components/titlebar/tabsContainer';
import { Box } from '../types';
import {
DockviewDidDropEvent,
DockviewWillDropEvent,
WillShowOverlayLocationEvent,
} from '../dockview/dockviewGroupPanelModel';
export interface CommonApi<T = any> {
readonly height: number;
@ -648,10 +652,27 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
/**
* 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<DockviewDropEvent> {
get onDidDrop(): Event<DockviewDidDropEvent> {
return this.component.onDidDrop;
}
/**
* Invoked when a Drag'n'Drop event occurs but before dockview handles it giving the user an opportunity to intecept and
* prevent the event from occuring using the standard `preventDefault()` syntax.
*
* Preventing certain events may causes unexpected behaviours, use carefully.
*/
get onWillDrop(): Event<DockviewWillDropEvent> {
return this.component.onWillDrop;
}
/**
*
*/
get onWillShowOverlay(): Event<WillShowOverlayLocationEvent> {
return this.component.onWillShowOverlay;
}
/**
* Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
*/

68
packages/dockview-core/src/dnd/droptarget.ts
View File

@ -1,10 +1,37 @@
import { toggleClass } from '../dom';
import { Emitter, Event } from '../events';
import { DockviewEvent, Emitter, Event } from '../events';
import { CompositeDisposable } from '../lifecycle';
import { DragAndDropObserver } from './dnd';
import { clamp } from '../math';
import { Direction } from '../gridview/baseComponentGridview';
export interface DroptargetEvent {
readonly position: Position;
readonly nativeEvent: DragEvent;
}
export class WillShowOverlayEvent
extends DockviewEvent
implements DroptargetEvent
{
get nativeEvent(): DragEvent {
return this.options.nativeEvent;
}
get position(): Position {
return this.options.position;
}
constructor(
private readonly options: {
nativeEvent: DragEvent;
position: Position;
}
) {
super();
}
}
export function directionToPosition(direction: Direction): Position {
switch (direction) {
case 'above':
@ -39,11 +66,6 @@ export function positionToDirection(position: Position): Direction {
}
}
export interface DroptargetEvent {
readonly position: Position;
readonly nativeEvent: DragEvent;
}
export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
export type CanDisplayOverlay =
@ -70,6 +92,12 @@ const DEFAULT_SIZE: MeasuredValue = {
const SMALL_WIDTH_BOUNDARY = 100;
const SMALL_HEIGHT_BOUNDARY = 100;
export interface DroptargetOptions {
canDisplayOverlay: CanDisplayOverlay;
acceptedTargetZones: Position[];
overlayModel?: DroptargetOverlayModel;
}
export class Droptarget extends CompositeDisposable {
private targetElement: HTMLElement | undefined;
private overlayElement: HTMLElement | undefined;
@ -79,6 +107,10 @@ export class Droptarget extends CompositeDisposable {
private readonly _onDrop = new Emitter<DroptargetEvent>();
readonly onDrop: Event<DroptargetEvent> = this._onDrop.event;
private readonly _onWillShowOverlay = new Emitter<WillShowOverlayEvent>();
readonly onWillShowOverlay: Event<WillShowOverlayEvent> =
this._onWillShowOverlay.event;
readonly dnd: DragAndDropObserver;
private static USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
@ -89,11 +121,7 @@ export class Droptarget extends CompositeDisposable {
constructor(
private readonly element: HTMLElement,
private readonly options: {
canDisplayOverlay: CanDisplayOverlay;
acceptedTargetZones: Position[];
overlayModel?: DroptargetOverlayModel;
}
private readonly options: DroptargetOptions
) {
super();
@ -142,6 +170,22 @@ export class Droptarget extends CompositeDisposable {
return;
}
const willShowOverlayEvent = new WillShowOverlayEvent({
nativeEvent: e,
position: quadrant,
});
/**
* Provide an opportunity to prevent the overlay appearing and in turn
* any dnd behaviours
*/
this._onWillShowOverlay.fire(willShowOverlayEvent);
if (willShowOverlayEvent.defaultPrevented) {
this.removeDropTarget();
return;
}
if (typeof this.options.canDisplayOverlay === 'boolean') {
if (!this.options.canDisplayOverlay) {
this.removeDropTarget();
@ -192,7 +236,7 @@ export class Droptarget extends CompositeDisposable {
},
});
this.addDisposables(this._onDrop, this.dnd);
this.addDisposables(this._onDrop, this._onWillShowOverlay, this.dnd);
}
setTargetZones(acceptedTargetZones: Position[]): void {

7
packages/dockview-core/src/dockview/components/panel/content.ts
View File

@ -10,7 +10,6 @@ import { DockviewComponent } from '../../dockviewComponent';
import { Droptarget } from '../../../dnd/droptarget';
import { DockviewGroupPanelModel } from '../../dockviewGroupPanelModel';
import { getPanelData } from '../../../dnd/dataTransfer';
import { DockviewDropTargets } from '../../types';
export interface IContentContainer extends IDisposable {
readonly dropTarget: Droptarget;
@ -95,11 +94,7 @@ export class ContentContainer
return !groupHasOnePanelAndIsActiveDragElement;
}
return this.group.canDisplayOverlay(
event,
position,
DockviewDropTargets.Panel
);
return this.group.canDisplayOverlay(event, position, 'panel');
},
});

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

@ -7,9 +7,14 @@ import {
} from '../../../dnd/dataTransfer';
import { toggleClass } from '../../../dom';
import { DockviewComponent } from '../../dockviewComponent';
import { DockviewDropTargets, ITabRenderer } from '../../types';
import { ITabRenderer } from '../../types';
import { DockviewGroupPanel } from '../../dockviewGroupPanel';
import { DroptargetEvent, Droptarget } from '../../../dnd/droptarget';
import {
DroptargetEvent,
Droptarget,
Position,
WillShowOverlayEvent,
} from '../../../dnd/droptarget';
import { DragHandler } from '../../../dnd/abstractDragHandler';
import { IDockviewPanel } from '../../dockviewPanel';
@ -40,18 +45,9 @@ class TabDragHandler extends DragHandler {
}
}
export interface ITab extends IDisposable {
readonly panel: IDockviewPanel;
readonly element: HTMLElement;
setContent: (element: ITabRenderer) => void;
onChanged: Event<MouseEvent>;
onDrop: Event<DroptargetEvent>;
setActive(isActive: boolean): void;
}
export class Tab extends CompositeDisposable implements ITab {
export class Tab extends CompositeDisposable {
private readonly _element: HTMLElement;
private readonly droptarget: Droptarget;
private readonly dropTarget: Droptarget;
private content: ITabRenderer | undefined = undefined;
private readonly _onChanged = new Emitter<MouseEvent>();
@ -63,6 +59,8 @@ export class Tab extends CompositeDisposable implements ITab {
private readonly _onDragStart = new Emitter<DragEvent>();
readonly onDragStart = this._onDragStart.event;
readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
public get element(): HTMLElement {
return this._element;
}
@ -88,7 +86,7 @@ export class Tab extends CompositeDisposable implements ITab {
this.panel
);
this.droptarget = new Droptarget(this._element, {
this.dropTarget = new Droptarget(this._element, {
acceptedTargetZones: ['center'],
canDisplayOverlay: (event, position) => {
if (this.group.locked) {
@ -112,11 +110,13 @@ export class Tab extends CompositeDisposable implements ITab {
return this.group.model.canDisplayOverlay(
event,
position,
DockviewDropTargets.Tab
'tab'
);
},
});
this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
this.addDisposables(
this._onChanged,
this._onDropped,
@ -132,10 +132,10 @@ export class Tab extends CompositeDisposable implements ITab {
this._onChanged.fire(event);
}),
this.droptarget.onDrop((event) => {
this.dropTarget.onDrop((event) => {
this._onDropped.fire(event);
}),
this.droptarget
this.dropTarget
);
}

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

@ -4,12 +4,14 @@ import {
IValueDisposable,
} from '../../../lifecycle';
import { addDisposableListener, Emitter, Event } from '../../../events';
import { ITab, Tab } from '../tab/tab';
import { DockviewComponent } from '../../dockviewComponent';
import { Tab } from '../tab/tab';
import { DockviewGroupPanel } from '../../dockviewGroupPanel';
import { VoidContainer } from './voidContainer';
import { toggleClass } from '../../../dom';
import { DockviewPanel, IDockviewPanel } from '../../dockviewPanel';
import { DockviewComponent } from '../../dockviewComponent';
import { WillShowOverlayEvent } from '../../../dnd/droptarget';
import { DockviewGroupDropLocation } from '../../dockviewGroupPanelModel';
export interface TabDropIndexEvent {
readonly event: DragEvent;
@ -30,17 +32,21 @@ export interface ITabsContainer extends IDisposable {
readonly element: HTMLElement;
readonly panels: string[];
readonly size: number;
readonly onDrop: Event<TabDropIndexEvent>;
readonly onTabDragStart: Event<TabDragEvent>;
readonly onGroupDragStart: Event<GroupDragEvent>;
readonly onWillShowOverlay: Event<{
event: WillShowOverlayEvent;
kind: DockviewGroupDropLocation;
}>;
hidden: boolean;
delete: (id: string) => void;
indexOf: (id: string) => number;
onDrop: Event<TabDropIndexEvent>;
onTabDragStart: Event<TabDragEvent>;
onGroupDragStart: Event<GroupDragEvent>;
setActive: (isGroupActive: boolean) => void;
setActivePanel: (panel: IDockviewPanel) => void;
isActive: (tab: ITab) => boolean;
closePanel: (panel: IDockviewPanel) => void;
openPanel: (panel: IDockviewPanel, index?: number) => void;
delete(id: string): void;
indexOf(id: string): number;
setActive(isGroupActive: boolean): void;
setActivePanel(panel: IDockviewPanel): void;
isActive(tab: Tab): boolean;
closePanel(panel: IDockviewPanel): void;
openPanel(panel: IDockviewPanel, index?: number): void;
setRightActionsElement(element: HTMLElement | undefined): void;
setLeftActionsElement(element: HTMLElement | undefined): void;
setPrefixActionsElement(element: HTMLElement | undefined): void;
@ -59,7 +65,7 @@ export class TabsContainer
private readonly preActionsContainer: HTMLElement;
private readonly voidContainer: VoidContainer;
private tabs: IValueDisposable<ITab>[] = [];
private tabs: IValueDisposable<Tab>[] = [];
private selectedIndex = -1;
private rightActions: HTMLElement | undefined;
private leftActions: HTMLElement | undefined;
@ -77,6 +83,15 @@ export class TabsContainer
readonly onGroupDragStart: Event<GroupDragEvent> =
this._onGroupDragStart.event;
private readonly _onWillShowOverlay = new Emitter<{
event: WillShowOverlayEvent;
kind: DockviewGroupDropLocation;
}>();
readonly onWillShowOverlay: Event<{
event: WillShowOverlayEvent;
kind: DockviewGroupDropLocation;
}> = this._onWillShowOverlay.event;
get panels(): string[] {
return this.tabs.map((_) => _.value.panel.id);
}
@ -150,7 +165,7 @@ export class TabsContainer
return this._element;
}
public isActive(tab: ITab): boolean {
public isActive(tab: Tab): boolean {
return (
this.selectedIndex > -1 &&
this.tabs[this.selectedIndex].value === tab
@ -167,12 +182,6 @@ export class TabsContainer
) {
super();
this.addDisposables(
this._onDrop,
this._onTabDragStart,
this._onGroupDragStart
);
this._element = document.createElement('div');
this._element.className = 'tabs-and-actions-container';
@ -182,27 +191,6 @@ export class TabsContainer
this.accessor.options.singleTabMode === 'fullwidth'
);
this.addDisposables(
this.accessor.onDidAddPanel((e) => {
if (e.api.group === this.group) {
toggleClass(
this._element,
'dv-single-tab',
this.size === 1
);
}
}),
this.accessor.onDidRemovePanel((e) => {
if (e.api.group === this.group) {
toggleClass(
this._element,
'dv-single-tab',
this.size === 1
);
}
})
);
this.rightActionsContainer = document.createElement('div');
this.rightActionsContainer.className = 'right-actions-container';
@ -224,6 +212,28 @@ export class TabsContainer
this._element.appendChild(this.rightActionsContainer);
this.addDisposables(
this.accessor.onDidAddPanel((e) => {
if (e.api.group === this.group) {
toggleClass(
this._element,
'dv-single-tab',
this.size === 1
);
}
}),
this.accessor.onDidRemovePanel((e) => {
if (e.api.group === this.group) {
toggleClass(
this._element,
'dv-single-tab',
this.size === 1
);
}
}),
this._onWillShowOverlay,
this._onDrop,
this._onTabDragStart,
this._onGroupDragStart,
this.voidContainer,
this.voidContainer.onDragStart((event) => {
this._onGroupDragStart.fire({
@ -237,6 +247,9 @@ export class TabsContainer
index: this.tabs.length,
});
}),
this.voidContainer.onWillShowOverlay((event) => {
this._onWillShowOverlay.fire({ event, kind: 'header_space' });
}),
addDisposableListener(
this.voidContainer.element,
'mousedown',
@ -286,7 +299,7 @@ export class TabsContainer
}
private addTab(
tab: IValueDisposable<ITab>,
tab: IValueDisposable<Tab>,
index: number = this.tabs.length
): void {
if (index < 0 || index > this.tabs.length) {
@ -396,10 +409,13 @@ export class TabsContainer
event: event.nativeEvent,
index: this.tabs.findIndex((x) => x.value === tab),
});
}),
tab.onWillShowOverlay((event) => {
this._onWillShowOverlay.fire({ event, kind: 'tab' });
})
);
const value: IValueDisposable<ITab> = { value: tab, disposable };
const value: IValueDisposable<Tab> = { value: tab, disposable };
this.addTab(value, index);
}

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

@ -1,16 +1,19 @@
import { last } from '../../../array';
import { getPanelData } from '../../../dnd/dataTransfer';
import { Droptarget, DroptargetEvent } from '../../../dnd/droptarget';
import {
Droptarget,
DroptargetEvent,
WillShowOverlayEvent,
} from '../../../dnd/droptarget';
import { GroupDragHandler } from '../../../dnd/groupDragHandler';
import { DockviewComponent } from '../../dockviewComponent';
import { addDisposableListener, Emitter, Event } from '../../../events';
import { CompositeDisposable } from '../../../lifecycle';
import { DockviewGroupPanel } from '../../dockviewGroupPanel';
import { DockviewDropTargets } from '../../types';
export class VoidContainer extends CompositeDisposable {
private readonly _element: HTMLElement;
private readonly voidDropTarget: Droptarget;
private readonly dropTraget: Droptarget;
private readonly _onDrop = new Emitter<DroptargetEvent>();
readonly onDrop: Event<DroptargetEvent> = this._onDrop.event;
@ -18,6 +21,8 @@ export class VoidContainer extends CompositeDisposable {
private readonly _onDragStart = new Emitter<DragEvent>();
readonly onDragStart = this._onDragStart.event;
readonly onWillShowOverlay: Event<WillShowOverlayEvent>;
get element(): HTMLElement {
return this._element;
}
@ -44,7 +49,7 @@ export class VoidContainer extends CompositeDisposable {
const handler = new GroupDragHandler(this._element, accessor, group);
this.voidDropTarget = new Droptarget(this._element, {
this.dropTraget = new Droptarget(this._element, {
acceptedTargetZones: ['center'],
canDisplayOverlay: (event, position) => {
const data = getPanelData();
@ -62,23 +67,21 @@ export class VoidContainer extends CompositeDisposable {
return last(this.group.panels)?.id !== data.panelId;
}
return group.model.canDisplayOverlay(
event,
position,
DockviewDropTargets.Panel
);
return group.model.canDisplayOverlay(event, position, 'panel');
},
});
this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
this.addDisposables(
handler,
handler.onDragStart((event) => {
this._onDragStart.fire(event);
}),
this.voidDropTarget.onDrop((event) => {
this.dropTraget.onDrop((event) => {
this._onDrop.fire(event);
}),
this.voidDropTarget
this.dropTraget
);
}
}

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

@ -15,11 +15,7 @@ import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
import { CompositeDisposable, Disposable, IDisposable } from '../lifecycle';
import { Event, Emitter } from '../events';
import { Watermark } from './components/watermark/watermark';
import {
IWatermarkRenderer,
GroupviewPanelState,
DockviewDropTargets,
} from './types';
import { IWatermarkRenderer, GroupviewPanelState } from './types';
import { sequentialNumberGenerator } from '../math';
import { DefaultDockviewDeserialzier } from './deserializer';
import { createComponent } from '../panel/componentFactory';
@ -44,7 +40,9 @@ import { Orientation, Sizing } from '../splitview/splitview';
import {
GroupOptions,
GroupPanelViewState,
GroupviewDropEvent,
DockviewDidDropEvent,
DockviewWillDropEvent,
WillShowOverlayLocationEvent,
} from './dockviewGroupPanelModel';
import { DockviewGroupPanel } from './dockviewGroupPanel';
import { DockviewPanelModel } from './dockviewPanelModel';
@ -230,18 +228,16 @@ export type DockviewComponentUpdateOptions = Pick<
| 'disableFloatingGroups'
| 'floatingGroupBounds'
| 'rootOverlayModel'
| 'disableDnd'
>;
export interface DockviewDropEvent extends GroupviewDropEvent {
api: DockviewApi;
group: DockviewGroupPanel | null;
}
export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
readonly activePanel: IDockviewPanel | undefined;
readonly totalPanels: number;
readonly panels: IDockviewPanel[];
readonly onDidDrop: Event<DockviewDropEvent>;
readonly onDidDrop: Event<DockviewDidDropEvent>;
readonly onWillDrop: Event<DockviewWillDropEvent>;
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
readonly orientation: Orientation;
updateOptions(options: DockviewComponentUpdateOptions): void;
moveGroupOrPanel(
@ -311,8 +307,16 @@ export class DockviewComponent
readonly onWillDragGroup: Event<GroupDragEvent> =
this._onWillDragGroup.event;
private readonly _onDidDrop = new Emitter<DockviewDropEvent>();
readonly onDidDrop: Event<DockviewDropEvent> = this._onDidDrop.event;
private readonly _onDidDrop = new Emitter<DockviewDidDropEvent>();
readonly onDidDrop: Event<DockviewDidDropEvent> = this._onDidDrop.event;
private readonly _onWillDrop = new Emitter<DockviewWillDropEvent>();
readonly onWillDrop: Event<DockviewWillDropEvent> = this._onWillDrop.event;
private readonly _onWillShowOverlay =
new Emitter<WillShowOverlayLocationEvent>();
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent> =
this._onWillShowOverlay.event;
private readonly _onDidRemovePanel = new Emitter<IDockviewPanel>();
readonly onDidRemovePanel: Event<IDockviewPanel> =
@ -391,11 +395,13 @@ export class DockviewComponent
this.overlayRenderContainer,
this._onWillDragPanel,
this._onWillDragGroup,
this._onWillShowOverlay,
this._onDidActivePanelChange,
this._onDidAddPanel,
this._onDidRemovePanel,
this._onDidLayoutFromJSON,
this._onDidDrop,
this._onWillDrop,
Event.any(
this.onDidAddGroup,
this.onDidRemoveGroup
@ -474,7 +480,7 @@ export class DockviewComponent
return this.options.showDndOverlay({
nativeEvent: event,
position: position,
target: DockviewDropTargets.Edge,
target: 'edge',
getData: getPanelData,
});
}
@ -488,6 +494,22 @@ export class DockviewComponent
this.addDisposables(
this._rootDropTarget.onDrop((event) => {
const willDropEvent = new DockviewWillDropEvent({
nativeEvent: event.nativeEvent,
position: event.position,
panel: undefined,
api: this._api,
group: undefined,
getData: getPanelData,
kind: 'content',
});
this._onWillDrop.fire(willDropEvent);
if (willDropEvent.defaultPrevented) {
return;
}
const data = getPanelData();
if (data) {
@ -498,12 +520,16 @@ export class DockviewComponent
'center'
);
} else {
this._onDidDrop.fire({
...event,
api: this._api,
group: null,
getData: getPanelData,
});
this._onDidDrop.fire(
new DockviewDidDropEvent({
nativeEvent: event.nativeEvent,
position: event.position,
panel: undefined,
api: this._api,
group: undefined,
getData: getPanelData,
})
);
}
}),
this._rootDropTarget
@ -1752,11 +1778,18 @@ export class DockviewComponent
this.moveGroupOrPanel(view, groupId, itemId, target, index);
}),
view.model.onDidDrop((event) => {
this._onDidDrop.fire({
...event,
api: this._api,
group: view,
});
this._onDidDrop.fire(event);
}),
view.model.onWillDrop((event) => {
this._onWillDrop.fire(event);
}),
view.model.onWillShowOverlay((event) => {
if (this.options.disableDnd) {
event.event.preventDefault();
return;
}
this._onWillShowOverlay.fire(event);
}),
view.model.onDidAddPanel((event) => {
this._onDidAddPanel.fire(event.panel);

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

@ -1,9 +1,14 @@
import { DockviewApi } from '../api/component.api';
import { getPanelData, PanelTransfer } from '../dnd/dataTransfer';
import { Position } from '../dnd/droptarget';
import { Position, WillShowOverlayEvent } from '../dnd/droptarget';
import { DockviewComponent } from './dockviewComponent';
import { isAncestor, toggleClass } from '../dom';
import { addDisposableListener, Emitter, Event } from '../events';
import {
addDisposableListener,
DockviewEvent,
Emitter,
Event,
} from '../events';
import { IViewSize } from '../gridview/gridview';
import { CompositeDisposable } from '../lifecycle';
import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
@ -22,26 +27,6 @@ import { DockviewGroupPanel } from './dockviewGroupPanel';
import { IDockviewPanel } from './dockviewPanel';
import { IHeaderActionsRenderer } from './options';
export interface DndService {
canDisplayOverlay(
group: IDockviewGroupPanelModel,
event: DragEvent,
target: DockviewDropTargets
): boolean;
onDrop(
group: IDockviewGroupPanelModel,
event: DragEvent,
position: Position,
index?: number
): void;
}
export interface IGroupItem {
id: string;
header: { element: HTMLElement };
body: { element: HTMLElement };
}
interface GroupMoveEvent {
groupId: string;
itemId?: string;
@ -66,15 +51,69 @@ export interface GroupPanelViewState extends CoreGroupOptions {
id: string;
}
export interface GroupviewChangeEvent {
export interface DockviewGroupChangeEvent {
readonly panel: IDockviewPanel;
}
export interface GroupviewDropEvent {
readonly nativeEvent: DragEvent;
readonly position: Position;
readonly index?: number;
getData(): PanelTransfer | undefined;
export class DockviewDidDropEvent extends DockviewEvent {
get nativeEvent(): DragEvent {
return this.options.nativeEvent;
}
get position(): Position {
return this.options.position;
}
get panel(): IDockviewPanel | undefined {
return this.options.panel;
}
get group(): DockviewGroupPanel | undefined {
return this.options.group;
}
get api(): DockviewApi {
return this.options.api;
}
constructor(
private readonly options: {
readonly nativeEvent: DragEvent;
readonly position: Position;
readonly panel?: IDockviewPanel;
getData(): PanelTransfer | undefined;
group?: DockviewGroupPanel;
api: DockviewApi;
}
) {
super();
}
getData(): PanelTransfer | undefined {
return this.options.getData();
}
}
export class DockviewWillDropEvent extends DockviewDidDropEvent {
private readonly _kind: DockviewGroupDropLocation;
get kind(): DockviewGroupDropLocation {
return this._kind;
}
constructor(options: {
readonly nativeEvent: DragEvent;
readonly position: Position;
readonly panel?: IDockviewPanel;
getData(): PanelTransfer | undefined;
kind: DockviewGroupDropLocation;
group?: DockviewGroupPanel;
api: DockviewApi;
}) {
super(options);
this._kind = options.kind;
}
}
export interface IHeader {
@ -83,6 +122,8 @@ export interface IHeader {
export type DockviewGroupPanelLocked = boolean | 'no-drop-target';
export type DockviewGroupDropLocation = 'tab' | 'header_space' | 'content';
export interface IDockviewGroupPanelModel extends IPanel {
readonly isActive: boolean;
readonly size: number;
@ -90,10 +131,11 @@ export interface IDockviewGroupPanelModel extends IPanel {
readonly activePanel: IDockviewPanel | undefined;
readonly header: IHeader;
readonly isContentFocused: boolean;
readonly onDidDrop: Event<GroupviewDropEvent>;
readonly onDidAddPanel: Event<GroupviewChangeEvent>;
readonly onDidRemovePanel: Event<GroupviewChangeEvent>;
readonly onDidActivePanelChange: Event<GroupviewChangeEvent>;
readonly onDidDrop: Event<DockviewDidDropEvent>;
readonly onWillDrop: Event<DockviewWillDropEvent>;
readonly onDidAddPanel: Event<DockviewGroupChangeEvent>;
readonly onDidRemovePanel: Event<DockviewGroupChangeEvent>;
readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
readonly onMove: Event<GroupMoveEvent>;
locked: DockviewGroupPanelLocked;
setActive(isActive: boolean): void;
@ -135,6 +177,11 @@ export type DockviewGroupLocation =
| { type: 'floating' }
| { type: 'popout'; getWindow: () => Window };
export interface WillShowOverlayLocationEvent {
event: WillShowOverlayEvent;
kind: DockviewGroupDropLocation;
}
export class DockviewGroupPanelModel
extends CompositeDisposable
implements IDockviewGroupPanelModel
@ -165,8 +212,16 @@ export class DockviewGroupPanelModel
private readonly _onMove = new Emitter<GroupMoveEvent>();
readonly onMove: Event<GroupMoveEvent> = this._onMove.event;
private readonly _onDidDrop = new Emitter<GroupviewDropEvent>();
readonly onDidDrop: Event<GroupviewDropEvent> = this._onDidDrop.event;
private readonly _onDidDrop = new Emitter<DockviewDidDropEvent>();
readonly onDidDrop: Event<DockviewDidDropEvent> = this._onDidDrop.event;
private readonly _onWillDrop = new Emitter<DockviewWillDropEvent>();
readonly onWillDrop: Event<DockviewWillDropEvent> = this._onWillDrop.event;
private readonly _onWillShowOverlay =
new Emitter<WillShowOverlayLocationEvent>();
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent> =
this._onWillShowOverlay.event;
private readonly _onTabDragStart = new Emitter<TabDragEvent>();
readonly onTabDragStart: Event<TabDragEvent> = this._onTabDragStart.event;
@ -175,19 +230,22 @@ export class DockviewGroupPanelModel
readonly onGroupDragStart: Event<GroupDragEvent> =
this._onGroupDragStart.event;
private readonly _onDidAddPanel = new Emitter<GroupviewChangeEvent>();
readonly onDidAddPanel: Event<GroupviewChangeEvent> =
private readonly _onDidAddPanel = new Emitter<DockviewGroupChangeEvent>();
readonly onDidAddPanel: Event<DockviewGroupChangeEvent> =
this._onDidAddPanel.event;
private readonly _onDidRemovePanel = new Emitter<GroupviewChangeEvent>();
readonly onDidRemovePanel: Event<GroupviewChangeEvent> =
private readonly _onDidRemovePanel =
new Emitter<DockviewGroupChangeEvent>();
readonly onDidRemovePanel: Event<DockviewGroupChangeEvent> =
this._onDidRemovePanel.event;
private readonly _onDidActivePanelChange =
new Emitter<GroupviewChangeEvent>();
readonly onDidActivePanelChange: Event<GroupviewChangeEvent> =
new Emitter<DockviewGroupChangeEvent>();
readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent> =
this._onDidActivePanelChange.event;
private readonly _api: DockviewApi;
get element(): HTMLElement {
throw new Error('not supported');
}
@ -301,6 +359,8 @@ export class DockviewGroupPanelModel
toggleClass(this.container, 'groupview', true);
this._api = new DockviewApi(this.accessor);
this.tabsContainer = new TabsContainer(this.accessor, this.groupPanel);
this.contentContainer = new ContentContainer(this.accessor, this);
@ -316,6 +376,7 @@ export class DockviewGroupPanelModel
this.addDisposables(
this._onTabDragStart,
this._onGroupDragStart,
this._onWillShowOverlay,
this.tabsContainer.onTabDragStart((event) => {
this._onTabDragStart.fire(event);
}),
@ -323,8 +384,14 @@ export class DockviewGroupPanelModel
this._onGroupDragStart.fire(event);
}),
this.tabsContainer.onDrop((event) => {
this.handleDropEvent(event.event, 'center', event.index);
this.handleDropEvent(
'header',
event.event,
'center',
event.index
);
}),
this.contentContainer.onDidFocus(() => {
this.accessor.doSetGroupActive(this.groupPanel, true);
}),
@ -332,11 +399,22 @@ export class DockviewGroupPanelModel
// noop
}),
this.contentContainer.dropTarget.onDrop((event) => {
this.handleDropEvent(event.nativeEvent, event.position);
this.handleDropEvent(
'content',
event.nativeEvent,
event.position
);
}),
this.tabsContainer.onWillShowOverlay((event) => {
this._onWillShowOverlay.fire(event);
}),
this.contentContainer.dropTarget.onWillShowOverlay((event) => {
this._onWillShowOverlay.fire({ event, kind: 'content' });
}),
this._onMove,
this._onDidChange,
this._onDidDrop,
this._onWillDrop,
this._onDidAddPanel,
this._onDidRemovePanel,
this._onDidActivePanelChange
@ -344,13 +422,13 @@ export class DockviewGroupPanelModel
}
initialize(): void {
if (this.options?.panels) {
if (this.options.panels) {
this.options.panels.forEach((panel) => {
this.doAddPanel(panel);
});
}
if (this.options?.activePanel) {
if (this.options.activePanel) {
this.openPanel(this.options.activePanel);
}
@ -366,7 +444,7 @@ export class DockviewGroupPanelModel
);
this.addDisposables(this._rightHeaderActions);
this._rightHeaderActions.init({
containerApi: new DockviewApi(this.accessor),
containerApi: this._api,
api: this.groupPanel.api,
});
this.tabsContainer.setRightActionsElement(
@ -381,7 +459,7 @@ export class DockviewGroupPanelModel
);
this.addDisposables(this._leftHeaderActions);
this._leftHeaderActions.init({
containerApi: new DockviewApi(this.accessor),
containerApi: this._api,
api: this.groupPanel.api,
});
this.tabsContainer.setLeftActionsElement(
@ -396,7 +474,7 @@ export class DockviewGroupPanelModel
);
this.addDisposables(this._prefixHeaderActions);
this._prefixHeaderActions.init({
containerApi: new DockviewApi(this.accessor),
containerApi: this._api,
api: this.groupPanel.api,
});
this.tabsContainer.setPrefixActionsElement(
@ -735,7 +813,7 @@ export class DockviewGroupPanelModel
if (this.isEmpty && !this.watermark) {
const watermark = this.accessor.createWatermarkComponent();
watermark.init({
containerApi: new DockviewApi(this.accessor),
containerApi: this._api,
group: this.groupPanel,
});
this.watermark = watermark;
@ -778,6 +856,7 @@ export class DockviewGroupPanelModel
}
private handleDropEvent(
type: 'header' | 'content',
event: DragEvent,
position: Position,
index?: number
@ -786,6 +865,34 @@ export class DockviewGroupPanelModel
return;
}
function getKind(): DockviewGroupDropLocation {
switch (type) {
case 'header':
return typeof index === 'number' ? 'tab' : 'header_space';
case 'content':
return 'content';
}
}
const panel =
typeof index === 'number' ? this.panels[index] : undefined;
const willDropEvent = new DockviewWillDropEvent({
nativeEvent: event,
position,
panel,
getData: () => getPanelData(),
kind: getKind(),
group: this.groupPanel,
api: this._api,
});
this._onWillDrop.fire(willDropEvent);
if (willDropEvent.defaultPrevented) {
return;
}
const data = getPanelData();
if (data && data.viewId === this.accessor.id) {
@ -824,12 +931,16 @@ export class DockviewGroupPanelModel
index,
});
} else {
this._onDidDrop.fire({
nativeEvent: event,
position,
index,
getData: () => getPanelData(),
});
this._onDidDrop.fire(
new DockviewDidDropEvent({
nativeEvent: event,
position,
panel,
getData: () => getPanelData(),
group: this.groupPanel,
api: this._api,
})
);
}
}

1
packages/dockview-core/src/dockview/options.ts
View File

@ -102,6 +102,7 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
defaultRenderer?: DockviewPanelRenderer;
debug?: boolean;
rootOverlayModel?: DroptargetOverlayModel;
disableDnd?: boolean;
}
export interface PanelOptions<P extends object = Parameters> {

7
packages/dockview-core/src/dockview/types.ts
View File

@ -7,12 +7,7 @@ import { Optional } from '../types';
import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
import { DockviewPanelRenderer } from '../overlayRenderContainer';
export enum DockviewDropTargets {
Tab,
Panel,
TabContainer,
Edge,
}
export type DockviewDropTargets = 'tab' | 'panel' | 'tabContainer' | 'edge';
export interface HeaderPartInitParameters {
title: string;

12
packages/dockview-core/src/events.ts
View File

@ -24,6 +24,18 @@ export namespace Event {
};
}
export class DockviewEvent {
private _defaultPrevented = false;
get defaultPrevented(): boolean {
return this._defaultPrevented;
}
preventDefault(): void {
this._defaultPrevented = true;
}
}
class LeakageMonitor {
readonly events = new Map<Event<any>, Stacktrace>();

35
packages/dockview/src/dockview/dockview.tsx
View File

@ -1,7 +1,7 @@
import * as React from 'react';
import {
DockviewComponent,
DockviewDropEvent,
DockviewWillDropEvent,
DockviewDndOverlayEvent,
GroupPanelFrameworkComponentFactory,
DockviewPanelApi,
@ -12,6 +12,7 @@ import {
IHeaderActionsRenderer,
DockviewPanelRenderer,
DroptargetOverlayModel,
DockviewDidDropEvent,
} from 'dockview-core';
import { ReactPanelContentPart } from './reactContentPart';
import { ReactPanelHeaderPart } from './reactHeaderPart';
@ -61,7 +62,8 @@ export interface IDockviewReactProps {
components: PanelCollection<IDockviewPanelProps>;
tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
onDidDrop?: (event: DockviewDropEvent) => void;
onDidDrop?: (event: DockviewDidDropEvent) => void;
onWillDrop?: (event: DockviewWillDropEvent) => void;
showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
hideBorders?: boolean;
className?: string;
@ -81,6 +83,7 @@ export interface IDockviewReactProps {
debug?: boolean;
defaultRenderer?: DockviewPanelRenderer;
rootOverlayModel?: DroptargetOverlayModel;
disableDnd?: boolean;
}
const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
@ -183,6 +186,7 @@ export const DockviewReact = React.forwardRef(
defaultRenderer: props.defaultRenderer,
debug: props.debug,
rootOverlayModel: props.rootOverlayModel,
disableDnd: props.disableDnd,
});
const { clientWidth, clientHeight } = domRef.current;
@ -199,6 +203,15 @@ export const DockviewReact = React.forwardRef(
};
}, []);
React.useEffect(() => {
if (!dockviewRef.current) {
return;
}
dockviewRef.current.updateOptions({
disableDnd: props.disableDnd,
});
}, [props.disableDnd]);
React.useEffect(() => {
if (!dockviewRef.current) {
return () => {
@ -217,6 +230,24 @@ export const DockviewReact = React.forwardRef(
};
}, [props.onDidDrop]);
React.useEffect(() => {
if (!dockviewRef.current) {
return () => {
// noop
};
}
const disposable = dockviewRef.current.onWillDrop((event) => {
if (props.onWillDrop) {
props.onWillDrop(event);
}
});
return () => {
disposable.dispose();
};
}, [props.onWillDrop]);
React.useEffect(() => {
if (!dockviewRef.current) {
return;