feat: events system

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();
     });
 

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -661,7 +661,7 @@ export class DockviewComponent
 
         const location = getGridLocation(options.group.element);
         const next = <DockviewGroupPanel>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);
         }
     }