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

Merge pull request #114 from mathuo/113-improve-events

Browse Source 
feat: improve events
This commit is contained in:
mathuo 2022-05-22 22:13:12 +01:00 committed by GitHub
commit 0ad2fc4b48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 927 additions and 725 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
packages/dockview/src/__tests__/dockview/deserializer.spec.ts
View File

@ -1,95 +0,0 @@
import {
DefaultDeserializer,
PanelDeserializerOptions,
} from '../../dockview/deserializer';
import { DockviewComponent } from '../../dockview/dockviewComponent';
import { Groupview } from '../../groupview/groupview';
import { GroupPanel } from '../../groupview/groupviewPanel';
describe('deserializer', () => {
test('fromJSON', () => {
const openPanel = jest.fn();
const model = jest.fn<Groupview, []>(() => {
const result: Partial<Groupview> = {
openPanel,
};
return result as Groupview;
});
const panel1 = jest.fn();
const panel2 = jest.fn();
const groupMock = jest.fn<GroupPanel, []>(() => {
const result: Partial<GroupPanel> = {
model: new model(),
panels: <any>[panel1, panel2],
activePanel: null,
};
return result as GroupPanel;
});
const group = new groupMock();
const createGroup = jest.fn().mockReturnValue(new groupMock());
const dockviewComponentMock = jest.fn<DockviewComponent, []>(() => {
const value: Partial<DockviewComponent> = {
createGroup,
};
return <DockviewComponent>value;
});
const createPanel = jest
.fn()
.mockImplementation((child) => ({ id: child }));
const panelDeserializer: PanelDeserializerOptions = {
createPanel,
};
const dockviewComponent = new dockviewComponentMock();
const cut = new DefaultDeserializer(
dockviewComponent,
panelDeserializer
);
cut.fromJSON({
type: 'leaf',
size: 100,
visible: true,
data: {
hideHeader: true,
locked: true,
id: 'id',
views: ['view1', 'view2'],
activeView: 'view2',
},
});
expect(createGroup).toBeCalledWith({
id: 'id',
locked: true,
hideHeader: true,
});
expect(createGroup).toBeCalledTimes(1);
expect(createPanel).toBeCalledWith('view1', group);
expect(createPanel).toBeCalledWith('view2', group);
expect(createPanel).toBeCalledTimes(2);
expect(openPanel).toBeCalledWith(
{ id: 'view1' },
{ skipSetActive: true }
);
expect(openPanel).toBeCalledWith(
{ id: 'view2' },
{ skipSetActive: false }
);
expect(openPanel).toBeCalledWith(panel2);
expect(openPanel).toBeCalledTimes(3);
});
});

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

@ -254,34 +254,34 @@ describe('dockviewComponent', () => {
const panel3 = dockview.getGroupPanel('panel3');
const panel4 = dockview.getGroupPanel('panel4');
const group1 = panel1.group;
const group1 = panel1!.group;
dockview.moveGroupOrPanel(group1, group1.id, 'panel1', Position.Right);
const group2 = panel1.group;
const group2 = panel1!.group;
dockview.moveGroupOrPanel(group2, group1.id, 'panel3', Position.Center);
expect(dockview.activeGroup).toBe(group2);
expect(dockview.activeGroup.model.activePanel).toBe(panel3);
expect(dockview.activeGroup.model.indexOf(panel3)).toBe(1);
expect(dockview.activeGroup!.model.activePanel).toBe(panel3);
expect(dockview.activeGroup!.model.indexOf(panel3!)).toBe(1);
dockview.moveToPrevious({ includePanel: true });
expect(dockview.activeGroup).toBe(group2);
expect(dockview.activeGroup.model.activePanel).toBe(panel1);
expect(dockview.activeGroup!.model.activePanel).toBe(panel1);
dockview.moveToNext({ includePanel: true });
expect(dockview.activeGroup).toBe(group2);
expect(dockview.activeGroup.model.activePanel).toBe(panel3);
expect(dockview.activeGroup!.model.activePanel).toBe(panel3);
dockview.moveToPrevious({ includePanel: false });
expect(dockview.activeGroup).toBe(group1);
expect(dockview.activeGroup.model.activePanel).toBe(panel4);
expect(dockview.activeGroup!.model.activePanel).toBe(panel4);
dockview.moveToPrevious({ includePanel: true });
expect(dockview.activeGroup).toBe(group1);
expect(dockview.activeGroup.model.activePanel).toBe(panel2);
expect(dockview.activeGroup!.model.activePanel).toBe(panel2);
dockview.moveToNext({ includePanel: false });
expect(dockview.activeGroup).toBe(group2);
expect(dockview.activeGroup.model.activePanel).toBe(panel3);
expect(dockview.activeGroup!.model.activePanel).toBe(panel3);
});
test('remove group', () => {
@ -1517,6 +1517,175 @@ describe('dockviewComponent', () => {
expect(panel2Spy).toBeCalledTimes(1);
});
test('fromJSON events should still fire', () => {
jest.useFakeTimers();
dockview.layout(1000, 1000);
let addGroup: GroupPanel[] = [];
let removeGroup: GroupPanel[] = [];
let activeGroup: (GroupPanel | undefined)[] = [];
let addPanel: IDockviewPanel[] = [];
let removePanel: IDockviewPanel[] = [];
let activePanel: (IDockviewPanel | undefined)[] = [];
let layoutChange = 0;
let layoutChangeFromJson = 0;
const disposable = new CompositeDisposable(
dockview.onDidAddGroup((panel) => {
addGroup.push(panel);
}),
dockview.onDidRemoveGroup((panel) => {
removeGroup.push(panel);
}),
dockview.onDidActiveGroupChange((event) => {
activeGroup.push(event);
}),
dockview.onDidAddPanel((panel) => {
addPanel.push(panel);
}),
dockview.onDidRemovePanel((panel) => {
removePanel.push(panel);
}),
dockview.onDidActivePanelChange((event) => {
activePanel.push(event);
}),
dockview.onDidLayoutChange(() => {
layoutChange++;
}),
dockview.onDidLayoutFromJSON(() => {
layoutChangeFromJson++;
})
);
dockview.deserializer = new ReactPanelDeserialzier(dockview);
dockview.fromJSON({
activeGroup: 'group-1',
grid: {
root: {
type: 'branch',
data: [
{
type: 'leaf',
data: {
views: ['panel1'],
id: 'group-1',
activeView: 'panel1',
},
size: 500,
},
{
type: 'branch',
data: [
{
type: 'leaf',
data: {
views: ['panel2', 'panel3'],
id: 'group-2',
},
size: 500,
},
{
type: 'leaf',
data: { views: ['panel4'], id: 'group-3' },
size: 500,
},
],
size: 250,
},
{
type: 'leaf',
data: { views: ['panel5'], id: 'group-4' },
size: 250,
},
],
size: 1000,
},
height: 1000,
width: 1000,
orientation: Orientation.VERTICAL,
},
panels: {
panel1: {
id: 'panel1',
view: { content: { id: 'default' } },
title: 'panel1',
},
panel2: {
id: 'panel2',
view: { content: { id: 'default' } },
title: 'panel2',
},
panel3: {
id: 'panel3',
view: { content: { id: 'default' } },
title: 'panel3',
},
panel4: {
id: 'panel4',
view: { content: { id: 'default' } },
title: 'panel4',
},
panel5: {
id: 'panel5',
view: { content: { id: 'default' } },
title: 'panel5',
},
},
options: { tabHeight: 25 },
});
jest.runAllTimers();
console.log(activePanel.map((_) => _?.id).join(' '));
expect(addGroup.length).toBe(4);
expect(removeGroup.length).toBe(0);
expect(activeGroup.length).toBe(1);
expect(addPanel.length).toBe(5);
expect(removePanel.length).toBe(0);
expect(activePanel.length).toBe(5);
expect(layoutChange).toBe(1);
expect(layoutChangeFromJson).toBe(1);
addGroup = [];
removeGroup = [];
activeGroup = [];
addPanel = [];
removePanel = [];
activePanel = [];
layoutChange = 0;
layoutChangeFromJson = 0;
dockview.fromJSON({
grid: {
root: {
type: 'branch',
data: [],
size: 1000,
},
height: 1000,
width: 1000,
orientation: Orientation.VERTICAL,
},
panels: {},
options: { tabHeight: 25 },
});
jest.runAllTimers();
expect(addGroup.length).toBe(0);
expect(removeGroup.length).toBe(4);
expect(activeGroup.length).toBe(1);
expect(addPanel.length).toBe(0);
expect(removePanel.length).toBe(5);
expect(activePanel.length).toBe(1);
expect(layoutChange).toBe(1);
expect(layoutChangeFromJson).toBe(1);
return disposable.dispose();
});
// group is disposed of when dockview is disposed
// watermark is disposed of when removed
// watermark is disposed of when dockview is disposed

122
packages/dockview/src/__tests__/gridview/gridviewComponent.spec.ts
View File

@ -1761,4 +1761,126 @@ describe('gridview', () => {
expect(panel1Spy).toHaveBeenCalledTimes(1);
expect(panel2Spy).toHaveBeenCalledTimes(1);
});
test('fromJSON events should still fire', () => {
jest.useFakeTimers();
const gridview = new GridviewComponent(container, {
proportionalLayout: true,
orientation: Orientation.HORIZONTAL,
components: { default: TestGridview },
});
let addGroup: GridviewPanel[] = [];
let removeGroup: GridviewPanel[] = [];
let activeGroup: (GridviewPanel | undefined)[] = [];
let layoutChange = 0;
let layoutChangeFromJson = 0;
const disposable = new CompositeDisposable(
gridview.onDidAddGroup((panel) => {
addGroup.push(panel);
}),
gridview.onDidRemoveGroup((panel) => {
removeGroup.push(panel);
}),
gridview.onDidActiveGroupChange((event) => {
activeGroup.push(event);
}),
gridview.onDidLayoutChange(() => {
layoutChange++;
}),
gridview.onDidLayoutFromJSON(() => {
layoutChangeFromJson++;
})
);
gridview.fromJSON({
grid: {
height: 400,
width: 800,
orientation: Orientation.HORIZONTAL,
root: {
type: 'branch',
size: 400,
data: [
{
type: 'leaf',
size: 200,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
{
type: 'branch',
size: 400,
data: [
{
type: 'leaf',
size: 250,
data: {
id: 'panel_2',
component: 'default',
snap: false,
},
},
{
type: 'leaf',
size: 150,
data: {
id: 'panel_3',
component: 'default',
snap: false,
},
},
],
},
{
type: 'leaf',
size: 200,
data: {
id: 'panel_4',
component: 'default',
snap: false,
},
},
],
},
},
activePanel: 'panel_1',
});
jest.runAllTimers();
expect(addGroup.length).toBe(4);
expect(removeGroup.length).toBe(0);
expect(activeGroup.length).toBe(1);
expect(activeGroup[0]).toEqual(gridview.getPanel('panel_1'));
expect(layoutChange).toBe(1);
expect(layoutChangeFromJson).toBe(1);
addGroup = [];
activeGroup = [];
gridview.fromJSON({
grid: {
height: 0,
width: 0,
root: { type: 'branch', data: [] },
orientation: Orientation.HORIZONTAL,
},
});
jest.runAllTimers();
expect(addGroup.length).toBe(0);
expect(removeGroup.length).toBe(4);
expect(activeGroup.length).toBe(1);
expect(layoutChange).toBe(2);
expect(layoutChangeFromJson).toBe(2);
return disposable.dispose();
});
});

2
packages/dockview/src/__tests__/groupview/groupview.spec.ts
View File

@ -560,7 +560,7 @@ describe('groupview', () => {
const panel3 = new TestPanel('id_2', null);
cut.openPanel(panel3, { skipSetActive: true });
cut.openPanel(panel3, { skipSetPanelActive: true });
expect(contentContainer.length).toBe(1);
expect(contentContainer.item(0)).toBe(panel2.view.content.element);

46
packages/dockview/src/dockview/deserializer.ts
View File

@ -1,52 +1,6 @@
import {
IGridView,
ISerializedLeafNode,
IViewDeserializer,
} from '../gridview/gridview';
import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
import { GroupPanelViewState } from '../groupview/groupview';
import { GroupPanel } from '../groupview/groupviewPanel';
import { DockviewComponent } from './dockviewComponent';
export interface IPanelDeserializer {
fromJSON(panelData: GroupviewPanelState, group: GroupPanel): IDockviewPanel;
}
export interface PanelDeserializerOptions {
createPanel: (id: string, group: GroupPanel) => IDockviewPanel;
}
export class DefaultDeserializer implements IViewDeserializer {
constructor(
private readonly layout: DockviewComponent,
private panelDeserializer: PanelDeserializerOptions
) {}
public fromJSON(node: ISerializedLeafNode<GroupPanelViewState>): IGridView {
const data = node.data;
const children = data.views;
const active = data.activeView;
const group = this.layout.createGroup({
id: data.id,
locked: !!data.locked,
hideHeader: !!data.hideHeader,
});
for (const child of children) {
const panel = this.panelDeserializer.createPanel(child, group);
const isActive = typeof active === 'string' && active === panel.id;
group.model.openPanel(panel, {
skipSetActive: !isActive,
});
}
if (!group.activePanel && group.panels.length > 0) {
group.model.openPanel(group.panels[group.panels.length - 1]);
}
return group;
}
}

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

@ -2,6 +2,7 @@ import {
getRelativeLocation,
SerializedGridObject,
getGridLocation,
ISerializedLeafNode,
} from '../gridview/gridview';
import { Position } from '../dnd/droptarget';
import { tail, sequenceEquals } from '../array';
@ -16,7 +17,7 @@ import {
IWatermarkRenderer,
} from '../groupview/types';
import { sequentialNumberGenerator } from '../math';
import { DefaultDeserializer, IPanelDeserializer } from './deserializer';
import { IPanelDeserializer } from './deserializer';
import { createComponent } from '../panel/componentFactory';
import {
AddGroupOptions,
@ -75,7 +76,7 @@ export type DockviewComponentUpdateOptions = Pick<
export interface DockviewDropEvent extends GroupviewDropEvent {
api: DockviewApi;
group: GroupPanel
group: GroupPanel;
}
export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
@ -140,8 +141,8 @@ export class DockviewComponent
private readonly _onDidAddPanel = new Emitter<IDockviewPanel>();
readonly onDidAddPanel: Event<IDockviewPanel> = this._onDidAddPanel.event;
private readonly _onDidLayoutfromJSON = new Emitter<void>();
readonly onDidLayoutFromJSON: Event<void> = this._onDidLayoutfromJSON.event;
private readonly _onDidLayoutFromJSON = new Emitter<void>();
readonly onDidLayoutFromJSON: Event<void> = this._onDidLayoutFromJSON.event;
private readonly _onDidActivePanelChange = new Emitter<
IDockviewPanel | undefined
@ -271,7 +272,9 @@ export class DockviewComponent
if (options.includePanel && options.group) {
if (
options.group.activePanel !==
options.group.panels[options.group.panels.length - 1]
options.group.panels[
options.group.panels.length - 1
]
) {
options.group.model.moveToNext({ suppressRoll: true });
return;
@ -279,7 +282,7 @@ export class DockviewComponent
}
const location = getGridLocation(options.group.element);
const next = <GroupPanel>this.gridview.next(location)?.view;
const next = <GroupPanel>this.gridview.next(location)?.view
this.doSetGroupActive(next);
}
@ -292,7 +295,10 @@ export class DockviewComponent
}
if (options.includePanel && options.group) {
if (options.group.activePanel !== options.group.panels[0]) {
if (
options.group.activePanel !==
options.group.panels[0]
) {
options.group.model.moveToPrevious({ suppressRoll: true });
return;
}
@ -329,11 +335,22 @@ export class DockviewComponent
fromJSON(data: SerializedDockview): void {
const groups = Array.from(this._groups.values()).map((_) => _.value);
const hasActiveGroup = !!this.activeGroup;
const hasActivePanel = !!this.activePanel
for (const group of groups) {
// remove the group will automatically remove the panels
this.removeGroup(group, true);
}
if (hasActiveGroup) {
this.doSetGroupActive(undefined);
}
if( hasActivePanel) {
this._onDidActivePanelChange.fire(undefined);
}
this.gridview.clear();
if (!this.deserializer) {
@ -351,13 +368,39 @@ export class DockviewComponent
this.gridview.deserialize(
grid,
new DefaultDeserializer(this, {
createPanel: (id, group) => {
const panelData = panels[id];
return this.deserializer!.fromJSON(panelData, group);
},
})
);
{
fromJSON:(node: ISerializedLeafNode<GroupPanelViewState>) => {
const { id, locked, hideHeader, views, activeView } = node.data
const group = this.createGroup({
id,
locked: !!locked,
hideHeader: !!hideHeader,
});
this._onDidAddGroup.fire(group);
for (const child of views) {
const panel = this.deserializer!.fromJSON(panels[child], group);
const isActive = typeof activeView === 'string' && activeView === panel.id;
group.model.openPanel(panel, {
skipSetPanelActive: !isActive,
skipSetGroupActive:true
});
}
if (!group.activePanel && group.panels.length > 0) {
group.model.openPanel(group.panels[group.panels.length - 1],{
skipSetGroupActive:true
});
}
return group;
}
}
)
if (typeof activeGroup === 'string') {
const panel = this.getPanel(activeGroup);
@ -368,7 +411,7 @@ export class DockviewComponent
this.gridview.layout(this.width, this.height);
this._onDidLayoutfromJSON.fire();
this._onDidLayoutFromJSON.fire();
}
closeAllGroups(): void {
@ -414,12 +457,12 @@ export class DockviewComponent
referenceGroup = this.activeGroup;
}
let panel: IDockviewPanel;
let panel: IDockviewPanel
if (referenceGroup) {
const target = toTarget(options.position?.direction || 'within');
if (target === Position.Center) {
panel = this.createPanel(options, referenceGroup);
panel = this.createPanel(options, referenceGroup)
referenceGroup.model.openPanel(panel);
} else {
const location = getGridLocation(referenceGroup.element);
@ -429,7 +472,7 @@ export class DockviewComponent
target
);
const group = this.createGroupAtLocation(relativeLocation);
panel = this.createPanel(options, group);
panel = this.createPanel(options, group)
group.model.openPanel(panel);
}
} else {
@ -701,21 +744,13 @@ export class DockviewComponent
return view;
}
private createPanel(
options: AddPanelOptions,
group: GroupPanel
): IDockviewPanel {
private createPanel(options: AddPanelOptions, group: GroupPanel): IDockviewPanel {
const view = new DefaultGroupPanelView({
content: this.createContentComponent(options.id, options.component),
tab: this.createTabComponent(options.id, options.tabComponent),
});
const panel = new DockviewGroupPanel(
options.id,
this,
this._api,
group
);
const panel = new DockviewGroupPanel(options.id, this, this._api, group);
panel.init({
view,
title: options.title || options.id,
@ -753,10 +788,12 @@ export class DockviewComponent
);
}
private createGroupAtLocation(location: number[] = [0]): GroupPanel {
private createGroupAtLocation(
location: number[] = [0]
): GroupPanel {
const group = this.createGroup();
this.doAddGroup(group, location);
return group;
return group
}
private findGroup(panel: IDockviewPanel): GroupPanel | undefined {
@ -771,6 +808,6 @@ export class DockviewComponent
this._onDidActivePanelChange.dispose();
this._onDidAddPanel.dispose();
this._onDidRemovePanel.dispose();
this._onDidLayoutfromJSON.dispose();
this._onDidLayoutFromJSON.dispose();
}
}

4
packages/dockview/src/gridview/baseComponentGridview.ts
View File

@ -82,7 +82,7 @@ export abstract class BaseGrid<T extends IGridPanelView>
private readonly _onDidRemoveGroup = new Emitter<T>();
readonly onDidRemoveGroup: Event<T> = this._onDidRemoveGroup.event;
private readonly _onDidAddGroup = new Emitter<T>();
protected readonly _onDidAddGroup = new Emitter<T>();
readonly onDidAddGroup: Event<T> = this._onDidAddGroup.event;
private readonly _onDidActiveGroupChange = new Emitter<T | undefined>();
@ -150,7 +150,7 @@ export abstract class BaseGrid<T extends IGridPanelView>
this.addDisposables(
this.gridview.onDidChange(() => {
this._onDidLayoutChange.fire();
this._bufferOnDidLayoutChange.fire();
})
);

8
packages/dockview/src/gridview/gridviewComponent.ts
View File

@ -175,12 +175,18 @@ export class GridviewComponent
public fromJSON(serializedGridview: SerializedGridview) {
const { grid, activePanel } = serializedGridview;
const hasActiveGroup = this.activeGroup;
const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
for (const group of groups) {
group.disposable.dispose();
this.doRemoveGroup(group.value, { skipActive: true });
}
if (hasActiveGroup) {
this.doSetGroupActive(undefined);
}
this.gridview.clear();
const queue: Function[] = [];
@ -216,6 +222,8 @@ export class GridviewComponent
})
);
this._onDidAddGroup.fire(view);
this.registerPanel(view);
return view;

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

@ -400,7 +400,8 @@ export class Groupview extends CompositeDisposable implements IGroupview {
options: {
index?: number;
skipFocus?: boolean;
skipSetActive?: boolean;
skipSetPanelActive?: boolean;
skipSetGroupActive?: boolean;
} = {}
) {
if (
@ -410,20 +411,26 @@ export class Groupview extends CompositeDisposable implements IGroupview {
options.index = this.panels.length;
}
const skipSetActive = !!options.skipSetActive;
const skipSetPanelActive = !!options.skipSetPanelActive;
const skipSetGroupActive = !!options.skipSetGroupActive;
// ensure the group is updated before we fire any events
panel.updateParentGroup(this.parent, true);
if (!skipSetActive && this._activePanel === panel) {
if (this._activePanel === panel) {
if (!skipSetGroupActive) {
this.accessor.doSetGroupActive(this.parent);
}
return;
}
this.doAddPanel(panel, options.index, skipSetActive);
this.doAddPanel(panel, options.index, skipSetPanelActive);
if (!skipSetActive) {
if (!skipSetPanelActive) {
this.doSetActivePanel(panel);
}
if (!skipSetGroupActive) {
this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
}