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

expose params object for dockview panels

Browse Source
This commit is contained in:
mathuo 2022-04-22 22:51:21 +01:00
parent 2e051f6690
commit 557621aa83
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
11 changed files with 171 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dockview/src/__tests__/api/component.api.spec.ts
View File

@ -85,7 +85,6 @@ describe('component.api', () => {
'maximumWidth',
'width',
'height',
'onGridEvent',
'onDidLayoutChange',
'orientation',
'focus',
@ -124,7 +123,6 @@ describe('component.api', () => {
'height',
'size',
'totalPanels',
'onGridEvent',
'onDidLayoutChange',
'panels',
'groups',

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

@ -12,10 +12,6 @@ import { Orientation } from '../../splitview/core/splitview';
import { ReactPanelDeserialzier } from '../../react/deserializer';
import { Position } from '../../dnd/droptarget';
import { GroupviewPanel } from '../../groupview/groupviewPanel';
import {
GroupChangeEvent,
GroupChangeKind,
} from '../../gridview/baseComponentGridview';
import { CompositeDisposable } from '../../lifecycle';
import {
GroupPanelUpdateEvent,
@ -117,6 +113,10 @@ class TestGroupPanel implements IGroupPanel {
);
}
get params(): Record<string, any> {
return {};
}
get group(): GroupviewPanel | undefined {
return this._group;
}
@ -732,18 +732,16 @@ describe('dockviewComponent', () => {
let counter = 0;
const disposable = dockview.onGridEvent((e) => {
switch (e.kind) {
case GroupChangeKind.ADD_PANEL:
counter++;
expect(counter).toBe(dockview.totalPanels);
break;
case GroupChangeKind.REMOVE_PANEL:
counter--;
expect(counter).toBe(dockview.totalPanels);
break;
}
});
const disposable = new CompositeDisposable(
dockview.onDidAddPanel(() => {
counter++;
expect(counter).toBe(dockview.totalPanels);
}),
dockview.onDidRemovePanel(() => {
counter--;
expect(counter).toBe(dockview.totalPanels);
})
);
const panel1 = dockview.addPanel({
id: 'panel1',
@ -774,18 +772,16 @@ describe('dockviewComponent', () => {
let counter = 0;
const disposable = dockview.onGridEvent((e) => {
switch (e.kind) {
case GroupChangeKind.ADD_GROUP:
counter++;
expect(counter).toBe(dockview.size);
break;
case GroupChangeKind.REMOVE_GROUP:
counter--;
expect(counter).toBe(dockview.size);
break;
}
});
const disposable = new CompositeDisposable(
dockview.onDidAddGroup(() => {
counter++;
expect(counter).toBe(dockview.size);
}),
dockview.onDidRemoveGroup(() => {
counter--;
expect(counter).toBe(dockview.size);
})
);
const panel1 = dockview.addPanel({
id: 'panel1',
@ -814,18 +810,45 @@ describe('dockviewComponent', () => {
test('events flow', () => {
dockview.layout(1000, 1000);
let events: GroupChangeEvent[] = [];
const disposable = dockview.onGridEvent((e) => events.push(e));
let events: {
panel?: IGroupPanel;
group?: GroupviewPanel | undefined;
type: string;
}[] = [];
const disposable = new CompositeDisposable(
dockview.onDidAddGroup((group) => {
events.push({ type: 'ADD_GROUP', group });
}),
dockview.onDidActiveGroupChange((group) => {
events.push({ type: 'ACTIVE_GROUP', group });
}),
dockview.onDidRemoveGroup((group) => {
events.push({ type: 'REMOVE_GROUP', group });
}),
dockview.onDidAddPanel((panel) => {
events.push({ type: 'ADD_PANEL', panel });
}),
dockview.onDidRemovePanel((panel) => {
events.push({ type: 'REMOVE_PANEL', panel });
}),
dockview.onDidActivePanelChange((panel) => {
events.push({ type: 'ACTIVE_PANEL', panel });
})
);
const panel1 = dockview.addPanel({
id: 'panel1',
component: 'default',
});
expect(panel1.group).toBeTruthy();
expect(events).toEqual([
{ kind: GroupChangeKind.ADD_GROUP },
{ kind: GroupChangeKind.GROUP_ACTIVE },
{ kind: GroupChangeKind.ADD_PANEL, panel: panel1 },
{ kind: GroupChangeKind.PANEL_ACTIVE, panel: panel1 },
{ type: 'ADD_GROUP', group: panel1.group },
{ type: 'ACTIVE_GROUP', group: panel1.group },
{ type: 'ADD_PANEL', panel: panel1 },
{ type: 'ACTIVE_PANEL', panel: panel1 },
]);
events = [];
@ -834,8 +857,8 @@ describe('dockviewComponent', () => {
component: 'default',
});
expect(events).toEqual([
{ kind: GroupChangeKind.ADD_PANEL, panel: panel2 },
{ kind: GroupChangeKind.PANEL_ACTIVE, panel: panel2 },
{ type: 'ADD_PANEL', panel: panel2 },
{ type: 'ACTIVE_PANEL', panel: panel2 },
]);
events = [];
@ -844,21 +867,19 @@ describe('dockviewComponent', () => {
component: 'default',
});
expect(events).toEqual([
{ kind: GroupChangeKind.ADD_PANEL, panel: panel3 },
{ kind: GroupChangeKind.PANEL_ACTIVE, panel: panel3 },
{ type: 'ADD_PANEL', panel: panel3 },
{ type: 'ACTIVE_PANEL', panel: panel3 },
]);
events = [];
dockview.removePanel(panel1);
expect(events).toEqual([
{ kind: GroupChangeKind.REMOVE_PANEL, panel: panel1 },
]);
expect(events).toEqual([{ type: 'REMOVE_PANEL', panel: panel1 }]);
events = [];
dockview.removePanel(panel3);
expect(events).toEqual([
{ kind: GroupChangeKind.REMOVE_PANEL, panel: panel3 },
{ kind: GroupChangeKind.PANEL_ACTIVE, panel: panel2 },
{ type: 'REMOVE_PANEL', panel: panel3 },
{ type: 'ACTIVE_PANEL', panel: panel2 },
]);
events = [];
@ -867,11 +888,15 @@ describe('dockviewComponent', () => {
component: 'default',
position: { referencePanel: panel2.id, direction: 'right' },
});
expect(panel4.group).toBeTruthy();
expect(panel4.group).not.toBe(panel1.group);
expect(events).toEqual([
{ kind: GroupChangeKind.ADD_GROUP },
{ kind: GroupChangeKind.GROUP_ACTIVE },
{ kind: GroupChangeKind.ADD_PANEL, panel: panel4 },
{ kind: GroupChangeKind.PANEL_ACTIVE, panel: panel4 },
{ type: 'ADD_GROUP', group: panel4.group },
{ type: 'ACTIVE_GROUP', group: panel4.group },
{ type: 'ADD_PANEL', panel: panel4 },
{ type: 'ACTIVE_PANEL', panel: panel4 },
]);
events = [];
@ -881,8 +906,8 @@ describe('dockviewComponent', () => {
position: { referencePanel: panel4.id, direction: 'within' },
});
expect(events).toEqual([
{ kind: GroupChangeKind.ADD_PANEL, panel: panel5 },
{ kind: GroupChangeKind.PANEL_ACTIVE, panel: panel5 },
{ type: 'ADD_PANEL', panel: panel5 },
{ type: 'ACTIVE_PANEL', panel: panel5 },
]);
events = [];
@ -893,26 +918,30 @@ describe('dockviewComponent', () => {
Position.Center
);
expect(events).toEqual([
{ kind: GroupChangeKind.REMOVE_PANEL, panel: panel5 },
{ kind: GroupChangeKind.PANEL_ACTIVE, panel: panel4 },
{ kind: GroupChangeKind.ADD_PANEL, panel: panel5 },
{ kind: GroupChangeKind.PANEL_ACTIVE, panel: panel5 },
{ kind: GroupChangeKind.GROUP_ACTIVE },
{ kind: GroupChangeKind.PANEL_ACTIVE, panel: panel5 },
{ type: 'REMOVE_PANEL', panel: panel5 },
{ type: 'ACTIVE_PANEL', panel: panel4 },
{ type: 'ADD_PANEL', panel: panel5 },
{ type: 'ACTIVE_PANEL', panel: panel5 },
{ type: 'ACTIVE_GROUP', group: panel2.group },
{ type: 'ACTIVE_PANEL', panel: panel5 },
]);
events = [];
const groupReferenceBeforeMove = panel4.group;
dockview.moveGroupOrPanel(
panel2.group!,
panel4.group!.id,
panel4.id,
Position.Center
);
expect(events).toEqual([
{ kind: GroupChangeKind.REMOVE_PANEL, panel: panel4 },
{ kind: GroupChangeKind.REMOVE_GROUP },
{ kind: GroupChangeKind.ADD_PANEL, panel: panel4 },
{ kind: GroupChangeKind.PANEL_ACTIVE, panel: panel4 },
{ type: 'REMOVE_PANEL', panel: panel4 },
{ type: 'REMOVE_GROUP', group: groupReferenceBeforeMove },
{ type: 'ADD_PANEL', panel: panel4 },
{ type: 'ACTIVE_PANEL', panel: panel4 },
]);
disposable.dispose();

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

@ -1,9 +1,6 @@
import {
GroupChangeEvent,
GroupChangeKind,
} from '../../gridview/baseComponentGridview';
import { GridviewComponent } from '../../gridview/gridviewComponent';
import { GridviewPanel } from '../../gridview/gridviewPanel';
import { CompositeDisposable } from '../../lifecycle';
import { IFrameworkPart } from '../../panel/types';
import { Orientation } from '../../splitview/core/splitview';
@ -314,20 +311,35 @@ describe('gridview', () => {
gridview.layout(800, 400);
let events: GroupChangeEvent[] = [];
const disposable = gridview.onGridEvent((e) => events.push(e));
let events: { group: GridviewPanel | undefined; type: string }[] = [];
const disposable = new CompositeDisposable(
gridview.onDidAddGroup((group) => {
events.push({ type: 'ADD', group });
}),
gridview.onDidActiveGroupChange((group) => {
events.push({ type: 'ACTIVE', group });
}),
gridview.onDidRemoveGroup((group) => {
events.push({ type: 'REMOVE', group });
})
);
gridview.addPanel({
id: 'panel_1',
component: 'default',
});
const panel1 = gridview.getPanel('panel_1');
expect(events).toEqual([
{
kind: GroupChangeKind.ADD_GROUP,
type: 'ADD',
group: panel1,
},
{
kind: GroupChangeKind.GROUP_ACTIVE,
type: 'ACTIVE',
group: panel1,
},
]);
events = [];
@ -337,12 +349,16 @@ describe('gridview', () => {
component: 'default',
});
const panel2 = gridview.getPanel('panel_2');
expect(events).toEqual([
{
kind: GroupChangeKind.ADD_GROUP,
type: 'ADD',
group: panel2,
},
{
kind: GroupChangeKind.GROUP_ACTIVE,
type: 'ACTIVE',
group: panel2,
},
]);
events = [];
@ -352,36 +368,40 @@ describe('gridview', () => {
component: 'default',
});
const panel3 = gridview.getPanel('panel_3');
expect(events).toEqual([
{
kind: GroupChangeKind.ADD_GROUP,
type: 'ADD',
group: panel3,
},
{
kind: GroupChangeKind.GROUP_ACTIVE,
type: 'ACTIVE',
group: panel3,
},
]);
events = [];
const panel1 = gridview.getPanel('panel_1');
const panel2 = gridview.getPanel('panel_2');
const panel3 = gridview.getPanel('panel_3');
gridview.removePanel(panel2);
expect(events).toEqual([
{
kind: GroupChangeKind.REMOVE_GROUP,
type: 'REMOVE',
group: panel2,
},
]);
events = [];
gridview.removePanel(panel3);
expect(events).toEqual([
{
kind: GroupChangeKind.REMOVE_GROUP,
type: 'REMOVE',
group: panel3,
},
{
kind: GroupChangeKind.GROUP_ACTIVE,
type: 'ACTIVE',
group: panel1,
},
]);
events = [];
@ -390,10 +410,12 @@ describe('gridview', () => {
expect(events).toEqual([
{
kind: GroupChangeKind.REMOVE_GROUP,
type: 'REMOVE',
group: panel1,
},
{
kind: GroupChangeKind.GROUP_ACTIVE,
type: 'ACTIVE',
group: undefined,
},
]);
events = [];

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

@ -150,6 +150,10 @@ class TestPanel implements IGroupPanel {
return this._view;
}
get params(): Record<string, any> {
return {};
}
constructor(public readonly id: string, public api: DockviewPanelApi) {
this.init({
view: new DefaultGroupPanelView({

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

@ -7,7 +7,7 @@ import {
AddPanelOptions,
MovementOptions,
} from '../dockview/options';
import { Direction, GroupChangeEvent } from '../gridview/baseComponentGridview';
import { Direction } from '../gridview/baseComponentGridview';
import {
AddComponentOptions,
IGridviewComponent,
@ -247,10 +247,6 @@ export class GridviewApi implements CommonApi {
return this.component.height;
}
get onGridEvent(): Event<GroupChangeEvent> {
return this.component.onGridEvent;
}
get onDidLayoutChange(): Event<void> {
return this.component.onDidLayoutChange;
}
@ -370,10 +366,6 @@ export class DockviewApi implements CommonApi {
return this.component.totalPanels;
}
get onGridEvent(): Event<GroupChangeEvent> {
return this.component.onGridEvent;
}
get onDidActiveGroupChange(): Event<IGroupviewPanel | undefined> {
return this.component.onDidActiveGroupChange;
}

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

@ -13,7 +13,9 @@ export interface IPanelDeserializer {
export class DefaultDeserializer implements IViewDeserializer {
constructor(
private readonly layout: DockviewComponent,
private panelDeserializer: { createPanel: (id: string) => IGroupPanel }
private panelDeserializer: {
createPanel: (id: string) => IGroupPanel;
}
) {}
public fromJSON(node: ISerializedLeafNode): IGridView {

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

@ -27,7 +27,6 @@ import {
} from './options';
import {
BaseGrid,
GroupChangeKind,
IBaseGrid,
toTarget,
} from '../gridview/baseComponentGridview';
@ -207,7 +206,14 @@ export class DockviewComponent
this.addDisposables(
this._onTabInteractionEvent,
this._onTabContextMenu,
this._onDidDrop
this._onDidDrop,
Event.any(
this.onDidAddPanel,
this.onDidRemovePanel,
this.onDidActivePanelChange
)(() => {
this._bufferOnDidLayoutChange.fire();
})
);
this._options = options;
@ -377,7 +383,6 @@ export class DockviewComponent
this.gridview.layout(this.width, this.height);
this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT_FROM_JSON });
this._onDidLayoutfromJSON.fire();
}
@ -515,7 +520,9 @@ export class DockviewComponent
const panels = [...group.model.panels]; // reassign since group panels will mutate
for (const panel of panels) {
this.removePanel(panel, { removeEmptyGroup: false });
this.removePanel(panel, {
removeEmptyGroup: false,
});
}
super.doRemoveGroup(group, { skipActive });
@ -612,10 +619,6 @@ export class DockviewComponent
super.doSetGroupActive(group, skipFocus);
if (!isGroupAlreadyFocused && this._activeGroup?.model.activePanel) {
this._onGridEvent.fire({
kind: GroupChangeKind.PANEL_ACTIVE,
panel: this._activeGroup?.model.activePanel,
});
this._onDidActivePanelChange.fire(
this._activeGroup?.model.activePanel
);
@ -660,28 +663,16 @@ export class DockviewComponent
view.model.onDidGroupChange((event) => {
switch (event.kind) {
case GroupChangeKind2.ADD_PANEL:
this._onGridEvent.fire({
kind: GroupChangeKind.ADD_PANEL,
panel: event.panel,
});
if (event.panel) {
this._onDidAddPanel.fire(event.panel);
}
break;
case GroupChangeKind2.REMOVE_PANEL:
this._onGridEvent.fire({
kind: GroupChangeKind.REMOVE_PANEL,
panel: event.panel,
});
if (event.panel) {
this._onDidRemovePanel.fire(event.panel);
}
break;
case GroupChangeKind2.PANEL_ACTIVE:
this._onGridEvent.fire({
kind: GroupChangeKind.PANEL_ACTIVE,
panel: event.panel,
});
this._onDidActivePanelChange.fire(event.panel);
break;
}
@ -708,11 +699,7 @@ export class DockviewComponent
tab: this.createTabComponent(options.id, options.tabComponent),
});
const panel: IGroupPanel = new DockviewGroupPanel(
options.id,
this,
this._api
);
const panel = new DockviewGroupPanel(options.id, this, this._api);
panel.init({
view,
title: options.title || options.id,

4
packages/dockview/src/dockview/dockviewGroupPanel.ts
View File

@ -27,6 +27,10 @@ export class DockviewGroupPanel
private _title: string;
private _suppressClosable: boolean;
get params() {
return this._params?.params;
}
get title() {
return this._title;
}

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

@ -10,24 +10,6 @@ import {
} from '../splitview/core/splitview';
import { IPanel } from '../panel/types';
import { MovementOptions2 } from '../dockview/options';
import { IGroupPanel } from '../groupview/groupPanel';
export enum GroupChangeKind {
ADD_PANEL = 'ADD_PANEL',
REMOVE_PANEL = 'REMOVE_PANEL',
PANEL_ACTIVE = 'PANEL_ACTIVE',
//
GROUP_ACTIVE = 'GROUP_ACTIVE',
ADD_GROUP = 'ADD_GROUP',
REMOVE_GROUP = 'REMOVE_GROUP',
//
LAYOUT_FROM_JSON = 'LAYOUT_FROM_JSON',
LAYOUT = 'LAYOUT',
}
export interface GroupChangeEvent {
readonly kind: GroupChangeKind;
readonly panel?: IGroupPanel;
}
const nextLayoutId = sequentialNumberGenerator();
@ -72,7 +54,6 @@ export interface IBaseGrid<T extends IGridPanelView> {
readonly activeGroup: T | undefined;
readonly size: number;
readonly groups: T[];
readonly onGridEvent: Event<GroupChangeEvent>;
readonly onDidLayoutChange: Event<void>;
readonly onDidRemoveGroup: Event<T>;
readonly onDidAddGroup: Event<T>;
@ -95,9 +76,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
protected readonly gridview: Gridview;
//
protected _activeGroup: T | undefined;
//
protected readonly _onGridEvent = new Emitter<GroupChangeEvent>();
readonly onGridEvent: Event<GroupChangeEvent> = this._onGridEvent.event;
private _onDidLayoutChange = new Emitter<void>();
readonly onDidLayoutChange = this._onDidLayoutChange.event;
@ -112,6 +90,8 @@ export abstract class BaseGrid<T extends IGridPanelView>
readonly onDidActiveGroupChange: Event<T | undefined> =
this._onDidActiveGroupChange.event;
protected readonly _bufferOnDidLayoutChange = new TickDelayedEvent();
get id() {
return this._id;
}
@ -171,36 +151,22 @@ export abstract class BaseGrid<T extends IGridPanelView>
this.addDisposables(
this.gridview.onDidChange(() => {
this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT });
this._onDidLayoutChange.fire();
})
);
this.addDisposables(
(() => {
const tickDelayedEvent = new TickDelayedEvent();
return new CompositeDisposable(
this.onGridEvent((event) => {
if (
[
GroupChangeKind.ADD_GROUP,
GroupChangeKind.REMOVE_GROUP,
GroupChangeKind.ADD_PANEL,
GroupChangeKind.REMOVE_PANEL,
GroupChangeKind.GROUP_ACTIVE,
GroupChangeKind.PANEL_ACTIVE,
GroupChangeKind.LAYOUT,
].includes(event.kind)
) {
tickDelayedEvent.fire();
}
}),
tickDelayedEvent.onEvent(() => {
this._onDidLayoutChange.fire();
}),
tickDelayedEvent
);
})()
Event.any(
this.onDidAddGroup,
this.onDidRemoveGroup,
this.onDidActiveGroupChange
)(() => {
this._bufferOnDidLayoutChange.fire();
}),
this._bufferOnDidLayoutChange.onEvent(() => {
this._onDidLayoutChange.fire();
}),
this._bufferOnDidLayoutChange
);
}
@ -210,7 +176,7 @@ export abstract class BaseGrid<T extends IGridPanelView>
public setVisible(panel: T, visible: boolean) {
this.gridview.setViewVisible(getGridLocation(panel.element), visible);
this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT });
this._onDidLayoutChange.fire();
}
public isVisible(panel: T) {
@ -220,7 +186,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
protected doAddGroup(group: T, location: number[] = [0], size?: number) {
this.gridview.addView(group, size ?? Sizing.Distribute, location);
this._onGridEvent.fire({ kind: GroupChangeKind.ADD_GROUP });
this._onDidAddGroup.fire(group);
this.doSetGroupActive(group);
@ -243,7 +208,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
this._groups.delete(group.id);
}
this._onGridEvent.fire({ kind: GroupChangeKind.REMOVE_GROUP });
this._onDidRemoveGroup.fire(group);
if (!options?.skipActive && this._activeGroup === group) {
@ -281,9 +245,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
this._activeGroup = group;
this._onGridEvent.fire({
kind: GroupChangeKind.GROUP_ACTIVE,
});
this._onDidActiveGroupChange.fire(group);
}
@ -352,7 +313,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
public dispose(): void {
super.dispose();
this._onGridEvent.dispose();
this._onDidActiveGroupChange.dispose();
this._onDidAddGroup.dispose();
this._onDidRemoveGroup.dispose();

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

@ -11,7 +11,6 @@ import { GridviewComponentOptions } from './options';
import {
BaseGrid,
Direction,
GroupChangeKind,
IBaseGrid,
IGridPanelView,
toTarget,
@ -253,7 +252,6 @@ export class GridviewComponent
}
}
this._onGridEvent.fire({ kind: GroupChangeKind.LAYOUT_FROM_JSON });
this._onDidLayoutfromJSON.fire();
}

1
packages/dockview/src/groupview/groupPanel.ts
View File

@ -28,6 +28,7 @@ export interface IGroupPanel extends IDisposable, IPanel {
readonly api: DockviewPanelApi;
readonly title: string;
readonly suppressClosable: boolean;
readonly params: Record<string, any> | undefined;
updateParentGroup(group: GroupviewPanel, isGroupActive: boolean): void;
init(params: IGroupPanelInitParameters): void;
toJSON(): GroupviewPanelState;