From 1706ffe0d7621bf95d70d61f524d64b0b460d84b Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 27 Sep 2023 20:07:12 +0100 Subject: [PATCH] feat: pre-tab actions --- .../components/titlebar/tabsContainer.ts | 21 +++++++++++++++++++ .../src/dockview/dockviewComponent.ts | 1 + .../src/dockview/dockviewGroupPanelModel.ts | 18 +++++++++++++++- .../dockview-core/src/dockview/options.ts | 3 +++ packages/dockview/src/dockview/dockview.tsx | 17 +++++++++++++++ 5 files changed, 59 insertions(+), 1 deletion(-) diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts index 4a3931cf2..bed1f5fcb 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts @@ -43,6 +43,7 @@ export interface ITabsContainer extends IDisposable { openPanel: (panel: IDockviewPanel, index?: number) => void; setRightActionsElement(element: HTMLElement | undefined): void; setLeftActionsElement(element: HTMLElement | undefined): void; + setPreActionsElement(element: HTMLElement | undefined): void; show(): void; hide(): void; } @@ -55,12 +56,14 @@ export class TabsContainer private readonly tabContainer: HTMLElement; private readonly rightActionsContainer: HTMLElement; private readonly leftActionsContainer: HTMLElement; + private readonly preActionsContainer: HTMLElement; private readonly voidContainer: VoidContainer; private tabs: IValueDisposable[] = []; private selectedIndex = -1; private rightActions: HTMLElement | undefined; private leftActions: HTMLElement | undefined; + private preActions: HTMLElement | undefined; private _hidden = false; @@ -129,6 +132,20 @@ export class TabsContainer } } + setPreActionsElement(element: HTMLElement | undefined): void { + if (this.preActions === element) { + return; + } + if (this.preActions) { + this.preActions.remove(); + this.preActions = undefined; + } + if (element) { + this.preActionsContainer.appendChild(element); + this.preActions = element; + } + } + get element(): HTMLElement { return this._element; } @@ -192,11 +209,15 @@ export class TabsContainer this.leftActionsContainer = document.createElement('div'); this.leftActionsContainer.className = 'left-actions-container'; + this.preActionsContainer = document.createElement('div'); + this.preActionsContainer.className = 'pre-actions-container'; + this.tabContainer = document.createElement('div'); this.tabContainer.className = 'tabs-container'; this.voidContainer = new VoidContainer(this.accessor, this.group); + this._element.appendChild(this.preActionsContainer); this._element.appendChild(this.tabContainer); this._element.appendChild(this.leftActionsContainer); this._element.appendChild(this.voidContainer.element); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 04a0eb280..5aa911854 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -92,6 +92,7 @@ export type DockviewComponentUpdateOptions = Pick< | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' + | 'createPreHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds' >; diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index d05aa7308..44edd78b3 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -12,7 +12,7 @@ import { IContentContainer, } from './components/panel/content'; import { - GroupDragEvent, + GroupDragEvent, ITabsContainer, TabDragEvent, TabsContainer, @@ -144,6 +144,7 @@ export class DockviewGroupPanelModel private _isFloating = false; private _rightHeaderActions: IHeaderActionsRenderer | undefined; private _leftHeaderActions: IHeaderActionsRenderer | undefined; + private _preHeaderActions: IHeaderActionsRenderer | undefined; private mostRecentlyUsed: IDockviewPanel[] = []; @@ -398,6 +399,21 @@ export class DockviewGroupPanelModel this._leftHeaderActions.element ); } + + if (this.accessor.options.createPreHeaderActionsElement) { + this._preHeaderActions = + this.accessor.options.createPreHeaderActionsElement( + this.groupPanel + ); + this.addDisposables(this._preHeaderActions); + this._preHeaderActions.init({ + containerApi: new DockviewApi(this.accessor), + api: this.groupPanel.api, + }); + this.tabsContainer.setPreActionsElement( + this._preHeaderActions.element + ); + } } public indexOf(panel: IDockviewPanel): number { diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index 920737a06..8481c805c 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -84,6 +84,9 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions { createLeftHeaderActionsElement?: ( group: DockviewGroupPanel ) => IHeaderActionsRenderer; + createPreHeaderActionsElement?: ( + group: DockviewGroupPanel + ) => IHeaderActionsRenderer; singleTabMode?: 'fullwidth' | 'default'; parentElement?: HTMLElement; disableFloatingGroups?: boolean; diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx index 7c6bcc435..ad99f8f3d 100644 --- a/packages/dockview/src/dockview/dockview.tsx +++ b/packages/dockview/src/dockview/dockview.tsx @@ -67,6 +67,7 @@ export interface IDockviewReactProps { defaultTabComponent?: React.FunctionComponent; rightHeaderActionsComponent?: React.FunctionComponent; leftHeaderActionsComponent?: React.FunctionComponent; + preHeaderActionsComponent?: React.FunctionComponent; singleTabMode?: 'fullwidth' | 'default'; disableFloatingGroups?: boolean; floatingGroupBounds?: @@ -166,6 +167,10 @@ export const DockviewReact = React.forwardRef( props.rightHeaderActionsComponent, { addPortal } ), + createPreHeaderActionsElement: createGroupControlElement( + props.preHeaderActionsComponent, + { addPortal } + ), singleTabMode: props.singleTabMode, disableFloatingGroups: props.disableFloatingGroups, floatingGroupBounds: props.floatingGroupBounds, @@ -301,6 +306,18 @@ export const DockviewReact = React.forwardRef( }); }, [props.leftHeaderActionsComponent]); + React.useEffect(() => { + if (!dockviewRef.current) { + return; + } + dockviewRef.current.updateOptions({ + createPreHeaderActionsElement: createGroupControlElement( + props.preHeaderActionsComponent, + { addPortal } + ), + }); + }, [props.preHeaderActionsComponent]); + return (