diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts index b6e4fa861..eee78a588 100644 --- a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts +++ b/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({ + options: {}, + }), + fromPartial({}) + ); + + expect(cut.element.classList.contains('dv-single-tab')).toBeFalsy(); + + const panel1 = new TestPanel( + 'panel_1', + fromPartial({}) + ); + cut.openPanel(panel1); + expect(cut.element.classList.contains('dv-single-tab')).toBeTruthy(); + + const panel2 = new TestPanel( + 'panel_2', + fromPartial({}) + ); + 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(); + }); }); diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts index c30d1175e..d3bd0568b 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts +++ b/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, - 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, + 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); + } }