Merge pull request #535 from mathuo/534-setvisible-is-missing-from-splitviewpanelapiimpl

feat: cleanup setVisible api

packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts

@@ -2,6 +2,7 @@ import { DockviewPanelApiImpl } from '../../api/dockviewPanelApi';
 import { DockviewComponent } from '../../dockview/dockviewComponent';
 import { DockviewPanel, IDockviewPanel } from '../../dockview/dockviewPanel';
 import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
+import { fromPartial } from '@total-typescript/shoehorn';
 
 describe('groupPanelApi', () => {
     test('title', () => {
@@ -17,12 +18,15 @@ describe('groupPanelApi', () => {
                 setTitle: jest.fn(),
             } as any;
         });
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
-            return {} as any;
-        });
 
         const panel = new panelMock();
-        const group = new groupMock();
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest.fn(),
+                onDidLocationChange: jest.fn(),
+                onDidActiveChange: jest.fn(),
+            },
+        });
 
         const cut = new DockviewPanelApiImpl(
             panel,

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

@@ -17,6 +17,7 @@ import {
     TabDragEvent,
 } from '../../dockview/components/titlebar/tabsContainer';
 import { fromPartial } from '@total-typescript/shoehorn';
+import { DockviewApi } from '../../api/component.api';
 
 class PanelContentPartTest implements IContentRenderer {
     element: HTMLElement = document.createElement('div');
@@ -4596,4 +4597,113 @@ describe('dockviewComponent', () => {
             expect(panel2.group.api.isActive).toBeFalsy();
         });
     });
+
+    test('that setVisible toggles visiblity', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+        const api = new DockviewApi(dockview);
+
+        dockview.layout(1000, 1000);
+
+        const panel1 = api.addPanel({
+            id: 'panel1',
+            component: 'default',
+        });
+        const panel2 = api.addPanel({
+            id: 'panel2',
+            component: 'default',
+            position: { referencePanel: panel1, direction: 'within' },
+        });
+
+        const panel3 = api.addPanel({
+            id: 'panel3',
+            component: 'default',
+            position: { referencePanel: panel1, direction: 'right' },
+        });
+
+        const panel4 = api.addPanel({
+            id: 'panel4',
+            component: 'default',
+            position: { referencePanel: panel3, direction: 'within' },
+        });
+
+        expect(api.groups.length).toBe(2);
+        expect(panel1.group).toBe(panel2.group);
+        expect(panel3.group).toBe(panel4.group);
+
+        expect(panel1.group.api.isVisible).toBeTruthy();
+        expect(panel2.group.api.isVisible).toBeTruthy();
+        expect(panel3.group.api.isVisible).toBeTruthy();
+        expect(panel4.group.api.isVisible).toBeTruthy();
+
+        expect(panel1.api.isVisible).toBeFalsy();
+        expect(panel2.api.isVisible).toBeTruthy();
+        expect(panel3.api.isVisible).toBeFalsy();
+        expect(panel4.api.isVisible).toBeTruthy();
+
+        // case #1
+        panel1.group.api.setVisible(false);
+
+        expect(panel1.group.api.isVisible).toBeFalsy();
+        expect(panel2.group.api.isVisible).toBeFalsy();
+        expect(panel3.group.api.isVisible).toBeTruthy();
+        expect(panel4.group.api.isVisible).toBeTruthy();
+
+        expect(panel1.api.isVisible).toBeFalsy();
+        expect(panel2.api.isVisible).toBeFalsy();
+        expect(panel3.api.isVisible).toBeFalsy();
+        expect(panel4.api.isVisible).toBeTruthy();
+
+        // case #2
+
+        panel3.group.api.setVisible(false);
+
+        expect(panel1.group.api.isVisible).toBeFalsy();
+        expect(panel2.group.api.isVisible).toBeFalsy();
+        expect(panel3.group.api.isVisible).toBeFalsy();
+        expect(panel4.group.api.isVisible).toBeFalsy();
+
+        expect(panel1.api.isVisible).toBeFalsy();
+        expect(panel2.api.isVisible).toBeFalsy();
+        expect(panel3.api.isVisible).toBeFalsy();
+        expect(panel4.api.isVisible).toBeFalsy();
+
+        // case #2
+
+        panel3.group.api.setVisible(true);
+
+        expect(panel1.group.api.isVisible).toBeFalsy();
+        expect(panel2.group.api.isVisible).toBeFalsy();
+        expect(panel3.group.api.isVisible).toBeTruthy();
+        expect(panel4.group.api.isVisible).toBeTruthy();
+
+        expect(panel1.api.isVisible).toBeFalsy();
+        expect(panel2.api.isVisible).toBeFalsy();
+        expect(panel3.api.isVisible).toBeFalsy();
+        expect(panel4.api.isVisible).toBeTruthy();
+
+        // case #2
+
+        panel1.group.api.setVisible(true);
+
+        expect(panel1.group.api.isVisible).toBeTruthy();
+        expect(panel2.group.api.isVisible).toBeTruthy();
+        expect(panel3.group.api.isVisible).toBeTruthy();
+        expect(panel4.group.api.isVisible).toBeTruthy();
+
+        expect(panel1.api.isVisible).toBeFalsy();
+        expect(panel2.api.isVisible).toBeTruthy();
+        expect(panel3.api.isVisible).toBeFalsy();
+        expect(panel4.api.isVisible).toBeTruthy();
+    });
 });

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

@@ -3,6 +3,7 @@ import { DockviewApi } from '../../api/component.api';
 import { DockviewPanel } from '../../dockview/dockviewPanel';
 import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
 import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
+import { fromPartial } from '@total-typescript/shoehorn';
 
 describe('dockviewPanel', () => {
     test('update title', () => {
@@ -14,9 +15,7 @@ describe('dockviewPanel', () => {
         const accessorMock = jest.fn<DockviewComponent, []>(() => {
             return {} as any;
         });
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
+
-            return {} as any;
-        });
         const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
             return {
                 update: jest.fn(),
@@ -26,7 +25,13 @@ describe('dockviewPanel', () => {
 
         const api = new dockviewApiMock();
         const accessor = new accessorMock();
-        const group = new groupMock();
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest.fn(),
+                onDidLocationChange: jest.fn(),
+                onDidActiveChange: jest.fn(),
+            },
+        });
         const model = <IDockviewPanelModel>new panelModelMock();
 
         const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
@@ -61,9 +66,6 @@ describe('dockviewPanel', () => {
         const accessorMock = jest.fn<DockviewComponent, []>(() => {
             return {} as any;
         });
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
-            return {} as any;
-        });
         const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
             return {
                 update: jest.fn(),
@@ -73,7 +75,13 @@ describe('dockviewPanel', () => {
 
         const api = new dockviewApiMock();
         const accessor = new accessorMock();
-        const group = new groupMock();
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest.fn(),
+                onDidLocationChange: jest.fn(),
+                onDidActiveChange: jest.fn(),
+            },
+        });
         const model = <IDockviewPanelModel>new panelModelMock();
 
         const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
@@ -97,9 +105,6 @@ describe('dockviewPanel', () => {
         const accessorMock = jest.fn<DockviewComponent, []>(() => {
             return {} as any;
         });
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
-            return {} as any;
-        });
         const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
             return {
                 update: jest.fn(),
@@ -110,7 +115,19 @@ describe('dockviewPanel', () => {
 
         const api = new dockviewApiMock();
         const accessor = new accessorMock();
-        const group = new groupMock();
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest
+                    .fn()
+                    .mockReturnValue({ dispose: jest.fn() }),
+                onDidLocationChange: jest
+                    .fn()
+                    .mockReturnValue({ dispose: jest.fn() }),
+                onDidActiveChange: jest
+                    .fn()
+                    .mockReturnValue({ dispose: jest.fn() }),
+            },
+        });
         const model = <IDockviewPanelModel>new panelModelMock();
 
         const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
@@ -131,9 +148,6 @@ describe('dockviewPanel', () => {
         const accessorMock = jest.fn<DockviewComponent, []>(() => {
             return {} as any;
         });
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
-            return {} as any;
-        });
         const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
             return {
                 update: jest.fn(),
@@ -144,7 +158,13 @@ describe('dockviewPanel', () => {
 
         const api = new dockviewApiMock();
         const accessor = new accessorMock();
-        const group = new groupMock();
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest.fn(),
+                onDidLocationChange: jest.fn(),
+                onDidActiveChange: jest.fn(),
+            },
+        });
         const model = <IDockviewPanelModel>new panelModelMock();
 
         const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
@@ -165,13 +185,6 @@ describe('dockviewPanel', () => {
         const accessorMock = jest.fn<DockviewComponent, []>(() => {
             return {} as any;
         });
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
-            return {
-                api: {
-                    setSize: jest.fn(),
-                },
-            } as any;
-        });
         const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
             return {
                 update: jest.fn(),
@@ -182,7 +195,14 @@ describe('dockviewPanel', () => {
 
         const api = new dockviewApiMock();
         const accessor = new accessorMock();
-        const group = new groupMock();
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest.fn(),
+                onDidLocationChange: jest.fn(),
+                onDidActiveChange: jest.fn(),
+                setSize: jest.fn(),
+            },
+        });
         const model = <IDockviewPanelModel>new panelModelMock();
 
         const cut = new DockviewPanel('fake-id', accessor, api, group, model, {
@@ -202,9 +222,6 @@ describe('dockviewPanel', () => {
         const accessorMock = jest.fn<DockviewComponent, []>(() => {
             return {} as any;
         });
-        const groupMock = jest.fn<DockviewGroupPanel, []>(() => {
-            return {} as any;
-        });
         const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
             return {
                 update: jest.fn(),
@@ -215,7 +232,13 @@ describe('dockviewPanel', () => {
 
         const api = new dockviewApiMock();
         const accessor = new accessorMock();
-        const group = new groupMock();
+        const group = fromPartial<DockviewGroupPanel>({
+            api: {
+                onDidVisibilityChange: jest.fn(),
+                onDidLocationChange: jest.fn(),
+                onDidActiveChange: jest.fn(),
+            },
+        });
         const model = <IDockviewPanelModel>new panelModelMock();
 
         const cut = new DockviewPanel('fake-id', accessor, api, group, model, {

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

@@ -2700,4 +2700,35 @@ describe('gridview', () => {
 
         expect(gridview.disableResizing).toBeTruthy();
     });
+
+    test('that setVisible toggles visiblity', () => {
+        const gridview = new GridviewComponent({
+            parentElement: container,
+            proportionalLayout: true,
+            orientation: Orientation.HORIZONTAL,
+            components: { default: TestGridview },
+            disableAutoResizing: true,
+        });
+        gridview.layout(1000, 1000);
+
+        const panel1 = gridview.addPanel({
+            id: 'panel1',
+            component: 'default',
+        });
+        const panel2 = gridview.addPanel({
+            id: 'panel2',
+            component: 'default',
+        });
+
+        expect(panel1.api.isVisible).toBeTruthy();
+        expect(panel2.api.isVisible).toBeTruthy();
+
+        panel1.api.setVisible(false);
+        expect(panel1.api.isVisible).toBeFalsy();
+        expect(panel2.api.isVisible).toBeTruthy();
+
+        panel1.api.setVisible(true);
+        expect(panel1.api.isVisible).toBeTruthy();
+        expect(panel2.api.isVisible).toBeTruthy();
+    });
 });

packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts

@@ -514,4 +514,38 @@ describe('componentPaneview', () => {
 
         expect(paneview.disableResizing).toBeTruthy();
     });
+
+    test('that setVisible toggles visiblity', () => {
+        const paneview = new PaneviewComponent({
+            parentElement: container,
+            components: {
+                default: TestPanel,
+            },
+            disableAutoResizing: true,
+        });
+
+        paneview.layout(1000, 1000);
+
+        const panel1 = paneview.addPanel({
+            id: 'panel1',
+            component: 'default',
+            title: 'panel1',
+        });
+        const panel2 = paneview.addPanel({
+            id: 'panel2',
+            component: 'default',
+            title: 'panel2',
+        });
+
+        expect(panel1.api.isVisible).toBeTruthy();
+        expect(panel2.api.isVisible).toBeTruthy();
+
+        panel1.api.setVisible(false);
+        expect(panel1.api.isVisible).toBeFalsy();
+        expect(panel2.api.isVisible).toBeTruthy();
+
+        panel1.api.setVisible(true);
+        expect(panel1.api.isVisible).toBeTruthy();
+        expect(panel2.api.isVisible).toBeTruthy();
+    });
 });

packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts

@@ -617,4 +617,36 @@ describe('componentSplitview', () => {
 
         expect(splitview.disableResizing).toBeTruthy();
     });
+
+    test('that setVisible toggles visiblity', () => {
+        const splitview = new SplitviewComponent({
+            parentElement: container,
+            orientation: Orientation.HORIZONTAL,
+            components: {
+                default: TestPanel,
+            },
+        });
+
+        splitview.layout(1000, 1000);
+
+        const panel1 = splitview.addPanel({
+            id: 'panel1',
+            component: 'default',
+        });
+        const panel2 = splitview.addPanel({
+            id: 'panel2',
+            component: 'default',
+        });
+
+        expect(panel1.api.isVisible).toBeTruthy();
+        expect(panel2.api.isVisible).toBeTruthy();
+
+        panel1.api.setVisible(false);
+        expect(panel1.api.isVisible).toBeFalsy();
+        expect(panel2.api.isVisible).toBeTruthy();
+
+        panel1.api.setVisible(true);
+        expect(panel1.api.isVisible).toBeTruthy();
+        expect(panel2.api.isVisible).toBeTruthy();
+    });
 });

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

@@ -99,41 +99,14 @@ export class DockviewPanelApiImpl
     }
 
     set group(value: DockviewGroupPanel) {
-        const isOldGroupActive = this.isGroupActive;
+        const oldGroup = this._group;
 
         if (this._group !== value) {
             this._group = value;
 
             this._onDidGroupChange.fire({});
 
-            let _trackGroupActive = isOldGroupActive; // prevent duplicate events with same state
+            this.setupGroupEventListeners(oldGroup);
-
-            this.groupEventsDisposable.value = new CompositeDisposable(
-                this.group.api.onDidLocationChange((event) => {
-                    if (this.group !== this.panel.group) {
-                        return;
-                    }
-                    this._onDidLocationChange.fire(event);
-                }),
-                this.group.api.onDidActiveChange(() => {
-                    if (this.group !== this.panel.group) {
-                        return;
-                    }
-
-                    if (_trackGroupActive !== this.isGroupActive) {
-                        _trackGroupActive = this.isGroupActive;
-                        this._onDidActiveGroupChange.fire({
-                            isActive: this.isGroupActive,
-                        });
-                    }
-                })
-            );
-
-            // if (this.isGroupActive !== isOldGroupActive) {
-            //     this._onDidActiveGroupChange.fire({
-            //         isActive: this.isGroupActive,
-            //     });
-            // }
 
             this._onDidLocationChange.fire({
                 location: this.group.api.location,
@@ -155,6 +128,7 @@ export class DockviewPanelApiImpl
         this.initialize(panel);
 
         this._group = group;
+        this.setupGroupEventListeners();
 
         this.addDisposables(
             this.groupEventsDisposable,
@@ -208,4 +182,40 @@ export class DockviewPanelApiImpl
     exitMaximized(): void {
         this.group.api.exitMaximized();
     }
+
+    private setupGroupEventListeners(previousGroup?: DockviewGroupPanel) {
+        let _trackGroupActive = previousGroup?.isActive ?? false; // prevent duplicate events with same state
+
+        this.groupEventsDisposable.value = new CompositeDisposable(
+            this.group.api.onDidVisibilityChange((event) => {
+                if (!event.isVisible && this.isVisible) {
+                    this._onDidVisibilityChange.fire(event);
+                } else if (
+                    event.isVisible &&
+                    !this.isVisible &&
+                    this.group.model.isPanelActive(this.panel)
+                ) {
+                    this._onDidVisibilityChange.fire(event);
+                }
+            }),
+            this.group.api.onDidLocationChange((event) => {
+                if (this.group !== this.panel.group) {
+                    return;
+                }
+                this._onDidLocationChange.fire(event);
+            }),
+            this.group.api.onDidActiveChange(() => {
+                if (this.group !== this.panel.group) {
+                    return;
+                }
+
+                if (_trackGroupActive !== this.isGroupActive) {
+                    _trackGroupActive = this.isGroupActive;
+                    this._onDidActiveGroupChange.fire({
+                        isActive: this.isGroupActive,
+                    });
+                }
+            })
+        );
+    }
 }

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

@@ -14,10 +14,6 @@ export interface VisibilityEvent {
     readonly isVisible: boolean;
 }
 
-export interface HiddenEvent {
-    readonly isHidden: boolean;
-}
-
 export interface ActiveEvent {
     readonly isActive: boolean;
 }
@@ -28,8 +24,8 @@ export interface PanelApi {
     readonly onDidFocusChange: Event<FocusEvent>;
     readonly onDidVisibilityChange: Event<VisibilityEvent>;
     readonly onDidActiveChange: Event<ActiveEvent>;
-    readonly onDidHiddenChange: Event<HiddenEvent>;
     setActive(): void;
+    setVisible(isVisible: boolean): void;
     updateParameters(parameters: Parameters): void;
     /**
      * The id of the panel that would have been assigned when the panel was created
@@ -47,10 +43,6 @@ export interface PanelApi {
      * Whether the panel is visible
      */
     readonly isVisible: boolean;
-    /**
-     * Whether the panel is hidden
-     */
-    readonly isHidden: boolean;
     /**
      * The panel width in pixels
      */
@@ -76,7 +68,6 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
     private _isFocused = false;
     private _isActive = false;
     private _isVisible = true;
-    private _isHidden = false;
     private _width = 0;
     private _height = 0;
 
@@ -95,9 +86,9 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
     readonly onDidVisibilityChange: Event<VisibilityEvent> =
         this._onDidVisibilityChange.event;
 
-    readonly _onDidHiddenChange = new Emitter<HiddenEvent>();
+    readonly _onWillVisibilityChange = new Emitter<VisibilityEvent>();
-    readonly onDidHiddenChange: Event<HiddenEvent> =
+    readonly onWillVisibilityChange: Event<VisibilityEvent> =
-        this._onDidHiddenChange.event;
+        this._onWillVisibilityChange.event;
 
     readonly _onDidActiveChange = new Emitter<ActiveEvent>();
     readonly onDidActiveChange: Event<ActiveEvent> =
@@ -122,10 +113,6 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
         return this._isVisible;
     }
 
-    get isHidden(): boolean {
-        return this._isHidden;
-    }
-
     get width(): number {
         return this._width;
     }
@@ -147,9 +134,6 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
             this.onDidVisibilityChange((event) => {
                 this._isVisible = event.isVisible;
             }),
-            this.onDidHiddenChange((event) => {
-                this._isHidden = event.isHidden;
-            }),
             this.onDidDimensionsChange((event) => {
                 this._width = event.width;
                 this._height = event.height;
@@ -163,7 +147,7 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
             this._onActiveChange,
             this._onUpdateParameters,
             this._onWillFocus,
-            this._onDidHiddenChange,
+            this._onWillVisibilityChange,
             this._onUpdateParameters
         );
     }
@@ -178,8 +162,8 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
         );
     }
 
-    setHidden(isHidden: boolean): void {
+    setVisible(isVisible: boolean): void {
-        this._onDidHiddenChange.fire({ isHidden });
+        this._onWillVisibilityChange.fire({ isVisible });
     }
 
     setActive(): void {

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

@@ -674,7 +674,7 @@ export class DockviewComponent
             options?.overridePopoutGroup?.id ?? this.getNextGroupId(); //item.id;
 
         if (itemToPopout.api.location.type === 'grid') {
-            itemToPopout.api.setHidden(true);
+            itemToPopout.api.setVisible(false);
         }
 
         const _window = new PopoutWindow(
@@ -749,7 +749,7 @@ export class DockviewComponent
 
                     switch (referenceLocation) {
                         case 'grid':
-                            referenceGroup.api.setHidden(true);
+                            referenceGroup.api.setVisible(false);
                             break;
                         case 'floating':
                         case 'popout':
@@ -821,8 +821,8 @@ export class DockviewComponent
                                 })
                             );
 
-                            if (referenceGroup.api.isHidden) {
+                            if (!referenceGroup.api.isVisible) {
-                                referenceGroup.api.setHidden(false);
+                                referenceGroup.api.setVisible(true);
                             }
 
                             if (this.getPanel(group.id)) {
@@ -1596,7 +1596,7 @@ export class DockviewComponent
     private updateWatermark(): void {
         if (
             this.groups.filter(
-                (x) => x.api.location.type === 'grid' && !x.api.isHidden
+                (x) => x.api.location.type === 'grid' && x.api.isVisible
             ).length === 0
         ) {
             if (!this.watermark) {

packages/dockview-core/src/gridview/gridviewPanel.ts

@@ -158,11 +158,11 @@ export abstract class GridviewPanel<
         this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
 
         this.addDisposables(
-            this.api.onDidHiddenChange((event) => {
+            this.api.onWillVisibilityChange((event) => {
-                const { isHidden } = event;
+                const { isVisible } = event;
                 const { accessor } = this._params as GridviewInitParameters;
 
-                accessor.setVisible(this, !isHidden);
+                accessor.setVisible(this, isVisible);
             }),
             this.api.onActiveChange(() => {
                 const { accessor } = this._params as GridviewInitParameters;

packages/dockview-core/src/lifecycle.ts

@@ -1,5 +1,5 @@
 export interface IDisposable {
-    dispose: () => void;
+    dispose(): void;
 }
 
 export interface IValueDisposable<T> {

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

@@ -108,6 +108,10 @@ export class Paneview extends CompositeDisposable implements IDisposable {
         );
     }
 
+    setViewVisible(index: number, visible: boolean) {
+        this.splitview.setViewVisible(index, visible);
+    }
+
     public addPane(
         pane: PaneviewPanel,
         size?: number | Sizing,

packages/dockview-core/src/paneview/paneviewComponent.ts

@@ -125,6 +125,7 @@ export interface IPaneviewComponent extends IDisposable {
     getPanel(id: string): IPaneviewPanel | undefined;
     movePanel(from: number, to: number): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;
+    setVisible(panel: IPaneviewPanel, visible: boolean): void;
     clear(): void;
 }
 
@@ -226,6 +227,11 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
         this.addDisposables(this._disposable);
     }
 
+    setVisible(panel: PaneviewPanel, visible: boolean): void {
+        const index = this.panels.indexOf(panel);
+        this.paneview.setViewVisible(index, visible);
+    }
+
     focus(): void {
         //noop
     }
@@ -296,6 +302,7 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
             isExpanded: options.isExpanded,
             title: options.title,
             containerApi: new PaneviewApi(this),
+            accessor: this,
         });
 
         this.paneview.addPane(view, size, index);
@@ -430,6 +437,7 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
                             title: data.title,
                             isExpanded: !!view.expanded,
                             containerApi: new PaneviewApi(this),
+                            accessor: this,
                         });
                         panel.orientation = this.paneview.orientation;
                     });

packages/dockview-core/src/paneview/paneviewPanel.ts

@@ -15,6 +15,7 @@ import {
     Parameters,
 } from '../panel/types';
 import { IView, Orientation } from '../splitview/splitview';
+import { PaneviewComponent } from './paneviewComponent';
 
 export interface PanePanelViewState extends BasePanelViewState {
     headerComponent?: string;
@@ -27,6 +28,7 @@ export interface PanePanelInitParameter extends PanelInitParameters {
     isExpanded?: boolean;
     title: string;
     containerApi: PaneviewApi;
+    accessor: PaneviewComponent;
 }
 
 export interface PanePanelComponentInitParameter
@@ -176,6 +178,11 @@ export abstract class PaneviewPanel
         this.element.classList.add('pane');
 
         this.addDisposables(
+            this.api.onWillVisibilityChange((event) => {
+                const { isVisible } = event;
+                const { accessor } = this._params as PanePanelInitParameter;
+                accessor.setVisible(this, isVisible);
+            }),
             this.api.onDidSizeChange((event) => {
                 this._onDidChange.fire({ size: event.size });
             }),

packages/dockview-core/src/splitview/splitviewComponent.ts

@@ -209,20 +209,20 @@ export class SplitviewComponent
         this.splitview.setViewVisible(index, visible);
     }
 
-    setActive(view: SplitviewPanel, skipFocus?: boolean): void {
+    setActive(panel: SplitviewPanel, skipFocus?: boolean): void {
-        this._activePanel = view;
+        this._activePanel = panel;
 
         this.panels
-            .filter((v) => v !== view)
+            .filter((v) => v !== panel)
             .forEach((v) => {
                 v.api._onDidActiveChange.fire({ isActive: false });
                 if (!skipFocus) {
                     v.focus();
                 }
             });
-        view.api._onDidActiveChange.fire({ isActive: true });
+        panel.api._onDidActiveChange.fire({ isActive: true });
         if (!skipFocus) {
-            view.focus();
+            panel.focus();
         }
     }
 

packages/dockview-core/src/splitview/splitviewPanel.ts

@@ -89,10 +89,10 @@ export abstract class SplitviewPanel
 
         this.addDisposables(
             this._onDidChange,
-            this.api.onDidHiddenChange((event) => {
+            this.api.onWillVisibilityChange((event) => {
-                const { isHidden } = event;
+                const { isVisible } = event;
                 const { accessor } = this._params as PanelViewInitParameters;
-                accessor.setVisible(this, !isHidden);
+                accessor.setVisible(this, isVisible);
             }),
             this.api.onActiveChange(() => {
                 const { accessor } = this._params as PanelViewInitParameters;

packages/docs/sandboxes/react/dockview/demo-dockview/src/debugPanel.tsx

@@ -14,10 +14,6 @@ export interface PanelApiMetadata {
         value: boolean;
         count: number;
     };
-    isHidden: {
-        value: boolean;
-        count: number;
-    };
     renderer: {
         value: DockviewPanelRenderer;
         count: number;
@@ -69,7 +65,6 @@ export function usePanelApiMetadata(api: DockviewPanelApi): PanelApiMetadata {
     const [state, setState] = React.useState<PanelApiMetadata>({
         isActive: { value: api.isActive, count: 0 },
         isVisible: { value: api.isVisible, count: 0 },
-        isHidden: { value: api.isHidden, count: 0 },
         renderer: { value: api.renderer, count: 0 },
         isGroupActive: { value: api.isGroupActive, count: 0 },
         groupChanged: { count: 0 },
@@ -125,15 +120,6 @@ export function usePanelApiMetadata(api: DockviewPanelApi): PanelApiMetadata {
                 },
             }));
         });
-        const d6 = api.onDidHiddenChange((event) => {
-            setState((_) => ({
-                ..._,
-                isHidden: {
-                    value: event.isHidden,
-                    count: _.isHidden.count + 1,
-                },
-            }));
-        });
         const d7 = api.onDidLocationChange((event) => {
             setState((_) => ({
                 ..._,
@@ -168,7 +154,6 @@ export function usePanelApiMetadata(api: DockviewPanelApi): PanelApiMetadata {
             d3.dispose();
             d4.dispose();
             d5.dispose();
-            d6.dispose();
             d7.dispose();
             d8.dispose();
             d9.dispose();