experiments

packages/dockview-core/src/dockview/components/popupService.ts

@@ -0,0 +1,82 @@
+import { addDisposableWindowListener } from '../../events';
+import {
+    CompositeDisposable,
+    Disposable,
+    MutableDisposable,
+} from '../../lifecycle';
+
+export class PopupService extends CompositeDisposable {
+    private readonly _element: HTMLElement;
+    private _active: HTMLElement | null = null;
+    private _activeDisposable = new MutableDisposable();
+
+    constructor(private readonly root: HTMLElement) {
+        super();
+
+        this._element = document.createElement('div');
+        this._element.className = 'dv-popover-anchor';
+        this._element.style.position = 'relative';
+
+        this.root.prepend(this._element);
+
+        this.addDisposables(
+            Disposable.from(() => {
+                this.close();
+            }),
+            this._activeDisposable
+        );
+    }
+
+    openPopover(
+        element: HTMLElement,
+        position: { x: number; y: number }
+    ): void {
+        this.close();
+
+        const wrapper = document.createElement('div');
+        wrapper.style.position = 'absolute';
+        wrapper.style.zIndex = '99';
+        wrapper.appendChild(element);
+
+        const anchorBox = this._element.getBoundingClientRect();
+        const offsetX = anchorBox.left;
+        const offsetY = anchorBox.top;
+
+        wrapper.style.top = `${position.y - offsetY}px`;
+        wrapper.style.left = `${position.x - offsetX}px`;
+
+        this._element.appendChild(wrapper);
+
+        this._active = wrapper;
+
+        this._activeDisposable.value = new CompositeDisposable(
+            addDisposableWindowListener(window, 'pointerdown', (event) => {
+                const target = event.target;
+
+                if (!(target instanceof HTMLElement)) {
+                    return;
+                }
+
+                let el: HTMLElement | null = target;
+
+                while (el && el !== wrapper) {
+                    el = el?.parentElement ?? null;
+                }
+
+                if (el) {
+                    return; // clicked within popover
+                }
+
+                this.close();
+            })
+        );
+    }
+
+    close(): void {
+        if (this._active) {
+            this._active.remove();
+            this._activeDisposable.dispose();
+            this._active = null;
+        }
+    }
+}

packages/dockview-core/src/dockview/components/titlebar/tabPanel.scss

@@ -0,0 +1,43 @@
+.dv-tabs-container {
+    display: flex;
+    overflow-x: overlay;
+    overflow-y: hidden;
+    height: 100%;
+
+    scrollbar-width: thin; // firefox
+
+    &::-webkit-scrollbar {
+        height: 3px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: var(--dv-tabs-container-scrollbar-color);
+    }
+
+    .dv-tab {
+        -webkit-user-drag: element;
+        outline: none;
+        min-width: 75px;
+        cursor: pointer;
+        position: relative;
+        box-sizing: border-box;
+
+        &:not(:first-child)::before {
+            content: ' ';
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 5;
+            pointer-events: none;
+            background-color: var(--dv-tab-divider-color);
+            width: 1px;
+            height: 100%;
+        }
+    }
+}

packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss

@@ -7,65 +7,22 @@
     font-size: var(--dv-tabs-and-actions-container-font-size);
 
     &.dv-single-tab.dv-full-width-single-tab {
-      .dv-tabs-container {
-          flex-grow: 1;
-
-          .dv-tab {
+        .dv-tabs-container {
             flex-grow: 1;
-          }
-      }
 
-      .dv-void-container {
-        flex-grow: 0;
-      }
+            .dv-tab {
+                flex-grow: 1;
+            }
+        }
+
+        .dv-void-container {
+            flex-grow: 0;
+        }
     }
 
     .dv-void-container {
         display: flex;
         flex-grow: 1;
         cursor: grab;
     }
-
-    .dv-tabs-container {
-        display: flex;
-        overflow-x: overlay;
-        overflow-y: hidden;
-
-        scrollbar-width: thin; // firefox
-
-        &::-webkit-scrollbar {
-            height: 3px;
-        }
-
-        /* Track */
-        &::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        /* Handle */
-        &::-webkit-scrollbar-thumb {
-            background: var(--dv-tabs-container-scrollbar-color);
-        }
-
-        .dv-tab {
-            -webkit-user-drag: element;
-            outline: none;
-            min-width: 75px;
-            cursor: pointer;
-            position: relative;
-            box-sizing: border-box;
-
-            &:not(:first-child)::before {
-                content: ' ';
-                position: absolute;
-                top: 0;
-                left: 0;
-                z-index: 5;
-                pointer-events: none;
-                background-color: var(--dv-tab-divider-color);
-                width: 1px;
-                height: 100%;
-            }
-        }
-    }
 }