feat: ensure group always exists

mathuo · Dec 2, 2024 · cdd3db4 · cdd3db4
1 parent 25489bf
commit cdd3db4
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 98 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
+        hasGroupWhenEmpty: undefined,
     };
 
     return Object.keys(properties) as (keyof DockviewOptions)[];