From 1cf23f04baf54b46c835b13932a7d7dbf4b1ff58 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 31 May 2023 19:32:14 +0100 Subject: [PATCH] bug: fix conflicts between panel.title and panel.params.title (user provided title) --- .../dockview/dockviewComponent.spec.ts | 87 +++++++++++++++++++ .../__tests__/dockview/dockviewPanel.spec.ts | 2 +- .../dockview-core/src/api/dockviewPanelApi.ts | 4 +- .../src/dockview/dockviewPanel.ts | 19 ++-- 4 files changed, 99 insertions(+), 13 deletions(-) diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 253cd4f1e..173bd788e 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -2295,4 +2295,91 @@ describe('dockviewComponent', () => { panels: {}, }); }); + + test('that title and params.title do not conflict', () => { + const container = document.createElement('div'); + + const dockview = new DockviewComponent({ + parentElement: container, + components: { + default: PanelContentPartTest, + }, + tabComponents: { + test_tab_id: PanelTabPartTest, + }, + orientation: Orientation.HORIZONTAL, + }); + + dockview.layout(100, 100); + + dockview.addPanel({ + id: 'panel1', + component: 'default', + title: 'Panel 1', + params: { + title: 'Panel 1', + }, + }); + + dockview.addPanel({ + id: 'panel2', + component: 'default', + title: 'Panel 2', + }); + + dockview.addPanel({ + id: 'panel3', + component: 'default', + params: { + title: 'Panel 3', + }, + }); + + expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({ + grid: { + root: { + type: 'branch', + data: [ + { + type: 'leaf', + data: { + views: ['panel1', 'panel2', 'panel3'], + activeView: 'panel3', + id: '1', + }, + size: 100, + }, + ], + size: 100, + }, + width: 100, + height: 100, + orientation: 'HORIZONTAL', + }, + panels: { + panel1: { + id: 'panel1', + contentComponent: 'default', + params: { + title: 'Panel 1', + }, + title: 'Panel 1', + }, + panel2: { + id: 'panel2', + contentComponent: 'default', + title: 'Panel 2', + }, + panel3: { + id: 'panel3', + contentComponent: 'default', + params: { + title: 'Panel 3', + }, + title: 'panel3', + }, + }, + activeGroup: '1', + }); + }); }); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts index e6d7ab10e..d87ac438b 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts @@ -37,7 +37,7 @@ describe('dockviewPanel', () => { latestTitle = event.title; }); - expect(cut.title).toBe(''); + expect(cut.title).toBeUndefined(); cut.init({ title: 'new title', params: {} }); expect(latestTitle).toBe('new title'); diff --git a/packages/dockview-core/src/api/dockviewPanelApi.ts b/packages/dockview-core/src/api/dockviewPanelApi.ts index 48978c688..d42ac65a4 100644 --- a/packages/dockview-core/src/api/dockviewPanelApi.ts +++ b/packages/dockview-core/src/api/dockviewPanelApi.ts @@ -19,7 +19,7 @@ export interface DockviewPanelApi > { readonly group: DockviewGroupPanel; readonly isGroupActive: boolean; - readonly title: string; + readonly title: string | undefined; readonly onDidActiveGroupChange: Event; readonly onDidGroupChange: Event; close(): void; @@ -43,7 +43,7 @@ export class DockviewPanelApiImpl private readonly disposable = new MutableDisposable(); - get title(): string { + get title(): string | undefined { return this.panel.title; } diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts index 66ac5be5f..cc34b1545 100644 --- a/packages/dockview-core/src/dockview/dockviewPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanel.ts @@ -18,7 +18,7 @@ export interface IDockviewPanel extends IDisposable, IPanel { readonly view: IDockviewPanelModel; readonly group: DockviewGroupPanel; readonly api: DockviewPanelApi; - readonly title: string; + readonly title: string | undefined; readonly params: Record | undefined; updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void; init(params: IGroupPanelInitParameters): void; @@ -34,13 +34,13 @@ export class DockviewPanel private _group: DockviewGroupPanel; private _params?: Parameters; - private _title: string; + private _title: string | undefined; get params(): Parameters | undefined { return this._params; } - get title(): string { + get title(): string | undefined { return this._title; } @@ -56,7 +56,6 @@ export class DockviewPanel readonly view: IDockviewPanelModel ) { super(); - this._title = ''; this._group = group; this.api = new DockviewPanelApiImpl(this, this._group); @@ -76,13 +75,13 @@ export class DockviewPanel public init(params: IGroupPanelInitParameters): void { this._params = params.params; - this.setTitle(params.title); - this.view.init({ ...params, api: this.api, containerApi: this.containerApi, }); + + this.setTitle(params.title); } focus(): void { @@ -103,12 +102,12 @@ export class DockviewPanel } setTitle(title: string): void { - const didTitleChange = title !== this._params?.title; + const didTitleChange = title !== this.title; if (didTitleChange) { this._title = title; - this.view?.update({ + this.view.update({ params: { params: this._params, title: this.title, @@ -128,10 +127,10 @@ export class DockviewPanel if (params.title !== this.title) { this._title = params.title; - this.api._onDidTitleChange.fire({ title: this.title }); + this.api._onDidTitleChange.fire({ title: params.title }); } - this.view?.update({ + this.view.update({ params: { params: this._params, title: this.title,