From e07cedf01f4e5e96be7fa5a74dd3cca0f8fbd264 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sat, 1 Apr 2023 21:08:32 +0100 Subject: [PATCH] feat: remove tabHeight setter --- .../dockview/dockviewComponent.spec.ts | 13 --------- .../groupview/dockviewGroupPanelModel.spec.ts | 6 ++-- .../dockview-core/src/api/component.api.ts | 8 ----- .../components/titlebar/tabsContainer.ts | 22 -------------- .../src/dockview/dockviewComponent.ts | 29 ++----------------- .../src/dockview/dockviewGroupPanelModel.ts | 2 -- .../src/dockview/dockviewPanel.ts | 9 +++--- .../dockview-core/src/dockview/options.ts | 1 - .../dockview-core/src/gridview/options.ts | 1 - packages/dockview/src/dockview/dockview.tsx | 2 -- packages/docs/docs/components/dockview.mdx | 3 -- .../version-1.7.0/components/dockview.mdx | 7 ++--- 12 files changed, 10 insertions(+), 93 deletions(-) diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 25206344b..8ce3e9d32 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -473,7 +473,6 @@ describe('dockviewComponent', () => { title: 'panel5', }, }, - options: { tabHeight: 25 }, }); expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({ @@ -558,7 +557,6 @@ describe('dockviewComponent', () => { title: 'panel5', }, }, - options: { tabHeight: 25 }, }); }); @@ -989,7 +987,6 @@ describe('dockviewComponent', () => { title: 'view_3_title', }, }, - options: {}, }); expect(removedGroups.length).toBe(2); @@ -1512,7 +1509,6 @@ describe('dockviewComponent', () => { title: 'panel5', }, }, - options: { tabHeight: 25 }, }); jest.runAllTimers(); @@ -1547,7 +1543,6 @@ describe('dockviewComponent', () => { orientation: Orientation.VERTICAL, }, panels: {}, - options: { tabHeight: 25 }, }); jest.runAllTimers(); @@ -1647,7 +1642,6 @@ describe('dockviewComponent', () => { title: 'panel5', }, }, - options: { tabHeight: 25 }, }); }); @@ -1709,7 +1703,6 @@ describe('dockviewComponent', () => { title: 'panel2', }, }, - options: { tabHeight: 25 }, }); expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({ @@ -1756,7 +1749,6 @@ describe('dockviewComponent', () => { title: 'panel2', }, }, - options: { tabHeight: 25 }, }); }); @@ -1822,7 +1814,6 @@ describe('dockviewComponent', () => { title: 'panel3', }, }, - options: { tabHeight: 25 }, }); const group = dockview.getGroupPanel('panel2')!.api.group; @@ -1949,7 +1940,6 @@ describe('dockviewComponent', () => { title: 'panel2', }, }, - options: {}, }); }); @@ -2090,7 +2080,6 @@ describe('dockviewComponent', () => { title: 'panel3', }, }, - options: {}, }); }); @@ -2218,7 +2207,6 @@ describe('dockviewComponent', () => { title: 'panel3', }, }, - options: {}, }); }); @@ -2304,7 +2292,6 @@ describe('dockviewComponent', () => { size: 0, }, }, - options: {}, panels: {}, }); }); diff --git a/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts b/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts index 4bbc0237f..ef2ed7cad 100644 --- a/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts @@ -237,6 +237,8 @@ describe('groupview', () => { removePanelMock = jest.fn(); removeGroupMock = jest.fn(); + options = {}; + dockview = (>{ options: {}, createWatermarkComponent: () => new Watermark(), @@ -248,9 +250,6 @@ describe('groupview', () => { onDidRemovePanel: jest.fn(), }) as DockviewComponent; - options = { - tabHeight: 30, - }; groupview = new DockviewGroupPanel(dockview, 'groupview-1', options); groupview.initialize(); }); @@ -261,7 +260,6 @@ describe('groupview', () => { const panel3 = new TestPanel('panel3', jest.fn() as any); const groupview2 = new DockviewGroupPanel(dockview, 'groupview-2', { - tabHeight: 25, panels: [panel1, panel2, panel3], activePanel: panel2, }); diff --git a/packages/dockview-core/src/api/component.api.ts b/packages/dockview-core/src/api/component.api.ts index 4de792690..d527ef6af 100644 --- a/packages/dockview-core/src/api/component.api.ts +++ b/packages/dockview-core/src/api/component.api.ts @@ -419,14 +419,6 @@ export class DockviewApi implements CommonApi { constructor(private readonly component: IDockviewComponent) {} - getTabHeight(): number | undefined { - return this.component.tabHeight; - } - - setTabHeight(height: number | undefined): void { - this.component.tabHeight = height; - } - focus(): void { this.component.focus(); } diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts index 2472945a4..debdf42e0 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts @@ -20,7 +20,6 @@ export interface ITabsContainer extends IDisposable { readonly element: HTMLElement; readonly panels: string[]; readonly size: number; - height: number | undefined; delete: (id: string) => void; indexOf: (id: string) => number; onDrop: Event; @@ -48,7 +47,6 @@ export class TabsContainer private selectedIndex = -1; private actions: HTMLElement | undefined; - private _height: number | undefined; private _hidden = false; private readonly _onDrop = new Emitter(); @@ -62,24 +60,6 @@ export class TabsContainer return this.tabs.length; } - get height(): number | undefined { - return this._height; - } - - set height(value: number | undefined) { - this._height = value; - if (typeof value !== 'number') { - this.element.style.removeProperty( - '--dv-tabs-and-actions-container-height' - ); - } else { - this.element.style.setProperty( - '--dv-tabs-and-actions-container-height', - `${value}px` - ); - } - } - get hidden(): boolean { return this._hidden; } @@ -139,8 +119,6 @@ export class TabsContainer this._element = document.createElement('div'); this._element.className = 'tabs-and-actions-container'; - this.height = accessor.options.tabHeight; - toggleClass( this._element, 'dv-full-width-single-tab', diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 13eb455aa..0cb6ee8e1 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -59,7 +59,6 @@ export interface SerializedDockview { }; panels: { [key: string]: GroupviewPanelState }; activeGroup?: string; - options?: { tabHeight?: number }; } export type DockviewComponentUpdateOptions = Pick< @@ -86,7 +85,6 @@ export interface IDockviewComponent extends IBaseGrid { readonly panels: IDockviewPanel[]; readonly onDidDrop: Event; readonly orientation: Orientation; - tabHeight: number | undefined; updateOptions(options: DockviewComponentUpdateOptions): void; moveGroupOrPanel( referenceGroup: DockviewGroupPanel, @@ -174,17 +172,6 @@ export class DockviewComponent return activeGroup.activePanel; } - set tabHeight(height: number | undefined) { - this.options.tabHeight = height; - this._groups.forEach((value) => { - value.value.model.header.height = height; - }); - } - - get tabHeight(): number | undefined { - return this.options.tabHeight; - } - constructor(options: DockviewComponentOptions) { super({ proportionalLayout: true, @@ -413,18 +400,13 @@ export class DockviewComponent grid: data, panels, activeGroup: this.activeGroup?.id, - options: { tabHeight: this.tabHeight }, }; } fromJSON(data: SerializedDockview): void { this.clear(); - const { grid, panels, options, activeGroup } = data; - - if (typeof options?.tabHeight === 'number') { - this.tabHeight = options.tabHeight; - } + const { grid, panels, activeGroup } = data; if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) { throw new Error('root must be of type branch'); @@ -869,10 +851,7 @@ export class DockviewComponent createGroup(options?: GroupOptions): DockviewGroupPanel { if (!options) { - options = { tabHeight: this.tabHeight }; - } - if (typeof options.tabHeight !== 'number') { - options.tabHeight = this.tabHeight; + options = {}; } let id = options?.id; @@ -925,10 +904,6 @@ export class DockviewComponent // not an ideal pattern view.initialize(); - if (typeof this.options.tabHeight === 'number') { - view.model.header.height = this.options.tabHeight; - } - return view; } diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index 37836691d..5e9773a73 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -56,7 +56,6 @@ export interface GroupOptions extends CoreGroupOptions { readonly panels?: IDockviewPanel[]; readonly activePanel?: IDockviewPanel; readonly id?: string; - tabHeight?: number; } export interface GroupPanelViewState extends CoreGroupOptions { @@ -78,7 +77,6 @@ export interface GroupviewDropEvent { export interface IHeader { hidden: boolean; - height: number | undefined; } export interface IDockviewGroupPanelModel extends IPanel { diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts index 36c621a16..66ac5be5f 100644 --- a/packages/dockview-core/src/dockview/dockviewPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanel.ts @@ -78,7 +78,7 @@ export class DockviewPanel this.setTitle(params.title); - this.view?.init({ + this.view.init({ ...params, api: this.api, containerApi: this.containerApi, @@ -165,15 +165,14 @@ export class DockviewPanel // the obtain the correct dimensions of the content panel we must deduct the tab height this.api._onDidDimensionChange.fire({ width, - height: height - (this.group.model.header.height || 0), + height: height, }); - this.view?.layout(width, height); + this.view.layout(width, height); } public dispose(): void { this.api.dispose(); - - this.view?.dispose(); + this.view.dispose(); } } diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index f1751c7fb..1e9b66db1 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -75,7 +75,6 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions { watermarkComponent?: WatermarkConstructor; watermarkFrameworkComponent?: any; frameworkComponentFactory?: GroupPanelFrameworkComponentFactory; - tabHeight?: number; orientation?: Orientation; styles?: ISplitviewStyles; defaultTabComponent?: string; diff --git a/packages/dockview-core/src/gridview/options.ts b/packages/dockview-core/src/gridview/options.ts index 7596bb0b2..461ab6c66 100644 --- a/packages/dockview-core/src/gridview/options.ts +++ b/packages/dockview-core/src/gridview/options.ts @@ -14,7 +14,6 @@ export interface GridviewComponentOptions { [componentName: string]: any; }; frameworkComponentFactory?: FrameworkFactory; - tabHeight?: number; styles?: ISplitviewStyles; parentElement?: HTMLElement; } diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx index f9d97ba03..6426bcece 100644 --- a/packages/dockview/src/dockview/dockview.tsx +++ b/packages/dockview/src/dockview/dockview.tsx @@ -58,7 +58,6 @@ export interface IDockviewReactProps { components: PanelCollection; tabComponents?: PanelCollection; watermarkComponent?: React.FunctionComponent; - tabHeight?: number; onDidDrop?: (event: DockviewDropEvent) => void; showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean; hideBorders?: boolean; @@ -142,7 +141,6 @@ export const DockviewReact = React.forwardRef( frameworkComponentFactory: factory, frameworkComponents: props.components, frameworkTabComponents, - tabHeight: props.tabHeight, watermarkFrameworkComponent: props.watermarkComponent, defaultTabComponent: props.defaultTabComponent ? DEFAULT_REACT_TAB diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index 61fcf4e2f..3e9910d0e 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -59,7 +59,6 @@ import { DockviewReact } from 'dockview'; | showDndOverlay | Event | Yes | false | | | defaultTabComponent | object | Yes | | | | groupControlComponent | object | Yes | | | -| tabHeight | number | Yes | | | | singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | ## Dockview API @@ -113,8 +112,6 @@ const onReady = (event: DockviewReadyEvent) => { | removeGroup | `(group: GroupPanel): void` | | | getGroup | `(id: string): GroupPanel \| undefined` | | | | | | -| getTabHeight | `(): number \| undefined` | | -| setTabHeight | `(height: number \| undefined): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | focus | `(): void` | | | layout | `(width: number, height:number): void` | Auto Resizing | diff --git a/packages/docs/versioned_docs/version-1.7.0/components/dockview.mdx b/packages/docs/versioned_docs/version-1.7.0/components/dockview.mdx index 61fcf4e2f..f48ade881 100644 --- a/packages/docs/versioned_docs/version-1.7.0/components/dockview.mdx +++ b/packages/docs/versioned_docs/version-1.7.0/components/dockview.mdx @@ -47,7 +47,7 @@ import { DockviewReact } from 'dockview'; ``` | Property | Type | Optional | Default | Description | -| --------------------- | ------------------------------------ | -------- | --------- | ------------------------------------------------------------ | +| --------------------- | ------------------------------------ | -------- | --------- | ------------------------------------------------------------ | --- | | onReady | (event: SplitviewReadyEvent) => void | No | | | | components | object | No | | | | tabComponents | object | Yes | | | @@ -58,8 +58,7 @@ import { DockviewReact } from 'dockview'; | onDidDrop | Event | Yes | false | | | showDndOverlay | Event | Yes | false | | | defaultTabComponent | object | Yes | | | -| groupControlComponent | object | Yes | | | -| tabHeight | number | Yes | | | +| groupControlComponent | object | Yes | | | | | singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | ## Dockview API @@ -113,8 +112,6 @@ const onReady = (event: DockviewReadyEvent) => { | removeGroup | `(group: GroupPanel): void` | | | getGroup | `(id: string): GroupPanel \| undefined` | | | | | | -| getTabHeight | `(): number \| undefined` | | -| setTabHeight | `(height: number \| undefined): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | focus | `(): void` | | | layout | `(width: number, height:number): void` | Auto Resizing |