feat: cleanup setVisible api

2025-02-02 06:25:44 +00:00 · 2024-03-02 16:06:45 +00:00 · 2024-03-02 16:06:45 +00:00 · d3b22d83cf
commit d3b22d83cf
parent 2ee9b46eb9
17 changed files with 348 additions and 116 deletions
--- a/packages/dockview-core/src/tests/api/dockviewPanelApi.spec.ts
+++ b/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,
--- a/packages/dockview-core/src/tests/dockview/dockviewComponent.spec.ts
+++ b/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();
+    });
 });
--- a/packages/dockview-core/src/tests/dockview/dockviewPanel.spec.ts
+++ b/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, {
--- a/packages/dockview-core/src/tests/gridview/gridviewComponent.spec.ts
+++ b/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();
+    });
 });
--- a/packages/dockview-core/src/tests/paneview/paneviewComponent.spec.ts
+++ b/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();
+    });
 });
--- a/packages/dockview-core/src/tests/splitview/splitviewComponent.spec.ts
+++ b/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();
+    });
 });
--- a/packages/dockview-core/src/api/dockviewPanelApi.ts
+++ b/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.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.setupGroupEventListeners(oldGroup);

            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,
+                    });
+                }
+            })
+        );
+    }
 }
--- a/packages/dockview-core/src/api/panelApi.ts
+++ b/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 onDidHiddenChange: Event<HiddenEvent> =
-        this._onDidHiddenChange.event;
+    readonly _onWillVisibilityChange = new Emitter<VisibilityEvent>();
+    readonly onWillVisibilityChange: Event<VisibilityEvent> =
+        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 {
-        this._onDidHiddenChange.fire({ isHidden });
+    setVisible(isVisible: boolean): void {
+        this._onWillVisibilityChange.fire({ isVisible });
    }

    setActive(): void {
--- a/packages/dockview-core/src/dockview/dockviewComponent.ts
+++ b/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) {
-                                referenceGroup.api.setHidden(false);
+                            if (!referenceGroup.api.isVisible) {
+                                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) {
--- a/packages/dockview-core/src/gridview/gridviewPanel.ts
+++ b/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) => {
-                const { isHidden } = event;
+            this.api.onWillVisibilityChange((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;
--- a/packages/dockview-core/src/lifecycle.ts
+++ b/packages/dockview-core/src/lifecycle.ts
@ -1,5 +1,5 @@
 export interface IDisposable {
-    dispose: () => void;
+    dispose(): void;
 }

 export interface IValueDisposable<T> {
--- a/packages/dockview-core/src/paneview/paneview.ts
+++ b/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,
--- a/packages/dockview-core/src/paneview/paneviewComponent.ts
+++ b/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;
                    });
--- a/packages/dockview-core/src/paneview/paneviewPanel.ts
+++ b/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 });
            }),
--- a/packages/dockview-core/src/splitview/splitviewComponent.ts
+++ b/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 {
-        this._activePanel = view;
+    setActive(panel: SplitviewPanel, skipFocus?: boolean): void {
+        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();
        }
    }

--- a/packages/dockview-core/src/splitview/splitviewPanel.ts
+++ b/packages/dockview-core/src/splitview/splitviewPanel.ts
@ -89,10 +89,10 @@ export abstract class SplitviewPanel

        this.addDisposables(
            this._onDidChange,
-            this.api.onDidHiddenChange((event) => {
-                const { isHidden } = event;
+            this.api.onWillVisibilityChange((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;
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/debugPanel.tsx
+++ b/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();