Merge pull request #114 from mathuo/113-improve-events

feat: improve events

packages/dockview/src/__tests__/dockview/deserializer.spec.ts

@@ -1,95 +0,0 @@
-import {
-    DefaultDeserializer,
-    PanelDeserializerOptions,
-} from '../../dockview/deserializer';
-import { DockviewComponent } from '../../dockview/dockviewComponent';
-import { Groupview } from '../../groupview/groupview';
-import { GroupPanel } from '../../groupview/groupviewPanel';
-
-describe('deserializer', () => {
-    test('fromJSON', () => {
-        const openPanel = jest.fn();
-
-        const model = jest.fn<Groupview, []>(() => {
-            const result: Partial<Groupview> = {
-                openPanel,
-            };
-
-            return result as Groupview;
-        });
-
-        const panel1 = jest.fn();
-        const panel2 = jest.fn();
-
-        const groupMock = jest.fn<GroupPanel, []>(() => {
-            const result: Partial<GroupPanel> = {
-                model: new model(),
-                panels: <any>[panel1, panel2],
-                activePanel: null,
-            };
-
-            return result as GroupPanel;
-        });
-        const group = new groupMock();
-        const createGroup = jest.fn().mockReturnValue(new groupMock());
-
-        const dockviewComponentMock = jest.fn<DockviewComponent, []>(() => {
-            const value: Partial<DockviewComponent> = {
-                createGroup,
-            };
-
-            return <DockviewComponent>value;
-        });
-
-        const createPanel = jest
-            .fn()
-            .mockImplementation((child) => ({ id: child }));
-
-        const panelDeserializer: PanelDeserializerOptions = {
-            createPanel,
-        };
-
-        const dockviewComponent = new dockviewComponentMock();
-
-        const cut = new DefaultDeserializer(
-            dockviewComponent,
-            panelDeserializer
-        );
-
-        cut.fromJSON({
-            type: 'leaf',
-            size: 100,
-            visible: true,
-            data: {
-                hideHeader: true,
-                locked: true,
-                id: 'id',
-                views: ['view1', 'view2'],
-                activeView: 'view2',
-            },
-        });
-
-        expect(createGroup).toBeCalledWith({
-            id: 'id',
-            locked: true,
-            hideHeader: true,
-        });
-        expect(createGroup).toBeCalledTimes(1);
-
-        expect(createPanel).toBeCalledWith('view1', group);
-        expect(createPanel).toBeCalledWith('view2', group);
-        expect(createPanel).toBeCalledTimes(2);
-
-        expect(openPanel).toBeCalledWith(
-            { id: 'view1' },
-            { skipSetActive: true }
-        );
-        expect(openPanel).toBeCalledWith(
-            { id: 'view2' },
-            { skipSetActive: false }
-        );
-
-        expect(openPanel).toBeCalledWith(panel2);
-        expect(openPanel).toBeCalledTimes(3);
-    });
-});

packages/dockview/src/__tests__/dockview/dockviewComponent.spec.ts

@@ -254,34 +254,34 @@ describe('dockviewComponent', () => {
         const panel3 = dockview.getGroupPanel('panel3');
         const panel4 = dockview.getGroupPanel('panel4');
 
-        const group1 = panel1.group;
+        const group1 = panel1!.group;
         dockview.moveGroupOrPanel(group1, group1.id, 'panel1', Position.Right);
-        const group2 = panel1.group;
+        const group2 = panel1!.group;
         dockview.moveGroupOrPanel(group2, group1.id, 'panel3', Position.Center);
 
         expect(dockview.activeGroup).toBe(group2);
-        expect(dockview.activeGroup.model.activePanel).toBe(panel3);
+        expect(dockview.activeGroup!.model.activePanel).toBe(panel3);
-        expect(dockview.activeGroup.model.indexOf(panel3)).toBe(1);
+        expect(dockview.activeGroup!.model.indexOf(panel3!)).toBe(1);
 
         dockview.moveToPrevious({ includePanel: true });
         expect(dockview.activeGroup).toBe(group2);
-        expect(dockview.activeGroup.model.activePanel).toBe(panel1);
+        expect(dockview.activeGroup!.model.activePanel).toBe(panel1);
 
         dockview.moveToNext({ includePanel: true });
         expect(dockview.activeGroup).toBe(group2);
-        expect(dockview.activeGroup.model.activePanel).toBe(panel3);
+        expect(dockview.activeGroup!.model.activePanel).toBe(panel3);
 
         dockview.moveToPrevious({ includePanel: false });
         expect(dockview.activeGroup).toBe(group1);
-        expect(dockview.activeGroup.model.activePanel).toBe(panel4);
+        expect(dockview.activeGroup!.model.activePanel).toBe(panel4);
 
         dockview.moveToPrevious({ includePanel: true });
         expect(dockview.activeGroup).toBe(group1);
-        expect(dockview.activeGroup.model.activePanel).toBe(panel2);
+        expect(dockview.activeGroup!.model.activePanel).toBe(panel2);
 
         dockview.moveToNext({ includePanel: false });
         expect(dockview.activeGroup).toBe(group2);
-        expect(dockview.activeGroup.model.activePanel).toBe(panel3);
+        expect(dockview.activeGroup!.model.activePanel).toBe(panel3);
     });
 
     test('remove group', () => {
@@ -1517,6 +1517,175 @@ describe('dockviewComponent', () => {
         expect(panel2Spy).toBeCalledTimes(1);
     });
 
+    test('fromJSON events should still fire', () => {
+        jest.useFakeTimers();
+
+        dockview.layout(1000, 1000);
+
+        let addGroup: GroupPanel[] = [];
+        let removeGroup: GroupPanel[] = [];
+        let activeGroup: (GroupPanel | undefined)[] = [];
+        let addPanel: IDockviewPanel[] = [];
+        let removePanel: IDockviewPanel[] = [];
+        let activePanel: (IDockviewPanel | undefined)[] = [];
+        let layoutChange = 0;
+        let layoutChangeFromJson = 0;
+
+        const disposable = new CompositeDisposable(
+            dockview.onDidAddGroup((panel) => {
+                addGroup.push(panel);
+            }),
+            dockview.onDidRemoveGroup((panel) => {
+                removeGroup.push(panel);
+            }),
+            dockview.onDidActiveGroupChange((event) => {
+                activeGroup.push(event);
+            }),
+            dockview.onDidAddPanel((panel) => {
+                addPanel.push(panel);
+            }),
+            dockview.onDidRemovePanel((panel) => {
+                removePanel.push(panel);
+            }),
+            dockview.onDidActivePanelChange((event) => {
+                activePanel.push(event);
+            }),
+            dockview.onDidLayoutChange(() => {
+                layoutChange++;
+            }),
+            dockview.onDidLayoutFromJSON(() => {
+                layoutChangeFromJson++;
+            })
+        );
+
+        dockview.deserializer = new ReactPanelDeserialzier(dockview);
+        dockview.fromJSON({
+            activeGroup: 'group-1',
+            grid: {
+                root: {
+                    type: 'branch',
+                    data: [
+                        {
+                            type: 'leaf',
+                            data: {
+                                views: ['panel1'],
+                                id: 'group-1',
+                                activeView: 'panel1',
+                            },
+                            size: 500,
+                        },
+                        {
+                            type: 'branch',
+                            data: [
+                                {
+                                    type: 'leaf',
+                                    data: {
+                                        views: ['panel2', 'panel3'],
+                                        id: 'group-2',
+                                    },
+                                    size: 500,
+                                },
+                                {
+                                    type: 'leaf',
+                                    data: { views: ['panel4'], id: 'group-3' },
+                                    size: 500,
+                                },
+                            ],
+                            size: 250,
+                        },
+                        {
+                            type: 'leaf',
+                            data: { views: ['panel5'], id: 'group-4' },
+                            size: 250,
+                        },
+                    ],
+                    size: 1000,
+                },
+                height: 1000,
+                width: 1000,
+                orientation: Orientation.VERTICAL,
+            },
+            panels: {
+                panel1: {
+                    id: 'panel1',
+                    view: { content: { id: 'default' } },
+                    title: 'panel1',
+                },
+                panel2: {
+                    id: 'panel2',
+                    view: { content: { id: 'default' } },
+                    title: 'panel2',
+                },
+                panel3: {
+                    id: 'panel3',
+                    view: { content: { id: 'default' } },
+                    title: 'panel3',
+                },
+                panel4: {
+                    id: 'panel4',
+                    view: { content: { id: 'default' } },
+                    title: 'panel4',
+                },
+                panel5: {
+                    id: 'panel5',
+                    view: { content: { id: 'default' } },
+                    title: 'panel5',
+                },
+            },
+            options: { tabHeight: 25 },
+        });
+
+        jest.runAllTimers();
+
+        console.log(activePanel.map((_) => _?.id).join(' '));
+
+        expect(addGroup.length).toBe(4);
+        expect(removeGroup.length).toBe(0);
+        expect(activeGroup.length).toBe(1);
+        expect(addPanel.length).toBe(5);
+        expect(removePanel.length).toBe(0);
+        expect(activePanel.length).toBe(5);
+        expect(layoutChange).toBe(1);
+        expect(layoutChangeFromJson).toBe(1);
+
+        addGroup = [];
+        removeGroup = [];
+        activeGroup = [];
+        addPanel = [];
+        removePanel = [];
+        activePanel = [];
+        layoutChange = 0;
+        layoutChangeFromJson = 0;
+
+        dockview.fromJSON({
+            grid: {
+                root: {
+                    type: 'branch',
+                    data: [],
+                    size: 1000,
+                },
+                height: 1000,
+                width: 1000,
+                orientation: Orientation.VERTICAL,
+            },
+            panels: {},
+            options: { tabHeight: 25 },
+        });
+
+        jest.runAllTimers();
+
+        expect(addGroup.length).toBe(0);
+        expect(removeGroup.length).toBe(4);
+        expect(activeGroup.length).toBe(1);
+        expect(addPanel.length).toBe(0);
+        expect(removePanel.length).toBe(5);
+        expect(activePanel.length).toBe(1);
+        expect(layoutChange).toBe(1);
+        expect(layoutChangeFromJson).toBe(1);
+
+        return disposable.dispose();
+    });
+
     // group is disposed of when dockview is disposed
     // watermark is disposed of when removed
     // watermark is disposed of when dockview is disposed

packages/dockview/src/__tests__/gridview/gridviewComponent.spec.ts

@@ -1761,4 +1761,126 @@ describe('gridview', () => {
         expect(panel1Spy).toHaveBeenCalledTimes(1);
         expect(panel2Spy).toHaveBeenCalledTimes(1);
     });
+
+    test('fromJSON  events should still fire', () => {
+        jest.useFakeTimers();
+
+        const gridview = new GridviewComponent(container, {
+            proportionalLayout: true,
+            orientation: Orientation.HORIZONTAL,
+            components: { default: TestGridview },
+        });
+
+        let addGroup: GridviewPanel[] = [];
+        let removeGroup: GridviewPanel[] = [];
+        let activeGroup: (GridviewPanel | undefined)[] = [];
+        let layoutChange = 0;
+        let layoutChangeFromJson = 0;
+
+        const disposable = new CompositeDisposable(
+            gridview.onDidAddGroup((panel) => {
+                addGroup.push(panel);
+            }),
+            gridview.onDidRemoveGroup((panel) => {
+                removeGroup.push(panel);
+            }),
+            gridview.onDidActiveGroupChange((event) => {
+                activeGroup.push(event);
+            }),
+            gridview.onDidLayoutChange(() => {
+                layoutChange++;
+            }),
+            gridview.onDidLayoutFromJSON(() => {
+                layoutChangeFromJson++;
+            })
+        );
+
+        gridview.fromJSON({
+            grid: {
+                height: 400,
+                width: 800,
+                orientation: Orientation.HORIZONTAL,
+                root: {
+                    type: 'branch',
+                    size: 400,
+                    data: [
+                        {
+                            type: 'leaf',
+                            size: 200,
+                            data: {
+                                id: 'panel_1',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                        {
+                            type: 'branch',
+                            size: 400,
+                            data: [
+                                {
+                                    type: 'leaf',
+                                    size: 250,
+                                    data: {
+                                        id: 'panel_2',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                                {
+                                    type: 'leaf',
+                                    size: 150,
+                                    data: {
+                                        id: 'panel_3',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            type: 'leaf',
+                            size: 200,
+                            data: {
+                                id: 'panel_4',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                    ],
+                },
+            },
+            activePanel: 'panel_1',
+        });
+
+        jest.runAllTimers();
+
+        expect(addGroup.length).toBe(4);
+        expect(removeGroup.length).toBe(0);
+        expect(activeGroup.length).toBe(1);
+        expect(activeGroup[0]).toEqual(gridview.getPanel('panel_1'));
+        expect(layoutChange).toBe(1);
+        expect(layoutChangeFromJson).toBe(1);
+
+        addGroup = [];
+        activeGroup = [];
+
+        gridview.fromJSON({
+            grid: {
+                height: 0,
+                width: 0,
+                root: { type: 'branch', data: [] },
+                orientation: Orientation.HORIZONTAL,
+            },
+        });
+
+        jest.runAllTimers();
+
+        expect(addGroup.length).toBe(0);
+        expect(removeGroup.length).toBe(4);
+        expect(activeGroup.length).toBe(1);
+        expect(layoutChange).toBe(2);
+        expect(layoutChangeFromJson).toBe(2);
+
+        return disposable.dispose();
+    });
 });

packages/dockview/src/__tests__/groupview/groupview.spec.ts

@@ -560,7 +560,7 @@ describe('groupview', () => {
 
         const panel3 = new TestPanel('id_2', null);
 
-        cut.openPanel(panel3, { skipSetActive: true });
+        cut.openPanel(panel3, { skipSetPanelActive: true });
         expect(contentContainer.length).toBe(1);
         expect(contentContainer.item(0)).toBe(panel2.view.content.element);
 

packages/dockview/src/dockview/deserializer.ts

@@ -1,52 +1,6 @@
-import {
-    IGridView,
-    ISerializedLeafNode,
-    IViewDeserializer,
-} from '../gridview/gridview';
 import { GroupviewPanelState, IDockviewPanel } from '../groupview/groupPanel';
-import { GroupPanelViewState } from '../groupview/groupview';
 import { GroupPanel } from '../groupview/groupviewPanel';
-import { DockviewComponent } from './dockviewComponent';
 
 export interface IPanelDeserializer {
     fromJSON(panelData: GroupviewPanelState, group: GroupPanel): IDockviewPanel;
 }
-
-export interface PanelDeserializerOptions {
-    createPanel: (id: string, group: GroupPanel) => IDockviewPanel;
-}
-
-export class DefaultDeserializer implements IViewDeserializer {
-    constructor(
-        private readonly layout: DockviewComponent,
-        private panelDeserializer: PanelDeserializerOptions
-    ) {}
-
-    public fromJSON(node: ISerializedLeafNode<GroupPanelViewState>): IGridView {
-        const data = node.data;
-        const children = data.views;
-        const active = data.activeView;
-
-        const group = this.layout.createGroup({
-            id: data.id,
-            locked: !!data.locked,
-            hideHeader: !!data.hideHeader,
-        });
-
-        for (const child of children) {
-            const panel = this.panelDeserializer.createPanel(child, group);
-
-            const isActive = typeof active === 'string' && active === panel.id;
-
-            group.model.openPanel(panel, {
-                skipSetActive: !isActive,
-            });
-        }
-
-        if (!group.activePanel && group.panels.length > 0) {
-            group.model.openPanel(group.panels[group.panels.length - 1]);
-        }
-
-        return group;
-    }
-}

packages/dockview/src/dockview/dockviewComponent.ts

@@ -2,6 +2,7 @@ import {
   getRelativeLocation,
   SerializedGridObject,
   getGridLocation,
+  ISerializedLeafNode,
 } from '../gridview/gridview';
 import { Position } from '../dnd/droptarget';
 import { tail, sequenceEquals } from '../array';
@@ -16,7 +17,7 @@ import {
   IWatermarkRenderer,
 } from '../groupview/types';
 import { sequentialNumberGenerator } from '../math';
-import { DefaultDeserializer, IPanelDeserializer } from './deserializer';
+import { IPanelDeserializer } from './deserializer';
 import { createComponent } from '../panel/componentFactory';
 import {
   AddGroupOptions,
@@ -75,7 +76,7 @@ export type DockviewComponentUpdateOptions = Pick<
 
 export interface DockviewDropEvent extends GroupviewDropEvent {
     api: DockviewApi;
-    group: GroupPanel
+    group: GroupPanel;
 }
 
 export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
@@ -140,8 +141,8 @@ export class DockviewComponent
   private readonly _onDidAddPanel = new Emitter<IDockviewPanel>();
   readonly onDidAddPanel: Event<IDockviewPanel> = this._onDidAddPanel.event;
 
-    private readonly _onDidLayoutfromJSON = new Emitter<void>();
+  private readonly _onDidLayoutFromJSON = new Emitter<void>();
-    readonly onDidLayoutFromJSON: Event<void> = this._onDidLayoutfromJSON.event;
+  readonly onDidLayoutFromJSON: Event<void> = this._onDidLayoutFromJSON.event;
 
   private readonly _onDidActivePanelChange = new Emitter<
       IDockviewPanel | undefined
@@ -271,7 +272,9 @@ export class DockviewComponent
       if (options.includePanel && options.group) {
           if (
               options.group.activePanel !==
-                options.group.panels[options.group.panels.length - 1]
+              options.group.panels[
+                  options.group.panels.length - 1
+              ]
           ) {
               options.group.model.moveToNext({ suppressRoll: true });
               return;
@@ -279,7 +282,7 @@ export class DockviewComponent
       }
 
       const location = getGridLocation(options.group.element);
-        const next = <GroupPanel>this.gridview.next(location)?.view;
+      const next = <GroupPanel>this.gridview.next(location)?.view
       this.doSetGroupActive(next);
   }
 
@@ -292,7 +295,10 @@ export class DockviewComponent
       }
 
       if (options.includePanel && options.group) {
-            if (options.group.activePanel !== options.group.panels[0]) {
+          if (
+              options.group.activePanel !==
+              options.group.panels[0]
+          ) {
               options.group.model.moveToPrevious({ suppressRoll: true });
               return;
           }
@@ -329,11 +335,22 @@ export class DockviewComponent
   fromJSON(data: SerializedDockview): void {
       const groups = Array.from(this._groups.values()).map((_) => _.value);
 
+      const hasActiveGroup = !!this.activeGroup;
+      const hasActivePanel = !!this.activePanel
+
       for (const group of groups) {
           // remove the group will automatically remove the panels
           this.removeGroup(group, true);
       }
 
+      if (hasActiveGroup) {
+        this.doSetGroupActive(undefined);
+      }
+
+      if( hasActivePanel) {
+        this._onDidActivePanelChange.fire(undefined);
+      }
+
       this.gridview.clear();
 
       if (!this.deserializer) {
@@ -351,13 +368,39 @@ export class DockviewComponent
 
       this.gridview.deserialize(
         grid,
-          new DefaultDeserializer(this, {
+        {
-              createPanel: (id, group) => {
+          fromJSON:(node: ISerializedLeafNode<GroupPanelViewState>) => {
-                  const panelData = panels[id];
+            const { id, locked, hideHeader, views, activeView } = node.data
-                  return this.deserializer!.fromJSON(panelData, group);
+
-              },
+            const group = this.createGroup({
-          })
+                id,
-      );
+                locked: !!locked,
+                hideHeader: !!hideHeader,
+            });
+
+            this._onDidAddGroup.fire(group);
+
+            for (const child of views) {
+                const panel = this.deserializer!.fromJSON(panels[child], group);
+
+                const isActive = typeof activeView === 'string' && activeView === panel.id;
+
+                group.model.openPanel(panel, {
+                    skipSetPanelActive: !isActive,
+                    skipSetGroupActive:true
+                });
+            }
+
+            if (!group.activePanel && group.panels.length > 0) {
+                group.model.openPanel(group.panels[group.panels.length - 1],{
+                  skipSetGroupActive:true
+                });
+            }
+
+            return group;
+          }
+        }
+      )
 
       if (typeof activeGroup === 'string') {
           const panel = this.getPanel(activeGroup);
@@ -368,7 +411,7 @@ export class DockviewComponent
 
       this.gridview.layout(this.width, this.height);
 
-        this._onDidLayoutfromJSON.fire();
+      this._onDidLayoutFromJSON.fire();
   }
 
   closeAllGroups(): void {
@@ -414,12 +457,12 @@ export class DockviewComponent
           referenceGroup = this.activeGroup;
       }
 
-        let panel: IDockviewPanel;
+    let panel: IDockviewPanel
 
       if (referenceGroup) {
           const target = toTarget(options.position?.direction || 'within');
           if (target === Position.Center) {
-                panel = this.createPanel(options, referenceGroup);
+             panel = this.createPanel(options, referenceGroup)
               referenceGroup.model.openPanel(panel);
           } else {
               const location = getGridLocation(referenceGroup.element);
@@ -429,7 +472,7 @@ export class DockviewComponent
                   target
               );
               const group = this.createGroupAtLocation(relativeLocation);
-                panel = this.createPanel(options, group);
+              panel = this.createPanel(options, group)
               group.model.openPanel(panel);
           }
       } else {
@@ -612,7 +655,7 @@ export class DockviewComponent
                   target
               );
 
-                const group = this.createGroupAtLocation(dropLocation);
+              const group = this.createGroupAtLocation( dropLocation);
               group.model.openPanel(groupItem);
           }
       }
@@ -701,21 +744,13 @@ export class DockviewComponent
       return view;
   }
 
-    private createPanel(
+  private createPanel(options: AddPanelOptions, group: GroupPanel): IDockviewPanel {
-        options: AddPanelOptions,
-        group: GroupPanel
-    ): IDockviewPanel {
       const view = new DefaultGroupPanelView({
           content: this.createContentComponent(options.id, options.component),
           tab: this.createTabComponent(options.id, options.tabComponent),
       });
 
-        const panel = new DockviewGroupPanel(
+      const panel = new DockviewGroupPanel(options.id, this, this._api, group);
-            options.id,
-            this,
-            this._api,
-            group
-        );
       panel.init({
           view,
           title: options.title || options.id,
@@ -753,10 +788,12 @@ export class DockviewComponent
       );
   }
 
-    private createGroupAtLocation(location: number[] = [0]): GroupPanel {
+  private createGroupAtLocation(
+      location: number[] = [0]
+  ): GroupPanel {
       const group = this.createGroup();
       this.doAddGroup(group, location);
-        return group;
+      return group
   }
 
   private findGroup(panel: IDockviewPanel): GroupPanel | undefined {
@@ -771,6 +808,6 @@ export class DockviewComponent
       this._onDidActivePanelChange.dispose();
       this._onDidAddPanel.dispose();
       this._onDidRemovePanel.dispose();
-        this._onDidLayoutfromJSON.dispose();
+      this._onDidLayoutFromJSON.dispose();
   }
 }

packages/dockview/src/gridview/baseComponentGridview.ts

@@ -82,7 +82,7 @@ export abstract class BaseGrid<T extends IGridPanelView>
     private readonly _onDidRemoveGroup = new Emitter<T>();
     readonly onDidRemoveGroup: Event<T> = this._onDidRemoveGroup.event;
 
-    private readonly _onDidAddGroup = new Emitter<T>();
+    protected readonly _onDidAddGroup = new Emitter<T>();
     readonly onDidAddGroup: Event<T> = this._onDidAddGroup.event;
 
     private readonly _onDidActiveGroupChange = new Emitter<T | undefined>();
@@ -150,7 +150,7 @@ export abstract class BaseGrid<T extends IGridPanelView>
 
         this.addDisposables(
             this.gridview.onDidChange(() => {
-                this._onDidLayoutChange.fire();
+                this._bufferOnDidLayoutChange.fire();
             })
         );
 

packages/dockview/src/gridview/gridviewComponent.ts

@@ -175,12 +175,18 @@ export class GridviewComponent
     public fromJSON(serializedGridview: SerializedGridview) {
         const { grid, activePanel } = serializedGridview;
 
+        const hasActiveGroup = this.activeGroup;
+
         const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
         for (const group of groups) {
             group.disposable.dispose();
             this.doRemoveGroup(group.value, { skipActive: true });
         }
 
+        if (hasActiveGroup) {
+            this.doSetGroupActive(undefined);
+        }
+
         this.gridview.clear();
 
         const queue: Function[] = [];
@@ -216,6 +222,8 @@ export class GridviewComponent
                     })
                 );
 
+                this._onDidAddGroup.fire(view);
+
                 this.registerPanel(view);
 
                 return view;

packages/dockview/src/groupview/groupview.ts

@@ -400,7 +400,8 @@ export class Groupview extends CompositeDisposable implements IGroupview {
         options: {
             index?: number;
             skipFocus?: boolean;
-            skipSetActive?: boolean;
+            skipSetPanelActive?: boolean;
+            skipSetGroupActive?: boolean;
         } = {}
     ) {
         if (
@@ -410,20 +411,26 @@ export class Groupview extends CompositeDisposable implements IGroupview {
             options.index = this.panels.length;
         }
 
-        const skipSetActive = !!options.skipSetActive;
+        const skipSetPanelActive = !!options.skipSetPanelActive;
+        const skipSetGroupActive = !!options.skipSetGroupActive;
 
         // ensure the group is updated before we fire any events
         panel.updateParentGroup(this.parent, true);
 
-        if (!skipSetActive && this._activePanel === panel) {
+        if (this._activePanel === panel) {
+            if (!skipSetGroupActive) {
                 this.accessor.doSetGroupActive(this.parent);
+            }
             return;
         }
 
-        this.doAddPanel(panel, options.index, skipSetActive);
+        this.doAddPanel(panel, options.index, skipSetPanelActive);
 
-        if (!skipSetActive) {
+        if (!skipSetPanelActive) {
             this.doSetActivePanel(panel);
+        }
+
+        if (!skipSetGroupActive) {
             this.accessor.doSetGroupActive(this.parent, !!options.skipFocus);
         }