diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index c0e07d7a5..c3d858315 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -935,13 +935,13 @@ describe('dockviewComponent', () => { panel5.id, 'center' ); + expect(events).toEqual([ { type: 'REMOVE_PANEL', panel: panel5 }, { type: 'ACTIVE_PANEL', panel: panel4 }, { type: 'ADD_PANEL', panel: panel5 }, { type: 'ACTIVE_PANEL', panel: panel5 }, { type: 'ACTIVE_GROUP', group: panel2.group }, - { type: 'ACTIVE_PANEL', panel: panel5 }, ]); events = []; @@ -962,6 +962,66 @@ describe('dockviewComponent', () => { { type: 'ACTIVE_PANEL', panel: panel4 }, ]); + for (const panel of dockview.panels) { + panel.api.close(); + } + + events = []; + + const panel6 = dockview.addPanel({ + id: 'panel6', + component: 'default', + floating: true, + }); + const panel6Group = panel6.group; + + expect(events).toEqual([ + { type: 'ADD_GROUP', group: panel6.group }, + { type: 'ADD_PANEL', panel: panel6 }, + { type: 'ACTIVE_PANEL', panel: panel6 }, + { type: 'ACTIVE_GROUP', group: panel6.group }, + ]); + + events = []; + + const panel7 = dockview.addPanel({ + id: 'panel7', + component: 'default', + floating: true, + }); + const panel7Group = panel7.group; + + expect(events).toEqual([ + { type: 'ADD_GROUP', group: panel7.group }, + { type: 'ADD_PANEL', panel: panel7 }, + { type: 'ACTIVE_PANEL', panel: panel7 }, + { type: 'ACTIVE_GROUP', group: panel7.group }, + ]); + + expect(dockview.activePanel === panel7).toBeTruthy(); + + events = []; + panel7.api.close(); + + expect(events).toEqual([ + { type: 'REMOVE_PANEL', panel: panel7 }, + { type: 'REMOVE_GROUP', group: panel7Group }, + { type: 'ACTIVE_GROUP', group: panel6.group }, + { type: 'ACTIVE_PANEL', panel: panel6 }, + ]); + + events = []; + panel6.api.close(); + + expect(events).toEqual([ + { type: 'REMOVE_PANEL', panel: panel6 }, + { type: 'REMOVE_GROUP', group: panel6Group }, + { type: 'ACTIVE_GROUP', group: undefined }, + ]); + + expect(dockview.size).toBe(0); + expect(dockview.totalPanels).toBe(0); + disposable.dispose(); }); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 383fd876a..e7ab959c2 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -661,7 +661,7 @@ export class DockviewComponent const location = getGridLocation(options.group.element); const next = this.gridview.next(location)?.view; - this.doSetGroupActive(next); + this.doSetGroupAndPanelActive(next); } moveToPrevious(options: MovementOptions = {}): void { @@ -682,7 +682,7 @@ export class DockviewComponent const location = getGridLocation(options.group.element); const next = this.gridview.previous(location)?.view; if (next) { - this.doSetGroupActive(next as DockviewGroupPanel); + this.doSetGroupAndPanelActive(next as DockviewGroupPanel); } } @@ -830,7 +830,7 @@ export class DockviewComponent if (typeof activeGroup === 'string') { const panel = this.getPanel(activeGroup); if (panel) { - this.doSetGroupActive(panel); + this.doSetGroupAndPanelActive(panel); } } } catch (err) { @@ -887,7 +887,7 @@ export class DockviewComponent } if (hasActiveGroup) { - this.doSetGroupActive(undefined); + this.doSetGroupAndPanelActive(undefined); } if (hasActivePanel) { @@ -967,19 +967,20 @@ export class DockviewComponent if (options.floating) { const group = this.createGroup(); - panel = this.createPanel(options, group); - group.model.openPanel(panel); - const o = typeof options.floating === 'object' && options.floating !== null ? options.floating : {}; - this.addFloatingGroup(group, o, { inDragMode: false, skipRemoveGroup: true, }); + + this._onDidAddGroup.fire(group); + panel = this.createPanel(options, group); + group.model.openPanel(panel); + this.doSetGroupAndPanelActive(group); } else if (referenceGroup.api.isFloating || target === 'center') { panel = this.createPanel(options, referenceGroup); referenceGroup.model.openPanel(panel); @@ -996,19 +997,21 @@ export class DockviewComponent } } else if (options.floating) { const group = this.createGroup(); - panel = this.createPanel(options, group); - group.model.openPanel(panel); - const o = typeof options.floating === 'object' && options.floating !== null ? options.floating : {}; - this.addFloatingGroup(group, o, { inDragMode: false, skipRemoveGroup: true, }); + + this._onDidAddGroup.fire(group); + + panel = this.createPanel(options, group); + group.model.openPanel(panel); + this.doSetGroupAndPanelActive(group); } else { const group = this.createGroupAtLocation(); @@ -1161,7 +1164,13 @@ export class DockviewComponent }); } + const activePanel = this.activePanel; + this.doRemoveGroup(group, options); + + if (this.activePanel !== activePanel) { + this._onDidActivePanelChange.fire(this.activePanel); + } } protected override doRemoveGroup( @@ -1180,10 +1189,19 @@ export class DockviewComponent if (!options?.skipDispose) { floatingGroup.group.dispose(); this._groups.delete(group.id); - // TODO: fire group removed event? + this._onDidRemoveGroup.fire(group); } + floatingGroup.dispose(); + if (!options?.skipActive && this._activeGroup === group) { + const groups = Array.from(this._groups.values()); + + this.doSetGroupActive( + groups.length > 0 ? groups[0].value : undefined + ); + } + return floatingGroup.group; } @@ -1349,14 +1367,14 @@ export class DockviewComponent } } - doSetGroupActive( + doSetGroupAndPanelActive( group: DockviewGroupPanel | undefined, skipFocus?: boolean ): void { - const isGroupAlreadyFocused = this._activeGroup === group; + const activePanel = this.activePanel; super.doSetGroupActive(group, skipFocus); - if (!isGroupAlreadyFocused && this._activeGroup?.activePanel) { + if (this._activeGroup?.activePanel !== activePanel) { this._onDidActivePanelChange.fire(this._activeGroup?.activePanel); } }