rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-22 16:15: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;
}
}

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

File diff suppressed because it is too large Load Diff

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;

19
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) {
this.accessor.doSetGroupActive(this.parent);
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);
}