mathuo · mathuo · Jan 6, 2025
diff --git a/packages/dockview-core/src/dockview/components/popupService.ts b/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;
+        }
+    }
+}
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabs.scss b/packages/dockview-core/src/dockview/components/titlebar/tabs.scss
@@ -0,0 +1,42 @@
+.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%;
+        }
+    }
+}
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabs.tsx b/packages/dockview-core/src/dockview/components/titlebar/tabs.tsx
@@ -0,0 +1,263 @@
+import { getPanelData } from '../../../dnd/dataTransfer';
+import { OverflowObserver } from '../../../dom';
+import { addDisposableListener, Emitter, Event } from '../../../events';
+import {
+    CompositeDisposable,
+    Disposable,
+    IValueDisposable,
+} from '../../../lifecycle';
+import { DockviewComponent } from '../../dockviewComponent';
+import { DockviewGroupPanel } from '../../dockviewGroupPanel';
+import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
+import { DockviewPanel, IDockviewPanel } from '../../dockviewPanel';
+import { Tab } from '../tab/tab';
+import { TabDragEvent, TabDropIndexEvent } from './tabsContainer';
+
+export class Tabs extends CompositeDisposable {
+    private readonly _element: HTMLElement;
+    private readonly _tabsList: HTMLElement;
+
+    private tabs: IValueDisposable<Tab>[] = [];
+    private selectedIndex = -1;
+    private _hasOverflow = false;
+    private _dropdownAnchor: HTMLElement | null = null;
+
+    private readonly _onTabDragStart = new Emitter<TabDragEvent>();
+    readonly onTabDragStart: Event<TabDragEvent> = this._onTabDragStart.event;
+
+    private readonly _onDrop = new Emitter<TabDropIndexEvent>();
+    readonly onDrop: Event<TabDropIndexEvent> = this._onDrop.event;
+
+    private readonly _onWillShowOverlay =
+        new Emitter<WillShowOverlayLocationEvent>();
+    readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent> =
+        this._onWillShowOverlay.event;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    get panels(): string[] {
+        return this.tabs.map((_) => _.value.panel.id);
+    }
+
+    get size(): number {
+        return this.tabs.length;
+    }
+
+    constructor(
+        private readonly group: DockviewGroupPanel,
+        private readonly accessor: DockviewComponent
+    ) {
+        super();
+
+        this._element = document.createElement('div');
+        this._element.className = 'dv-tabs-panel';
+        this._element.style.display = 'flex';
+        this._element.style.overflow = 'auto';
+        this._tabsList = document.createElement('div');
+        this._tabsList.className = 'dv-tabs-container';
+        this._element.appendChild(this._tabsList);
+
+        const observer = new OverflowObserver(this._tabsList);
+
+        this.addDisposables(
+            observer,
+            observer.onDidChange((event) => {
+                const hasOverflow = event.hasScrollX || event.hasScrollY;
+                if (this._hasOverflow !== hasOverflow) {
+                    this.toggleDropdown(hasOverflow);
+                }
+            }),
+            addDisposableListener(this.element, 'pointerdown', (event) => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+
+                const isLeftClick = event.button === 0;
+
+                if (isLeftClick) {
+                    this.accessor.doSetGroupActive(this.group);
+                }
+            }),
+            Disposable.from(() => {
+                for (const { value, disposable } of this.tabs) {
+                    disposable.dispose();
+                    value.dispose();
+                }
+
+                this.tabs = [];
+            })
+        );
+    }
+
+    indexOf(id: string): number {
+        return this.tabs.findIndex((tab) => tab.value.panel.id === id);
+    }
+
+    isActive(tab: Tab): boolean {
+        return (
+            this.selectedIndex > -1 &&
+            this.tabs[this.selectedIndex].value === tab
+        );
+    }
+
+    setActivePanel(panel: IDockviewPanel): void {
+        this.tabs.forEach((tab) => {
+            const isActivePanel = panel.id === tab.value.panel.id;
+            tab.value.setActive(isActivePanel);
+        });
+    }
+
+    openPanel(panel: IDockviewPanel, index: number = this.tabs.length): void {
+        if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
+            return;
+        }
+        const tab = new Tab(panel, this.accessor, this.group);
+        tab.setContent(panel.view.tab);
+
+        const disposable = new CompositeDisposable(
+            tab.onDragStart((event) => {
+                this._onTabDragStart.fire({ nativeEvent: event, panel });
+            }),
+            tab.onChanged((event) => {
+                const isFloatingGroupsEnabled =
+                    !this.accessor.options.disableFloatingGroups;
+
+                const isFloatingWithOnePanel =
+                    this.group.api.location.type === 'floating' &&
+                    this.size === 1;
+
+                if (
+                    isFloatingGroupsEnabled &&
+                    !isFloatingWithOnePanel &&
+                    event.shiftKey
+                ) {
+                    event.preventDefault();
+
+                    const panel = this.accessor.getGroupPanel(tab.panel.id);
+
+                    const { top, left } = tab.element.getBoundingClientRect();
+                    const { top: rootTop, left: rootLeft } =
+                        this.accessor.element.getBoundingClientRect();
+
+                    this.accessor.addFloatingGroup(panel as DockviewPanel, {
+                        x: left - rootLeft,
+                        y: top - rootTop,
+                        inDragMode: true,
+                    });
+                    return;
+                }
+
+                const isLeftClick = event.button === 0;
+
+                if (!isLeftClick || event.defaultPrevented) {
+                    return;
+                }
+
+                if (this.group.activePanel !== panel) {
+                    this.group.model.openPanel(panel);
+                }
+            }),
+            tab.onDrop((event) => {
+                this._onDrop.fire({
+                    event: event.nativeEvent,
+                    index: this.tabs.findIndex((x) => x.value === tab),
+                });
+            }),
+            tab.onWillShowOverlay((event) => {
+                this._onWillShowOverlay.fire(
+                    new WillShowOverlayLocationEvent(event, {
+                        kind: 'tab',
+                        panel: this.group.activePanel,
+                        api: this.accessor.api,
+                        group: this.group,
+                        getData: getPanelData,
+                    })
+                );
+            })
+        );
+
+        const value: IValueDisposable<Tab> = { value: tab, disposable };
+
+        this.addTab(value, index);
+    }
+
+    delete(id: string): void {
+        const index = this.indexOf(id);
+        const tabToRemove = this.tabs.splice(index, 1)[0];
+
+        const { value, disposable } = tabToRemove;
+
+        disposable.dispose();
+        value.dispose();
+        value.element.remove();
+    }
+
+    private addTab(
+        tab: IValueDisposable<Tab>,
+        index: number = this.tabs.length
+    ): void {
+        if (index < 0 || index > this.tabs.length) {
+            throw new Error('invalid location');
+        }
+
+        this._tabsList.insertBefore(
+            tab.value.element,
+            this._tabsList.children[index]
+        );
+
+        this.tabs = [
+            ...this.tabs.slice(0, index),
+            tab,
+            ...this.tabs.slice(index),
+        ];
+
+        if (this.selectedIndex < 0) {
+            this.selectedIndex = index;
+        }
+    }
+
+    private toggleDropdown(show: boolean): void {
+        this._hasOverflow = show;
+        if (this._dropdownAnchor) {
+            this._dropdownAnchor.remove();
+            this._dropdownAnchor = null;
+        }
+
+        if (!show) {
+            return;
+        }
+
+        this._dropdownAnchor = document.createElement('div');
+        this._dropdownAnchor.style.width = '10px';
+        this._dropdownAnchor.style.height = '100%';
+        this._dropdownAnchor.style.flexShrink = '0';
+        this._dropdownAnchor.style.backgroundColor = 'red';
+
+        this.element.appendChild(this._dropdownAnchor);
+
+        addDisposableListener(this._dropdownAnchor, 'click', (event) => {
+            const el = document.createElement('div');
+            el.style.width = '200px';
+            el.style.maxHeight = '600px';
+            el.style.overflow = 'auto';
+            el.style.backgroundColor = 'lightgreen';
+
+            this.tabs.map((tab) => {
+                const tab2 = new Tab(
+                    tab.value.panel,
+                    this.accessor,
+                    this.group
+                );
+                tab2.setContent(tab.value.panel.view.newTab);
+                el.appendChild(tab2.element);
+            });
+
+            this.accessor.popupService.openPopover(el, {
+                x: event.clientX,
+                y: event.clientY,
+            });
+        });
+    }
+}