diff --git a/packages/dockview-core/src/dockview/components/watermark/watermark.scss b/packages/dockview-core/src/dockview/components/watermark/watermark.scss index f085a974d..7936cabcc 100644 --- a/packages/dockview-core/src/dockview/components/watermark/watermark.scss +++ b/packages/dockview-core/src/dockview/components/watermark/watermark.scss @@ -1,42 +1,4 @@ .dv-watermark { display: flex; - width: 100%; - - &.dv-has-actions { - .dv-watermark-title { - .dv-actions-container { - display: none; - } - } - } - - .dv-watermark-title { - height: 35px; - width: 100%; - display: flex; - } - .dv-watermark-content { - flex-grow: 1; - } - - .dv-actions-container { - display: flex; - align-items: center; - padding: 0px 8px; - - .dv-close-action { - padding: 4px; - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; - cursor: pointer; - color: var(--dv-activegroup-hiddenpanel-tab-color); - - &:hover { - border-radius: 2px; - background-color: var(--dv-icon-hover-background-color); - } - } - } + height: 100%; } diff --git a/packages/dockview-core/src/dockview/components/watermark/watermark.ts b/packages/dockview-core/src/dockview/components/watermark/watermark.ts index f213868b8..3e20dc273 100644 --- a/packages/dockview-core/src/dockview/components/watermark/watermark.ts +++ b/packages/dockview-core/src/dockview/components/watermark/watermark.ts @@ -2,20 +2,13 @@ import { IWatermarkRenderer, WatermarkRendererInitParameters, } from '../../types'; -import { addDisposableListener } from '../../../events'; -import { toggleClass } from '../../../dom'; import { CompositeDisposable } from '../../../lifecycle'; -import { IDockviewGroupPanel } from '../../dockviewGroupPanel'; -import { createCloseButton } from '../../../svg'; -import { DockviewApi } from '../../../api/component.api'; export class Watermark extends CompositeDisposable implements IWatermarkRenderer { private readonly _element: HTMLElement; - private _group: IDockviewGroupPanel | undefined; - private _api: DockviewApi | undefined; get element(): HTMLElement { return this._element; @@ -25,50 +18,9 @@ export class Watermark super(); this._element = document.createElement('div'); this._element.className = 'dv-watermark'; - - const title = document.createElement('div'); - title.className = 'dv-watermark-title'; - - const emptySpace = document.createElement('span'); - emptySpace.style.flexGrow = '1'; - - const content = document.createElement('div'); - content.className = 'dv-watermark-content'; - - this._element.appendChild(title); - this._element.appendChild(content); - - const actionsContainer = document.createElement('div'); - actionsContainer.className = 'dv-actions-container'; - - const closeAnchor = document.createElement('div'); - closeAnchor.className = 'dv-close-action'; - closeAnchor.appendChild(createCloseButton()); - - actionsContainer.appendChild(closeAnchor); - - title.appendChild(emptySpace); - title.appendChild(actionsContainer); - - this.addDisposables( - addDisposableListener(closeAnchor, 'click', (event: MouseEvent) => { - event.preventDefault(); - - if (this._group) { - this._api?.removeGroup(this._group); - } - }) - ); } init(_params: WatermarkRendererInitParameters): void { - this._api = _params.containerApi; - this._group = _params.group; - this.render(); - } - - private render(): void { - const isOneGroup = !!(this._api && this._api.size <= 1); - toggleClass(this.element, 'dv-has-actions', isOneGroup); + // noop } } diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 5a20f5b84..4727f305e 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -1623,11 +1623,10 @@ export class DockviewComponent panel: IDockviewPanel, options: { removeEmptyGroup: boolean; - skipDispose: boolean; + skipDispose?: boolean; skipSetActiveGroup?: boolean; } = { removeEmptyGroup: true, - skipDispose: false, } ): void { const group = panel.group; diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanel.scss b/packages/dockview-core/src/dockview/dockviewGroupPanel.scss index 3faff3ce0..55a402cdb 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanel.scss +++ b/packages/dockview-core/src/dockview/dockviewGroupPanel.scss @@ -9,11 +9,11 @@ outline: none; } - &.dv-empty { - > .dv-tabs-and-actions-container { - display: none; - } - } + // &.dv-empty { + // > .dv-tabs-and-actions-container { + // display: none; + // } + // } > .dv-content-container { flex-grow: 1; diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index a377ed9ec..35677e252 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -787,7 +787,15 @@ export class DockviewGroupPanelModel } private doClose(panel: IDockviewPanel): void { - this.accessor.removePanel(panel); + const isLast = + this.panels.length === 1 && this.accessor.groups.length === 1; + + this.accessor.removePanel( + panel, + isLast && this.accessor.options.showEmptyGroupWhenHasNoPanels + ? { removeEmptyGroup: false } + : undefined + ); } public isPanelActive(panel: IDockviewPanel): boolean { @@ -973,14 +981,14 @@ export class DockviewGroupPanelModel } }); - this.tabsContainer.hide(); + // this.tabsContainer.hide(); this.contentContainer.element.appendChild(this.watermark.element); } if (!this.isEmpty && this.watermark) { this.watermark.element.remove(); this.watermark.dispose?.(); this.watermark = undefined; - this.tabsContainer.show(); + // this.tabsContainer.show(); } } diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index c1a429a08..620ce0fc6 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -59,6 +59,12 @@ export interface DockviewOptions { * Pixel gap between groups */ gap?: number; + /** + * Ensure the last group is not removed allowing for any group header components + * to remain in scope. When `false` or `undefined` the final group is removed and + * a `watermark` is rendered instead. + */ + showEmptyGroupWhenHasNoPanels?: boolean; } export interface DockviewDndOverlayEvent { @@ -111,6 +117,7 @@ export const PROPERTY_KEYS: (keyof DockviewOptions)[] = (() => { disableDnd: undefined, gap: undefined, className: undefined, + showEmptyGroupWhenHasNoPanels: undefined, }; return Object.keys(properties) as (keyof DockviewOptions)[];