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

feat: improve dnd events

Browse Source
This commit is contained in:
mathuo 2022-05-21 18:46:40 +01:00
parent 5fba8814a8
commit 81bd9953c5
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
6 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dockview/src/dnd/droptarget.ts
View File

@ -11,7 +11,7 @@ export enum Position {
Center = 'Center', Center = 'Center',
} }
type Quadrant = 'top' | 'bottom' | 'left' | 'right'; export type Quadrant = 'top' | 'bottom' | 'left' | 'right';
export interface DroptargetEvent { export interface DroptargetEvent {
position: Position; position: Position;

3
packages/dockview/src/dockview/dockviewComponent.ts
View File

@ -75,6 +75,7 @@ DockviewComponentOptions,
export interface DockviewDropEvent extends GroupviewDropEvent { export interface DockviewDropEvent extends GroupviewDropEvent {
api: DockviewApi; api: DockviewApi;
group: GroupPanel
} }
export interface IDockviewComponent extends IBaseGrid<GroupPanel> { export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
@ -678,7 +679,7 @@ export class DockviewComponent
this.moveGroupOrPanel(view, groupId, itemId, target, index); this.moveGroupOrPanel(view, groupId, itemId, target, index);
}), }),
view.model.onDidDrop((event) => { view.model.onDidDrop((event) => {
this._onDidDrop.fire({ ...event, api: this._api }); this._onDidDrop.fire({ ...event, api: this._api, group: view });
}), }),
view.model.onDidGroupChange((event) => { view.model.onDidGroupChange((event) => {
switch (event.kind) { switch (event.kind) {

8
packages/dockview/src/dockview/options.ts
View File

@ -49,6 +49,12 @@ export interface ViewFactoryData {
tab?: string; tab?: string;
} }
export interface DockviewDndOverlayEvent {
nativeEvent: DragEvent;
target: DockviewDropTargets;
group: GroupPanel;
}
export interface DockviewComponentOptions extends DockviewRenderFunctions { export interface DockviewComponentOptions extends DockviewRenderFunctions {
watermarkComponent?: WatermarkConstructor; watermarkComponent?: WatermarkConstructor;
watermarkFrameworkComponent?: any; watermarkFrameworkComponent?: any;
@ -56,7 +62,7 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
tabHeight?: number; tabHeight?: number;
orientation?: Orientation; orientation?: Orientation;
styles?: ISplitviewStyles; styles?: ISplitviewStyles;
showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean; showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
} }
export interface PanelOptions { export interface PanelOptions {

6
packages/dockview/src/groupview/groupview.ts
View File

@ -659,7 +659,11 @@ export class Groupview extends CompositeDisposable implements IGroupview {
canDisplayOverlay(event: DragEvent, target: DockviewDropTargets): boolean { canDisplayOverlay(event: DragEvent, target: DockviewDropTargets): boolean {
// custom overlay handler // custom overlay handler
if (this.accessor.options.showDndOverlay) { if (this.accessor.options.showDndOverlay) {
return this.accessor.options.showDndOverlay(event, target); return this.accessor.options.showDndOverlay({
nativeEvent: event,
target,
group: this.accessor.getPanel(this.id)!,
});
} }
return false; return false;
} }

1
packages/dockview/src/index.ts
View File

@ -8,6 +8,7 @@ export * from './gridview/baseComponentGridview';
export * from './groupview/panel/content'; export * from './groupview/panel/content';
export * from './groupview/tab'; export * from './groupview/tab';
export * from './groupview/dnd';
export * from './groupview/types'; export * from './groupview/types';
export * from './dockview/options'; export * from './dockview/options';

4
packages/dockview/src/react/dockview/dockview.tsx
View File

@ -7,6 +7,7 @@ import { ReactPanelContentPart } from './reactContentPart';
import { ReactPanelHeaderPart } from './reactHeaderPart'; import { ReactPanelHeaderPart } from './reactHeaderPart';
import { ReactPanelDeserialzier } from '../deserializer'; import { ReactPanelDeserialzier } from '../deserializer';
import { import {
DockviewDndOverlayEvent,
GroupPanelFrameworkComponentFactory, GroupPanelFrameworkComponentFactory,
TabContextMenuEvent, TabContextMenuEvent,
} from '../../dockview/options'; } from '../../dockview/options';
@ -17,7 +18,6 @@ import { IWatermarkPanelProps, ReactWatermarkPart } from './reactWatermarkPart';
import { PanelCollection, PanelParameters } from '../types'; import { PanelCollection, PanelParameters } from '../types';
import { watchElementResize } from '../../dom'; import { watchElementResize } from '../../dom';
import { IContentRenderer, ITabRenderer } from '../../groupview/types'; import { IContentRenderer, ITabRenderer } from '../../groupview/types';
import { DockviewDropTargets } from '../../groupview/dnd';
export interface IGroupPanelBaseProps<T extends {} = Record<string, any>> export interface IGroupPanelBaseProps<T extends {} = Record<string, any>>
extends PanelParameters<T> { extends PanelParameters<T> {
@ -43,7 +43,7 @@ export interface IDockviewReactProps {
tabHeight?: number; tabHeight?: number;
onTabContextMenu?: (event: TabContextMenuEvent) => void; onTabContextMenu?: (event: TabContextMenuEvent) => void;
onDidDrop?: (event: DockviewDropEvent) => void; onDidDrop?: (event: DockviewDropEvent) => void;
showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean; showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
hideBorders?: boolean; hideBorders?: boolean;
className?: string; className?: string;
disableAutoResizing?: boolean; disableAutoResizing?: boolean;