feat: left header actions

packages/dockview-core/src/__tests__/dockview/components/panel/content.spec.ts

@@ -1,14 +1,14 @@
 import { fireEvent } from '@testing-library/dom';
-import { Emitter, Event } from '../../../events';
+import { Emitter, Event } from '../../../../events';
-import { ContentContainer } from '../../../dockview/components/panel/content';
+import { ContentContainer } from '../../../../dockview/components/panel/content';
 import {
     GroupPanelContentPartInitParameters,
     IContentRenderer,
-} from '../../../dockview/types';
+} from '../../../../dockview/types';
-import { CompositeDisposable } from '../../../lifecycle';
+import { CompositeDisposable } from '../../../../lifecycle';
-import { PanelUpdateEvent } from '../../../panel/types';
+import { PanelUpdateEvent } from '../../../../panel/types';
-import { IDockviewPanel } from '../../../dockview/dockviewPanel';
+import { IDockviewPanel } from '../../../../dockview/dockviewPanel';
-import { IDockviewPanelModel } from '../../../dockview/dockviewPanelModel';
+import { IDockviewPanelModel } from '../../../../dockview/dockviewPanelModel';
 
 class TestContentRenderer
     extends CompositeDisposable

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

@@ -1,9 +1,9 @@
 import { fireEvent } from '@testing-library/dom';
-import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer';
+import { LocalSelectionTransfer, PanelTransfer } from '../../../dnd/dataTransfer';
-import { DockviewComponent } from '../../dockview/dockviewComponent';
+import { DockviewComponent } from '../../../dockview/dockviewComponent';
-import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
+import { DockviewGroupPanel } from '../../../dockview/dockviewGroupPanel';
-import { DockviewGroupPanelModel } from '../../dockview/dockviewGroupPanelModel';
+import { DockviewGroupPanelModel } from '../../../dockview/dockviewGroupPanelModel';
-import { Tab } from '../../dockview/components/tab/tab';
+import { Tab } from '../../../dockview/components/tab/tab';
 
 describe('tab', () => {
     test('that empty tab has inactive-tab class', () => {

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

@@ -1,13 +1,13 @@
-import { DockviewComponent } from '../../../dockview/dockviewComponent';
-import { TabsContainer } from '../../../dockview/components/titlebar/tabsContainer';
-import { fireEvent } from '@testing-library/dom';
 import {
     LocalSelectionTransfer,
     PanelTransfer,
-} from '../../../dnd/dataTransfer';
+} from '../../../../dnd/dataTransfer';
-import { TestPanel } from '../dockviewGroupPanelModel.spec';
+import { TabsContainer } from '../../../../dockview/components/titlebar/tabsContainer';
-import { DockviewGroupPanelModel } from '../../../dockview/dockviewGroupPanelModel';
+import { DockviewComponent } from '../../../../dockview/dockviewComponent';
-import { DockviewGroupPanel } from '../../../dockview/dockviewGroupPanel';
+import { DockviewGroupPanel } from '../../../../dockview/dockviewGroupPanel';
+import { DockviewGroupPanelModel } from '../../../../dockview/dockviewGroupPanelModel';
+import { fireEvent } from '@testing-library/dom';
+import { TestPanel } from '../../dockviewGroupPanelModel.spec';
 
 describe('tabsContainer', () => {
     test('that an external event does not render a drop target and calls through to the group mode', () => {
@@ -331,4 +331,136 @@ describe('tabsContainer', () => {
             cut.element.getElementsByClassName('drop-target-dropzone').length
         ).toBe(0);
     });
+
+    test('left actions', () => {
+        const accessorMock = jest.fn<DockviewComponent, []>(() => {
+            return (<Partial<DockviewComponent>>{
+                options: {},
+                onDidAddPanel: jest.fn(),
+                onDidRemovePanel: jest.fn(),
+            }) as DockviewComponent;
+        });
+
+        const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
+            return (<Partial<DockviewGroupPanel>>{}) as DockviewGroupPanel;
+        });
+
+        const accessor = new accessorMock();
+        const groupPanel = new groupPanelMock();
+
+        const cut = new TabsContainer(accessor, groupPanel);
+
+        let query = cut.element.querySelectorAll(
+            '.tabs-and-actions-container > .left-actions-container'
+        );
+
+        expect(query.length).toBe(1);
+        expect(query[0].children.length).toBe(0);
+
+        // add left action
+
+        const left = document.createElement('div');
+        left.className = 'test-left-actions-element';
+        cut.setLeftActionsElement(left);
+
+        query = cut.element.querySelectorAll(
+            '.tabs-and-actions-container > .left-actions-container'
+        );
+        expect(query.length).toBe(1);
+        expect(query[0].children.item(0)?.className).toBe(
+            'test-left-actions-element'
+        );
+        expect(query[0].children.length).toBe(1);
+
+        // add left action
+
+        const left2 = document.createElement('div');
+        left2.className = 'test-left-actions-element-2';
+        cut.setLeftActionsElement(left2);
+
+        query = cut.element.querySelectorAll(
+            '.tabs-and-actions-container > .left-actions-container'
+        );
+        expect(query.length).toBe(1);
+        expect(query[0].children.item(0)?.className).toBe(
+            'test-left-actions-element-2'
+        );
+        expect(query[0].children.length).toBe(1);
+
+        // remove left action
+
+        cut.setLeftActionsElement(undefined);
+        query = cut.element.querySelectorAll(
+            '.tabs-and-actions-container > .left-actions-container'
+        );
+
+        expect(query.length).toBe(1);
+        expect(query[0].children.length).toBe(0);
+    });
+
+    test('right actions', () => {
+        const accessorMock = jest.fn<DockviewComponent, []>(() => {
+            return (<Partial<DockviewComponent>>{
+                options: {},
+                onDidAddPanel: jest.fn(),
+                onDidRemovePanel: jest.fn(),
+            }) as DockviewComponent;
+        });
+
+        const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
+            return (<Partial<DockviewGroupPanel>>{}) as DockviewGroupPanel;
+        });
+
+        const accessor = new accessorMock();
+        const groupPanel = new groupPanelMock();
+
+        const cut = new TabsContainer(accessor, groupPanel);
+
+        let query = cut.element.querySelectorAll(
+            '.tabs-and-actions-container > .right-actions-container'
+        );
+
+        expect(query.length).toBe(1);
+        expect(query[0].children.length).toBe(0);
+
+        // add right action
+
+        const right = document.createElement('div');
+        right.className = 'test-right-actions-element';
+        cut.setRightActionsElement(right);
+
+        query = cut.element.querySelectorAll(
+            '.tabs-and-actions-container > .right-actions-container'
+        );
+        expect(query.length).toBe(1);
+        expect(query[0].children.item(0)?.className).toBe(
+            'test-right-actions-element'
+        );
+        expect(query[0].children.length).toBe(1);
+
+        // add right action
+
+        const right2 = document.createElement('div');
+        right2.className = 'test-right-actions-element-2';
+        cut.setRightActionsElement(right2);
+
+        query = cut.element.querySelectorAll(
+            '.tabs-and-actions-container > .right-actions-container'
+        );
+        expect(query.length).toBe(1);
+        expect(query[0].children.item(0)?.className).toBe(
+            'test-right-actions-element-2'
+        );
+        expect(query[0].children.length).toBe(1);
+
+        // remove right action
+
+        cut.setRightActionsElement(undefined);
+        query = cut.element.querySelectorAll(
+            '.tabs-and-actions-container > .right-actions-container'
+        );
+
+        expect(query.length).toBe(1);
+        expect(query[0].children.length).toBe(0);
+    });
 });

packages/dockview-core/src/dockview/components/tab/defaultTab.scss

@@ -46,5 +46,30 @@
             padding: 0px 8px;
             flex-grow: 1;
         }
+
+        .action-container {
+            text-align: right;
+            display: flex;
+
+            .tab-list {
+                display: flex;
+                padding: 0px;
+                margin: 0px;
+                justify-content: flex-end;
+
+                .tab-action {
+                    padding: 4px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    box-sizing: border-box;
+
+                    &:hover {
+                        border-radius: 2px;
+                        background-color: var(--dv-icon-hover-background-color);
+                    }
+                }
+            }
+        }
     }
 }

packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts

@@ -18,7 +18,7 @@ import {
 import { DockviewDropTargets, IWatermarkRenderer } from './types';
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { IDockviewPanel } from './dockviewPanel';
-import { IGroupControlRenderer } from './options';
+import { IHeaderActionsRenderer } from './options';
 
 export interface DndService {
     canDisplayOverlay(
@@ -137,8 +137,8 @@ export class DockviewGroupPanelModel
     private watermark?: IWatermarkRenderer;
     private _isGroupActive = false;
     private _locked = false;
-    private _control: IGroupControlRenderer | undefined;
+    private _rightHeaderActions: IHeaderActionsRenderer | undefined;
-    private _lhs: IGroupControlRenderer | undefined;
+    private _leftHeaderActions: IHeaderActionsRenderer | undefined;
 
     private mostRecentlyUsed: IDockviewPanel[] = [];
 
@@ -321,28 +321,33 @@ export class DockviewGroupPanelModel
         this.updateContainer();
 
         if (this.accessor.options.createRightHeaderActionsElement) {
-            this._control =
+            this._rightHeaderActions =
                 this.accessor.options.createRightHeaderActionsElement(
                     this.groupPanel
                 );
-            this.addDisposables(this._control);
+            this.addDisposables(this._rightHeaderActions);
-            this._control.init({
+            this._rightHeaderActions.init({
                 containerApi: new DockviewApi(this.accessor),
                 api: this.groupPanel.api,
             });
-            this.tabsContainer.setRightActionsElement(this._control.element);
+            this.tabsContainer.setRightActionsElement(
+                this._rightHeaderActions.element
+            );
         }
 
         if (this.accessor.options.createLeftHeaderActionsElement) {
-            this._lhs = this.accessor.options.createLeftHeaderActionsElement(
+            this._leftHeaderActions =
-                this.groupPanel
+                this.accessor.options.createLeftHeaderActionsElement(
-            );
+                    this.groupPanel
-            this.addDisposables(this._lhs);
+                );
-            this._lhs.init({
+            this.addDisposables(this._leftHeaderActions);
+            this._leftHeaderActions.init({
                 containerApi: new DockviewApi(this.accessor),
                 api: this.groupPanel.api,
             });
-            this.tabsContainer.setLeftActionsElement(this._lhs.element);
+            this.tabsContainer.setLeftActionsElement(
+                this._leftHeaderActions.element
+            );
         }
     }
 

packages/dockview-core/src/dockview/options.ts

@@ -19,7 +19,7 @@ import { Position } from '../dnd/droptarget';
 import { IDockviewPanel } from './dockviewPanel';
 import { FrameworkFactory } from '../panel/componentFactory';
 
-export interface IGroupControlRenderer extends IDisposable {
+export interface IHeaderActionsRenderer extends IDisposable {
     readonly element: HTMLElement;
     init(params: {
         containerApi: DockviewApi;
@@ -81,10 +81,10 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
     createRightHeaderActionsElement?: (
         group: DockviewGroupPanel
-    ) => IGroupControlRenderer;
+    ) => IHeaderActionsRenderer;
     createLeftHeaderActionsElement?: (
         group: DockviewGroupPanel
-    ) => IGroupControlRenderer;
+    ) => IHeaderActionsRenderer;
     singleTabMode?: 'fullwidth' | 'default';
     parentElement?: HTMLElement;
 }

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

@@ -3,9 +3,9 @@ import {
     DockviewGroupPanelApi,
     DockviewGroupPanelModel,
 } from 'dockview-core';
-import { ReactGroupControlsRendererPart } from '../../dockview/groupControlsRenderer';
+import { ReactHeaderActionsRendererPart } from '../../dockview/headerActionsRenderer';
 
-describe('groupControlsRenderer', () => {
+describe('headerActionsRenderer', () => {
     test('#1', () => {
         const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
             () => {
@@ -28,7 +28,7 @@ describe('groupControlsRenderer', () => {
 
         const groupPanel = new groupPanelMock() as DockviewGroupPanel;
 
-        const cut = new ReactGroupControlsRendererPart(
+        const cut = new ReactHeaderActionsRendererPart(
             jest.fn(),
             {
                 addPortal: jest.fn(),

packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts

@@ -3,9 +3,9 @@ import {
     DockviewGroupPanelApi,
     DockviewGroupPanelModel,
 } from 'dockview-core';
-import { ReactGroupControlsRendererPart } from '../../../dockview/groupControlsRenderer';
+import { ReactHeaderActionsRendererPart } from '../../../dockview/headerActionsRenderer';
 
-describe('groupControlsRenderer', () => {
+describe('headerActionsRenderer', () => {
     test('#1', () => {
         const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
             () => {
@@ -28,7 +28,7 @@ describe('groupControlsRenderer', () => {
 
         const groupPanel = new groupPanelMock() as DockviewGroupPanel;
 
-        const cut = new ReactGroupControlsRendererPart(
+        const cut = new ReactHeaderActionsRendererPart(
             jest.fn(),
             {
                 addPortal: jest.fn(),

packages/dockview/src/dockview/dockview.tsx

@@ -4,12 +4,12 @@ import {
     DockviewDropEvent,
     DockviewDndOverlayEvent,
     GroupPanelFrameworkComponentFactory,
-    IGroupControlRenderer,
     DockviewPanelApi,
     DockviewApi,
     IContentRenderer,
     ITabRenderer,
     DockviewGroupPanel,
+    IHeaderActionsRenderer,
 } from 'dockview-core';
 import { ReactPanelContentPart } from './reactContentPart';
 import { ReactPanelHeaderPart } from './reactHeaderPart';
@@ -18,17 +18,17 @@ import { ReactPortalStore, usePortalsLifecycle } from '../react';
 import { IWatermarkPanelProps, ReactWatermarkPart } from './reactWatermarkPart';
 import { PanelCollection, PanelParameters } from '../types';
 import {
-    IDockviewGroupControlProps,
+    IDockviewHeaderActionsProps,
-    ReactGroupControlsRendererPart,
+    ReactHeaderActionsRendererPart,
-} from './groupControlsRenderer';
+} from './headerActionsRenderer';
 
 function createGroupControlElement(
-    component: React.FunctionComponent<IDockviewGroupControlProps> | undefined,
+    component: React.FunctionComponent<IDockviewHeaderActionsProps> | undefined,
     store: ReactPortalStore
-): ((groupPanel: DockviewGroupPanel) => IGroupControlRenderer) | undefined {
+): ((groupPanel: DockviewGroupPanel) => IHeaderActionsRenderer) | undefined {
     return component
         ? (groupPanel: DockviewGroupPanel) => {
-              return new ReactGroupControlsRendererPart(
+              return new ReactHeaderActionsRendererPart(
                   component,
                   store,
                   groupPanel
@@ -65,8 +65,8 @@ export interface IDockviewReactProps {
     className?: string;
     disableAutoResizing?: boolean;
     defaultTabComponent?: React.FunctionComponent<IDockviewPanelHeaderProps>;
-    rightHeaderActionsComponent?: React.FunctionComponent<IDockviewGroupControlProps>;
+    rightHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
-    leftHeaderActionsComponent?: React.FunctionComponent<IDockviewGroupControlProps>;
+    leftHeaderActionsComponent?: React.FunctionComponent<IDockviewHeaderActionsProps>;
     singleTabMode?: 'fullwidth' | 'default';
 }
 

packages/dockview/src/dockview/headerActionsRenderer.ts

@@ -10,24 +10,25 @@ import {
     PanelUpdateEvent,
 } from 'dockview-core';
 
-export interface IDockviewGroupControlProps {
+export interface IDockviewHeaderActionsProps {
     api: DockviewGroupPanelApi;
     containerApi: DockviewApi;
     panels: IDockviewPanel[];
     activePanel: IDockviewPanel | undefined;
     isGroupActive: boolean;
+    group: DockviewGroupPanel;
 }
 
-export class ReactGroupControlsRendererPart {
+export class ReactHeaderActionsRendererPart {
     private mutableDisposable = new DockviewMutableDisposable();
     private _element: HTMLElement;
-    private _part?: ReactPart<IDockviewGroupControlProps>;
+    private _part?: ReactPart<IDockviewHeaderActionsProps>;
 
     get element(): HTMLElement {
         return this._element;
     }
 
-    get part(): ReactPart<IDockviewGroupControlProps> | undefined {
+    get part(): ReactPart<IDockviewHeaderActionsProps> | undefined {
         return this._part;
     }
 
@@ -36,7 +37,7 @@ export class ReactGroupControlsRendererPart {
     }
 
     constructor(
-        private readonly component: React.FunctionComponent<IDockviewGroupControlProps>,
+        private readonly component: React.FunctionComponent<IDockviewHeaderActionsProps>,
         private readonly reactPortalStore: ReactPortalStore,
         private readonly _group: DockviewGroupPanel
     ) {
@@ -77,6 +78,7 @@ export class ReactGroupControlsRendererPart {
                 panels: this._group.model.panels,
                 activePanel: this._group.model.activePanel,
                 isGroupActive: this._group.api.isActive,
+                group: this._group,
             }
         );
     }

packages/dockview/src/index.ts

@@ -4,7 +4,7 @@ export * from './dockview/dockview';
 export * from './dockview/defaultTab';
 export * from './splitview/splitview';
 export * from './gridview/gridview';
-export { IDockviewGroupControlProps } from './dockview/groupControlsRenderer';
+export { IDockviewHeaderActionsProps } from './dockview/headerActionsRenderer';
 export { IWatermarkPanelProps } from './dockview/reactWatermarkPart';
 export * from './paneview/paneview';
 export * from './types';

packages/docs/docs/components/dockview.mdx

@@ -649,11 +649,11 @@ panel.group.locked = true;
 
 ### Group Controls Panel
 
-`DockviewReact` accepts `leftHeaderActionsComponent` and `rightHeaderActionsComponent` which expect a React component with props `IDockviewGroupControlProps`.
+`DockviewReact` accepts `leftHeaderActionsComponent` and `rightHeaderActionsComponent` which expect a React component with props `IDockviewHeaderActionsProps`.
 These controls are rendered of the left and right side of the space to the right of the tabs in the header bar.
 
 ```tsx
-const Component: React.FunctionComponent<IDockviewGroupControlProps> = () => {
+const Component: React.FunctionComponent<IDockviewHeaderActionsProps> = () => {
     return <div>{'...'}</div>;
 };
 
@@ -664,7 +664,7 @@ As a simple example the below uses the `groupControlComponent` to render a small
 is active and which panel is active in that group.
 
 ```tsx
-const RightHeaderActionsComponent = (props: IDockviewGroupControlProps) => {
+const RightHeaderActionsComponent = (props: IDockviewHeaderActionsProps) => {
     const isGroupActive = props.isGroupActive;
     const activePanel = props.activePanel;
 

packages/docs/sandboxes/demo-dockview/src/app.tsx

@@ -4,7 +4,7 @@ import {
     DockviewReadyEvent,
     IDockviewPanelHeaderProps,
     IDockviewPanelProps,
-    IDockviewGroupControlProps,
+    IDockviewHeaderActionsProps,
 } from 'dockview';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -134,7 +134,7 @@ const groupControlsComponents = {
     },
 };
 
-const GroupControls = (props: IDockviewGroupControlProps) => {
+const RightControls = (props: IDockviewHeaderActionsProps) => {
     const Component = React.useMemo(() => {
         if (!props.isGroupActive || !props.activePanel) {
             return null;
@@ -161,6 +161,36 @@ const GroupControls = (props: IDockviewGroupControlProps) => {
     );
 };
 
+let counter = 0;
+
+const LeftControls = (props: IDockviewHeaderActionsProps) => {
+    const onClick = () => {
+        props.containerApi.addPanel({
+            id: `id_${Date.now().toString()}`,
+            component: 'default',
+            title: `Tab ${counter++}`,
+            position: {
+                referenceGroup: props.group,
+            },
+        });
+    };
+
+    return (
+        <div
+            className="group-control"
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0px 8px',
+                height: '100%',
+                color: 'var(--dv-activegroup-visiblepanel-tab-color)',
+            }}
+        >
+            <Icon onClick={onClick} icon="add" />
+        </div>
+    );
+};
+
 const DockviewDemo = () => {
     const onReady = (event: DockviewReadyEvent) => {
         event.api.addPanel({
@@ -196,8 +226,6 @@ const DockviewDemo = () => {
             title: 'Panel 6',
             position: { referencePanel: 'panel_4', direction: 'below' },
         });
-        panel6.group.locked = true;
-        panel6.group.header.hidden = true;
         event.api.addPanel({
             id: 'panel_7',
             component: 'default',
@@ -211,8 +239,6 @@ const DockviewDemo = () => {
             position: { referencePanel: 'panel_7', direction: 'within' },
         });
 
-        event.api.addGroup();
-
         event.api.getPanel('panel_1')!.api.setActive();
     };
 
@@ -220,7 +246,8 @@ const DockviewDemo = () => {
         <DockviewReact
             components={components}
             defaultTabComponent={headerComponents.default}
-            groupControlComponent={GroupControls}
+            rightHeaderActionsComponent={RightControls}
+            leftHeaderActionsComponent={LeftControls}
             onReady={onReady}
             className="dockview-theme-abyss"
         />

packages/docs/sandboxes/groupcontrol-dockview/src/app.tsx

@@ -1,7 +1,7 @@
 import {
     DockviewReact,
     DockviewReadyEvent,
-    IDockviewGroupControlProps,
+    IDockviewHeaderActionsProps,
     IDockviewPanelProps,
 } from 'dockview';
 import * as React from 'react';
@@ -26,7 +26,7 @@ const components = {
     },
 };
 
-const RightHeaderActions = (props: IDockviewGroupControlProps) => {
+const RightHeaderActions = (props: IDockviewHeaderActionsProps) => {
     const isGroupActive = props.isGroupActive;
 
     return (
@@ -43,7 +43,7 @@ const RightHeaderActions = (props: IDockviewGroupControlProps) => {
     );
 };
 
-const LeftHeaderActions = (props: IDockviewGroupControlProps) => {
+const LeftHeaderActions = (props: IDockviewHeaderActionsProps) => {
     const activePanel = props.activePanel;
 
     return (