diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 27e95fc52..78eed98c2 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -538,6 +538,31 @@ export class DockviewComponent this.updateWatermark(); } + override setVisible(panel: DockviewGroupPanel, visible: boolean): void { + switch (panel.api.location.type) { + case 'grid': + super.setVisible(panel, visible); + break; + case 'floating': + const item = this.floatingGroups.find( + (floatingGroup) => floatingGroup.group === panel + ); + + if (item) { + item.overlay.setVisible(visible); + panel.api._onDidVisibilityChange.fire({ + isVisible: visible, + }); + } + break; + case 'popout': + console.warn( + 'dockview: You cannot hide a group that is in a popout window' + ); + break; + } + } + addPopoutGroup( itemToPopout: DockviewPanel | DockviewGroupPanel, options?: { diff --git a/packages/dockview-core/src/overlay/overlay.scss b/packages/dockview-core/src/overlay/overlay.scss index 89788e032..fa88193c7 100644 --- a/packages/dockview-core/src/overlay/overlay.scss +++ b/packages/dockview-core/src/overlay/overlay.scss @@ -34,6 +34,10 @@ border: 1px solid var(--dv-tab-divider-color); box-shadow: var(--dv-floating-box-shadow); + &.dv-hidden { + display: none; + } + &.dv-resize-container-dragging { opacity: 0.5; } diff --git a/packages/dockview-core/src/overlay/overlay.ts b/packages/dockview-core/src/overlay/overlay.ts index b34fb9296..36fd00d96 100644 --- a/packages/dockview-core/src/overlay/overlay.ts +++ b/packages/dockview-core/src/overlay/overlay.ts @@ -59,6 +59,8 @@ export class Overlay extends CompositeDisposable { private verticalAlignment: 'top' | 'bottom' | undefined; private horiziontalAlignment: 'left' | 'right' | undefined; + private _isVisible: boolean; + set minimumInViewportWidth(value: number | undefined) { this.options.minimumInViewportWidth = value; } @@ -71,6 +73,10 @@ export class Overlay extends CompositeDisposable { return this._element; } + get isVisible(): boolean { + return this._isVisible; + } + constructor( private readonly options: AnchoredBox & { container: HTMLElement; @@ -84,6 +90,7 @@ export class Overlay extends CompositeDisposable { this.addDisposables(this._onDidChange, this._onDidChangeEnd); this._element.className = 'dv-resize-container'; + this._isVisible = true; this.setupResize('top'); this.setupResize('bottom'); @@ -110,6 +117,16 @@ export class Overlay extends CompositeDisposable { arialLevelTracker.push(this._element); } + setVisible(isVisible: boolean): void { + if (isVisible === this.isVisible) { + return; + } + + this._isVisible = isVisible; + + toggleClass(this.element, 'dv-hidden', !this.isVisible); + } + bringToFront(): void { arialLevelTracker.push(this._element); }