feat: overflow tabs widget

mathuo · May 26, 2024 · 8221d9c · 8221d9c
1 parent 55d9ca3
commit 8221d9c
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
@@ -7,7 +7,7 @@ import { addDisposableListener, Emitter, Event } from '../../../events';
 import { Tab } from '../tab/tab';
 import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import { VoidContainer } from './voidContainer';
-import { toggleClass } from '../../../dom';
+import { OverflowObserver, toggleClass } from '../../../dom';
 import { DockviewPanel, IDockviewPanel } from '../../dockviewPanel';
 import { DockviewComponent } from '../../dockviewComponent';
 import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
@@ -196,6 +196,13 @@ export class TabsContainer
         this.tabContainer = document.createElement('div');
         this.tabContainer.className = 'tabs-container';
 
+        const tabsContainerOverflowObserver = new OverflowObserver(
+            this.tabContainer,
+            {
+                target: 'x',
+            }
+        );
+
         this.voidContainer = new VoidContainer(this.accessor, this.group);
 
         this._element.appendChild(this.preActionsContainer);
@@ -205,6 +212,10 @@ export class TabsContainer
         this._element.appendChild(this.rightActionsContainer);
 
         this.addDisposables(
+            tabsContainerOverflowObserver,
+            tabsContainerOverflowObserver.onDidChange((e) => {
+                console.log('overflow', e);
+            }),
             this.accessor.onDidAddPanel((e) => {
                 if (e.api.group === this.group) {
                     toggleClass(

diff --git a/packages/dockview-core/src/dom.ts b/packages/dockview-core/src/dom.ts
@@ -6,6 +6,54 @@ import {
 } from './events';
 import { IDisposable, CompositeDisposable } from './lifecycle';
 
+export interface OverflowEvent {
+    hasScrollX: boolean;
+    hasScrollY: boolean;
+}
+
+export class OverflowObserver extends CompositeDisposable {
+    private readonly _onDidChange = new Emitter<OverflowEvent>();
+    readonly onDidChange = this._onDidChange.event;
+
+    private _value: OverflowEvent | null = null;
+
+    constructor(
+        el: HTMLElement,
+        options: {
+            target: 'x' | 'y' | 'xy';
+        }
+    ) {
+        super();
+
+        this.addDisposables(
+            this._onDidChange,
+            watchElementResize(el, (entry) => {
+                let hasScrollX = false;
+                let hasScrollY = false;
+
+                if (options.target === 'x' || options.target === 'xy') {
+                    hasScrollX =
+                        entry.target.scrollWidth > entry.target.clientWidth;
+                }
+
+                if (options.target === 'y' || options.target === 'xy') {
+                    hasScrollY =
+                        entry.target.scrollHeight > entry.target.clientHeight;
+                }
+
+                if (
+                    !this._value ||
+                    this._value.hasScrollX !== hasScrollX ||
+                    this._value.hasScrollY !== hasScrollY
+                ) {
+                    this._value = { hasScrollX, hasScrollY };
+                    this._onDidChange.fire(this._value);
+                }
+            })
+        );
+    }
+}
+
 export function watchElementResize(
     element: HTMLElement,
     cb: (entry: ResizeObserverEntry) => void