Merge pull request #260 from mathuo/258-dockviewapitojson-doesnt-include-panel-titles

bug: fix conflicts between panel.title and panel.params.title (user p…

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',
+        });
+    });
 });

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');

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<void>;
     readonly onDidGroupChange: Event<void>;
     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;
     }
 

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<string, any> | 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,