diff --git a/packages/dockview-core/src/__tests__/dockview/components/watermark/watermark.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/watermark/watermark.spec.ts deleted file mode 100644 index 92797f0e9..000000000 --- a/packages/dockview-core/src/__tests__/dockview/components/watermark/watermark.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { DockviewApi } from '../../../../api/component.api'; -import { Watermark } from '../../../../dockview/components/watermark/watermark'; -import { fromPartial } from '@total-typescript/shoehorn'; - -describe('watermark', () => { - test('that the group is closed when the close button is clicked', () => { - const cut = new Watermark(); - const api = fromPartial({ - removeGroup: jest.fn(), - }); - const group = jest.fn() as any; - - cut.init({ containerApi: api, group }); - - const closeEl = cut.element.querySelector('.dv-close-action')!; - - expect(closeEl).toBeTruthy(); - - closeEl.dispatchEvent(new Event('click')); - - expect(api.removeGroup).toHaveBeenCalledWith(group); - }); -}); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts index d9b6d4bfb..55aed39ec 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts @@ -9,39 +9,20 @@ import { } from '../../dockview/types'; import { PanelUpdateEvent, Parameters } from '../../panel/types'; import { - DockviewGroupLocation, DockviewGroupPanelModel, GroupOptions, } from '../../dockview/dockviewGroupPanelModel'; import { fireEvent } from '@testing-library/dom'; import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer'; import { CompositeDisposable } from '../../lifecycle'; -import { - ActiveGroupEvent, - DockviewPanelApi, - GroupChangedEvent, - RendererChangedEvent, -} from '../../api/dockviewPanelApi'; +import { DockviewPanelApi } from '../../api/dockviewPanelApi'; import { IDockviewPanel } from '../../dockview/dockviewPanel'; import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel'; import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; import { WatermarkRendererInitParameters } from '../../dockview/types'; import { createOffsetDragOverEvent } from '../__test_utils__/utils'; -import { - DockviewPanelRenderer, - OverlayRenderContainer, -} from '../../overlay/overlayRenderContainer'; -import { DockviewGroupPanelFloatingChangeEvent } from '../../api/dockviewGroupPanelApi'; -import { SizeEvent } from '../../api/gridviewPanelApi'; -import { - PanelDimensionChangeEvent, - FocusEvent, - VisibilityEvent, - ActiveEvent, - WillFocusEvent, -} from '../../api/panelApi'; -import { Position } from '../../dnd/droptarget'; -import { Emitter, Event } from '../../events'; +import { OverlayRenderContainer } from '../../overlay/overlayRenderContainer'; +import { Emitter } from '../../events'; import { fromPartial } from '@total-typescript/shoehorn'; enum GroupChangeKind2 { @@ -513,14 +494,14 @@ describe('dockviewGroupPanelModel', () => { groupview.model.closeAllPanels(); - expect(removePanelMock).toBeCalledWith(panel1); - expect(removePanelMock).toBeCalledWith(panel2); - expect(removePanelMock).toBeCalledWith(panel3); + expect(removePanelMock).toHaveBeenCalledWith(panel1, undefined); + expect(removePanelMock).toHaveBeenCalledWith(panel2, undefined); + expect(removePanelMock).toHaveBeenCalledWith(panel3, undefined); }); test('closeAllPanels with no panels', () => { groupview.model.closeAllPanels(); - expect(removeGroupMock).toBeCalledWith(groupview); + expect(removeGroupMock).toHaveBeenCalledWith(groupview); }); test('that group is set on panel during onDidAddPanel event', () => { 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 add3a6a50..260109930 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -1662,11 +1662,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..d452917f2 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanel.scss +++ b/packages/dockview-core/src/dockview/dockviewGroupPanel.scss @@ -9,12 +9,6 @@ outline: none; } - &.dv-empty { - > .dv-tabs-and-actions-container { - display: none; - } - } - > .dv-content-container { flex-grow: 1; min-height: 0; diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index 55b76585e..17af6e573 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.noPanelsOverlay === 'emptyGroup' + ? { removeEmptyGroup: false } + : undefined + ); } public isPanelActive(panel: IDockviewPanel): boolean { @@ -955,8 +963,6 @@ export class DockviewGroupPanelModel } private updateContainer(): void { - toggleClass(this.container, 'dv-empty', this.isEmpty); - this.panels.forEach((panel) => panel.runEvents()); if (this.isEmpty && !this.watermark) { @@ -973,14 +979,12 @@ export class DockviewGroupPanelModel } }); - 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(); } } diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index c1a429a08..3e87923a2 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -59,6 +59,10 @@ export interface DockviewOptions { * Pixel gap between groups */ gap?: number; + /** + * Define the behaviour of the dock when there are no panels to display. Defaults to `watermark`. + */ + noPanelsOverlay?: 'emptyGroup' | 'watermark'; } export interface DockviewDndOverlayEvent { @@ -111,6 +115,7 @@ export const PROPERTY_KEYS: (keyof DockviewOptions)[] = (() => { disableDnd: undefined, gap: undefined, className: undefined, + noPanelsOverlay: undefined, }; return Object.keys(properties) as (keyof DockviewOptions)[];