diff --git a/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts b/packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts index e2474bc63..33ebe05d9 100644 --- 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(() => { - return {} as any; - }); const panel = new panelMock(); - const group = new groupMock(); + const group = fromPartial({ + api: { + onDidVisibilityChange: jest.fn(), + onDidLocationChange: jest.fn(), + onDidActiveChange: jest.fn(), + }, + }); const cut = new DockviewPanelApiImpl( panel, diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index c3f537aa7..f002e9af6 100644 --- 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(); + }); }); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewPanel.spec.ts index a7381e191..0a6dc8e64 100644 --- 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(() => { return {} as any; }); - const groupMock = jest.fn(() => { - return {} as any; - }); + const panelModelMock = jest.fn, []>(() => { 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({ + api: { + onDidVisibilityChange: jest.fn(), + onDidLocationChange: jest.fn(), + onDidActiveChange: jest.fn(), + }, + }); const model = new panelModelMock(); const cut = new DockviewPanel('fake-id', accessor, api, group, model, { @@ -61,9 +66,6 @@ describe('dockviewPanel', () => { const accessorMock = jest.fn(() => { return {} as any; }); - const groupMock = jest.fn(() => { - return {} as any; - }); const panelModelMock = jest.fn, []>(() => { 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({ + api: { + onDidVisibilityChange: jest.fn(), + onDidLocationChange: jest.fn(), + onDidActiveChange: jest.fn(), + }, + }); const model = new panelModelMock(); const cut = new DockviewPanel('fake-id', accessor, api, group, model, { @@ -97,9 +105,6 @@ describe('dockviewPanel', () => { const accessorMock = jest.fn(() => { return {} as any; }); - const groupMock = jest.fn(() => { - return {} as any; - }); const panelModelMock = jest.fn, []>(() => { 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({ + api: { + onDidVisibilityChange: jest + .fn() + .mockReturnValue({ dispose: jest.fn() }), + onDidLocationChange: jest + .fn() + .mockReturnValue({ dispose: jest.fn() }), + onDidActiveChange: jest + .fn() + .mockReturnValue({ dispose: jest.fn() }), + }, + }); const model = new panelModelMock(); const cut = new DockviewPanel('fake-id', accessor, api, group, model, { @@ -131,9 +148,6 @@ describe('dockviewPanel', () => { const accessorMock = jest.fn(() => { return {} as any; }); - const groupMock = jest.fn(() => { - return {} as any; - }); const panelModelMock = jest.fn, []>(() => { 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({ + api: { + onDidVisibilityChange: jest.fn(), + onDidLocationChange: jest.fn(), + onDidActiveChange: jest.fn(), + }, + }); const model = new panelModelMock(); const cut = new DockviewPanel('fake-id', accessor, api, group, model, { @@ -165,13 +185,6 @@ describe('dockviewPanel', () => { const accessorMock = jest.fn(() => { return {} as any; }); - const groupMock = jest.fn(() => { - return { - api: { - setSize: jest.fn(), - }, - } as any; - }); const panelModelMock = jest.fn, []>(() => { 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({ + api: { + onDidVisibilityChange: jest.fn(), + onDidLocationChange: jest.fn(), + onDidActiveChange: jest.fn(), + setSize: jest.fn(), + }, + }); const model = new panelModelMock(); const cut = new DockviewPanel('fake-id', accessor, api, group, model, { @@ -202,9 +222,6 @@ describe('dockviewPanel', () => { const accessorMock = jest.fn(() => { return {} as any; }); - const groupMock = jest.fn(() => { - return {} as any; - }); const panelModelMock = jest.fn, []>(() => { 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({ + api: { + onDidVisibilityChange: jest.fn(), + onDidLocationChange: jest.fn(), + onDidActiveChange: jest.fn(), + }, + }); const model = new panelModelMock(); const cut = new DockviewPanel('fake-id', accessor, api, group, model, { diff --git a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts index d0873eba0..0425c1e7c 100644 --- 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(); + }); }); diff --git a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts index b94b5123d..b7baea64a 100644 --- 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(); + }); }); diff --git a/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts b/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts index 43cc6ce08..fa45b53c7 100644 --- 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(); + }); }); diff --git a/packages/dockview-core/src/api/dockviewPanelApi.ts b/packages/dockview-core/src/api/dockviewPanelApi.ts index 3bace3792..06a4ebc22 100644 --- 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, + }); + } + }) + ); + } } diff --git a/packages/dockview-core/src/api/panelApi.ts b/packages/dockview-core/src/api/panelApi.ts index d604f0122..698c480e9 100644 --- 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; readonly onDidVisibilityChange: Event; readonly onDidActiveChange: Event; - readonly onDidHiddenChange: Event; 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 = this._onDidVisibilityChange.event; - readonly _onDidHiddenChange = new Emitter(); - readonly onDidHiddenChange: Event = - this._onDidHiddenChange.event; + readonly _onWillVisibilityChange = new Emitter(); + readonly onWillVisibilityChange: Event = + this._onWillVisibilityChange.event; readonly _onDidActiveChange = new Emitter(); readonly onDidActiveChange: Event = @@ -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 { diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 9b33959ab..a5fdacf39 100644 --- 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) { diff --git a/packages/dockview-core/src/gridview/gridviewPanel.ts b/packages/dockview-core/src/gridview/gridviewPanel.ts index c2573bde8..799395f0c 100644 --- 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; diff --git a/packages/dockview-core/src/lifecycle.ts b/packages/dockview-core/src/lifecycle.ts index 439b181c1..f9b69bfde 100644 --- 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 { diff --git a/packages/dockview-core/src/paneview/paneview.ts b/packages/dockview-core/src/paneview/paneview.ts index 3bebc07f5..0ba11ad90 100644 --- 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, diff --git a/packages/dockview-core/src/paneview/paneviewComponent.ts b/packages/dockview-core/src/paneview/paneviewComponent.ts index 087f28d27..fe81e4c1b 100644 --- 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): 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; }); diff --git a/packages/dockview-core/src/paneview/paneviewPanel.ts b/packages/dockview-core/src/paneview/paneviewPanel.ts index ba0f4a315..d07490d48 100644 --- 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 }); }), diff --git a/packages/dockview-core/src/splitview/splitviewComponent.ts b/packages/dockview-core/src/splitview/splitviewComponent.ts index 22e091127..afd3fd020 100644 --- 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(); } } diff --git a/packages/dockview-core/src/splitview/splitviewPanel.ts b/packages/dockview-core/src/splitview/splitviewPanel.ts index 7c99900d4..f9e834068 100644 --- 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; diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/debugPanel.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/debugPanel.tsx index 50097ef64..4222ce63c 100644 --- 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({ 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();