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

feat: improve api

Browse Source
This commit is contained in:
mathuo 2023-02-05 23:11:36 +07:00
parent c41158cea6
commit 7aa19b2c89
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
7 changed files with 946 additions and 753 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
packages/dockview/src/__tests__/dockview/dockviewComponent.spec.ts
View File

@ -302,8 +302,8 @@ describe('dockviewComponent', () => {
component: 'default',
});
const panel1 = dockview.getGroupPanel('panel1');
const panel2 = dockview.getGroupPanel('panel2');
const panel1 = dockview.getGroupPanel('panel1')!;
const panel2 = dockview.getGroupPanel('panel2')!;
const group1 = panel1.group;
dockview.moveGroupOrPanel(group1, group1.id, 'panel1', Position.Right);
const group2 = panel1.group;
@ -345,10 +345,10 @@ describe('dockviewComponent', () => {
component: 'default',
});
const panel1 = dockview.getGroupPanel('panel1');
const panel2 = dockview.getGroupPanel('panel2');
const panel3 = dockview.getGroupPanel('panel3');
const panel4 = dockview.getGroupPanel('panel4');
const panel1 = dockview.getGroupPanel('panel1')!;
const panel2 = dockview.getGroupPanel('panel2')!;
const panel3 = dockview.getGroupPanel('panel3')!;
const panel4 = dockview.getGroupPanel('panel4')!;
expect(panel1.api.isActive).toBeFalsy();
expect(panel2.api.isActive).toBeFalsy();
@ -425,9 +425,8 @@ describe('dockviewComponent', () => {
expect(dockview.size).toBe(1);
expect(dockview.totalPanels).toBe(2);
const panel1 = dockview.getGroupPanel('panel1');
const panel2 = dockview.getGroupPanel('panel2');
const panel1 = dockview.getGroupPanel('panel1')!;
const panel2 = dockview.getGroupPanel('panel2')!;
expect(panel1.group).toBe(panel2.group);
const group = panel1.group;
@ -489,7 +488,7 @@ describe('dockviewComponent', () => {
expect(viewQuery.length).toBe(1);
const group = dockview.getGroupPanel('panel1').group;
const group = dockview.getGroupPanel('panel1')!.group;
dockview.moveGroupOrPanel(group, group.id, 'panel1', Position.Right);
viewQuery = container.querySelectorAll(
@ -1515,6 +1514,53 @@ describe('dockviewComponent', () => {
expect(panel2Spy).toBeCalledTimes(1);
});
test('move entire group into another group', () => {
const container = document.createElement('div');
const dockview = new DockviewComponent(container, {
components: { default: PanelContentPartTest },
});
dockview.layout(500, 1000);
const panel1 = dockview.addPanel({
id: 'panel1',
component: 'default',
tabComponent: 'default',
});
const panel2 = dockview.addPanel({
id: 'panel2',
component: 'default',
tabComponent: 'default',
position: {
referencePanel: panel1,
},
});
const panel3 = dockview.addPanel({
id: 'panel3',
component: 'default',
tabComponent: 'default',
position: {
referencePanel: panel1,
direction: 'right',
},
});
const panel1Spy = jest.spyOn(panel1.group, 'dispose');
expect(dockview.groups.length).toBe(2);
dockview.moveGroupOrPanel(
panel3.group,
panel1.group.id,
undefined,
Position.Center
);
expect(dockview.groups.length).toBe(1);
expect(panel1Spy).toBeCalledTimes(1);
});
test('fromJSON events should still fire', () => {
jest.useFakeTimers();
@ -1635,8 +1681,6 @@ describe('dockviewComponent', () => {
jest.runAllTimers();
console.log(activePanel.map((_) => _?.id).join(' '));
expect(addGroup.length).toBe(4);
expect(removeGroup.length).toBe(0);
expect(activeGroup.length).toBe(1);

8
packages/dockview/src/api/component.api.ts
View File

@ -325,6 +325,10 @@ export class GridviewApi implements CommonApi<SerializedGridview> {
}
export class DockviewApi implements CommonApi<SerializedDockview> {
get id(): string {
return this.component.id;
}
get width(): number {
return this.component.width;
}
@ -435,8 +439,8 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
return this.component.addPanel(options);
}
addEmptyGroup(options?: AddGroupOptions): void {
this.component.addEmptyGroup(options);
addGroup(options?: AddGroupOptions): IGroupviewPanel {
return this.component.addGroup(options);
}
moveToNext(options?: MovementOptions): void {

15
packages/dockview/src/dnd/dnd.ts
View File

@ -6,17 +6,10 @@ export interface IDragAndDropObserverCallbacks {
onDragLeave: (e: DragEvent) => void;
onDrop: (e: DragEvent) => void;
onDragEnd: (e: DragEvent) => void;
onDragOver?: (e: DragEvent) => void;
}
export class DragAndDropObserver extends CompositeDisposable {
// A helper to fix issues with repeated DRAG_ENTER / DRAG_LEAVE
// calls see https://github.com/microsoft/vscode/issues/14470
// when the element has child elements where the events are fired
// repeadedly.
private counter = 0;
private target: any;
constructor(
@ -34,8 +27,6 @@ export class DragAndDropObserver extends CompositeDisposable {
this.element,
'dragenter',
(e: DragEvent) => {
this.counter++;
try {
this.target = e.target;
this.callbacks.onDragEnter(e);
@ -68,10 +59,6 @@ export class DragAndDropObserver extends CompositeDisposable {
this.addDisposables(
addDisposableListener(this.element, 'dragleave', (e: DragEvent) => {
this.counter--;
console.log('dragleave');
// if (this.counter === 0) {
if (this.target === e.target) {
this.target = null;
try {
@ -85,7 +72,6 @@ export class DragAndDropObserver extends CompositeDisposable {
this.addDisposables(
addDisposableListener(this.element, 'dragend', (e: DragEvent) => {
this.counter = 0;
this.target = null;
try {
this.callbacks.onDragEnd(e);
@ -97,7 +83,6 @@ export class DragAndDropObserver extends CompositeDisposable {
this.addDisposables(
addDisposableListener(this.element, 'drop', (e: DragEvent) => {
this.counter = 0;
try {
this.callbacks.onDrop(e);
} catch (err) {

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

@ -3,6 +3,7 @@ import { Emitter, Event } from '../events';
import { CompositeDisposable } from '../lifecycle';
import { DragAndDropObserver } from './dnd';
import { clamp } from '../math';
import { Direction } from '../gridview/baseComponentGridview';
export enum Position {
Top = 'Top',
@ -12,6 +13,23 @@ export enum Position {
Center = 'Center',
}
export function directionToPosition(direction: Direction): Position {
switch (direction) {
case 'above':
return Position.Top;
case 'below':
return Position.Bottom;
case 'left':
return Position.Left;
case 'right':
return Position.Right;
case 'within':
return Position.Center;
default:
throw new Error(`invalid direction ${direction}`);
}
}
export type Quadrant = 'top' | 'bottom' | 'left' | 'right';
export interface DroptargetEvent {
@ -197,7 +215,7 @@ export class Droptarget extends CompositeDisposable {
const translate = (1 - size) / 2;
const scale = size;
let transform = '';
let transform: string;
if (rightClass) {
transform = `translateX(${100 * translate}%) scaleX(${scale})`;

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

File diff suppressed because it is too large Load Diff

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

@ -78,20 +78,81 @@ export interface PanelOptions {
title?: string;
}
type RelativePanel = {
direction?: Direction;
referencePanel: string | IDockviewPanel;
};
type RelativeGroup = {
direction?: Direction;
referenceGroup: string | GroupPanel;
};
type AbsolutePosition = {
direction: Omit<Direction, 'within'>;
};
export type AddPanelPositionOptions =
| RelativePanel
| RelativeGroup
| AbsolutePosition;
export function isPanelOptionsWithPanel(
data: AddPanelPositionOptions
): data is RelativePanel {
if ((data as RelativePanel).referencePanel) {
return true;
}
return false;
}
export function isPanelOptionsWithGroup(
data: AddPanelPositionOptions
): data is RelativeGroup {
if ((data as RelativeGroup).referenceGroup) {
return true;
}
return false;
}
export interface AddPanelOptions
extends Omit<PanelOptions, 'component' | 'tabComponent'> {
component: string;
tabComponent?: string;
position?: {
direction?: Direction;
referencePanel?: string;
};
type?: 'tabular' | 'singular';
position?: AddPanelPositionOptions;
}
export interface AddGroupOptions {
direction?: 'left' | 'right' | 'above' | 'below';
referencePanel: string;
type AddGroupOptionsWithPanel = {
referencePanel: string | IDockviewPanel;
direction?: Omit<Direction, 'within'>;
};
type AddGroupOptionsWithGroup = {
referenceGroup: string | GroupPanel;
direction?: Omit<Direction, 'within'>;
};
export type AddGroupOptions =
| AddGroupOptionsWithGroup
| AddGroupOptionsWithPanel
| AbsolutePosition;
export function isGroupOptionsWithPanel(
data: AddGroupOptions
): data is AddGroupOptionsWithPanel {
if ((data as AddGroupOptionsWithPanel).referencePanel) {
return true;
}
return false;
}
export function isGroupOptionsWithGroup(
data: AddGroupOptions
): data is AddGroupOptionsWithGroup {
if ((data as AddGroupOptionsWithGroup).referenceGroup) {
return true;
}
return false;
}
export interface MovementOptions2 {

5
packages/dockview/src/groupview/tab.ts
View File

@ -111,7 +111,12 @@ export class Tab extends CompositeDisposable implements ITab {
this.droptarget = new Droptarget(this._element, {
acceptedTargetZones: ['center'],
canDisplayOverlay: (event) => {
if (this.group.locked) {
return false;
}
const data = getPanelData();
if (data && this.accessor.id === data.viewId) {
return this.panelId !== data.panelId;
}