From 3b2214d6b6ab89987dae3cb2a55a8caf5848a8cd Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Tue, 16 Nov 2021 21:25:57 +0000
Subject: [PATCH] feat: update component state before add/remove events

---
 .../dockview/dockviewComponent.spec.ts        | 84 +++++++++++++++++++
 .../src/dockview/dockviewComponent.ts         | 22 +++--
 packages/dockview/src/groupview/groupview.ts  |  2 +-
 3 files changed, 102 insertions(+), 6 deletions(-)

diff --git a/packages/dockview/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview/src/__tests__/dockview/dockviewComponent.spec.ts
index 44418beeb..0fab5550f 100644
--- a/packages/dockview/src/__tests__/dockview/dockviewComponent.spec.ts
+++ b/packages/dockview/src/__tests__/dockview/dockviewComponent.spec.ts
@@ -621,6 +621,90 @@ describe('dockviewComponent', () => {
         disposable.dispose();
     });
 
+    test('totalPanels is updated before panel event fires', () => {
+        dockview.layout(1000, 1000);
+
+        let counter = 0;
+
+        const disposable = dockview.onGridEvent((e) => {
+            switch (e.kind) {
+                case GroupChangeKind.ADD_PANEL:
+                    counter++;
+                    expect(counter).toBe(dockview.totalPanels);
+                    break;
+                case GroupChangeKind.REMOVE_PANEL:
+                    counter--;
+                    expect(counter).toBe(dockview.totalPanels);
+                    break;
+            }
+        });
+
+        const panel1 = dockview.addPanel({
+            id: 'panel1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel2',
+            component: 'default',
+            position: { referencePanel: 'panel1', direction: 'within' },
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel3',
+            component: 'default',
+            position: { referencePanel: 'panel1', direction: 'right' },
+        });
+
+        dockview.removePanel(panel1);
+        dockview.removePanel(panel3);
+        dockview.removePanel(panel2);
+
+        disposable.dispose();
+    });
+
+    test('size is updated before group event fires', () => {
+        dockview.layout(1000, 1000);
+
+        let counter = 0;
+
+        const disposable = dockview.onGridEvent((e) => {
+            switch (e.kind) {
+                case GroupChangeKind.ADD_GROUP:
+                    counter++;
+                    expect(counter).toBe(dockview.size);
+                    break;
+                case GroupChangeKind.REMOVE_GROUP:
+                    counter--;
+                    expect(counter).toBe(dockview.size);
+                    break;
+            }
+        });
+
+        const panel1 = dockview.addPanel({
+            id: 'panel1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel2',
+            component: 'default',
+            position: { referencePanel: 'panel1', direction: 'within' },
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel3',
+            component: 'default',
+            position: { referencePanel: 'panel1', direction: 'right' },
+        });
+
+        dockview.removePanel(panel1);
+        dockview.removePanel(panel3);
+        dockview.removePanel(panel2);
+
+        disposable.dispose();
+    });
+
     test('events flow', () => {
         dockview.layout(1000, 1000);
 
diff --git a/packages/dockview/src/dockview/dockviewComponent.ts b/packages/dockview/src/dockview/dockviewComponent.ts
index 45f365dab..67ae6e9db 100644
--- a/packages/dockview/src/dockview/dockviewComponent.ts
+++ b/packages/dockview/src/dockview/dockviewComponent.ts
@@ -291,7 +291,7 @@ export class DockviewComponent
         }
     }
 
-    registerPanel(panel: IGroupPanel): void {
+    private registerPanel(panel: IGroupPanel): void {
         if (this._panels.has(panel.id)) {
             throw new Error(`panel ${panel.id} already exists`);
         }
@@ -303,7 +303,7 @@ export class DockviewComponent
         this._panels.set(panel.id, { value: panel, disposable });
     }
 
-    unregisterPanel(panel: IGroupPanel): void {
+    private unregisterPanel(panel: IGroupPanel): void {
         if (!this._panels.has(panel.id)) {
             throw new Error(`panel ${panel.id} doesn't exist`);
         }
@@ -460,7 +460,20 @@ export class DockviewComponent
     }
 
     removePanel(panel: IGroupPanel): void {
-        panel.group?.model.removePanel(panel);
+        this.unregisterPanel(panel);
+        const group = panel.group;
+
+        if (!group) {
+            throw new Error(
+                `cannot remove panel ${panel.id}. it's missing a group.`
+            );
+        }
+
+        group.model.removePanel(panel);
+
+        if (group.model.size === 0) {
+            this.removeGroup(group);
+        }
     }
 
     createWatermarkComponent(): IWatermarkRenderer {
@@ -516,8 +529,7 @@ export class DockviewComponent
     removeGroup(group: GroupviewPanel): void {
         const panels = [...group.model.panels]; // reassign since group panels will mutate
         panels.forEach((panel) => {
-            group.model.removePanel(panel);
-            this.unregisterPanel(panel);
+            this.removePanel(panel);
         });
 
         if (this._groups.size === 1) {
diff --git a/packages/dockview/src/groupview/groupview.ts b/packages/dockview/src/groupview/groupview.ts
index 079bd305c..419bfff26 100644
--- a/packages/dockview/src/groupview/groupview.ts
+++ b/packages/dockview/src/groupview/groupview.ts
@@ -436,8 +436,8 @@ export class Groupview extends CompositeDisposable implements IGroupview {
     };
 
     private doClose(panel: IGroupPanel) {
+        this.removePanel(panel);
         this._removePanel(panel);
-        (this.accessor as DockviewComponent).unregisterPanel(panel);
 
         if (this.panels.length === 0) {
             this.accessor.removeGroup(this.parent);