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

Merge pull request #96 from mathuo/95-api-enhancements

Browse Source 
feat: rename classes
This commit is contained in:
mathuo 2022-05-05 21:59:07 +01:00 committed by GitHub
commit cec14b9d50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 228 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/dockview/src/__tests__/api/groupPanelApi.spec.ts
View File

@ -1,24 +1,25 @@
import { IDockviewComponent, IGroupPanel } from '../..'; import { IDockviewComponent } from '../../dockview/dockviewComponent';
import { DockviewPanelApiImpl, TitleEvent } from '../../api/groupPanelApi'; import { DockviewPanelApiImpl, TitleEvent } from '../../api/groupPanelApi';
import { GroupviewPanel } from '../../groupview/groupviewPanel'; import { IDockviewPanel } from '../../groupview/groupPanel';
import { GroupPanel } from '../../groupview/groupviewPanel';
describe('groupPanelApi', () => { describe('groupPanelApi', () => {
test('title', () => { test('title', () => {
const groupPanel: Partial<IGroupPanel> = { const groupPanel: Partial<IDockviewPanel> = {
id: 'test_id', id: 'test_id',
title: 'test_title', title: 'test_title',
}; };
const accessor: Partial<IDockviewComponent> = {}; const accessor: Partial<IDockviewComponent> = {};
const groupViewPanel = new GroupviewPanel( const groupViewPanel = new GroupPanel(
<IDockviewComponent>accessor, <IDockviewComponent>accessor,
'', '',
{} {}
); );
const cut = new DockviewPanelApiImpl( const cut = new DockviewPanelApiImpl(
<IGroupPanel>groupPanel, <IDockviewPanel>groupPanel,
<GroupviewPanel>groupViewPanel <GroupPanel>groupViewPanel
); );
let events: TitleEvent[] = []; let events: TitleEvent[] = [];
@ -39,20 +40,20 @@ describe('groupPanelApi', () => {
}); });
test('onDidGroupChange', () => { test('onDidGroupChange', () => {
const groupPanel: Partial<IGroupPanel> = { const groupPanel: Partial<IDockviewPanel> = {
id: 'test_id', id: 'test_id',
}; };
const accessor: Partial<IDockviewComponent> = {}; const accessor: Partial<IDockviewComponent> = {};
const groupViewPanel = new GroupviewPanel( const groupViewPanel = new GroupPanel(
<IDockviewComponent>accessor, <IDockviewComponent>accessor,
'', '',
{} {}
); );
const cut = new DockviewPanelApiImpl( const cut = new DockviewPanelApiImpl(
<IGroupPanel>groupPanel, <IDockviewPanel>groupPanel,
<GroupviewPanel>groupViewPanel <GroupPanel>groupViewPanel
); );
let events = 0; let events = 0;
@ -64,7 +65,7 @@ describe('groupPanelApi', () => {
expect(events).toBe(0); expect(events).toBe(0);
expect(cut.group).toBe(groupViewPanel); expect(cut.group).toBe(groupViewPanel);
const groupViewPanel2 = new GroupviewPanel( const groupViewPanel2 = new GroupPanel(
<IDockviewComponent>accessor, <IDockviewComponent>accessor,
'', '',
{} {}

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

@ -4,7 +4,7 @@ import {
} from '../../dockview/deserializer'; } from '../../dockview/deserializer';
import { DockviewComponent } from '../../dockview/dockviewComponent'; import { DockviewComponent } from '../../dockview/dockviewComponent';
import { Groupview } from '../../groupview/groupview'; import { Groupview } from '../../groupview/groupview';
import { GroupviewPanel } from '../../groupview/groupviewPanel'; import { GroupPanel } from '../../groupview/groupviewPanel';
describe('deserializer', () => { describe('deserializer', () => {
test('fromJSON', () => { test('fromJSON', () => {
@ -21,14 +21,14 @@ describe('deserializer', () => {
const panel1 = jest.fn(); const panel1 = jest.fn();
const panel2 = jest.fn(); const panel2 = jest.fn();
const groupMock = jest.fn<GroupviewPanel, []>(() => { const groupMock = jest.fn<GroupPanel, []>(() => {
const result: Partial<GroupviewPanel> = { const result: Partial<GroupPanel> = {
model: new model(), model: new model(),
panels: <any>[panel1, panel2], panels: <any>[panel1, panel2],
activePanel: null, activePanel: null,
}; };
return result as GroupviewPanel; return result as GroupPanel;
}); });
const group = new groupMock(); const group = new groupMock();
const createGroup = jest.fn().mockReturnValue(new groupMock()); const createGroup = jest.fn().mockReturnValue(new groupMock());

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

@ -11,12 +11,12 @@ import { PanelUpdateEvent } from '../../panel/types';
import { Orientation } from '../../splitview/core/splitview'; import { Orientation } from '../../splitview/core/splitview';
import { ReactPanelDeserialzier } from '../../react/deserializer'; import { ReactPanelDeserialzier } from '../../react/deserializer';
import { Position } from '../../dnd/droptarget'; import { Position } from '../../dnd/droptarget';
import { GroupviewPanel } from '../../groupview/groupviewPanel'; import { GroupPanel } from '../../groupview/groupviewPanel';
import { CompositeDisposable } from '../../lifecycle'; import { CompositeDisposable } from '../../lifecycle';
import { import {
GroupPanelUpdateEvent, GroupPanelUpdateEvent,
GroupviewPanelState, GroupviewPanelState,
IGroupPanel, IDockviewPanel,
IGroupPanelInitParameters, IGroupPanelInitParameters,
} from '../../groupview/groupPanel'; } from '../../groupview/groupPanel';
import { IGroupPanelView } from '../../dockview/defaultGroupPanelView'; import { IGroupPanelView } from '../../dockview/defaultGroupPanelView';
@ -39,7 +39,7 @@ class PanelContentPartTest implements IContentRenderer {
this.element.classList.add(`testpanel-${id}`); this.element.classList.add(`testpanel-${id}`);
} }
updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void { updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void {
//noop //noop
} }
@ -81,7 +81,7 @@ class PanelTabPartTest implements ITabRenderer {
this.element.classList.add(`testpanel-${id}`); this.element.classList.add(`testpanel-${id}`);
} }
updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void { updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void {
//noop //noop
} }
@ -130,7 +130,7 @@ class TestGroupPanelView implements IGroupPanelView {
// //
} }
updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void { updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void {
// //
} }
@ -143,8 +143,8 @@ class TestGroupPanelView implements IGroupPanelView {
} }
} }
class TestGroupPanel implements IGroupPanel { class TestGroupPanel implements IDockviewPanel {
private _group: GroupviewPanel | undefined; private _group: GroupPanel | undefined;
readonly view: IGroupPanelView; readonly view: IGroupPanelView;
readonly suppressClosable: boolean = false; readonly suppressClosable: boolean = false;
@ -156,7 +156,7 @@ class TestGroupPanel implements IGroupPanel {
accessor: IDockviewComponent accessor: IDockviewComponent
) { ) {
this.api = new DockviewPanelApiImpl(this, this._group); this.api = new DockviewPanelApiImpl(this, this._group);
this._group = new GroupviewPanel(accessor, id, {}); this._group = new GroupPanel(accessor, id, {});
this.view = new TestGroupPanelView( this.view = new TestGroupPanelView(
new PanelContentPartTest(id, 'component') new PanelContentPartTest(id, 'component')
); );
@ -166,11 +166,11 @@ class TestGroupPanel implements IGroupPanel {
return {}; return {};
} }
get group(): GroupviewPanel | undefined { get group(): GroupPanel | undefined {
return this._group; return this._group;
} }
updateParentGroup(group: GroupviewPanel, isGroupActive: boolean): void { updateParentGroup(group: GroupPanel, isGroupActive: boolean): void {
this._group = group; this._group = group;
} }
@ -876,8 +876,8 @@ describe('dockviewComponent', () => {
dockview.layout(1000, 1000); dockview.layout(1000, 1000);
let events: { let events: {
panel?: IGroupPanel; panel?: IDockviewPanel;
group?: GroupviewPanel | undefined; group?: GroupPanel | undefined;
type: string; type: string;
}[] = []; }[] = [];
@ -1042,7 +1042,7 @@ describe('dockviewComponent', () => {
test('#1', () => { test('#1', () => {
dockview.layout(500, 500); dockview.layout(500, 500);
dockview.deserializer = { dockview.deserializer = {
fromJSON: (panelData: GroupviewPanelState): IGroupPanel => { fromJSON: (panelData: GroupviewPanelState): IDockviewPanel => {
return new TestGroupPanel( return new TestGroupPanel(
panelData.id, panelData.id,
panelData.title, panelData.title,
@ -1067,8 +1067,8 @@ describe('dockviewComponent', () => {
position: { referencePanel: 'panel2', direction: 'below' }, position: { referencePanel: 'panel2', direction: 'below' },
}); });
const removedGroups: GroupviewPanel[] = []; const removedGroups: GroupPanel[] = [];
const removedPanels: IGroupPanel[] = []; const removedPanels: IDockviewPanel[] = [];
const disposable = new CompositeDisposable( const disposable = new CompositeDisposable(
dockview.onDidRemoveGroup((group) => { dockview.onDidRemoveGroup((group) => {

8
packages/dockview/src/__tests__/dockview/dockviewGroupPanel.spec.ts
View File

@ -2,7 +2,7 @@ import { DockviewComponent } from '../../dockview/dockviewComponent';
import { DockviewApi } from '../../api/component.api'; import { DockviewApi } from '../../api/component.api';
import { IGroupPanelView } from '../../dockview/defaultGroupPanelView'; import { IGroupPanelView } from '../../dockview/defaultGroupPanelView';
import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
import { GroupviewPanel } from '../../groupview/groupviewPanel'; import { GroupPanel } from '../../groupview/groupviewPanel';
describe('dockviewGroupPanel', () => { describe('dockviewGroupPanel', () => {
test('update title', () => { test('update title', () => {
@ -14,7 +14,7 @@ describe('dockviewGroupPanel', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => { const accessorMock = jest.fn<DockviewComponent, []>(() => {
return {} as any; return {} as any;
}); });
const groupMock = jest.fn<GroupviewPanel, []>(() => { const groupMock = jest.fn<GroupPanel, []>(() => {
return {} as any; return {} as any;
}); });
const api = new dockviewApiMock(); const api = new dockviewApiMock();
@ -48,7 +48,7 @@ describe('dockviewGroupPanel', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => { const accessorMock = jest.fn<DockviewComponent, []>(() => {
return {} as any; return {} as any;
}); });
const groupMock = jest.fn<GroupviewPanel, []>(() => { const groupMock = jest.fn<GroupPanel, []>(() => {
return {} as any; return {} as any;
}); });
const api = new dockviewApiMock(); const api = new dockviewApiMock();
@ -88,7 +88,7 @@ describe('dockviewGroupPanel', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => { const accessorMock = jest.fn<DockviewComponent, []>(() => {
return {} as any; return {} as any;
}); });
const groupMock = jest.fn<GroupviewPanel, []>(() => { const groupMock = jest.fn<GroupPanel, []>(() => {
return {} as any; return {} as any;
}); });
const api = new dockviewApiMock(); const api = new dockviewApiMock();

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

@ -4,7 +4,7 @@ import {
} from '../../dockview/dockviewComponent'; } from '../../dockview/dockviewComponent';
import { import {
GroupviewPanelState, GroupviewPanelState,
IGroupPanel, IDockviewPanel,
IGroupPanelInitParameters, IGroupPanelInitParameters,
} from '../../groupview/groupPanel'; } from '../../groupview/groupPanel';
import { import {
@ -14,7 +14,6 @@ import {
IWatermarkRenderer, IWatermarkRenderer,
} from '../../groupview/types'; } from '../../groupview/types';
import { PanelUpdateEvent } from '../../panel/types'; import { PanelUpdateEvent } from '../../panel/types';
import { GroupviewPanel } from '../../groupview/groupviewPanel';
import { import {
GroupChangeKind2, GroupChangeKind2,
GroupOptions, GroupOptions,
@ -25,6 +24,7 @@ import {
DefaultGroupPanelView, DefaultGroupPanelView,
IGroupPanelView, IGroupPanelView,
} from '../../dockview/defaultGroupPanelView'; } from '../../dockview/defaultGroupPanelView';
import { GroupPanel } from '../../groupview/groupviewPanel';
class Watermark implements IWatermarkRenderer { class Watermark implements IWatermarkRenderer {
public readonly element = document.createElement('div'); public readonly element = document.createElement('div');
@ -81,7 +81,7 @@ class TestContentPart implements IContentRenderer {
//void //void
} }
updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean) { updateParentGroup(group: GroupPanel, isPanelVisible: boolean) {
//noop //noop
} }
@ -116,7 +116,7 @@ class TestHeaderPart implements ITabRenderer {
//void //void
} }
updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean) { updateParentGroup(group: GroupPanel, isPanelVisible: boolean) {
//noop //noop
} }
@ -133,9 +133,9 @@ class TestHeaderPart implements ITabRenderer {
} }
} }
class TestPanel implements IGroupPanel { class TestPanel implements IDockviewPanel {
private _view: IGroupPanelView | undefined; private _view: IGroupPanelView | undefined;
private _group: GroupviewPanel | undefined; private _group: GroupPanel | undefined;
private _params: IGroupPanelInitParameters; private _params: IGroupPanelInitParameters;
get title() { get title() {
@ -175,7 +175,7 @@ class TestPanel implements IGroupPanel {
this._params = params; this._params = params;
} }
updateParentGroup(group: GroupviewPanel, isGroupActive: boolean) { updateParentGroup(group: GroupPanel, isGroupActive: boolean) {
this._group = group; this._group = group;
} }
@ -205,7 +205,7 @@ class TestPanel implements IGroupPanel {
} }
describe('groupview', () => { describe('groupview', () => {
let groupview: GroupviewPanel; let groupview: GroupPanel;
let dockview: IDockviewComponent; let dockview: IDockviewComponent;
let options: GroupOptions; let options: GroupOptions;
@ -228,7 +228,7 @@ describe('groupview', () => {
options = { options = {
tabHeight: 30, tabHeight: 30,
}; };
groupview = new GroupviewPanel(dockview, 'groupview-1', options); groupview = new GroupPanel(dockview, 'groupview-1', options);
groupview.initialize(); groupview.initialize();
}); });
@ -237,7 +237,7 @@ describe('groupview', () => {
const panel2 = new TestPanel('panel2', jest.fn() as any); const panel2 = new TestPanel('panel2', jest.fn() as any);
const panel3 = new TestPanel('panel3', jest.fn() as any); const panel3 = new TestPanel('panel3', jest.fn() as any);
const groupview2 = new GroupviewPanel(dockview, 'groupview-2', { const groupview2 = new GroupPanel(dockview, 'groupview-2', {
tabHeight: 25, tabHeight: 25,
panels: [panel1, panel2, panel3], panels: [panel1, panel2, panel3],
activePanel: panel2, activePanel: panel2,
@ -262,7 +262,7 @@ describe('groupview', () => {
const panel2 = new TestPanel('panel2', jest.fn() as any); const panel2 = new TestPanel('panel2', jest.fn() as any);
const panel3 = new TestPanel('panel3', jest.fn() as any); const panel3 = new TestPanel('panel3', jest.fn() as any);
const groupview2 = new GroupviewPanel(dockview, 'groupview-2', { const groupview2 = new GroupPanel(dockview, 'groupview-2', {
tabHeight: 25, tabHeight: 25,
panels: [panel1, panel2, panel3], panels: [panel1, panel2, panel3],
activePanel: panel2, activePanel: panel2,

17
packages/dockview/src/__tests__/groupview/panel/content.spec.ts
View File

@ -1,19 +1,20 @@
import { fireEvent } from '@testing-library/dom'; import { fireEvent } from '@testing-library/dom';
import { Emitter, Event } from '../../../events'; import { Emitter, Event } from '../../../events';
import { IGroupPanel } from '../../../groupview/groupPanel';
import { ContentContainer } from '../../../groupview/panel/content'; import { ContentContainer } from '../../../groupview/panel/content';
import { import {
GroupPanelContentPartInitParameters, GroupPanelContentPartInitParameters,
IContentRenderer, IContentRenderer,
} from '../../../groupview/types'; } from '../../../groupview/types';
import { GroupviewPanel } from '../../../groupview/groupviewPanel';
import { CompositeDisposable } from '../../../lifecycle'; import { CompositeDisposable } from '../../../lifecycle';
import { PanelUpdateEvent } from '../../../panel/types'; import { PanelUpdateEvent } from '../../../panel/types';
import { IGroupPanelView } from '../../../dockview/defaultGroupPanelView'; import { IGroupPanelView } from '../../../dockview/defaultGroupPanelView';
import { IDockviewPanel } from '../../../groupview/groupPanel';
import { GroupPanel } from '../../../groupview/groupviewPanel';
class TestContentRenderer class TestContentRenderer
extends CompositeDisposable extends CompositeDisposable
implements IContentRenderer { implements IContentRenderer
{
readonly element: HTMLElement; readonly element: HTMLElement;
readonly _onDidFocus = new Emitter<void>(); readonly _onDidFocus = new Emitter<void>();
@ -26,7 +27,7 @@ class TestContentRenderer
this.element = document.createElement('div'); this.element = document.createElement('div');
} }
updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void { updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void {
// //
} }
@ -77,9 +78,9 @@ describe('contentContainer', () => {
view: { view: {
content: contentRenderer, content: contentRenderer,
} as Partial<IGroupPanelView>, } as Partial<IGroupPanelView>,
} as Partial<IGroupPanel>; } as Partial<IDockviewPanel>;
cut.openPanel(panel as IGroupPanel); cut.openPanel(panel as IDockviewPanel);
expect(focus).toBe(0); expect(focus).toBe(0);
expect(blur).toBe(0); expect(blur).toBe(0);
@ -111,9 +112,9 @@ describe('contentContainer', () => {
view: { view: {
content: contentRenderer2, content: contentRenderer2,
} as Partial<IGroupPanelView>, } as Partial<IGroupPanelView>,
} as Partial<IGroupPanel>; } as Partial<IDockviewPanel>;
cut.openPanel(panel2 as IGroupPanel); cut.openPanel(panel2 as IDockviewPanel);
expect(focus).toBe(2); expect(focus).toBe(2);
expect(blur).toBe(2); expect(blur).toBe(2);

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

@ -15,7 +15,7 @@ import {
SerializedGridview, SerializedGridview,
} from '../gridview/gridviewComponent'; } from '../gridview/gridviewComponent';
import { IGridviewPanel } from '../gridview/gridviewPanel'; import { IGridviewPanel } from '../gridview/gridviewPanel';
import { IGroupPanel } from '../groupview/groupPanel'; import { IDockviewPanel } from '../groupview/groupPanel';
import { import {
AddPaneviewComponentOptions, AddPaneviewComponentOptions,
SerializedPaneview, SerializedPaneview,
@ -30,7 +30,7 @@ import {
} from '../splitview/splitviewComponent'; } from '../splitview/splitviewComponent';
import { IView, Orientation, Sizing } from '../splitview/core/splitview'; import { IView, Orientation, Sizing } from '../splitview/core/splitview';
import { ISplitviewPanel } from '../splitview/splitviewPanel'; import { ISplitviewPanel } from '../splitview/splitviewPanel';
import { GroupviewPanel, IGroupviewPanel } from '../groupview/groupviewPanel'; import { GroupPanel, IGroupviewPanel } from '../groupview/groupviewPanel';
import { Emitter, Event } from '../events'; import { Emitter, Event } from '../events';
import { PaneviewDropEvent } from '../react'; import { PaneviewDropEvent } from '../react';
@ -376,15 +376,15 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
return this.component.onDidRemoveGroup; return this.component.onDidRemoveGroup;
} }
get onDidActivePanelChange(): Event<IGroupPanel | undefined> { get onDidActivePanelChange(): Event<IDockviewPanel | undefined> {
return this.component.onDidActivePanelChange; return this.component.onDidActivePanelChange;
} }
get onDidAddPanel(): Event<IGroupPanel> { get onDidAddPanel(): Event<IDockviewPanel> {
return this.component.onDidAddPanel; return this.component.onDidAddPanel;
} }
get onDidRemovePanel(): Event<IGroupPanel> { get onDidRemovePanel(): Event<IDockviewPanel> {
return this.component.onDidRemovePanel; return this.component.onDidRemovePanel;
} }
@ -400,7 +400,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
return this.component.onDidDrop; return this.component.onDidDrop;
} }
get panels(): IGroupPanel[] { get panels(): IDockviewPanel[] {
return this.component.panels; return this.component.panels;
} }
@ -408,7 +408,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
return this.component.groups; return this.component.groups;
} }
get activePanel(): IGroupPanel | undefined { get activePanel(): IDockviewPanel | undefined {
return this.component.activePanel; return this.component.activePanel;
} }
@ -430,7 +430,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
this.component.focus(); this.component.focus();
} }
getPanel(id: string): IGroupPanel | undefined { getPanel(id: string): IDockviewPanel | undefined {
return this.component.getGroupPanel(id); return this.component.getGroupPanel(id);
} }
@ -438,7 +438,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
this.component.layout(width, height, force); this.component.layout(width, height, force);
} }
addPanel(options: AddPanelOptions): IGroupPanel { addPanel(options: AddPanelOptions): IDockviewPanel {
return this.component.addPanel(options); return this.component.addPanel(options);
} }
@ -459,7 +459,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
} }
removeGroup(group: IGroupviewPanel): void { removeGroup(group: IGroupviewPanel): void {
this.component.removeGroup(<GroupviewPanel>group); this.component.removeGroup(<GroupPanel>group);
} }
getGroup(id: string): IGroupviewPanel | undefined { getGroup(id: string): IGroupviewPanel | undefined {

14
packages/dockview/src/api/groupPanelApi.ts
View File

@ -1,7 +1,7 @@
import { Emitter } from '../events'; import { Emitter } from '../events';
import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi'; import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi';
import { IGroupPanel } from '../groupview/groupPanel'; import { IDockviewPanel } from '../groupview/groupPanel';
import { GroupviewPanel } from '../groupview/groupviewPanel'; import { GroupPanel } from '../groupview/groupviewPanel';
import { MutableDisposable } from '../lifecycle'; import { MutableDisposable } from '../lifecycle';
export interface TitleEvent { export interface TitleEvent {
@ -17,7 +17,7 @@ export interface SuppressClosableEvent {
* because it belongs to a groupview * because it belongs to a groupview
*/ */
export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible'> { export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible'> {
readonly group: GroupviewPanel; readonly group: GroupPanel;
readonly isGroupActive: boolean; readonly isGroupActive: boolean;
readonly title: string; readonly title: string;
readonly suppressClosable: boolean; readonly suppressClosable: boolean;
@ -29,7 +29,7 @@ export class DockviewPanelApiImpl
extends GridviewPanelApiImpl extends GridviewPanelApiImpl
implements DockviewPanelApi implements DockviewPanelApi
{ {
private _group: GroupviewPanel; private _group: GroupPanel;
readonly _onDidTitleChange = new Emitter<TitleEvent>(); readonly _onDidTitleChange = new Emitter<TitleEvent>();
readonly onDidTitleChange = this._onDidTitleChange.event; readonly onDidTitleChange = this._onDidTitleChange.event;
@ -60,7 +60,7 @@ export class DockviewPanelApiImpl
return !!this.group?.isActive; return !!this.group?.isActive;
} }
set group(value: GroupviewPanel) { set group(value: GroupPanel) {
const isOldGroupActive = this.isGroupActive; const isOldGroupActive = this.isGroupActive;
this._group = value; this._group = value;
@ -78,11 +78,11 @@ export class DockviewPanelApiImpl
} }
} }
get group(): GroupviewPanel { get group(): GroupPanel {
return this._group; return this._group;
} }
constructor(private panel: IGroupPanel, group: GroupviewPanel) { constructor(private panel: IDockviewPanel, group: GroupPanel) {
super(panel.id); super(panel.id);
this._group = group; this._group = group;

6
packages/dockview/src/dockview/components/tab/defaultTab.ts
View File

@ -5,7 +5,7 @@ import {
} from '../../../groupview/types'; } from '../../../groupview/types';
import { addDisposableListener } from '../../../events'; import { addDisposableListener } from '../../../events';
import { PanelUpdateEvent } from '../../../panel/types'; import { PanelUpdateEvent } from '../../../panel/types';
import { GroupviewPanel } from '../../../groupview/groupviewPanel'; import { GroupPanel } from '../../../groupview/groupviewPanel';
export class WrappedTab implements ITabRenderer { export class WrappedTab implements ITabRenderer {
private readonly _element: HTMLElement; private readonly _element: HTMLElement;
@ -59,7 +59,7 @@ export class WrappedTab implements ITabRenderer {
this.renderer.init(parameters); this.renderer.init(parameters);
} }
updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void { updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void {
this.renderer.updateParentGroup(group, isPanelVisible); this.renderer.updateParentGroup(group, isPanelVisible);
} }
@ -147,7 +147,7 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
} }
} }
public updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean) { public updateParentGroup(group: GroupPanel, isPanelVisible: boolean) {
this._isPanelVisible = isPanelVisible; this._isPanelVisible = isPanelVisible;
this._isGroupActive = group.isActive; this._isGroupActive = group.isActive;

6
packages/dockview/src/dockview/components/watermark/watermark.ts
View File

@ -6,7 +6,7 @@ import { ActionContainer } from '../../../actionbar/actionsContainer';
import { addDisposableListener } from '../../../events'; import { addDisposableListener } from '../../../events';
import { toggleClass } from '../../../dom'; import { toggleClass } from '../../../dom';
import { CompositeDisposable } from '../../../lifecycle'; import { CompositeDisposable } from '../../../lifecycle';
import { GroupviewPanel } from '../../../groupview/groupviewPanel'; import { GroupPanel } from '../../../groupview/groupviewPanel';
import { PanelUpdateEvent } from '../../../panel/types'; import { PanelUpdateEvent } from '../../../panel/types';
export class Watermark export class Watermark
@ -14,7 +14,7 @@ export class Watermark
implements IWatermarkRenderer implements IWatermarkRenderer
{ {
private _element: HTMLElement; private _element: HTMLElement;
private group: GroupviewPanel | undefined; private group: GroupPanel | undefined;
private params: GroupPanelPartInitParameters | undefined; private params: GroupPanelPartInitParameters | undefined;
get id() { get id() {
@ -85,7 +85,7 @@ export class Watermark
this.render(); this.render();
} }
updateParentGroup(group: GroupviewPanel, _visible: boolean): void { updateParentGroup(group: GroupPanel, _visible: boolean): void {
this.group = group; this.group = group;
this.render(); this.render();
} }

6
packages/dockview/src/dockview/defaultGroupPanelView.ts
View File

@ -5,7 +5,7 @@ import {
IContentRenderer, IContentRenderer,
ITabRenderer, ITabRenderer,
} from '../groupview/types'; } from '../groupview/types';
import { GroupviewPanel } from '../groupview/groupviewPanel'; import { GroupPanel } from '../groupview/groupviewPanel';
import { IDisposable } from '../lifecycle'; import { IDisposable } from '../lifecycle';
import { GroupPanelUpdateEvent } from '../groupview/groupPanel'; import { GroupPanelUpdateEvent } from '../groupview/groupPanel';
@ -16,7 +16,7 @@ export interface IGroupPanelView extends IDisposable {
update(event: GroupPanelUpdateEvent): void; update(event: GroupPanelUpdateEvent): void;
layout(width: number, height: number): void; layout(width: number, height: number): void;
init(params: GroupPanelPartInitParameters): void; init(params: GroupPanelPartInitParameters): void;
updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void; updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
toJSON(): {}; toJSON(): {};
} }
@ -61,7 +61,7 @@ export class DefaultGroupPanelView implements IGroupPanelView {
this.tab.init(params); this.tab.init(params);
} }
updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void { updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void {
this._content.updateParentGroup(group, isPanelVisible); this._content.updateParentGroup(group, isPanelVisible);
this._tab?.updateParentGroup(group, isPanelVisible); this._tab?.updateParentGroup(group, isPanelVisible);
} }

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

@ -3,20 +3,17 @@ import {
ISerializedLeafNode, ISerializedLeafNode,
IViewDeserializer, IViewDeserializer,
} from '../gridview/gridview'; } from '../gridview/gridview';
import { GroupviewPanelState, IGroupPanel } from '../groupview/groupPanel'; import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
import { GroupPanelViewState } from '../groupview/groupview'; import { GroupPanelViewState } from '../groupview/groupview';
import { GroupviewPanel } from '../groupview/groupviewPanel'; import { GroupPanel } from '../groupview/groupviewPanel';
import { DockviewComponent } from './dockviewComponent'; import { DockviewComponent } from './dockviewComponent';
export interface IPanelDeserializer { export interface IPanelDeserializer {
fromJSON( fromJSON(panelData: GroupviewPanelState, group: GroupPanel): IDockviewPanel;
panelData: GroupviewPanelState,
group: GroupviewPanel
): IGroupPanel;
} }
export interface PanelDeserializerOptions { export interface PanelDeserializerOptions {
createPanel: (id: string, group: GroupviewPanel) => IGroupPanel; createPanel: (id: string, group: GroupPanel) => IDockviewPanel;
} }
export class DefaultDeserializer implements IViewDeserializer { export class DefaultDeserializer implements IViewDeserializer {

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

@ -5,7 +5,7 @@ import {
} from '../gridview/gridview'; } from '../gridview/gridview';
import { Position } from '../dnd/droptarget'; import { Position } from '../dnd/droptarget';
import { tail, sequenceEquals } from '../array'; import { tail, sequenceEquals } from '../array';
import { GroupviewPanelState, IGroupPanel } from '../groupview/groupPanel'; import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
import { DockviewGroupPanel } from './dockviewGroupPanel'; import { DockviewGroupPanel } from './dockviewGroupPanel';
import { CompositeDisposable } from '../lifecycle'; import { CompositeDisposable } from '../lifecycle';
import { Event, Emitter } from '../events'; import { Event, Emitter } from '../events';
@ -40,7 +40,7 @@ import {
GroupPanelViewState, GroupPanelViewState,
GroupviewDropEvent, GroupviewDropEvent,
} from '../groupview/groupview'; } from '../groupview/groupview';
import { GroupviewPanel } from '../groupview/groupviewPanel'; import { GroupPanel } from '../groupview/groupviewPanel';
import { DefaultGroupPanelView } from './defaultGroupPanelView'; import { DefaultGroupPanelView } from './defaultGroupPanelView';
const nextGroupId = sequentialNumberGenerator(); const nextGroupId = sequentialNumberGenerator();
@ -77,27 +77,27 @@ export interface DockviewDropEvent extends GroupviewDropEvent {
api: DockviewApi; api: DockviewApi;
} }
export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> { export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
readonly activePanel: IGroupPanel | undefined; readonly activePanel: IDockviewPanel | undefined;
readonly totalPanels: number; readonly totalPanels: number;
readonly panels: IGroupPanel[]; readonly panels: IDockviewPanel[];
readonly onDidDrop: Event<DockviewDropEvent>; readonly onDidDrop: Event<DockviewDropEvent>;
tabHeight: number | undefined; tabHeight: number | undefined;
deserializer: IPanelDeserializer | undefined; deserializer: IPanelDeserializer | undefined;
updateOptions(options: DockviewComponentUpdateOptions): void; updateOptions(options: DockviewComponentUpdateOptions): void;
moveGroupOrPanel( moveGroupOrPanel(
referenceGroup: GroupviewPanel, referenceGroup: GroupPanel,
groupId: string, groupId: string,
itemId: string, itemId: string,
target: Position, target: Position,
index?: number index?: number
): void; ): void;
doSetGroupActive: (group: GroupviewPanel, skipFocus?: boolean) => void; doSetGroupActive: (group: GroupPanel, skipFocus?: boolean) => void;
removeGroup: (group: GroupviewPanel) => void; removeGroup: (group: GroupPanel) => void;
options: DockviewComponentOptions; options: DockviewComponentOptions;
addPanel(options: AddPanelOptions): IGroupPanel; addPanel(options: AddPanelOptions): IDockviewPanel;
removePanel(panel: IGroupPanel): void; removePanel(panel: IDockviewPanel): void;
getGroupPanel: (id: string) => IGroupPanel | undefined; getGroupPanel: (id: string) => IDockviewPanel | undefined;
fireMouseEvent(event: LayoutMouseEvent): void; fireMouseEvent(event: LayoutMouseEvent): void;
createWatermarkComponent(): IWatermarkRenderer; createWatermarkComponent(): IWatermarkRenderer;
// lifecycle // lifecycle
@ -108,19 +108,19 @@ export interface IDockviewComponent extends IBaseGrid<GroupviewPanel> {
onTabContextMenu: Event<TabContextMenuEvent>; onTabContextMenu: Event<TabContextMenuEvent>;
moveToNext(options?: MovementOptions): void; moveToNext(options?: MovementOptions): void;
moveToPrevious(options?: MovementOptions): void; moveToPrevious(options?: MovementOptions): void;
setActivePanel(panel: IGroupPanel): void; setActivePanel(panel: IDockviewPanel): void;
focus(): void; focus(): void;
toJSON(): SerializedDockview; toJSON(): SerializedDockview;
fromJSON(data: SerializedDockview): void; fromJSON(data: SerializedDockview): void;
// //
readonly onDidRemovePanel: Event<IGroupPanel>; readonly onDidRemovePanel: Event<IDockviewPanel>;
readonly onDidAddPanel: Event<IGroupPanel>; readonly onDidAddPanel: Event<IDockviewPanel>;
readonly onDidLayoutfromJSON: Event<void>; readonly onDidLayoutfromJSON: Event<void>;
readonly onDidActivePanelChange: Event<IGroupPanel | undefined>; readonly onDidActivePanelChange: Event<IDockviewPanel | undefined>;
} }
export class DockviewComponent export class DockviewComponent
extends BaseGrid<GroupviewPanel> extends BaseGrid<GroupPanel>
implements IDockviewComponent implements IDockviewComponent
{ {
private _deserializer: IPanelDeserializer | undefined; private _deserializer: IPanelDeserializer | undefined;
@ -139,27 +139,27 @@ export class DockviewComponent
private readonly _onDidDrop = new Emitter<DockviewDropEvent>(); private readonly _onDidDrop = new Emitter<DockviewDropEvent>();
readonly onDidDrop: Event<DockviewDropEvent> = this._onDidDrop.event; readonly onDidDrop: Event<DockviewDropEvent> = this._onDidDrop.event;
private readonly _onDidRemovePanel = new Emitter<IGroupPanel>(); private readonly _onDidRemovePanel = new Emitter<IDockviewPanel>();
readonly onDidRemovePanel: Event<IGroupPanel> = readonly onDidRemovePanel: Event<IDockviewPanel> =
this._onDidRemovePanel.event; this._onDidRemovePanel.event;
private readonly _onDidAddPanel = new Emitter<IGroupPanel>(); private readonly _onDidAddPanel = new Emitter<IDockviewPanel>();
readonly onDidAddPanel: Event<IGroupPanel> = this._onDidAddPanel.event; readonly onDidAddPanel: Event<IDockviewPanel> = this._onDidAddPanel.event;
private readonly _onDidLayoutfromJSON = new Emitter<void>(); private readonly _onDidLayoutfromJSON = new Emitter<void>();
readonly onDidLayoutfromJSON: Event<void> = this._onDidLayoutfromJSON.event; readonly onDidLayoutfromJSON: Event<void> = this._onDidLayoutfromJSON.event;
private readonly _onDidActivePanelChange = new Emitter< private readonly _onDidActivePanelChange = new Emitter<
IGroupPanel | undefined IDockviewPanel | undefined
>(); >();
readonly onDidActivePanelChange: Event<IGroupPanel | undefined> = readonly onDidActivePanelChange: Event<IDockviewPanel | undefined> =
this._onDidActivePanelChange.event; this._onDidActivePanelChange.event;
get totalPanels(): number { get totalPanels(): number {
return this.panels.length; return this.panels.length;
} }
get panels(): IGroupPanel[] { get panels(): IDockviewPanel[] {
return this.groups.flatMap((group) => group.panels); return this.groups.flatMap((group) => group.panels);
} }
@ -175,7 +175,7 @@ export class DockviewComponent
return this._options; return this._options;
} }
get activePanel(): IGroupPanel | undefined { get activePanel(): IDockviewPanel | undefined {
const activeGroup = this.activeGroup; const activeGroup = this.activeGroup;
if (!activeGroup) { if (!activeGroup) {
@ -258,11 +258,11 @@ export class DockviewComponent
this.activeGroup?.focus(); this.activeGroup?.focus();
} }
getGroupPanel(id: string): IGroupPanel | undefined { getGroupPanel(id: string): IDockviewPanel | undefined {
return this.panels.find((panel) => panel.id === id); return this.panels.find((panel) => panel.id === id);
} }
setActivePanel(panel: IGroupPanel): void { setActivePanel(panel: IDockviewPanel): void {
this.doSetGroupActive(panel.group); this.doSetGroupActive(panel.group);
panel.group.model.openPanel(panel); panel.group.model.openPanel(panel);
} }
@ -288,7 +288,7 @@ export class DockviewComponent
} }
const location = getGridLocation(options.group.element); const location = getGridLocation(options.group.element);
const next = <GroupviewPanel>this.gridview.next(location)?.view const next = <GroupPanel>this.gridview.next(location)?.view
this.doSetGroupActive(next); this.doSetGroupActive(next);
} }
@ -313,7 +313,7 @@ export class DockviewComponent
const location = getGridLocation(options.group.element); const location = getGridLocation(options.group.element);
const next = this.gridview.previous(location)?.view; const next = this.gridview.previous(location)?.view;
if (next) { if (next) {
this.doSetGroupActive(next as GroupviewPanel); this.doSetGroupActive(next as GroupPanel);
} }
} }
@ -403,12 +403,12 @@ export class DockviewComponent
} }
} }
addPanel(options: AddPanelOptions): IGroupPanel { addPanel(options: AddPanelOptions): IDockviewPanel {
if (this.panels.find((_) => _.id === options.id)) { if (this.panels.find((_) => _.id === options.id)) {
throw new Error(`panel with id ${options.id} already exists`); throw new Error(`panel with id ${options.id} already exists`);
} }
let referenceGroup: GroupviewPanel | undefined; let referenceGroup: GroupPanel | undefined;
if (options.position?.referencePanel) { if (options.position?.referencePanel) {
const referencePanel = this.getGroupPanel( const referencePanel = this.getGroupPanel(
@ -426,7 +426,7 @@ export class DockviewComponent
referenceGroup = this.activeGroup; referenceGroup = this.activeGroup;
} }
let panel: IGroupPanel let panel: IDockviewPanel
if (referenceGroup) { if (referenceGroup) {
const target = toTarget(options.position?.direction || 'within'); const target = toTarget(options.position?.direction || 'within');
@ -454,7 +454,7 @@ export class DockviewComponent
} }
removePanel( removePanel(
panel: IGroupPanel, panel: IDockviewPanel,
options: { removeEmptyGroup: boolean; skipDispose: boolean } = { options: { removeEmptyGroup: boolean; skipDispose: boolean } = {
removeEmptyGroup: true, removeEmptyGroup: true,
skipDispose: false, skipDispose: false,
@ -533,7 +533,7 @@ export class DockviewComponent
} }
} }
removeGroup(group: GroupviewPanel, skipActive = false): void { removeGroup(group: GroupPanel, skipActive = false): void {
const panels = [...group.panels]; // reassign since group panels will mutate const panels = [...group.panels]; // reassign since group panels will mutate
for (const panel of panels) { for (const panel of panels) {
@ -547,7 +547,7 @@ export class DockviewComponent
} }
moveGroupOrPanel( moveGroupOrPanel(
referenceGroup: GroupviewPanel, referenceGroup: GroupPanel,
groupId: string, groupId: string,
itemId: string, itemId: string,
target: Position, target: Position,
@ -558,7 +558,7 @@ export class DockviewComponent
: undefined; : undefined;
if (!target || target === Position.Center) { if (!target || target === Position.Center) {
const groupItem: IGroupPanel | undefined = const groupItem: IDockviewPanel | undefined =
sourceGroup?.model.removePanel(itemId) || sourceGroup?.model.removePanel(itemId) ||
this.panels.find((panel) => panel.id === itemId); this.panels.find((panel) => panel.id === itemId);
@ -610,7 +610,7 @@ export class DockviewComponent
this.doAddGroup(targetGroup, location); this.doAddGroup(targetGroup, location);
} }
} else { } else {
const groupItem: IGroupPanel | undefined = const groupItem: IDockviewPanel | undefined =
sourceGroup?.model.removePanel(itemId) || sourceGroup?.model.removePanel(itemId) ||
this.panels.find((panel) => panel.id === itemId); this.panels.find((panel) => panel.id === itemId);
@ -631,7 +631,7 @@ export class DockviewComponent
} }
override doSetGroupActive( override doSetGroupActive(
group: GroupviewPanel | undefined, group: GroupPanel | undefined,
skipFocus?: boolean skipFocus?: boolean
): void { ): void {
const isGroupAlreadyFocused = this._activeGroup === group; const isGroupAlreadyFocused = this._activeGroup === group;
@ -644,7 +644,7 @@ export class DockviewComponent
} }
} }
createGroup(options?: GroupOptions): GroupviewPanel { createGroup(options?: GroupOptions): GroupPanel {
if (!options) { if (!options) {
options = { tabHeight: this.tabHeight }; options = { tabHeight: this.tabHeight };
} }
@ -668,7 +668,7 @@ export class DockviewComponent
} }
} }
const view = new GroupviewPanel(this, id, options); const view = new GroupPanel(this, id, options);
view.init({ params: {}, containerApi: <any>null }); // required to initialized .part and allow for correct disposal of group view.init({ params: {}, containerApi: <any>null }); // required to initialized .part and allow for correct disposal of group
if (!this._groups.has(view.id)) { if (!this._groups.has(view.id)) {
@ -713,7 +713,7 @@ export class DockviewComponent
return view; return view;
} }
private createPanel(options: AddPanelOptions, group: GroupviewPanel): IGroupPanel { private createPanel(options: AddPanelOptions, group: GroupPanel): IDockviewPanel {
const view = new DefaultGroupPanelView({ const view = new DefaultGroupPanelView({
content: this.createContentComponent(options.id, options.component), content: this.createContentComponent(options.id, options.component),
tab: this.createTabComponent(options.id, options.tabComponent), tab: this.createTabComponent(options.id, options.tabComponent),
@ -759,13 +759,13 @@ export class DockviewComponent
private createGroupAtLocation( private createGroupAtLocation(
location: number[] = [0] location: number[] = [0]
): GroupviewPanel { ): GroupPanel {
const group = this.createGroup(); const group = this.createGroup();
this.doAddGroup(group, location); this.doAddGroup(group, location);
return group return group
} }
private findGroup(panel: IGroupPanel): GroupviewPanel | undefined { private findGroup(panel: IDockviewPanel): GroupPanel | undefined {
return Array.from(this._groups.values()).find((group) => return Array.from(this._groups.values()).find((group) =>
group.value.model.containsPanel(panel) group.value.model.containsPanel(panel)
)?.value; )?.value;

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

@ -3,10 +3,10 @@ import { DockviewPanelApiImpl } from '../api/groupPanelApi';
import { import {
GroupPanelUpdateEvent, GroupPanelUpdateEvent,
GroupviewPanelState, GroupviewPanelState,
IGroupPanel, IDockviewPanel,
IGroupPanelInitParameters, IGroupPanelInitParameters,
} from '../groupview/groupPanel'; } from '../groupview/groupPanel';
import { GroupviewPanel } from '../groupview/groupviewPanel'; import { GroupPanel } from '../groupview/groupviewPanel';
import { CompositeDisposable, MutableDisposable } from '../lifecycle'; import { CompositeDisposable, MutableDisposable } from '../lifecycle';
import { Parameters } from '../panel/types'; import { Parameters } from '../panel/types';
import { IGroupPanelView } from './defaultGroupPanelView'; import { IGroupPanelView } from './defaultGroupPanelView';
@ -14,12 +14,12 @@ import { DockviewComponent } from './dockviewComponent';
export class DockviewGroupPanel export class DockviewGroupPanel
extends CompositeDisposable extends CompositeDisposable
implements IGroupPanel implements IDockviewPanel
{ {
private readonly mutableDisposable = new MutableDisposable(); private readonly mutableDisposable = new MutableDisposable();
readonly api: DockviewPanelApiImpl; readonly api: DockviewPanelApiImpl;
private _group: GroupviewPanel; private _group: GroupPanel;
private _params?: Parameters; private _params?: Parameters;
private _view?: IGroupPanelView; private _view?: IGroupPanelView;
@ -39,7 +39,7 @@ export class DockviewGroupPanel
return this._suppressClosable; return this._suppressClosable;
} }
get group(): GroupviewPanel { get group(): GroupPanel {
return this._group; return this._group;
} }
@ -51,7 +51,7 @@ export class DockviewGroupPanel
public readonly id: string, public readonly id: string,
accessor: DockviewComponent, accessor: DockviewComponent,
private readonly containerApi: DockviewApi, private readonly containerApi: DockviewApi,
group: GroupviewPanel group: GroupPanel
) { ) {
super(); super();
this._suppressClosable = false; this._suppressClosable = false;
@ -148,7 +148,7 @@ export class DockviewGroupPanel
}); });
} }
public updateParentGroup(group: GroupviewPanel, isGroupActive: boolean) { public updateParentGroup(group: GroupPanel, isGroupActive: boolean) {
this._group = group; this._group = group;
this.api.group = group; this.api.group = group;

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

@ -1,14 +1,14 @@
import { DockviewApi } from '../api/component.api'; import { DockviewApi } from '../api/component.api';
import { Direction } from '../gridview/baseComponentGridview'; import { Direction } from '../gridview/baseComponentGridview';
import { IGridView } from '../gridview/gridview'; import { IGridView } from '../gridview/gridview';
import { IGroupPanel } from '../groupview/groupPanel'; import { IDockviewPanel } from '../groupview/groupPanel';
import { import {
IContentRenderer, IContentRenderer,
ITabRenderer, ITabRenderer,
WatermarkConstructor, WatermarkConstructor,
IWatermarkRenderer, IWatermarkRenderer,
} from '../groupview/types'; } from '../groupview/types';
import { GroupviewPanel } from '../groupview/groupviewPanel'; import { GroupPanel } from '../groupview/groupviewPanel';
import { ISplitviewStyles, Orientation } from '../splitview/core/splitview'; import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
import { FrameworkFactory } from '../types'; import { FrameworkFactory } from '../types';
import { DockviewDropTargets } from '../groupview/dnd'; import { DockviewDropTargets } from '../groupview/dnd';
@ -22,7 +22,7 @@ export interface GroupPanelFrameworkComponentFactory {
export interface TabContextMenuEvent { export interface TabContextMenuEvent {
event: MouseEvent; event: MouseEvent;
api: DockviewApi; api: DockviewApi;
panel: IGroupPanel; panel: IDockviewPanel;
} }
export interface DockviewRenderFunctions { export interface DockviewRenderFunctions {
@ -89,5 +89,5 @@ export interface MovementOptions2 {
export interface MovementOptions extends MovementOptions2 { export interface MovementOptions extends MovementOptions2 {
includePanel?: boolean; includePanel?: boolean;
group?: GroupviewPanel; group?: GroupPanel;
} }

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

@ -7,7 +7,7 @@ import {
PanelUpdateEvent, PanelUpdateEvent,
Parameters, Parameters,
} from '../panel/types'; } from '../panel/types';
import { GroupviewPanel } from './groupviewPanel'; import { GroupPanel } from './groupviewPanel';
import { IGroupPanelView } from '../dockview/defaultGroupPanelView'; import { IGroupPanelView } from '../dockview/defaultGroupPanelView';
export interface IGroupPanelInitParameters export interface IGroupPanelInitParameters
@ -22,14 +22,14 @@ export type GroupPanelUpdateEvent = PanelUpdateEvent<{
suppressClosable?: boolean; suppressClosable?: boolean;
}>; }>;
export interface IGroupPanel extends IDisposable, IPanel { export interface IDockviewPanel extends IDisposable, IPanel {
readonly view?: IGroupPanelView; readonly view?: IGroupPanelView;
readonly group: GroupviewPanel; readonly group: GroupPanel;
readonly api: DockviewPanelApi; readonly api: DockviewPanelApi;
readonly title: string; readonly title: string;
readonly suppressClosable: boolean; readonly suppressClosable: boolean;
readonly params: Record<string, any> | undefined; readonly params: Record<string, any> | undefined;
updateParentGroup(group: GroupviewPanel, isGroupActive: boolean): void; updateParentGroup(group: GroupPanel, isGroupActive: boolean): void;
init(params: IGroupPanelInitParameters): void; init(params: IGroupPanelInitParameters): void;
toJSON(): GroupviewPanelState; toJSON(): GroupviewPanelState;
update(event: GroupPanelUpdateEvent): void; update(event: GroupPanelUpdateEvent): void;

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

@ -8,11 +8,11 @@ import { IGridPanelView } from '../gridview/baseComponentGridview';
import { IViewSize } from '../gridview/gridview'; import { IViewSize } from '../gridview/gridview';
import { CompositeDisposable, IDisposable } from '../lifecycle'; import { CompositeDisposable, IDisposable } from '../lifecycle';
import { PanelInitParameters, PanelUpdateEvent } from '../panel/types'; import { PanelInitParameters, PanelUpdateEvent } from '../panel/types';
import { IGroupPanel } from './groupPanel'; import { IDockviewPanel } from './groupPanel';
import { ContentContainer, IContentContainer } from './panel/content'; import { ContentContainer, IContentContainer } from './panel/content';
import { ITabsContainer, TabsContainer } from './titlebar/tabsContainer'; import { ITabsContainer, TabsContainer } from './titlebar/tabsContainer';
import { IWatermarkRenderer } from './types'; import { IWatermarkRenderer } from './types';
import { GroupviewPanel } from './groupviewPanel'; import { GroupPanel } from './groupviewPanel';
import { DockviewDropTargets } from './dnd'; import { DockviewDropTargets } from './dnd';
export enum GroupChangeKind2 { export enum GroupChangeKind2 {
@ -54,8 +54,8 @@ interface CoreGroupOptions {
} }
export interface GroupOptions extends CoreGroupOptions { export interface GroupOptions extends CoreGroupOptions {
readonly panels?: IGroupPanel[]; readonly panels?: IDockviewPanel[];
readonly activePanel?: IGroupPanel; readonly activePanel?: IDockviewPanel;
readonly id?: string; readonly id?: string;
tabHeight?: number; tabHeight?: number;
} }
@ -68,7 +68,7 @@ export interface GroupPanelViewState extends CoreGroupOptions {
export interface GroupviewChangeEvent { export interface GroupviewChangeEvent {
readonly kind: GroupChangeKind2; readonly kind: GroupChangeKind2;
readonly panel?: IGroupPanel; readonly panel?: IDockviewPanel;
} }
export interface GroupviewDropEvent { export interface GroupviewDropEvent {
@ -86,8 +86,8 @@ export interface IHeader {
export interface IGroupview extends IDisposable, IGridPanelView { export interface IGroupview extends IDisposable, IGridPanelView {
readonly isActive: boolean; readonly isActive: boolean;
readonly size: number; readonly size: number;
readonly panels: IGroupPanel[]; readonly panels: IDockviewPanel[];
readonly activePanel: IGroupPanel | undefined; readonly activePanel: IDockviewPanel | undefined;
readonly header: IHeader; readonly header: IHeader;
readonly isContentFocused: boolean; readonly isContentFocused: boolean;
readonly onDidDrop: Event<GroupviewDropEvent>; readonly onDidDrop: Event<GroupviewDropEvent>;
@ -95,20 +95,23 @@ export interface IGroupview extends IDisposable, IGridPanelView {
readonly onMove: Event<GroupMoveEvent>; readonly onMove: Event<GroupMoveEvent>;
locked: boolean; locked: boolean;
// state // state
isPanelActive: (panel: IGroupPanel) => boolean; isPanelActive: (panel: IDockviewPanel) => boolean;
indexOf(panel: IGroupPanel): number; indexOf(panel: IDockviewPanel): number;
// panel lifecycle // panel lifecycle
openPanel( openPanel(
panel: IGroupPanel, panel: IDockviewPanel,
options?: { index?: number; skipFocus?: boolean } options?: { index?: number; skipFocus?: boolean }
): void; ): void;
closePanel(panel: IGroupPanel): void; closePanel(panel: IDockviewPanel): void;
closeAllPanels(): void; closeAllPanels(): void;
containsPanel(panel: IGroupPanel): boolean; containsPanel(panel: IDockviewPanel): boolean;
removePanel: (panelOrId: IGroupPanel | string) => IGroupPanel; removePanel: (panelOrId: IDockviewPanel | string) => IDockviewPanel;
moveToNext(options?: { panel?: IGroupPanel; suppressRoll?: boolean }): void; moveToNext(options?: {
panel?: IDockviewPanel;
suppressRoll?: boolean;
}): void;
moveToPrevious(options?: { moveToPrevious(options?: {
panel?: IGroupPanel; panel?: IDockviewPanel;
suppressRoll?: boolean; suppressRoll?: boolean;
}): void; }): void;
canDisplayOverlay(event: DragEvent, target: DockviewDropTargets): boolean; canDisplayOverlay(event: DragEvent, target: DockviewDropTargets): boolean;
@ -118,12 +121,12 @@ export class Groupview extends CompositeDisposable implements IGroupview {
private readonly tabsContainer: ITabsContainer; private readonly tabsContainer: ITabsContainer;
private readonly contentContainer: IContentContainer; private readonly contentContainer: IContentContainer;
private readonly dropTarget: Droptarget; private readonly dropTarget: Droptarget;
private _activePanel?: IGroupPanel; private _activePanel?: IDockviewPanel;
private watermark?: IWatermarkRenderer; private watermark?: IWatermarkRenderer;
private _isGroupActive = false; private _isGroupActive = false;
private _locked = false; private _locked = false;
private mostRecentlyUsed: IGroupPanel[] = []; private mostRecentlyUsed: IDockviewPanel[] = [];
private readonly _onDidChange = new Emitter<IViewSize | undefined>(); private readonly _onDidChange = new Emitter<IViewSize | undefined>();
readonly onDidChange: Event<IViewSize | undefined> = readonly onDidChange: Event<IViewSize | undefined> =
@ -132,7 +135,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
private _width = 0; private _width = 0;
private _height = 0; private _height = 0;
private _panels: IGroupPanel[] = []; private _panels: IDockviewPanel[] = [];
private readonly _onMove = new Emitter<GroupMoveEvent>(); private readonly _onMove = new Emitter<GroupMoveEvent>();
readonly onMove: Event<GroupMoveEvent> = this._onMove.event; readonly onMove: Event<GroupMoveEvent> = this._onMove.event;
@ -148,7 +151,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
throw new Error('not supported'); throw new Error('not supported');
} }
get activePanel(): IGroupPanel | undefined { get activePanel(): IDockviewPanel | undefined {
return this._activePanel; return this._activePanel;
} }
@ -164,7 +167,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
return this._isGroupActive; return this._isGroupActive;
} }
get panels(): IGroupPanel[] { get panels(): IDockviewPanel[] {
return this._panels; return this._panels;
} }
@ -217,7 +220,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
private accessor: IDockviewComponent, private accessor: IDockviewComponent,
public id: string, public id: string,
private readonly options: GroupOptions, private readonly options: GroupOptions,
private readonly parent: GroupviewPanel private readonly parent: GroupPanel
) { ) {
super(); super();
@ -298,7 +301,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
this.updateContainer(); this.updateContainer();
} }
public indexOf(panel: IGroupPanel) { public indexOf(panel: IDockviewPanel) {
return this.tabsContainer.indexOf(panel.id); return this.tabsContainer.indexOf(panel.id);
} }
@ -321,7 +324,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
} }
public moveToNext(options?: { public moveToNext(options?: {
panel?: IGroupPanel; panel?: IDockviewPanel;
suppressRoll?: boolean; suppressRoll?: boolean;
}) { }) {
if (!options) { if (!options) {
@ -347,7 +350,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
} }
public moveToPrevious(options?: { public moveToPrevious(options?: {
panel?: IGroupPanel; panel?: IDockviewPanel;
suppressRoll?: boolean; suppressRoll?: boolean;
}) { }) {
if (!options) { if (!options) {
@ -376,7 +379,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
this.openPanel(this.panels[normalizedIndex]); this.openPanel(this.panels[normalizedIndex]);
} }
public containsPanel(panel: IGroupPanel) { public containsPanel(panel: IDockviewPanel) {
return this.panels.includes(panel); return this.panels.includes(panel);
} }
@ -393,7 +396,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
} }
public openPanel( public openPanel(
panel: IGroupPanel, panel: IDockviewPanel,
options: { options: {
index?: number; index?: number;
skipFocus?: boolean; skipFocus?: boolean;
@ -427,7 +430,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
this.updateContainer(); this.updateContainer();
} }
public removePanel(groupItemOrId: IGroupPanel | string): IGroupPanel { public removePanel(groupItemOrId: IDockviewPanel | string): IDockviewPanel {
const id = const id =
typeof groupItemOrId === 'string' typeof groupItemOrId === 'string'
? groupItemOrId ? groupItemOrId
@ -454,15 +457,15 @@ export class Groupview extends CompositeDisposable implements IGroupview {
} }
} }
public closePanel(panel: IGroupPanel): void { public closePanel(panel: IDockviewPanel): void {
this.doClose(panel); this.doClose(panel);
} }
private doClose(panel: IGroupPanel) { private doClose(panel: IDockviewPanel) {
this.accessor.removePanel(panel); this.accessor.removePanel(panel);
} }
public isPanelActive(panel: IGroupPanel) { public isPanelActive(panel: IDockviewPanel) {
return this._activePanel === panel; return this._activePanel === panel;
} }
@ -515,7 +518,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
} }
} }
private _removePanel(panel: IGroupPanel) { private _removePanel(panel: IDockviewPanel) {
const isActivePanel = this._activePanel === panel; const isActivePanel = this._activePanel === panel;
this.doRemovePanel(panel); this.doRemovePanel(panel);
@ -533,7 +536,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
return panel; return panel;
} }
private doRemovePanel(panel: IGroupPanel) { private doRemovePanel(panel: IDockviewPanel) {
const index = this.panels.indexOf(panel); const index = this.panels.indexOf(panel);
if (this._activePanel === panel) { if (this._activePanel === panel) {
@ -556,7 +559,10 @@ export class Groupview extends CompositeDisposable implements IGroupview {
}); });
} }
private doAddPanel(panel: IGroupPanel, index: number = this.panels.length) { private doAddPanel(
panel: IDockviewPanel,
index: number = this.panels.length
) {
const existingPanel = this._panels.indexOf(panel); const existingPanel = this._panels.indexOf(panel);
const hasExistingPanel = existingPanel > -1; const hasExistingPanel = existingPanel > -1;
@ -581,7 +587,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
}); });
} }
private doSetActivePanel(panel: IGroupPanel | undefined) { private doSetActivePanel(panel: IDockviewPanel | undefined) {
this._activePanel = panel; this._activePanel = panel;
if (panel) { if (panel) {
@ -598,7 +604,7 @@ export class Groupview extends CompositeDisposable implements IGroupview {
} }
} }
private updateMru(panel: IGroupPanel) { private updateMru(panel: IDockviewPanel) {
if (this.mostRecentlyUsed.includes(panel)) { if (this.mostRecentlyUsed.includes(panel)) {
this.mostRecentlyUsed.splice( this.mostRecentlyUsed.splice(
this.mostRecentlyUsed.indexOf(panel), this.mostRecentlyUsed.indexOf(panel),

12
packages/dockview/src/groupview/groupviewPanel.ts
View File

@ -6,14 +6,14 @@ import {
} from '../api/gridviewPanelApi'; } from '../api/gridviewPanelApi';
import { Groupview, GroupOptions, IHeader } from './groupview'; import { Groupview, GroupOptions, IHeader } from './groupview';
import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel'; import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
import { IGroupPanel } from './groupPanel'; import { IDockviewPanel } from './groupPanel';
export interface IGroupviewPanel extends IGridviewPanel { export interface IGroupviewPanel extends IGridviewPanel {
model: Groupview; model: Groupview;
locked: boolean; locked: boolean;
readonly size: number; readonly size: number;
readonly panels: IGroupPanel[]; readonly panels: IDockviewPanel[];
readonly activePanel: IGroupPanel | undefined; readonly activePanel: IDockviewPanel | undefined;
} }
export type IGroupviewPanelPublic = IGroupviewPanel; export type IGroupviewPanelPublic = IGroupviewPanel;
@ -22,14 +22,14 @@ export type GroupviewPanelApi = GridviewPanelApi;
class GroupviewApi extends GridviewPanelApiImpl implements GroupviewPanelApi {} class GroupviewApi extends GridviewPanelApiImpl implements GroupviewPanelApi {}
export class GroupviewPanel extends GridviewPanel implements IGroupviewPanel { export class GroupPanel extends GridviewPanel implements IGroupviewPanel {
private readonly _model: Groupview; private readonly _model: Groupview;
get panels(): IGroupPanel[] { get panels(): IDockviewPanel[] {
return this._model.panels; return this._model.panels;
} }
get activePanel(): IGroupPanel | undefined { get activePanel(): IDockviewPanel | undefined {
return this._model.activePanel; return this._model.activePanel;
} }

8
packages/dockview/src/groupview/panel/content.ts
View File

@ -5,14 +5,14 @@ import {
} from '../../lifecycle'; } from '../../lifecycle';
import { Emitter, Event } from '../../events'; import { Emitter, Event } from '../../events';
import { trackFocus } from '../../dom'; import { trackFocus } from '../../dom';
import { IGroupPanel } from '../groupPanel'; import { IDockviewPanel } from '../groupPanel';
export interface IContentContainer extends IDisposable { export interface IContentContainer extends IDisposable {
onDidFocus: Event<void>; onDidFocus: Event<void>;
onDidBlur: Event<void>; onDidBlur: Event<void>;
element: HTMLElement; element: HTMLElement;
layout(width: number, height: number): void; layout(width: number, height: number): void;
openPanel: (panel: IGroupPanel) => void; openPanel: (panel: IDockviewPanel) => void;
closePanel: () => void; closePanel: () => void;
show(): void; show(): void;
hide(): void; hide(): void;
@ -23,7 +23,7 @@ export class ContentContainer
implements IContentContainer implements IContentContainer
{ {
private _element: HTMLElement; private _element: HTMLElement;
private panel: IGroupPanel | undefined; private panel: IDockviewPanel | undefined;
private disposable = new MutableDisposable(); private disposable = new MutableDisposable();
private readonly _onDidFocus = new Emitter<void>(); private readonly _onDidFocus = new Emitter<void>();
@ -59,7 +59,7 @@ export class ContentContainer
this.element.style.display = 'none'; this.element.style.display = 'none';
} }
public openPanel(panel: IGroupPanel) { public openPanel(panel: IDockviewPanel) {
if (this.panel === panel) { if (this.panel === panel) {
return; return;
} }

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

@ -8,8 +8,8 @@ import {
import { toggleClass } from '../dom'; import { toggleClass } from '../dom';
import { IDockviewComponent } from '../dockview/dockviewComponent'; import { IDockviewComponent } from '../dockview/dockviewComponent';
import { ITabRenderer } from './types'; import { ITabRenderer } from './types';
import { IGroupPanel } from './groupPanel'; import { IDockviewPanel } from './groupPanel';
import { GroupviewPanel } from './groupviewPanel'; import { GroupPanel } from './groupviewPanel';
import { DroptargetEvent, Droptarget } from '../dnd/droptarget'; import { DroptargetEvent, Droptarget } from '../dnd/droptarget';
import { DockviewDropTargets } from './dnd'; import { DockviewDropTargets } from './dnd';
import { DragHandler } from '../dnd/abstractDragHandler'; import { DragHandler } from '../dnd/abstractDragHandler';
@ -22,7 +22,7 @@ export enum MouseEventKind {
export interface LayoutMouseEvent { export interface LayoutMouseEvent {
readonly kind: MouseEventKind; readonly kind: MouseEventKind;
readonly event: MouseEvent; readonly event: MouseEvent;
readonly panel?: IGroupPanel; readonly panel?: IDockviewPanel;
readonly tab?: boolean; readonly tab?: boolean;
} }
@ -53,7 +53,7 @@ export class Tab extends CompositeDisposable implements ITab {
constructor( constructor(
public readonly panelId: string, public readonly panelId: string,
accessor: IDockviewComponent, accessor: IDockviewComponent,
private readonly group: GroupviewPanel private readonly group: GroupPanel
) { ) {
super(); super();

20
packages/dockview/src/groupview/titlebar/tabsContainer.ts
View File

@ -6,10 +6,10 @@ import {
import { addDisposableListener, Emitter, Event } from '../../events'; import { addDisposableListener, Emitter, Event } from '../../events';
import { ITab, MouseEventKind, Tab } from '../tab'; import { ITab, MouseEventKind, Tab } from '../tab';
import { last } from '../../array'; import { last } from '../../array';
import { IGroupPanel } from '../groupPanel'; import { IDockviewPanel } from '../groupPanel';
import { IDockviewComponent } from '../../dockview/dockviewComponent'; import { IDockviewComponent } from '../../dockview/dockviewComponent';
import { getPanelData } from '../../dnd/dataTransfer'; import { getPanelData } from '../../dnd/dataTransfer';
import { GroupviewPanel } from '../groupviewPanel'; import { GroupPanel } from '../groupviewPanel';
import { Droptarget } from '../../dnd/droptarget'; import { Droptarget } from '../../dnd/droptarget';
import { DockviewDropTargets } from '../dnd'; import { DockviewDropTargets } from '../dnd';
@ -28,10 +28,10 @@ export interface ITabsContainer extends IDisposable {
at: (index: number) => ITab; at: (index: number) => ITab;
onDrop: Event<TabDropIndexEvent>; onDrop: Event<TabDropIndexEvent>;
setActive: (isGroupActive: boolean) => void; setActive: (isGroupActive: boolean) => void;
setActivePanel: (panel: IGroupPanel) => void; setActivePanel: (panel: IDockviewPanel) => void;
isActive: (tab: ITab) => boolean; isActive: (tab: ITab) => boolean;
closePanel: (panel: IGroupPanel) => void; closePanel: (panel: IDockviewPanel) => void;
openPanel: (panel: IGroupPanel, index?: number) => void; openPanel: (panel: IDockviewPanel, index?: number) => void;
setActionElement(element: HTMLElement | undefined): void; setActionElement(element: HTMLElement | undefined): void;
hidden: boolean; hidden: boolean;
show(): void; show(): void;
@ -52,7 +52,7 @@ export class TabsContainer
private tabs: IValueDisposable<ITab>[] = []; private tabs: IValueDisposable<ITab>[] = [];
private selectedIndex = -1; private selectedIndex = -1;
private active = false; private active = false;
private activePanel: IGroupPanel | undefined; private activePanel: IDockviewPanel | undefined;
private actions: HTMLElement | undefined; private actions: HTMLElement | undefined;
private _height: number | undefined; private _height: number | undefined;
@ -141,7 +141,7 @@ export class TabsContainer
constructor( constructor(
private accessor: IDockviewComponent, private accessor: IDockviewComponent,
private group: GroupviewPanel, private group: GroupPanel,
options: { tabHeight?: number } options: { tabHeight?: number }
) { ) {
super(); super();
@ -244,14 +244,14 @@ export class TabsContainer
value.element.remove(); value.element.remove();
} }
public setActivePanel(panel: IGroupPanel) { public setActivePanel(panel: IDockviewPanel) {
this.tabs.forEach((tab) => { this.tabs.forEach((tab) => {
const isActivePanel = panel.id === tab.value.panelId; const isActivePanel = panel.id === tab.value.panelId;
tab.value.setActive(isActivePanel); tab.value.setActive(isActivePanel);
}); });
} }
public openPanel(panel: IGroupPanel, index: number = this.tabs.length) { public openPanel(panel: IDockviewPanel, index: number = this.tabs.length) {
if (this.tabs.find((tab) => tab.value.panelId === panel.id)) { if (this.tabs.find((tab) => tab.value.panelId === panel.id)) {
return; return;
} }
@ -294,7 +294,7 @@ export class TabsContainer
this.activePanel = panel; this.activePanel = panel;
} }
public closePanel(panel: IGroupPanel) { public closePanel(panel: IDockviewPanel) {
this.delete(panel.id); this.delete(panel.id);
} }

8
packages/dockview/src/groupview/types.ts
View File

@ -3,7 +3,7 @@ import { IDockviewComponent } from '../dockview/dockviewComponent';
import { DockviewPanelApi } from '../api/groupPanelApi'; import { DockviewPanelApi } from '../api/groupPanelApi';
import { PanelInitParameters, IPanel } from '../panel/types'; import { PanelInitParameters, IPanel } from '../panel/types';
import { DockviewApi } from '../api/component.api'; import { DockviewApi } from '../api/component.api';
import { GroupviewPanel } from './groupviewPanel'; import { GroupPanel } from './groupviewPanel';
import { Event } from '../events'; import { Event } from '../events';
import { WrappedTab } from '../dockview/components/tab/defaultTab'; import { WrappedTab } from '../dockview/components/tab/defaultTab';
@ -34,13 +34,13 @@ export interface GroupPanelContentPartInitParameters
export interface IWatermarkRenderer extends IPanel { export interface IWatermarkRenderer extends IPanel {
readonly element: HTMLElement; readonly element: HTMLElement;
init: (params: GroupPanelPartInitParameters) => void; init: (params: GroupPanelPartInitParameters) => void;
updateParentGroup(group: GroupviewPanel, visible: boolean): void; updateParentGroup(group: GroupPanel, visible: boolean): void;
} }
export interface ITabRenderer extends IPanel { export interface ITabRenderer extends IPanel {
readonly element: HTMLElement; readonly element: HTMLElement;
init(parameters: GroupPanelPartInitParameters): void; init(parameters: GroupPanelPartInitParameters): void;
updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void; updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
} }
export interface IActionsRenderer extends IDisposable { export interface IActionsRenderer extends IDisposable {
@ -52,7 +52,7 @@ export interface IContentRenderer extends IPanel {
readonly actions?: HTMLElement; readonly actions?: HTMLElement;
readonly onDidFocus?: Event<void>; readonly onDidFocus?: Event<void>;
readonly onDidBlur?: Event<void>; readonly onDidBlur?: Event<void>;
updateParentGroup(group: GroupviewPanel, isPanelVisible: boolean): void; updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
init(parameters: GroupPanelContentPartInitParameters): void; init(parameters: GroupPanelContentPartInitParameters): void;
close?(): Promise<boolean>; close?(): Promise<boolean>;
} }

8
packages/dockview/src/react/deserializer.ts
View File

@ -1,20 +1,20 @@
import { DockviewComponent } from '../dockview/dockviewComponent'; import { DockviewComponent } from '../dockview/dockviewComponent';
import { GroupviewPanelState, IGroupPanel } from '../groupview/groupPanel'; import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel'; import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
import { IPanelDeserializer } from '../dockview/deserializer'; import { IPanelDeserializer } from '../dockview/deserializer';
import { createComponent } from '../panel/componentFactory'; import { createComponent } from '../panel/componentFactory';
import { DockviewApi } from '../api/component.api'; import { DockviewApi } from '../api/component.api';
import { DefaultTab } from '../dockview/components/tab/defaultTab'; import { DefaultTab } from '../dockview/components/tab/defaultTab';
import { DefaultGroupPanelView } from '../dockview/defaultGroupPanelView'; import { DefaultGroupPanelView } from '../dockview/defaultGroupPanelView';
import { GroupviewPanel } from '../groupview/groupviewPanel'; import { GroupPanel } from '../groupview/groupviewPanel';
export class ReactPanelDeserialzier implements IPanelDeserializer { export class ReactPanelDeserialzier implements IPanelDeserializer {
constructor(private readonly layout: DockviewComponent) {} constructor(private readonly layout: DockviewComponent) {}
public fromJSON( public fromJSON(
panelData: GroupviewPanelState, panelData: GroupviewPanelState,
group: GroupviewPanel group: GroupPanel
): IGroupPanel { ): IDockviewPanel {
const panelId = panelData.id; const panelId = panelData.id;
const params = panelData.params; const params = panelData.params;
const title = panelData.title; const title = panelData.title;

6
packages/dockview/src/react/dockview/reactContentPart.ts
View File

@ -8,7 +8,7 @@ import { IDockviewPanelProps } from '../dockview/dockview';
import { PanelUpdateEvent } from '../../panel/types'; import { PanelUpdateEvent } from '../../panel/types';
import { DockviewPanelApi } from '../../api/groupPanelApi'; import { DockviewPanelApi } from '../../api/groupPanelApi';
import { DockviewApi } from '../../api/component.api'; import { DockviewApi } from '../../api/component.api';
import { GroupviewPanel } from '../../groupview/groupviewPanel'; import { GroupPanel } from '../../groupview/groupviewPanel';
import { Emitter, Event } from '../../events'; import { Emitter, Event } from '../../events';
import { WrappedTab } from '../../dockview/components/tab/defaultTab'; import { WrappedTab } from '../../dockview/components/tab/defaultTab';
@ -30,7 +30,7 @@ export class ReactPanelContentPart implements IContentRenderer {
// //
private _actionsElement: HTMLElement; private _actionsElement: HTMLElement;
private actionsPart?: ReactPart<any>; private actionsPart?: ReactPart<any>;
private _group: GroupviewPanel | undefined; private _group: GroupPanel | undefined;
private readonly _onDidFocus = new Emitter<void>(); private readonly _onDidFocus = new Emitter<void>();
readonly onDidFocus: Event<void> = this._onDidFocus.event; readonly onDidFocus: Event<void> = this._onDidFocus.event;
@ -94,7 +94,7 @@ export class ReactPanelContentPart implements IContentRenderer {
} }
public updateParentGroup( public updateParentGroup(
group: GroupviewPanel, group: GroupPanel,
_isPanelVisible: boolean _isPanelVisible: boolean
): void { ): void {
this._group = group; this._group = group;

4
packages/dockview/src/react/dockview/reactHeaderPart.ts
View File

@ -3,7 +3,7 @@ import {
ITabRenderer, ITabRenderer,
GroupPanelPartInitParameters, GroupPanelPartInitParameters,
} from '../../groupview/types'; } from '../../groupview/types';
import { GroupviewPanel } from '../../groupview/groupviewPanel'; import { GroupPanel } from '../../groupview/groupviewPanel';
import { PanelUpdateEvent } from '../../panel/types'; import { PanelUpdateEvent } from '../../panel/types';
import { ReactPart, ReactPortalStore } from '../react'; import { ReactPart, ReactPortalStore } from '../react';
import { IGroupPanelBaseProps } from './dockview'; import { IGroupPanelBaseProps } from './dockview';
@ -57,7 +57,7 @@ export class ReactPanelHeaderPart implements ITabRenderer {
} }
public updateParentGroup( public updateParentGroup(
_group: GroupviewPanel, _group: GroupPanel,
_isPanelVisible: boolean _isPanelVisible: boolean
): void { ): void {
// noop - retrieval from api // noop - retrieval from api

6
packages/dockview/src/react/dockview/reactWatermarkPart.ts
View File

@ -3,7 +3,7 @@ import {
GroupPanelPartInitParameters, GroupPanelPartInitParameters,
IWatermarkRenderer, IWatermarkRenderer,
} from '../../groupview/types'; } from '../../groupview/types';
import { GroupviewPanel } from '../../groupview/groupviewPanel'; import { GroupPanel } from '../../groupview/groupviewPanel';
import { ReactPart, ReactPortalStore } from '../react'; import { ReactPart, ReactPortalStore } from '../react';
import { IGroupPanelBaseProps } from './dockview'; import { IGroupPanelBaseProps } from './dockview';
import { PanelUpdateEvent } from '../../panel/types'; import { PanelUpdateEvent } from '../../panel/types';
@ -15,7 +15,7 @@ export interface IWatermarkPanelProps extends IGroupPanelBaseProps {
export class ReactWatermarkPart implements IWatermarkRenderer { export class ReactWatermarkPart implements IWatermarkRenderer {
private _element: HTMLElement; private _element: HTMLElement;
private part?: ReactPart<IWatermarkPanelProps>; private part?: ReactPart<IWatermarkPanelProps>;
private _groupRef: { value: GroupviewPanel | undefined } = { private _groupRef: { value: GroupPanel | undefined } = {
value: undefined, value: undefined,
}; };
private parameters: GroupPanelPartInitParameters | undefined; private parameters: GroupPanelPartInitParameters | undefined;
@ -77,7 +77,7 @@ export class ReactWatermarkPart implements IWatermarkRenderer {
// noop - retrieval from api // noop - retrieval from api
} }
updateParentGroup(group: GroupviewPanel, _isPanelVisible: boolean): void { updateParentGroup(group: GroupPanel, _isPanelVisible: boolean): void {
// noop - retrieval from api // noop - retrieval from api
this._groupRef.value = group; this._groupRef.value = group;
} }

6
packages/dockview/src/react/dockview/v2/reactContentRenderer.ts
View File

@ -2,7 +2,7 @@ import {
GroupPanelPartInitParameters, GroupPanelPartInitParameters,
IContentRenderer, IContentRenderer,
} from '../../../groupview/types'; } from '../../../groupview/types';
import { GroupviewPanel } from '../../../groupview/groupviewPanel'; import { GroupPanel } from '../../../groupview/groupviewPanel';
import { HostedContainer } from '../../../hostedContainer'; import { HostedContainer } from '../../../hostedContainer';
import { PanelUpdateEvent } from '../../../panel/types'; import { PanelUpdateEvent } from '../../../panel/types';
import { ReactPart, ReactPortalStore } from '../../react'; import { ReactPart, ReactPortalStore } from '../../react';
@ -13,7 +13,7 @@ export class ReactContentRenderer implements IContentRenderer {
private _element: HTMLElement; private _element: HTMLElement;
private part?: ReactPart<IDockviewPanelProps>; private part?: ReactPart<IDockviewPanelProps>;
private _group: GroupviewPanel | undefined; private _group: GroupPanel | undefined;
private parameters: GroupPanelPartInitParameters | undefined; private parameters: GroupPanelPartInitParameters | undefined;
@ -89,7 +89,7 @@ export class ReactContentRenderer implements IContentRenderer {
} }
public updateParentGroup( public updateParentGroup(
group: GroupviewPanel, group: GroupPanel,
_isPanelVisible: boolean _isPanelVisible: boolean
): void { ): void {
this._group = group; this._group = group;

4
packages/dockview/src/react/dockview/v2/webviewContentRenderer.ts
View File

@ -2,7 +2,7 @@ import {
GroupPanelPartInitParameters, GroupPanelPartInitParameters,
IContentRenderer, IContentRenderer,
} from '../../../groupview/types'; } from '../../../groupview/types';
import { GroupviewPanel } from '../../../groupview/groupviewPanel'; import { GroupPanel } from '../../../groupview/groupviewPanel';
import { HostedContainer } from '../../../hostedContainer'; import { HostedContainer } from '../../../hostedContainer';
import { PanelUpdateEvent } from '../../../panel/types'; import { PanelUpdateEvent } from '../../../panel/types';
@ -43,7 +43,7 @@ export class WebviewContentRenderer implements IContentRenderer {
} }
public updateParentGroup( public updateParentGroup(
_group: GroupviewPanel, _group: GroupPanel,
_isPanelVisible: boolean _isPanelVisible: boolean
): void { ): void {
// //