Merge pull request #847 from mathuo/830-cannot-close-tab-with-middle-mouse-button

feat: close tab with middle btn

Author: mathuo

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();
     }
 

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

@@ -318,6 +318,10 @@ export class TabsContainer
                 this._onTabDragStart.fire({ nativeEvent: event, panel });
             }),
             tab.onChanged((event) => {
+                if (event.defaultPrevented) {
+                    return;
+                }
+
                 const isFloatingGroupsEnabled =
                     !this.accessor.options.disableFloatingGroups;
 
@@ -346,14 +350,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) => {

packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx

@@ -10,7 +10,9 @@ import { Disposable } from 'dockview-core/dist/cjs/lifecycle';
 describe('defaultTab', () => {
     test('has close button by default', async () => {
         const api = fromPartial<DockviewPanelApi>({
-            onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE),
+            onDidTitleChange: jest
+                .fn()
+                .mockImplementation(() => Disposable.NONE),
         });
         const containerApi = fromPartial<DockviewApi>({});
         const params = {};
@@ -30,7 +32,9 @@ describe('defaultTab', () => {
     test('that title is displayed', async () => {
         const api = fromPartial<DockviewPanelApi>({
             title: 'test_title',
-            onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE),
+            onDidTitleChange: jest
+                .fn()
+                .mockImplementation(() => Disposable.NONE),
         });
         const containerApi = fromPartial<DockviewApi>({});
         const params = {};
@@ -84,7 +88,9 @@ describe('defaultTab', () => {
 
     test('has no close button when hideClose=true', async () => {
         const api = fromPartial<DockviewPanelApi>({
-            onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE),
+            onDidTitleChange: jest
+                .fn()
+                .mockImplementation(() => Disposable.NONE),
         });
         const containerApi = fromPartial<DockviewApi>({});
         const params = {};
@@ -105,7 +111,9 @@ describe('defaultTab', () => {
     test('that settings closeActionOverride skips api.close()', async () => {
         const api = fromPartial<DockviewPanelApi>({
             close: jest.fn(),
-            onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE),
+            onDidTitleChange: jest
+                .fn()
+                .mockImplementation(() => Disposable.NONE),
         });
         const containerApi = fromPartial<DockviewApi>({});
         const params = {};
@@ -134,7 +142,9 @@ describe('defaultTab', () => {
     test('that clicking close calls api.close()', async () => {
         const api = fromPartial<DockviewPanelApi>({
             close: jest.fn(),
-            onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE),
+            onDidTitleChange: jest
+                .fn()
+                .mockImplementation(() => Disposable.NONE),
         });
         const containerApi = fromPartial<DockviewApi>({});
         const params = {};
@@ -158,7 +168,9 @@ describe('defaultTab', () => {
 
     test('has close button when hideClose=false', async () => {
         const api = fromPartial<DockviewPanelApi>({
-            onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE),
+            onDidTitleChange: jest
+                .fn()
+                .mockImplementation(() => Disposable.NONE),
         });
         const containerApi = fromPartial<DockviewApi>({});
         const params = {};
@@ -175,32 +187,4 @@ describe('defaultTab', () => {
         const element = await screen.getByTestId('dockview-dv-default-tab');
         expect(element.querySelector('.dv-default-tab-action')).toBeTruthy();
     });
-
-    test('that pointerDown on close button prevents panel becoming active', async () => {
-        const api = fromPartial<DockviewPanelApi>({
-            setActive: jest.fn(),
-            onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE),
-        });
-        const containerApi = fromPartial<DockviewApi>({});
-        const params = {};
-
-        render(
-            <DockviewDefaultTab
-                api={api}
-                containerApi={containerApi}
-                params={params}
-            />
-        );
-
-        const element = await screen.getByTestId('dockview-dv-default-tab');
-        const btn = element.querySelector(
-            '.dv-default-tab-action'
-        ) as HTMLElement;
-
-        fireEvent.pointerDown(btn);
-        expect(api.setActive).toHaveBeenCalledTimes(0);
-
-        fireEvent.click(element);
-        expect(api.setActive).toHaveBeenCalledTimes(1);
-    });
 });

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>