Skip to content

Commit

Permalink
feat: gready render mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@mathuo
mathuo committed Nov 27, 2023
1 parent b17aa24 commit 6b969df
Show file tree
Hide file tree
Showing 20 changed files with 623 additions and 211 deletions.
8 changes: 4 additions & 4 deletions packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ describe('groupPanelApi', () => {
});

test('updateParameters', () => {
const groupPanel: Partial<IDockviewPanel> = {
const groupPanel: Partial<DockviewPanel> = {
id: 'test_id',
update: jest.fn(),
};
Expand All @@ -53,7 +53,7 @@ describe('groupPanelApi', () => {
);

const cut = new DockviewPanelApiImpl(
<IDockviewPanel>groupPanel,
<DockviewPanel>groupPanel,
<DockviewGroupPanel>groupViewPanel,
<DockviewComponent>accessor
);
Expand All @@ -67,7 +67,7 @@ describe('groupPanelApi', () => {
});

test('onDidGroupChange', () => {
const groupPanel: Partial<IDockviewPanel> = {
const groupPanel: Partial<DockviewPanel> = {
id: 'test_id',
};

Expand All @@ -83,7 +83,7 @@ describe('groupPanelApi', () => {
);

const cut = new DockviewPanelApiImpl(
<IDockviewPanel>groupPanel,
<DockviewPanel>groupPanel,
<DockviewGroupPanel>groupViewPanel,
<DockviewComponent>accessor
);
Expand Down
12 changes: 11 additions & 1 deletion packages/dockview-core/src/__tests__/dockview/components/panel/content.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { CompositeDisposable } from '../../../../lifecycle';
import { PanelUpdateEvent } from '../../../../panel/types';
import { IDockviewPanel } from '../../../../dockview/dockviewPanel';
import { IDockviewPanelModel } from '../../../../dockview/dockviewPanelModel';
import { DockviewComponent } from '../../../../dockview/dockviewComponent';

class TestContentRenderer
extends CompositeDisposable
Expand Down Expand Up @@ -56,7 +57,14 @@ describe('contentContainer', () => {
let blur = 0;

const disposable = new CompositeDisposable();
const cut = new ContentContainer();

const dockviewComponent = jest.fn<DockviewComponent, []>(() => {
return {
renderingType: 'destructive',
} as DockviewComponent;
});

const cut = new ContentContainer(dockviewComponent(), jest.fn() as any);

disposable.addDisposables(
cut.onDidFocus(() => {
Expand All @@ -73,6 +81,7 @@ describe('contentContainer', () => {
view: {
content: contentRenderer,
} as Partial<IDockviewPanelModel>,
api: { renderingType: 'destructive' },
} as Partial<IDockviewPanel>;

cut.openPanel(panel as IDockviewPanel);
Expand Down Expand Up @@ -107,6 +116,7 @@ describe('contentContainer', () => {
view: {
content: contentRenderer2,
} as Partial<IDockviewPanelModel>,
api: { renderingType: 'destructive' },
} as Partial<IDockviewPanel>;

cut.openPanel(panel2 as IDockviewPanel);
Expand Down
12 changes: 9 additions & 3 deletions packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -576,19 +576,25 @@ describe('groupview', () => {
.getElementsByClassName('content-container')
.item(0)!.childNodes;

const panel1 = new TestPanel('id_1', null as any);
const panel1 = new TestPanel('id_1', {
renderingType: 'destructive',
} as any);

cut.openPanel(panel1);
expect(contentContainer.length).toBe(1);
expect(contentContainer.item(0)).toBe(panel1.view.content.element);

const panel2 = new TestPanel('id_2', null as any);
const panel2 = new TestPanel('id_2', {
renderingType: 'destructive',
} as any);

cut.openPanel(panel2);
expect(contentContainer.length).toBe(1);
expect(contentContainer.item(0)).toBe(panel2.view.content.element);

const panel3 = new TestPanel('id_2', null as any);
const panel3 = new TestPanel('id_2', {
renderingType: 'destructive',
} as any);

cut.openPanel(panel3, { skipSetPanelActive: true });
expect(contentContainer.length).toBe(1);
Expand Down
24 changes: 18 additions & 6 deletions packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@ describe('dockviewPanel', () => {
const group = new groupMock();
const model = <IDockviewPanelModel>new panelModelMock();

const cut = new DockviewPanel('fake-id', accessor, api, group, model);
const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
renderingType: 'destructive',
});

let latestTitle: string | undefined = undefined;

Expand Down Expand Up @@ -74,7 +76,9 @@ describe('dockviewPanel', () => {
const group = new groupMock();
const model = <IDockviewPanelModel>new panelModelMock();

const cut = new DockviewPanel('fake-id', accessor, api, group, model);
const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
renderingType: 'destructive',
});

cut.init({ title: 'myTitle', params: {} });
expect(cut.title).toBe('myTitle');
Expand Down Expand Up @@ -109,7 +113,9 @@ describe('dockviewPanel', () => {
const group = new groupMock();
const model = <IDockviewPanelModel>new panelModelMock();

const cut = new DockviewPanel('fake-id', accessor, api, group, model);
const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
renderingType: 'destructive',
});

cut.init({ params: {}, title: 'title' });

Expand Down Expand Up @@ -141,7 +147,9 @@ describe('dockviewPanel', () => {
const group = new groupMock();
const model = <IDockviewPanelModel>new panelModelMock();

const cut = new DockviewPanel('fake-id', accessor, api, group, model);
const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
renderingType: 'destructive',
});

expect(cut.params).toEqual(undefined);

Expand Down Expand Up @@ -177,7 +185,9 @@ describe('dockviewPanel', () => {
const group = new groupMock();
const model = <IDockviewPanelModel>new panelModelMock();

const cut = new DockviewPanel('fake-id', accessor, api, group, model);
const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
renderingType: 'destructive',
});

cut.api.setSize({ height: 123, width: 456 });

Expand Down Expand Up @@ -208,7 +218,9 @@ describe('dockviewPanel', () => {
const group = new groupMock();
const model = <IDockviewPanelModel>new panelModelMock();

const cut = new DockviewPanel('fake-id', accessor, api, group, model);
const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
renderingType: 'destructive',
});

cut.init({ params: { a: '1', b: '2' }, title: 'A title' });
expect(cut.params).toEqual({ a: '1', b: '2' });
Expand Down
24 changes: 22 additions & 2 deletions packages/dockview-core/src/api/dockviewPanelApi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,19 @@ import { Emitter, Event } from '../events';
import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi';
import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
import { MutableDisposable } from '../lifecycle';
import { IDockviewPanel } from '../dockview/dockviewPanel';
import { DockviewPanel, IDockviewPanel } from '../dockview/dockviewPanel';
import { DockviewComponent } from '../dockview/dockviewComponent';
import { Position } from '../dnd/droptarget';
import { RenderingType } from '../dockview/components/greadyRenderContainer';

export interface TitleEvent {
readonly title: string;
}

export interface RenderingTypeEvent {
renderingType: RenderingType;
}

/*
* omit visibility modifiers since the visibility of a single group doesn't make sense
* because it belongs to a groupview
Expand All @@ -21,11 +26,14 @@ export interface DockviewPanelApi
> {
readonly group: DockviewGroupPanel;
readonly isGroupActive: boolean;
readonly renderingType: RenderingType;
readonly title: string | undefined;
readonly onDidActiveGroupChange: Event<void>;
readonly onDidGroupChange: Event<void>;
readonly onDidRendeingTypeChange: Event<RenderingTypeEvent>;
close(): void;
setTitle(title: string): void;
setRenderingType(renderingType: RenderingType): void;
moveTo(options: {
group: DockviewGroupPanel;
position?: Position;
Expand All @@ -48,6 +56,9 @@ export class DockviewPanelApiImpl
private readonly _onDidGroupChange = new Emitter<void>();
readonly onDidGroupChange = this._onDidGroupChange.event;

readonly _onDidRenderingTypeChange = new Emitter<RenderingTypeEvent>();
readonly onDidRendeingTypeChange = this._onDidRenderingTypeChange.event;

private readonly disposable = new MutableDisposable();

get title(): string | undefined {
Expand All @@ -58,6 +69,10 @@ export class DockviewPanelApiImpl
return !!this.group?.isActive;
}

get renderingType(): RenderingType {
return this.panel.renderingType;
}

set group(value: DockviewGroupPanel) {
const isOldGroupActive = this.isGroupActive;

Expand All @@ -81,7 +96,7 @@ export class DockviewPanelApiImpl
}

constructor(
private panel: IDockviewPanel,
private panel: DockviewPanel,
group: DockviewGroupPanel,
private readonly accessor: DockviewComponent
) {
Expand All @@ -93,6 +108,7 @@ export class DockviewPanelApiImpl

this.addDisposables(
this.disposable,
this._onDidRenderingTypeChange,
this._onDidTitleChange,
this._onDidGroupChange,
this._onDidActiveGroupChange
Expand All @@ -117,6 +133,10 @@ export class DockviewPanelApiImpl
this.panel.setTitle(title);
}

setRenderingType(renderingType: RenderingType): void {
this.panel.setRenderingType(renderingType);
}

close(): void {
this.group.model.closePanel(this.panel);
}
Expand Down
50 changes: 35 additions & 15 deletions packages/dockview-core/src/dnd/dnd.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,43 @@ export class DragAndDropObserver extends CompositeDisposable {
this.registerListeners();
}

onDragEnter(e: DragEvent): void {
this.target = e.target;
this.callbacks.onDragEnter(e);
}

onDragOver(e: DragEvent): void {
e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)

if (this.callbacks.onDragOver) {
this.callbacks.onDragOver(e);
}
}

onDragLeave(e: DragEvent): void {
if (this.target === e.target) {
this.target = null;

this.callbacks.onDragLeave(e);
}
}

onDragEnd(e: DragEvent): void {
this.target = null;
this.callbacks.onDragEnd(e);
}

onDrop(e: DragEvent): void {
this.callbacks.onDrop(e);
}

private registerListeners(): void {
this.addDisposables(
addDisposableListener(
this.element,
'dragenter',
(e: DragEvent) => {
this.target = e.target;
this.callbacks.onDragEnter(e);
this.onDragEnter(e);
},
true
)
Expand All @@ -39,36 +68,27 @@ export class DragAndDropObserver extends CompositeDisposable {
this.element,
'dragover',
(e: DragEvent) => {
e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)

if (this.callbacks.onDragOver) {
this.callbacks.onDragOver(e);
}
this.onDragOver(e);
},
true
)
);

this.addDisposables(
addDisposableListener(this.element, 'dragleave', (e: DragEvent) => {
if (this.target === e.target) {
this.target = null;

this.callbacks.onDragLeave(e);
}
this.onDragLeave(e);
})
);

this.addDisposables(
addDisposableListener(this.element, 'dragend', (e: DragEvent) => {
this.target = null;
this.callbacks.onDragEnd(e);
this.onDragEnd(e);
})
);

this.addDisposables(
addDisposableListener(this.element, 'drop', (e: DragEvent) => {
this.callbacks.onDrop(e);
this.onDrop(e);
})
);
}
Expand Down
Loading

0 comments on commit 6b969df

Please sign in to comment.