From 9e9ce8a33473216cc419a88fed37db28738ba6e7 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Thu, 30 Jan 2025 13:43:53 +0000
Subject: [PATCH] feat: close tab with middle btn
---
.../src/dockview/components/tab/defaultTab.ts | 6 ------
.../components/titlebar/tabsContainer.ts | 21 ++++++++++++-------
packages/dockview/src/dockview/defaultTab.tsx | 16 --------------
3 files changed, 13 insertions(+), 30 deletions(-)
diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts
index 80c30be5d..205e4e562 100644
--- a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts
+++ b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts
@@ -29,12 +29,6 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
this._element.appendChild(this._content);
this._element.appendChild(this.action);
- this.addDisposables(
- addDisposableListener(this.action, 'pointerdown', (ev) => {
- ev.preventDefault();
- })
- );
-
this.render();
}
diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
index d3bd0568b..f697c4083 100644
--- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
+++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
@@ -314,6 +314,10 @@ export class TabsContainer
this._onTabDragStart.fire({ nativeEvent: event, panel });
}),
tab.onChanged((event) => {
+ if (event.defaultPrevented) {
+ return;
+ }
+
const isFloatingGroupsEnabled =
!this.accessor.options.disableFloatingGroups;
@@ -342,14 +346,15 @@ export class TabsContainer
return;
}
- const isLeftClick = event.button === 0;
-
- if (!isLeftClick || event.defaultPrevented) {
- return;
- }
-
- if (this.group.activePanel !== panel) {
- this.group.model.openPanel(panel);
+ switch (event.button) {
+ case 0: // left click or touch
+ if (this.group.activePanel !== panel) {
+ 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
index f1586fa83..d2801f40e 100644
--- a/packages/dockview/src/dockview/defaultTab.tsx
+++ b/packages/dockview/src/dockview/defaultTab.tsx
@@ -53,26 +53,10 @@ export const DockviewDefaultTab: React.FunctionComponent<
e.preventDefault();
}, []);
- const onClick = React.useCallback(
- (event: React.MouseEvent<HTMLDivElement>) => {
- if (event.defaultPrevented) {
- return;
- }
-
- api.setActive();
-
- if (rest.onClick) {
- rest.onClick(event);
- }
- },
- [api, rest.onClick]
- );
-
return (
<div
data-testid="dockview-dv-default-tab"
{...rest}
- onClick={onClick}
className="dv-default-tab"
>
<span className="dv-default-tab-content">{title}</span>