diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts index 5e523f06b..b1963dbe5 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts @@ -196,10 +196,7 @@ export class TestPanel implements IDockviewPanel { this._params = params; } - updateParentGroup( - group: DockviewGroupPanel, - options: { isGroupActive: boolean } - ): void { + updateParentGroup(group: DockviewGroupPanel): void { // } @@ -631,7 +628,7 @@ describe('dockviewGroupPanelModel', () => { renderer: 'onlyWhenVisibile', } as any); - cut.openPanel(panel3, { skipRender: true }); + cut.openPanel(panel3, { skipSetActive: true }); expect(contentContainer.length).toBe(1); expect(contentContainer.item(0)).toBe(panel2.view.content.element); diff --git a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts index fac932e51..b94b5123d 100644 --- a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts @@ -78,7 +78,7 @@ describe('componentPaneview', () => { }, }); - paneview.layout(600, 400); + paneview.layout(300, 200); paneview.addPanel({ id: 'panel1', @@ -108,6 +108,8 @@ describe('componentPaneview', () => { }) ); + paneview.layout(600, 400); + expect(panel1Dimensions).toEqual({ width: 600, height: 22 }); expect(panel2Dimensions).toEqual({ width: 600, height: 22 }); diff --git a/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts b/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts index d42f37504..43cc6ce08 100644 --- a/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts @@ -233,7 +233,7 @@ describe('componentSplitview', () => { }, }); - splitview.layout(600, 400); + splitview.layout(300, 200); splitview.addPanel({ id: 'panel1', component: 'testPanel' }); splitview.addPanel({ id: 'panel2', component: 'testPanel' }); @@ -255,6 +255,8 @@ describe('componentSplitview', () => { }) ); + splitview.layout(600, 400); + expect(panel1Dimensions).toEqual({ width: 600, height: 200 }); expect(panel2Dimensions).toEqual({ width: 600, height: 200 }); @@ -283,7 +285,7 @@ describe('componentSplitview', () => { }, }); - splitview.layout(600, 400); + splitview.layout(300, 200); splitview.addPanel({ id: 'panel1', component: 'testPanel' }); splitview.addPanel({ id: 'panel2', component: 'testPanel' }); @@ -305,6 +307,8 @@ describe('componentSplitview', () => { }) ); + splitview.layout(600, 400); + expect(panel1Dimensions).toEqual({ width: 300, height: 400 }); expect(panel2Dimensions).toEqual({ width: 300, height: 400 }); diff --git a/packages/dockview-core/src/api/gridviewPanelApi.ts b/packages/dockview-core/src/api/gridviewPanelApi.ts index 69bd6cdbd..4a7e50424 100644 --- a/packages/dockview-core/src/api/gridviewPanelApi.ts +++ b/packages/dockview-core/src/api/gridviewPanelApi.ts @@ -37,9 +37,7 @@ export class GridviewPanelApiImpl readonly onDidConstraintsChangeInternal: Event = this._onDidConstraintsChangeInternal.event; - readonly _onDidConstraintsChange = new Emitter({ - replay: true, - }); + readonly _onDidConstraintsChange = new Emitter(); readonly onDidConstraintsChange: Event = this._onDidConstraintsChange.event; diff --git a/packages/dockview-core/src/api/panelApi.ts b/packages/dockview-core/src/api/panelApi.ts index b08e9289c..d604f0122 100644 --- a/packages/dockview-core/src/api/panelApi.ts +++ b/packages/dockview-core/src/api/panelApi.ts @@ -82,22 +82,16 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi { private readonly panelUpdatesDisposable = new MutableDisposable(); - readonly _onDidDimensionChange = new Emitter({ - replay: true, - }); + readonly _onDidDimensionChange = new Emitter(); readonly onDidDimensionsChange = this._onDidDimensionChange.event; - readonly _onDidChangeFocus = new Emitter({ - replay: true, - }); + readonly _onDidChangeFocus = new Emitter(); readonly onDidFocusChange: Event = this._onDidChangeFocus.event; // readonly _onWillFocus = new Emitter(); readonly onWillFocus: Event = this._onWillFocus.event; // - readonly _onDidVisibilityChange = new Emitter({ - replay: true, - }); + readonly _onDidVisibilityChange = new Emitter(); readonly onDidVisibilityChange: Event = this._onDidVisibilityChange.event; @@ -105,9 +99,7 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi { readonly onDidHiddenChange: Event = this._onDidHiddenChange.event; - readonly _onDidActiveChange = new Emitter({ - replay: true, - }); + readonly _onDidActiveChange = new Emitter(); readonly onDidActiveChange: Event = this._onDidActiveChange.event; diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index b782a76ab..ac24f2001 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -632,7 +632,7 @@ export class DockviewComponent panels.forEach((panel) => { options.to.model.openPanel(panel, { - skipRender: activePanel !== panel, + skipSetActive: activePanel !== panel, }); }); } @@ -1207,7 +1207,7 @@ export class DockviewComponent activeView === panel.id; group.model.openPanel(panel, { - skipRender: !isActive, + skipSetActive: !isActive, skipSetGroupActive: true, }); } @@ -1780,8 +1780,7 @@ export class DockviewComponent const removedPanel: IDockviewPanel | undefined = this.movingLock( () => sourceGroup.model.removePanel(sourceItemId, { - skipEvents: true, - skipActive: true, + skipSetActive: true, skipSetActiveGroup: true, }) ); @@ -1873,8 +1872,7 @@ export class DockviewComponent const removedPanel: IDockviewPanel | undefined = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, { - skipEvents: true, - skipActive: true, + skipSetActive: true, skipSetActiveGroup: true, }) ); @@ -1892,7 +1890,6 @@ export class DockviewComponent const group = this.createGroupAtLocation(dropLocation); this.movingLock(() => group.model.openPanel(removedPanel, { - skipEvents: true, skipSetGroupActive: true, }) ); @@ -1912,8 +1909,7 @@ export class DockviewComponent const panels = this.movingLock(() => [...from.panels].map((p) => from.model.removePanel(p.id, { - skipRender: true, - skipEvents: true, + skipSetActive: true, }) ) ); @@ -1925,7 +1921,7 @@ export class DockviewComponent this.movingLock(() => { for (const panel of panels) { to.model.openPanel(panel, { - skipRender: panel !== activePanel, + skipSetActive: panel !== activePanel, skipSetGroupActive: panel !== activePanel, }); } diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index e54c15eeb..951c9e983 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -611,8 +611,7 @@ export class DockviewGroupPanelModel panel: IDockviewPanel, options: { index?: number; - skipRender?: boolean; - skipEvents?: boolean; + skipSetActive?: boolean; skipSetGroupActive?: boolean; } = {} ): void { @@ -630,13 +629,15 @@ export class DockviewGroupPanelModel options.index = this.panels.length; } - const skipRender = !!options.skipRender; + const skipSetActive = !!options.skipSetActive; // ensure the group is updated before we fire any events - panel.updateParentGroup(this.groupPanel, { isGroupActive: true }); + panel.updateParentGroup(this.groupPanel, { + skipSetActive: options.skipSetActive, + }); this.doAddPanel(panel, options.index, { - skipRender, + skipSetActive: skipSetActive, }); if (this._activePanel === panel) { @@ -644,7 +645,7 @@ export class DockviewGroupPanelModel return; } - if (!skipRender) { + if (!skipSetActive) { this.doSetActivePanel(panel); } @@ -652,8 +653,7 @@ export class DockviewGroupPanelModel this.accessor.doSetGroupActive(this.groupPanel); } - if (!options.skipEvents) { - panel.runEvents(); + if (!options.skipSetActive) { this.updateContainer(); } } @@ -661,14 +661,10 @@ export class DockviewGroupPanelModel public removePanel( groupItemOrId: IDockviewPanel | string, options: { - skipRender?: boolean; - skipEvents?: boolean; - skipActive?: boolean; + skipSetActive?: boolean; skipSetActiveGroup?: boolean; } = { - skipRender: false, - skipEvents: false, - skipActive: false, + skipSetActive: false, } ): IDockviewPanel { const id = @@ -746,8 +742,7 @@ export class DockviewGroupPanelModel private _removePanel( panel: IDockviewPanel, options: { - skipRender?: boolean; - skipEvents?: boolean; + skipSetActive?: boolean; skipSetActiveGroup?: boolean; } ): IDockviewPanel { @@ -758,8 +753,7 @@ export class DockviewGroupPanelModel if (isActivePanel && this.panels.length > 0) { const nextPanel = this.mostRecentlyUsed[0]; this.openPanel(nextPanel, { - skipRender: options.skipRender, - skipEvents: options.skipEvents, + skipSetActive: options.skipSetActive, skipSetGroupActive: options.skipSetActiveGroup, }); } @@ -768,7 +762,7 @@ export class DockviewGroupPanelModel this.doSetActivePanel(undefined); } - if (!options.skipEvents) { + if (!options.skipSetActive) { this.updateContainer(); } @@ -799,8 +793,8 @@ export class DockviewGroupPanelModel panel: IDockviewPanel, index: number = this.panels.length, options: { - skipRender: boolean; - } = { skipRender: false } + skipSetActive: boolean; + } = { skipSetActive: false } ): void { const existingPanel = this._panels.indexOf(panel); const hasExistingPanel = existingPanel > -1; @@ -810,7 +804,7 @@ export class DockviewGroupPanelModel this.tabsContainer.openPanel(panel, index); - if (!options.skipRender) { + if (!options.skipSetActive) { this.contentContainer.openPanel(panel); } @@ -858,12 +852,7 @@ export class DockviewGroupPanelModel private updateContainer(): void { toggleClass(this.container, 'empty', this.isEmpty); - this.panels.forEach((panel) => - // panel.updateParentGroup(this.groupPanel, { - // isGroupActive: this.isActive, - // }) - panel.runEvents() - ); + this.panels.forEach((panel) => panel.runEvents()); if (this.isEmpty && !this.watermark) { const watermark = this.accessor.createWatermarkComponent(); diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts index 2001207cf..72ae1ca72 100644 --- a/packages/dockview-core/src/dockview/dockviewPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanel.ts @@ -20,7 +20,7 @@ export interface IDockviewPanel extends IDisposable, IPanel { readonly params: Parameters | undefined; updateParentGroup( group: DockviewGroupPanel, - options: { isGroupActive: boolean } + options?: { skipSetActive?: boolean } ): void; init(params: IGroupPanelInitParameters): void; toJSON(): GroupviewPanelState; @@ -179,34 +179,30 @@ export class DockviewPanel public updateParentGroup( group: DockviewGroupPanel, - options: { isGroupActive: boolean } + options?: { skipSetActive?: boolean } ): void { this._group = group; + this.api.group = this._group; - // const isPanelVisible = this._group.model.isPanelActive(this); + const isPanelVisible = this._group.model.isPanelActive(this); + const isActive = this.group.api.isActive && isPanelVisible; - // const isActive = options.isGroupActive && isPanelVisible; + if (!options?.skipSetActive) { + if (this.api.isActive !== isActive) { + this.api._onDidActiveChange.fire({ + isActive: this.group.api.isActive && isPanelVisible, + }); + } + } - // if (this.api.isActive !== isActive) { - // this.api._onDidActiveChange.fire({ - // isActive: options.isGroupActive && isPanelVisible, - // }); - // } - - // if (this.api.isVisible !== isPanelVisible) { - // this.api._onDidVisibilityChange.fire({ - // isVisible: isPanelVisible, - // }); - // } - - // this.view.updateParentGroup( - // this._group, - // this._group.model.isPanelActive(this) - // ); + if (this.api.isVisible !== isPanelVisible) { + this.api._onDidVisibilityChange.fire({ + isVisible: isPanelVisible, + }); + } } runEvents(): void { - this.api.group = this._group; const isPanelVisible = this._group.model.isPanelActive(this); const isActive = this.group.api.isActive && isPanelVisible; @@ -225,7 +221,7 @@ export class DockviewPanel } public layout(width: number, height: number): void { - // the obtain the correct dimensions of the content panel we must deduct the tab height + // TODO: Can we somehow do height without header height or indicate what the header height is? this.api._onDidDimensionChange.fire({ width, height: height,