diff --git a/packages/dockview/src/__tests__/groupview/groupview.spec.ts b/packages/dockview/src/__tests__/groupview/groupview.spec.ts index 70e9c4f3d..6f102f8bb 100644 --- a/packages/dockview/src/__tests__/groupview/groupview.spec.ts +++ b/packages/dockview/src/__tests__/groupview/groupview.spec.ts @@ -19,12 +19,16 @@ import { GroupOptions, Groupview, } from '../../groupview/groupview'; -import { DockviewPanelApi } from '../../api/groupPanelApi'; +import { + DockviewPanelApi, + DockviewPanelApiImpl, +} from '../../api/groupPanelApi'; import { DefaultGroupPanelView, IGroupPanelView, } from '../../dockview/defaultGroupPanelView'; import { GroupPanel } from '../../groupview/groupviewPanel'; +import { DockviewApi } from '../../api/component.api'; class Watermark implements IWatermarkRenderer { public readonly element = document.createElement('div'); @@ -522,4 +526,49 @@ describe('groupview', () => { hideHeader: true, }); }); + + test("that openPanel with skipSetActive doesn't set panel to active", () => { + const dockviewComponent: IDockviewComponent = new DockviewComponent( + document.createElement('div'), + { + components: { + component: TestContentPart, + }, + } + ); + + const groupviewContainer = document.createElement('div'); + const cut = new Groupview( + groupviewContainer, + dockviewComponent, + 'id', + {}, + null + ); + const contentContainer = groupviewContainer + .getElementsByClassName('content-container') + .item(0).childNodes; + + const panel1 = new TestPanel('id_1', null); + + cut.openPanel(panel1); + expect(contentContainer.length).toBe(1); + expect(contentContainer.item(0)).toBe(panel1.view.content.element); + + const panel2 = new TestPanel('id_2', null); + + cut.openPanel(panel2); + expect(contentContainer.length).toBe(1); + expect(contentContainer.item(0)).toBe(panel2.view.content.element); + + const panel3 = new TestPanel('id_2', null); + + cut.openPanel(panel3, { skipSetActive: true }); + expect(contentContainer.length).toBe(1); + expect(contentContainer.item(0)).toBe(panel2.view.content.element); + + cut.openPanel(panel3); + expect(contentContainer.length).toBe(1); + expect(contentContainer.item(0)).toBe(panel3.view.content.element); + }); }); diff --git a/packages/dockview/src/__tests__/groupview/tab.spec.ts b/packages/dockview/src/__tests__/groupview/tab.spec.ts new file mode 100644 index 000000000..a1e3c762e --- /dev/null +++ b/packages/dockview/src/__tests__/groupview/tab.spec.ts @@ -0,0 +1,25 @@ +import { Tab } from '../../groupview/tab'; + +describe('tab', () => { + test('that empty tab has inactive-tab class', () => { + const accessorMock = jest.fn(); + const groupMock = jest.fn(); + + const cut = new Tab('panelId', new accessorMock(), new groupMock()); + + expect(cut.element.className).toBe('tab inactive-tab'); + }); + + test('that active tab has active-tab class', () => { + const accessorMock = jest.fn(); + const groupMock = jest.fn(); + + const cut = new Tab('panelId', new accessorMock(), new groupMock()); + + cut.setActive(true); + expect(cut.element.className).toBe('tab active-tab'); + + cut.setActive(false); + expect(cut.element.className).toBe('tab inactive-tab'); + }); +}); diff --git a/packages/dockview/src/groupview/groupview.ts b/packages/dockview/src/groupview/groupview.ts index ed3996d72..6e3b1c05d 100644 --- a/packages/dockview/src/groupview/groupview.ts +++ b/packages/dockview/src/groupview/groupview.ts @@ -420,7 +420,7 @@ export class Groupview extends CompositeDisposable implements IGroupview { return; } - this.doAddPanel(panel, options.index); + this.doAddPanel(panel, options.index, skipSetActive); if (!skipSetActive) { this.doSetActivePanel(panel); @@ -561,14 +561,17 @@ export class Groupview extends CompositeDisposable implements IGroupview { private doAddPanel( panel: IDockviewPanel, - index: number = this.panels.length + index: number = this.panels.length, + skipSetActive = false ) { const existingPanel = this._panels.indexOf(panel); const hasExistingPanel = existingPanel > -1; this.tabsContainer.openPanel(panel, index); - this.contentContainer.openPanel(panel); + if (!skipSetActive) { + this.contentContainer.openPanel(panel); + } this.tabsContainer.show(); this.contentContainer.show(); diff --git a/packages/dockview/src/groupview/tab.ts b/packages/dockview/src/groupview/tab.ts index 6e31b7627..62bfa3085 100644 --- a/packages/dockview/src/groupview/tab.ts +++ b/packages/dockview/src/groupview/tab.ts @@ -64,6 +64,8 @@ export class Tab extends CompositeDisposable implements ITab { this._element.tabIndex = 0; this._element.draggable = true; + toggleClass(this.element, 'inactive-tab', true); + this.addDisposables( new (class Handler extends DragHandler { private readonly panelTransfer = diff --git a/packages/dockview/src/groupview/titlebar/tabsContainer.ts b/packages/dockview/src/groupview/titlebar/tabsContainer.ts index e86ee7722..20416b08d 100644 --- a/packages/dockview/src/groupview/titlebar/tabsContainer.ts +++ b/packages/dockview/src/groupview/titlebar/tabsContainer.ts @@ -51,8 +51,6 @@ export class TabsContainer private tabs: IValueDisposable[] = []; private selectedIndex = -1; - private active = false; - private activePanel: IDockviewPanel | undefined; private actions: HTMLElement | undefined; private _height: number | undefined; @@ -205,8 +203,8 @@ export class TabsContainer ); } - public setActive(isGroupActive: boolean) { - this.active = isGroupActive; + public setActive(_isGroupActive: boolean) { + // noop } private addTab( @@ -291,7 +289,6 @@ export class TabsContainer const value: IValueDisposable = { value: tabToAdd, disposable }; this.addTab(value, index); - this.activePanel = panel; } public closePanel(panel: IDockviewPanel) {