Merge pull request #127 from mathuo/126-remove-dockview-ontabcontextmenu

feat: remove onTabContextMenu and add a default tab option

packages/dockview/src/__tests__/dockview/dockviewGroupPanel.spec.ts

@@ -24,7 +24,7 @@ describe('dockviewGroupPanel', () => {
 
         let latestTitle: string | undefined = undefined;
 
-        const disposable = cut.api.titleChanged((event) => {
+        const disposable = cut.api.onDidTitleChange((event) => {
             latestTitle = event.title;
         });
 
@@ -59,7 +59,7 @@ describe('dockviewGroupPanel', () => {
 
         let latestSuppressClosable: boolean | undefined = undefined;
 
-        const disposable = cut.api.suppressClosableChanged((event) => {
+        const disposable = cut.api.onDidSuppressClosableChange((event) => {
             latestSuppressClosable = event.suppressClosable;
         });
 
@@ -101,6 +101,7 @@ describe('dockviewGroupPanel', () => {
             return {
                 init: jest.fn(),
                 dispose: jest.fn(),
+                update: jest.fn(),
             } as any;
         });
         const view = new viewMock();

packages/dockview/src/api/groupPanelApi.ts

@@ -1,4 +1,4 @@
-import { Emitter } from '../events';
+import { Emitter, Event } from '../events';
 import { GridviewPanelApiImpl, GridviewPanelApi } from './gridviewPanelApi';
 import { IDockviewPanel } from '../groupview/groupPanel';
 import { GroupPanel } from '../groupview/groupviewPanel';
@@ -21,6 +21,9 @@ export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible'> {
     readonly isGroupActive: boolean;
     readonly title: string;
     readonly suppressClosable: boolean;
+    readonly onDidActiveGroupChange: Event<void>;
+    readonly onDidGroupChange: Event<void>;
+    readonly onDidSuppressClosableChange: Event<SuppressClosableEvent>;
     close(): void;
     setTitle(title: string): void;
 }
@@ -34,11 +37,10 @@ export class DockviewPanelApiImpl
     readonly _onDidTitleChange = new Emitter<TitleEvent>();
     readonly onDidTitleChange = this._onDidTitleChange.event;
 
-    readonly _titleChanged = new Emitter<TitleEvent>();
+    readonly _onDidSuppressClosableChange =
-    readonly titleChanged = this._titleChanged.event;
+        new Emitter<SuppressClosableEvent>();
-
+    readonly onDidSuppressClosableChange =
-    readonly _suppressClosableChanged = new Emitter<SuppressClosableEvent>();
+        this._onDidSuppressClosableChange.event;
-    readonly suppressClosableChanged = this._suppressClosableChanged.event;
 
     private readonly _onDidActiveGroupChange = new Emitter<void>();
     readonly onDidActiveGroupChange = this._onDidActiveGroupChange.event;
@@ -89,8 +91,7 @@ export class DockviewPanelApiImpl
         this.addDisposables(
             this.disposable,
             this._onDidTitleChange,
-            this._titleChanged,
+            this._onDidSuppressClosableChange,
-            this._suppressClosableChanged,
             this._onDidGroupChange,
             this._onDidActiveGroupChange
         );

packages/dockview/src/dockview/dockviewComponent.ts

@@ -24,7 +24,6 @@ import {
   AddPanelOptions,
   DockviewComponentOptions,
   MovementOptions,
-  TabContextMenuEvent,
 } from './options';
 import {
   BaseGrid,
@@ -32,7 +31,6 @@ import {
   toTarget,
 } from '../gridview/baseComponentGridview';
 import { DockviewApi } from '../api/component.api';
-import { LayoutMouseEvent, MouseEventKind } from '../groupview/tab';
 import { Orientation } from '../splitview/core/splitview';
 import { DefaultTab } from './components/tab/defaultTab';
 import {
@@ -106,7 +104,6 @@ export interface IDockviewComponent extends IBaseGrid<GroupPanel> {
     addEmptyGroup(options?: AddGroupOptions): void;
     closeAllGroups(): void;
     // events
-    onTabContextMenu: Event<TabContextMenuEvent>;
     moveToNext(options?: MovementOptions): void;
     moveToPrevious(options?: MovementOptions): void;
     setActivePanel(panel: IDockviewPanel): void;
@@ -128,10 +125,6 @@ export class DockviewComponent
   private _api: DockviewApi;
   private _options: Exclude<DockviewComponentOptions, 'orientation'>;
 
-  private readonly _onTabContextMenu = new Emitter<TabContextMenuEvent>();
-  readonly onTabContextMenu: Event<TabContextMenuEvent> =
-      this._onTabContextMenu.event;
-
   private readonly _onDidDrop = new Emitter<DockviewDropEvent>();
   readonly onDidDrop: Event<DockviewDropEvent> = this._onDidDrop.event;
 
@@ -200,7 +193,6 @@ export class DockviewComponent
       });
 
       this.addDisposables(
-          this._onTabContextMenu,
           this._onDidDrop,
           Event.any(
               this.onDidAddPanel,
@@ -427,18 +419,6 @@ export class DockviewComponent
       }
   }
 
-  fireMouseEvent(event: LayoutMouseEvent): void {
-      if (event.kind === MouseEventKind.CONTEXT_MENU) {
-          if (event.tab && event.panel) {
-              this._onTabContextMenu.fire({
-                  event: event.event,
-                  api: this._api,
-                  panel: event.panel,
-              });
-          }
-      }
-  }
-
   addPanel(options: AddPanelOptions): IDockviewPanel {
       if (this.panels.find((_) => _.id === options.id)) {
           throw new Error(`panel with id ${options.id} already exists`);

packages/dockview/src/dockview/dockviewGroupPanel.ts

@@ -63,10 +63,6 @@ export class DockviewGroupPanel
         this.addDisposables(
             this.api.onActiveChange(() => {
                 accessor.setActivePanel(this);
-            }),
-            this.api.onDidTitleChange((event) => {
-                const title = event.title;
-                this.update({ params: { title } });
             })
         );
     }
@@ -107,7 +103,15 @@ export class DockviewGroupPanel
 
         if (didTitleChange) {
             this._title = title;
-            this.api._titleChanged.fire({ title: this.title });
+
+            this.view?.update({
+                params: {
+                    params: this._params,
+                    title: this.title,
+                    suppressClosable: this.suppressClosable,
+                },
+            });
+            this.api._onDidTitleChange.fire({ title });
         }
     }
 
@@ -117,7 +121,15 @@ export class DockviewGroupPanel
 
         if (didSuppressChangableClose) {
             this._suppressClosable = suppressClosable;
-            this.api._suppressClosableChanged.fire({
+
+            this.view?.update({
+                params: {
+                    params: this._params,
+                    title: this.title,
+                    suppressClosable: this.suppressClosable,
+                },
+            });
+            this.api._onDidSuppressClosableChange.fire({
                 suppressClosable: !!this.suppressClosable,
             });
         }
@@ -132,11 +144,19 @@ export class DockviewGroupPanel
         };
 
         if (typeof params.title === 'string') {
-            this.setTitle(params.title);
+            if (params.title !== this.title) {
+                this._title = params.title;
+                this.api._onDidTitleChange.fire({ title: this.title });
+            }
         }
 
         if (typeof params.suppressClosable === 'boolean') {
-            this.setSuppressClosable(params.suppressClosable);
+            if (params.suppressClosable !== this._suppressClosable) {
+                this._suppressClosable = params.suppressClosable;
+                this.api._onDidSuppressClosableChange.fire({
+                    suppressClosable: !!this.suppressClosable,
+                });
+            }
         }
 
         this.view?.update({

packages/dockview/src/groupview/tab.ts

@@ -16,7 +16,6 @@ import { DragHandler } from '../dnd/abstractDragHandler';
 
 export enum MouseEventKind {
     CLICK = 'CLICK',
-    CONTEXT_MENU = 'CONTEXT_MENU',
 }
 
 export interface LayoutMouseEvent {
@@ -106,12 +105,6 @@ export class Tab extends CompositeDisposable implements ITab {
                 event.stopPropagation();
 
                 this._onChanged.fire({ kind: MouseEventKind.CLICK, event });
-            }),
-            addDisposableListener(this._element, 'contextmenu', (event) => {
-                this._onChanged.fire({
-                    kind: MouseEventKind.CONTEXT_MENU,
-                    event,
-                });
             })
         );
 

packages/dockview/src/groupview/titlebar/tabsContainer.ts

@@ -264,7 +264,6 @@ export class TabsContainer
                 const alreadyFocused =
                     panel.id === this.group.model.activePanel?.id &&
                     this.group.model.isContentFocused;
-                this.accessor.fireMouseEvent({ ...event, panel, tab: true });
 
                 const isLeftClick = event.event.button === 0;
 

packages/dockview/src/react/dockview/dockview.tsx

@@ -9,7 +9,6 @@ import { ReactPanelDeserialzier } from '../deserializer';
 import {
     DockviewDndOverlayEvent,
     GroupPanelFrameworkComponentFactory,
-    TabContextMenuEvent,
 } from '../../dockview/options';
 import { DockviewPanelApi } from '../../api/groupPanelApi';
 import { ReactPortalStore, usePortalsLifecycle } from '../react';
@@ -63,7 +62,6 @@ export interface IDockviewReactProps {
     watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
     onReady: (event: DockviewReadyEvent) => void;
     tabHeight?: number;
-    onTabContextMenu?: (event: TabContextMenuEvent) => void;
     onDidDrop?: (event: DockviewDropEvent) => void;
     showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
     hideBorders?: boolean;
@@ -237,24 +235,6 @@ export const DockviewReact = React.forwardRef(
             });
         }, [props.tabComponents]);
 
-        React.useEffect(() => {
-            if (!props.onTabContextMenu || !dockviewRef.current) {
-                return () => {
-                    //noop
-                };
-            }
-
-            const disposable = dockviewRef.current.onTabContextMenu((event) => {
-                if (props.onTabContextMenu) {
-                    props.onTabContextMenu(event);
-                }
-            });
-
-            return () => {
-                disposable.dispose();
-            };
-        }, [props.onTabContextMenu]);
-
         React.useEffect(() => {
             if (!dockviewRef.current) {
                 return;