Merge pull request #1147 from mathuo/wip/tab-context-menu

feat: add tab context menu with getContextMenuItems callback

Author: mathuo

packages/dockview-angular/src/__tests__/dockview-context-menu.spec.ts

@@ -0,0 +1,152 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, Input, Type } from '@angular/core';
+import {
+    CreateContextMenuItemComponentOptions,
+    DockviewGroupPanel,
+    IDockviewPanel,
+    IContextMenuItemComponentProps,
+} from 'dockview-core';
+import { DockviewAngularComponent } from '../lib/dockview/dockview-angular.component';
+import { AngularRenderer } from '../lib/utils/angular-renderer';
+import { setupTestBed, getTestComponents } from './__test_utils__/test-helpers';
+
+@Component({
+    selector: 'test-context-menu-item',
+    template: '<div class="test-menu-item">My Item</div>',
+})
+class TestContextMenuItemComponent {}
+
+@Component({
+    selector: 'test-context-menu-item-with-inputs',
+    template: '<div></div>',
+})
+class TestContextMenuItemWithInputsComponent {
+    @Input() panel!: IDockviewPanel;
+    @Input() group!: DockviewGroupPanel;
+    @Input() api!: any;
+    @Input() close!: () => void;
+    @Input() componentProps?: object;
+}
+
+describe('DockviewAngularComponent – context menu', () => {
+    let component: DockviewAngularComponent;
+    let fixture: ComponentFixture<DockviewAngularComponent>;
+
+    beforeEach(async () => {
+        setupTestBed();
+        TestBed.overrideModule(
+            (await import('../lib/dockview-angular.module'))
+                .DockviewAngularModule,
+            {}
+        );
+        await TestBed.compileComponents();
+
+        fixture = TestBed.createComponent(DockviewAngularComponent);
+        component = fixture.componentInstance;
+        component.components = getTestComponents();
+    });
+
+    afterEach(() => {
+        component.getDockviewApi()?.dispose();
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    it('getTabContextMenuItems input is accepted without error', () => {
+        const getTabContextMenuItems = jest
+            .fn()
+            .mockReturnValue(['close', 'closeAll']);
+        component.getTabContextMenuItems = getTabContextMenuItems;
+
+        expect(() => component.ngOnInit()).not.toThrow();
+    });
+
+    it('createContextMenuItemComponent returns an AngularRenderer for a component', () => {
+        component.ngOnInit();
+
+        // Access the private method via casting to any
+        const frameworkOptions = (component as any).createFrameworkOptions();
+        const factory = frameworkOptions.createContextMenuItemComponent;
+
+        expect(factory).toBeDefined();
+
+        const renderer = factory({
+            id: 'test-id',
+            component: TestContextMenuItemComponent as Type<any>,
+        } as CreateContextMenuItemComponentOptions);
+
+        expect(renderer).toBeInstanceOf(AngularRenderer);
+    });
+
+    it('createContextMenuItemComponent returns undefined when no component provided', () => {
+        component.ngOnInit();
+
+        const frameworkOptions = (component as any).createFrameworkOptions();
+        const factory = frameworkOptions.createContextMenuItemComponent;
+
+        const renderer = factory({
+            id: 'test-id',
+            component: undefined,
+        } as CreateContextMenuItemComponentOptions);
+
+        expect(renderer).toBeUndefined();
+    });
+
+    it('AngularRenderer returned by factory can be initialised with context menu props', () => {
+        component.ngOnInit();
+
+        const frameworkOptions = (component as any).createFrameworkOptions();
+        const factory = frameworkOptions.createContextMenuItemComponent;
+
+        const renderer: AngularRenderer = factory({
+            id: 'test-id',
+            component: TestContextMenuItemComponent as Type<any>,
+        } as CreateContextMenuItemComponentOptions);
+
+        const props: IContextMenuItemComponentProps = {
+            panel: {} as any,
+            group: {} as any,
+            api: {} as any,
+            close: jest.fn(),
+        };
+
+        expect(() => renderer.init(props)).not.toThrow();
+        renderer.dispose();
+    });
+
+    it('forwards panel, group, close, and componentProps to the Angular component @Inputs', () => {
+        component.ngOnInit();
+
+        const frameworkOptions = (component as any).createFrameworkOptions();
+        const factory = frameworkOptions.createContextMenuItemComponent;
+
+        const renderer: AngularRenderer<TestContextMenuItemWithInputsComponent> =
+            factory({
+                id: 'test-id',
+                component: TestContextMenuItemWithInputsComponent as Type<any>,
+            } as CreateContextMenuItemComponentOptions);
+
+        const panel = {} as IDockviewPanel;
+        const group = {} as DockviewGroupPanel;
+        const closeFn = jest.fn();
+        const extraProps = { foo: 'bar' };
+
+        const props: IContextMenuItemComponentProps = {
+            panel,
+            group,
+            api: {} as any,
+            close: closeFn,
+            componentProps: extraProps,
+        };
+
+        renderer.init(props);
+
+        const instance = renderer.component!.instance;
+        expect(instance.panel).toBe(panel);
+        expect(instance.group).toBe(group);
+        expect(instance.close).toBe(closeFn);
+        expect(instance.componentProps).toBe(extraProps);
+
+        renderer.dispose();
+    });
+});

packages/dockview-angular/src/lib/dockview/dockview-angular.component.ts

@@ -26,8 +26,11 @@ import {
     DockviewFrameworkOptions,
     DockviewComponentOptions,
     TabAnimation,
+    GetTabContextMenuItemsParams,
+    ContextMenuItem,
 } from 'dockview-core';
 import { AngularFrameworkComponentFactory } from '../utils/component-factory';
+import { AngularRenderer } from '../utils/angular-renderer';
 import { AngularLifecycleManager } from '../utils/lifecycle-utils';
 
 export interface DockviewAngularOptions extends DockviewOptions {
@@ -38,6 +41,9 @@ export interface DockviewAngularOptions extends DockviewOptions {
     leftHeaderActionsComponent?: Type<any>;
     rightHeaderActionsComponent?: Type<any>;
     prefixHeaderActionsComponent?: Type<any>;
+    getTabContextMenuItems?: (
+        params: GetTabContextMenuItemsParams
+    ) => (ContextMenuItem | { component: Type<any> })[];
 }
 
 @Component({
@@ -87,6 +93,9 @@ export class DockviewAngularComponent implements OnInit, OnDestroy, OnChanges {
     @Input() disableAutoResizing?: boolean;
     @Input() singleTabMode?: 'fullwidth' | 'default';
     @Input() tabAnimation?: TabAnimation;
+    @Input() getTabContextMenuItems?: (
+        params: GetTabContextMenuItemsParams
+    ) => (ContextMenuItem | { component: Type<any> })[];
 
     @Output() ready = new EventEmitter<DockviewReadyEvent>();
     @Output() didDrop = new EventEmitter<DockviewDidDropEvent>();
@@ -222,6 +231,17 @@ export class DockviewAngularComponent implements OnInit, OnDestroy, OnChanges {
                       )!;
                   }
                 : undefined,
+            createContextMenuItemComponent: (options) => {
+                if (!options.component) {
+                    return undefined;
+                }
+                const renderer = new AngularRenderer({
+                    component: options.component as Type<any>,
+                    injector: this.injector,
+                    environmentInjector: this.environmentInjector,
+                });
+                return renderer;
+            },
         };
     }
 

packages/dockview-angular/src/lib/utils/angular-renderer.ts

@@ -38,10 +38,11 @@ export class AngularRenderer<T = any>
     }
 
     init(parameters: Parameters): void {
-        // Only forward params, api, and containerApi to the component
-        // (matching the React renderer). Other init parameters like
-        // 'title' are internal to the framework.
+        // Forward the known user-facing fields from panel/tab renderers
+        // and context menu item renderers. Other internal fields (e.g. 'title')
+        // are excluded here; update() further guards with `key in instance`.
         const filtered: Record<string, unknown> = {};
+        // Panel / tab renderer fields
         if ('params' in parameters) {
             filtered['params'] = parameters['params'];
         }
@@ -51,6 +52,19 @@ export class AngularRenderer<T = any>
         if ('containerApi' in parameters) {
             filtered['containerApi'] = parameters['containerApi'];
         }
+        // Context menu item renderer fields (IContextMenuItemComponentProps)
+        if ('panel' in parameters) {
+            filtered['panel'] = parameters['panel'];
+        }
+        if ('group' in parameters) {
+            filtered['group'] = parameters['group'];
+        }
+        if ('close' in parameters) {
+            filtered['close'] = parameters['close'];
+        }
+        if ('componentProps' in parameters) {
+            filtered['componentProps'] = parameters['componentProps'];
+        }
 
         if (this.componentRef) {
             this.update(filtered);
@@ -67,9 +81,7 @@ export class AngularRenderer<T = any>
         const instance = this.componentRef.instance as Record<string, unknown>;
 
         for (const key of Object.keys(params)) {
-            if (key in instance) {
-                instance[key] = params[key];
-            }
+            instance[key] = params[key];
         }
 
         // trigger change detection

packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts

@@ -267,6 +267,26 @@ describe('tab', () => {
         ).toBe(0);
     });
 
+    describe('contextmenu event', () => {
+        test('right-clicking a tab calls contextMenuController.show with the panel and group', () => {
+            const showMock = jest.fn();
+            const accessor = fromPartial<DockviewComponent>({
+                options: {},
+                contextMenuController: { show: showMock },
+            });
+
+            const panel = fromPartial<IDockviewPanel>({ id: 'panelId' });
+            const group = fromPartial<DockviewGroupPanel>({ id: 'groupId' });
+
+            const cut = new Tab(panel, accessor, group);
+
+            const event = new MouseEvent('contextmenu', { cancelable: true });
+            fireEvent(cut.element, event);
+
+            expect(showMock).toHaveBeenCalledWith(panel, group, event);
+        });
+    });
+
     describe('disableDnd option', () => {
         test('that tab is draggable by default (disableDnd not set)', () => {
             const accessor = fromPartial<DockviewComponent>({