feat: events cleanup

packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts

@@ -196,10 +196,7 @@ export class TestPanel implements IDockviewPanel {
         this._params = params;
     }
 
-    updateParentGroup(
+    updateParentGroup(group: DockviewGroupPanel): void {
-        group: DockviewGroupPanel,
-        options: { isGroupActive: boolean }
-    ): 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);
 

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

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

packages/dockview-core/src/api/gridviewPanelApi.ts

@@ -37,9 +37,7 @@ export class GridviewPanelApiImpl
     readonly onDidConstraintsChangeInternal: Event<GridConstraintChangeEvent2> =
         this._onDidConstraintsChangeInternal.event;
 
-    readonly _onDidConstraintsChange = new Emitter<GridConstraintChangeEvent>({
+    readonly _onDidConstraintsChange = new Emitter<GridConstraintChangeEvent>();
-        replay: true,
-    });
     readonly onDidConstraintsChange: Event<GridConstraintChangeEvent> =
         this._onDidConstraintsChange.event;
 

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<PanelDimensionChangeEvent>({
+    readonly _onDidDimensionChange = new Emitter<PanelDimensionChangeEvent>();
-        replay: true,
-    });
     readonly onDidDimensionsChange = this._onDidDimensionChange.event;
 
-    readonly _onDidChangeFocus = new Emitter<FocusEvent>({
+    readonly _onDidChangeFocus = new Emitter<FocusEvent>();
-        replay: true,
-    });
     readonly onDidFocusChange: Event<FocusEvent> = this._onDidChangeFocus.event;
     //
     readonly _onWillFocus = new Emitter<WillFocusEvent>();
     readonly onWillFocus: Event<WillFocusEvent> = this._onWillFocus.event;
     //
-    readonly _onDidVisibilityChange = new Emitter<VisibilityEvent>({
+    readonly _onDidVisibilityChange = new Emitter<VisibilityEvent>();
-        replay: true,
-    });
     readonly onDidVisibilityChange: Event<VisibilityEvent> =
         this._onDidVisibilityChange.event;
 
@@ -105,9 +99,7 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
     readonly onDidHiddenChange: Event<HiddenEvent> =
         this._onDidHiddenChange.event;
 
-    readonly _onDidActiveChange = new Emitter<ActiveEvent>({
+    readonly _onDidActiveChange = new Emitter<ActiveEvent>();
-        replay: true,
-    });
     readonly onDidActiveChange: Event<ActiveEvent> =
         this._onDidActiveChange.event;
 

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,
+                        skipSetActive: true,
-                        skipActive: true,
                         skipSetActiveGroup: true,
                     })
             );
@@ -1873,8 +1872,7 @@ export class DockviewComponent
                 const removedPanel: IDockviewPanel | undefined =
                     this.movingLock(() =>
                         sourceGroup.model.removePanel(sourceItemId, {
-                            skipEvents: true,
+                            skipSetActive: true,
-                            skipActive: 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,
+                        skipSetActive: true,
-                        skipEvents: 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,
                     });
                 }

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

@@ -611,8 +611,7 @@ export class DockviewGroupPanelModel
         panel: IDockviewPanel,
         options: {
             index?: number;
-            skipRender?: boolean;
+            skipSetActive?: boolean;
-            skipEvents?: 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) {
+        if (!options.skipSetActive) {
-            panel.runEvents();
             this.updateContainer();
         }
     }
@@ -661,14 +661,10 @@ export class DockviewGroupPanelModel
     public removePanel(
         groupItemOrId: IDockviewPanel | string,
         options: {
-            skipRender?: boolean;
+            skipSetActive?: boolean;
-            skipEvents?: boolean;
-            skipActive?: boolean;
             skipSetActiveGroup?: boolean;
         } = {
-            skipRender: false,
+            skipSetActive: false,
-            skipEvents: false,
-            skipActive: false,
         }
     ): IDockviewPanel {
         const id =
@@ -746,8 +742,7 @@ export class DockviewGroupPanelModel
     private _removePanel(
         panel: IDockviewPanel,
         options: {
-            skipRender?: boolean;
+            skipSetActive?: boolean;
-            skipEvents?: 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,
+                skipSetActive: options.skipSetActive,
-                skipEvents: options.skipEvents,
                 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;
+            skipSetActive: boolean;
-        } = { skipRender: false }
+        } = { 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) =>
+        this.panels.forEach((panel) => panel.runEvents());
-            // panel.updateParentGroup(this.groupPanel, {
-            //     isGroupActive: this.isActive,
-            // })
-            panel.runEvents()
-        );
 
         if (this.isEmpty && !this.watermark) {
             const watermark = this.accessor.createWatermarkComponent();

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) {
+        if (this.api.isVisible !== isPanelVisible) {
-        //     this.api._onDidActiveChange.fire({
+            this.api._onDidVisibilityChange.fire({
-        //         isActive: options.isGroupActive && isPanelVisible,
+                isVisible: isPanelVisible,
-        //     });
+            });
-        // }
+        }
-
-        // if (this.api.isVisible !== isPanelVisible) {
-        //     this.api._onDidVisibilityChange.fire({
-        //         isVisible: isPanelVisible,
-        //     });
-        // }
-
-        // this.view.updateParentGroup(
-        //     this._group,
-        //     this._group.model.isPanelActive(this)
-        // );
     }
 
     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,