Merge pull request #811 from mathuo/784-class-dv-single-tab-not-updated-on-drag-drop-of-tabs

bug: fix classname enablement

Author: mathuo

packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts

@@ -10,6 +10,7 @@ import { fireEvent } from '@testing-library/dom';
 import { TestPanel } from '../../dockviewGroupPanelModel.spec';
 import { IDockviewPanel } from '../../../../dockview/dockviewPanel';
 import { fromPartial } from '@total-typescript/shoehorn';
+import { DockviewPanelApi } from '../../../../api/dockviewPanelApi';
 
 describe('tabsContainer', () => {
     test('that an external event does not render a drop target and calls through to the group mode', () => {
@@ -815,4 +816,35 @@ describe('tabsContainer', () => {
         expect(result).toBeTruthy();
         expect(result!.childNodes.length).toBe(0);
     });
+
+    test('class dv-single-tab is present when only one tab exists`', () => {
+        const cut = new TabsContainer(
+            fromPartial<DockviewComponent>({
+                options: {},
+            }),
+            fromPartial<DockviewGroupPanel>({})
+        );
+
+        expect(cut.element.classList.contains('dv-single-tab')).toBeFalsy();
+
+        const panel1 = new TestPanel(
+            'panel_1',
+            fromPartial<DockviewPanelApi>({})
+        );
+        cut.openPanel(panel1);
+        expect(cut.element.classList.contains('dv-single-tab')).toBeTruthy();
+
+        const panel2 = new TestPanel(
+            'panel_2',
+            fromPartial<DockviewPanelApi>({})
+        );
+        cut.openPanel(panel2);
+        expect(cut.element.classList.contains('dv-single-tab')).toBeFalsy();
+
+        cut.closePanel(panel1);
+        expect(cut.element.classList.contains('dv-single-tab')).toBeTruthy();
+
+        cut.closePanel(panel2);
+        expect(cut.element.classList.contains('dv-single-tab')).toBeFalsy();
+    });
 });

packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts

@@ -205,24 +205,6 @@ export class TabsContainer
         this._element.appendChild(this.rightActionsContainer);
 
         this.addDisposables(
-            this.accessor.onDidAddPanel((e) => {
-                if (e.api.group === this.group) {
-                    toggleClass(
-                        this._element,
-                        'dv-single-tab',
-                        this.size === 1
-                    );
-                }
-            }),
-            this.accessor.onDidRemovePanel((e) => {
-                if (e.api.group === this.group) {
-                    toggleClass(
-                        this._element,
-                        'dv-single-tab',
-                        this.size === 1
-                    );
-                }
-            }),
             this._onWillShowOverlay,
             this._onDrop,
             this._onTabDragStart,
@@ -296,30 +278,6 @@ export class TabsContainer
         // noop
     }
 
-    private addTab(
-        tab: IValueDisposable<Tab>,
-        index: number = this.tabs.length
-    ): void {
-        if (index < 0 || index > this.tabs.length) {
-            throw new Error('invalid location');
-        }
-
-        this.tabContainer.insertBefore(
-            tab.value.element,
-            this.tabContainer.children[index]
-        );
-
-        this.tabs = [
-            ...this.tabs.slice(0, index),
-            tab,
-            ...this.tabs.slice(index),
-        ];
-
-        if (this.selectedIndex < 0) {
-            this.selectedIndex = index;
-        }
-    }
-
     public delete(id: string): void {
         const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
 
@@ -330,6 +288,8 @@ export class TabsContainer
         disposable.dispose();
         value.dispose();
         value.element.remove();
+
+        this.updateClassnames();
     }
 
     public setActivePanel(panel: IDockviewPanel): void {
@@ -430,4 +390,34 @@ export class TabsContainer
 
         this.tabs = [];
     }
+
+    private addTab(
+        tab: IValueDisposable<Tab>,
+        index: number = this.tabs.length
+    ): void {
+        if (index < 0 || index > this.tabs.length) {
+            throw new Error('invalid location');
+        }
+
+        this.tabContainer.insertBefore(
+            tab.value.element,
+            this.tabContainer.children[index]
+        );
+
+        this.tabs = [
+            ...this.tabs.slice(0, index),
+            tab,
+            ...this.tabs.slice(index),
+        ];
+
+        if (this.selectedIndex < 0) {
+            this.selectedIndex = index;
+        }
+
+        this.updateClassnames();
+    }
+
+    private updateClassnames(): void {
+        toggleClass(this._element, 'dv-single-tab', this.size === 1);
+    }
 }