Merge pull request #855 from mathuo/853-middle-button-click---closes-…

…tabs-with-hideclose conditional middle-btn tab close
mathuo · Feb 9, 2025 · 98cbe37 · 98cbe37
2 parents 8ed0fb5 + d8da2f2
commit 98cbe37
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 15 deletions.
diff --git a/packages/dockview-core/src/dockview/components/tab/tab.ts b/packages/dockview-core/src/dockview/components/tab/tab.ts
@@ -49,8 +49,8 @@ export class Tab extends CompositeDisposable {
     private readonly dropTarget: Droptarget;
     private content: ITabRenderer | undefined = undefined;
 
-    private readonly _onChanged = new Emitter<MouseEvent>();
-    readonly onChanged: Event<MouseEvent> = this._onChanged.event;
+    private readonly _onPointDown = new Emitter<MouseEvent>();
+    readonly onPointerDown: Event<MouseEvent> = this._onPointDown.event;
 
     private readonly _onDropped = new Emitter<DroptargetEvent>();
     readonly onDrop: Event<DroptargetEvent> = this._onDropped.event;
@@ -117,19 +117,15 @@ export class Tab extends CompositeDisposable {
         this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
 
         this.addDisposables(
-            this._onChanged,
+            this._onPointDown,
             this._onDropped,
             this._onDragStart,
             dragHandler.onDragStart((event) => {
                 this._onDragStart.fire(event);
             }),
             dragHandler,
             addDisposableListener(this._element, 'pointerdown', (event) => {
-                if (event.defaultPrevented) {
-                    return;
-                }
-
-                this._onChanged.fire(event);
+                this._onPointDown.fire(event);
             }),
             this.dropTarget.onDrop((event) => {
                 this._onDropped.fire(event);

diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
@@ -317,7 +317,7 @@ export class TabsContainer
             tab.onDragStart((event) => {
                 this._onTabDragStart.fire({ nativeEvent: event, panel });
             }),
-            tab.onChanged((event) => {
+            tab.onPointerDown((event) => {
                 if (event.defaultPrevented) {
                     return;
                 }
@@ -356,9 +356,6 @@ export class TabsContainer
                             this.group.model.openPanel(panel);
                         }
                         break;
-                    case 1: // middle click
-                        panel.api.close();
-                        break;
                 }
             }),
             tab.onDrop((event) => {

diff --git a/packages/dockview/src/dockview/defaultTab.tsx b/packages/dockview/src/dockview/defaultTab.tsx
@@ -32,10 +32,15 @@ export const DockviewDefaultTab: React.FunctionComponent<
     params: _params,
     hideClose,
     closeActionOverride,
+    onPointerDown,
+    onPointerUp,
+    onPointerLeave,
     ...rest
 }) => {
     const title = useTitle(api);
 
+    const isMiddleMouseButton = React.useRef<boolean>(false);
+
     const onClose = React.useCallback(
         (event: React.MouseEvent<HTMLSpanElement>) => {
             event.preventDefault();
@@ -49,21 +54,52 @@ export const DockviewDefaultTab: React.FunctionComponent<
         [api, closeActionOverride]
     );
 
-    const onPointerDown = React.useCallback((e: React.MouseEvent) => {
-        e.preventDefault();
+    const onBtnPointerDown = React.useCallback((event: React.MouseEvent) => {
+        event.preventDefault();
     }, []);
 
+    const _onPointerDown = React.useCallback(
+        (event: React.PointerEvent<HTMLDivElement>) => {
+            isMiddleMouseButton.current = event.button === 1;
+            onPointerDown?.(event);
+        },
+        [onPointerDown]
+    );
+
+    const _onPointerUp = React.useCallback(
+        (event: React.PointerEvent<HTMLDivElement>) => {
+            if (isMiddleMouseButton && event.button === 1 && !hideClose) {
+                isMiddleMouseButton.current = false;
+                onClose(event);
+            }
+
+            onPointerUp?.(event);
+        },
+        [onPointerUp, onClose, hideClose]
+    );
+
+    const _onPointerLeave = React.useCallback(
+        (event: React.PointerEvent<HTMLDivElement>) => {
+            isMiddleMouseButton.current = false;
+            onPointerLeave?.(event);
+        },
+        [onPointerLeave]
+    );
+
     return (
         <div
             data-testid="dockview-dv-default-tab"
             {...rest}
+            onPointerDown={_onPointerDown}
+            onPointerUp={_onPointerUp}
+            onPointerLeave={_onPointerLeave}
             className="dv-default-tab"
         >
             <span className="dv-default-tab-content">{title}</span>
             {!hideClose && (
                 <div
                     className="dv-default-tab-action"
-                    onPointerDown={onPointerDown}
+                    onPointerDown={onBtnPointerDown}
                     onClick={onClose}
                 >
                     <CloseButton />