rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-04 02:28:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: remove tabHeight setter

Browse Source
This commit is contained in:
mathuo 2023-04-01 21:08:32 +01:00
parent 1f384c3c65
commit e07cedf01f
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
12 changed files with 10 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
View File

@ -473,7 +473,6 @@ describe('dockviewComponent', () => {
title: 'panel5', title: 'panel5',
}, },
}, },
options: { tabHeight: 25 },
}); });
expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({ expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
@ -558,7 +557,6 @@ describe('dockviewComponent', () => {
title: 'panel5', title: 'panel5',
}, },
}, },
options: { tabHeight: 25 },
}); });
}); });
@ -989,7 +987,6 @@ describe('dockviewComponent', () => {
title: 'view_3_title', title: 'view_3_title',
}, },
}, },
options: {},
}); });
expect(removedGroups.length).toBe(2); expect(removedGroups.length).toBe(2);
@ -1512,7 +1509,6 @@ describe('dockviewComponent', () => {
title: 'panel5', title: 'panel5',
}, },
}, },
options: { tabHeight: 25 },
}); });
jest.runAllTimers(); jest.runAllTimers();
@ -1547,7 +1543,6 @@ describe('dockviewComponent', () => {
orientation: Orientation.VERTICAL, orientation: Orientation.VERTICAL,
}, },
panels: {}, panels: {},
options: { tabHeight: 25 },
}); });
jest.runAllTimers(); jest.runAllTimers();
@ -1647,7 +1642,6 @@ describe('dockviewComponent', () => {
title: 'panel5', title: 'panel5',
}, },
}, },
options: { tabHeight: 25 },
}); });
}); });
@ -1709,7 +1703,6 @@ describe('dockviewComponent', () => {
title: 'panel2', title: 'panel2',
}, },
}, },
options: { tabHeight: 25 },
}); });
expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({ expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
@ -1756,7 +1749,6 @@ describe('dockviewComponent', () => {
title: 'panel2', title: 'panel2',
}, },
}, },
options: { tabHeight: 25 },
}); });
}); });
@ -1822,7 +1814,6 @@ describe('dockviewComponent', () => {
title: 'panel3', title: 'panel3',
}, },
}, },
options: { tabHeight: 25 },
}); });
const group = dockview.getGroupPanel('panel2')!.api.group; const group = dockview.getGroupPanel('panel2')!.api.group;
@ -1949,7 +1940,6 @@ describe('dockviewComponent', () => {
title: 'panel2', title: 'panel2',
}, },
}, },
options: {},
}); });
}); });
@ -2090,7 +2080,6 @@ describe('dockviewComponent', () => {
title: 'panel3', title: 'panel3',
}, },
}, },
options: {},
}); });
}); });
@ -2218,7 +2207,6 @@ describe('dockviewComponent', () => {
title: 'panel3', title: 'panel3',
}, },
}, },
options: {},
}); });
}); });
@ -2304,7 +2292,6 @@ describe('dockviewComponent', () => {
size: 0, size: 0,
}, },
}, },
options: {},
panels: {}, panels: {},
}); });
}); });

6
packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts
View File

@ -237,6 +237,8 @@ describe('groupview', () => {
removePanelMock = jest.fn(); removePanelMock = jest.fn();
removeGroupMock = jest.fn(); removeGroupMock = jest.fn();
options = {};
dockview = (<Partial<DockviewComponent>>{ dockview = (<Partial<DockviewComponent>>{
options: {}, options: {},
createWatermarkComponent: () => new Watermark(), createWatermarkComponent: () => new Watermark(),
@ -248,9 +250,6 @@ describe('groupview', () => {
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
}) as DockviewComponent; }) as DockviewComponent;
options = {
tabHeight: 30,
};
groupview = new DockviewGroupPanel(dockview, 'groupview-1', options); groupview = new DockviewGroupPanel(dockview, 'groupview-1', options);
groupview.initialize(); groupview.initialize();
}); });
@ -261,7 +260,6 @@ describe('groupview', () => {
const panel3 = new TestPanel('panel3', jest.fn() as any); const panel3 = new TestPanel('panel3', jest.fn() as any);
const groupview2 = new DockviewGroupPanel(dockview, 'groupview-2', { const groupview2 = new DockviewGroupPanel(dockview, 'groupview-2', {
tabHeight: 25,
panels: [panel1, panel2, panel3], panels: [panel1, panel2, panel3],
activePanel: panel2, activePanel: panel2,
}); });

8
packages/dockview-core/src/api/component.api.ts
View File

@ -419,14 +419,6 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
constructor(private readonly component: IDockviewComponent) {} constructor(private readonly component: IDockviewComponent) {}
getTabHeight(): number | undefined {
return this.component.tabHeight;
}
setTabHeight(height: number | undefined): void {
this.component.tabHeight = height;
}
focus(): void { focus(): void {
this.component.focus(); this.component.focus();
} }

22
packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts
View File

@ -20,7 +20,6 @@ export interface ITabsContainer extends IDisposable {
readonly element: HTMLElement; readonly element: HTMLElement;
readonly panels: string[]; readonly panels: string[];
readonly size: number; readonly size: number;
height: number | undefined;
delete: (id: string) => void; delete: (id: string) => void;
indexOf: (id: string) => number; indexOf: (id: string) => number;
onDrop: Event<TabDropIndexEvent>; onDrop: Event<TabDropIndexEvent>;
@ -48,7 +47,6 @@ export class TabsContainer
private selectedIndex = -1; private selectedIndex = -1;
private actions: HTMLElement | undefined; private actions: HTMLElement | undefined;
private _height: number | undefined;
private _hidden = false; private _hidden = false;
private readonly _onDrop = new Emitter<TabDropIndexEvent>(); private readonly _onDrop = new Emitter<TabDropIndexEvent>();
@ -62,24 +60,6 @@ export class TabsContainer
return this.tabs.length; 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 { get hidden(): boolean {
return this._hidden; return this._hidden;
} }
@ -139,8 +119,6 @@ export class TabsContainer
this._element = document.createElement('div'); this._element = document.createElement('div');
this._element.className = 'tabs-and-actions-container'; this._element.className = 'tabs-and-actions-container';
this.height = accessor.options.tabHeight;
toggleClass( toggleClass(
this._element, this._element,
'dv-full-width-single-tab', 'dv-full-width-single-tab',

29
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -59,7 +59,6 @@ export interface SerializedDockview {
}; };
panels: { [key: string]: GroupviewPanelState }; panels: { [key: string]: GroupviewPanelState };
activeGroup?: string; activeGroup?: string;
options?: { tabHeight?: number };
} }
export type DockviewComponentUpdateOptions = Pick< export type DockviewComponentUpdateOptions = Pick<
@ -86,7 +85,6 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
readonly panels: IDockviewPanel[]; readonly panels: IDockviewPanel[];
readonly onDidDrop: Event<DockviewDropEvent>; readonly onDidDrop: Event<DockviewDropEvent>;
readonly orientation: Orientation; readonly orientation: Orientation;
tabHeight: number | undefined;
updateOptions(options: DockviewComponentUpdateOptions): void; updateOptions(options: DockviewComponentUpdateOptions): void;
moveGroupOrPanel( moveGroupOrPanel(
referenceGroup: DockviewGroupPanel, referenceGroup: DockviewGroupPanel,
@ -174,17 +172,6 @@ export class DockviewComponent
return activeGroup.activePanel; 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) { constructor(options: DockviewComponentOptions) {
super({ super({
proportionalLayout: true, proportionalLayout: true,
@ -413,18 +400,13 @@ export class DockviewComponent
grid: data, grid: data,
panels, panels,
activeGroup: this.activeGroup?.id, activeGroup: this.activeGroup?.id,
options: { tabHeight: this.tabHeight },
}; };
} }
fromJSON(data: SerializedDockview): void { fromJSON(data: SerializedDockview): void {
this.clear(); this.clear();
const { grid, panels, options, activeGroup } = data; const { grid, panels, activeGroup } = data;
if (typeof options?.tabHeight === 'number') {
this.tabHeight = options.tabHeight;
}
if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) { if (grid.root.type !== 'branch' || !Array.isArray(grid.root.data)) {
throw new Error('root must be of type branch'); throw new Error('root must be of type branch');
@ -869,10 +851,7 @@ export class DockviewComponent
createGroup(options?: GroupOptions): DockviewGroupPanel { createGroup(options?: GroupOptions): DockviewGroupPanel {
if (!options) { if (!options) {
options = { tabHeight: this.tabHeight }; options = {};
}
if (typeof options.tabHeight !== 'number') {
options.tabHeight = this.tabHeight;
} }
let id = options?.id; let id = options?.id;
@ -925,10 +904,6 @@ export class DockviewComponent
// not an ideal pattern // not an ideal pattern
view.initialize(); view.initialize();
if (typeof this.options.tabHeight === 'number') {
view.model.header.height = this.options.tabHeight;
}
return view; return view;
} }

2
packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
View File

@ -56,7 +56,6 @@ export interface GroupOptions extends CoreGroupOptions {
readonly panels?: IDockviewPanel[]; readonly panels?: IDockviewPanel[];
readonly activePanel?: IDockviewPanel; readonly activePanel?: IDockviewPanel;
readonly id?: string; readonly id?: string;
tabHeight?: number;
} }
export interface GroupPanelViewState extends CoreGroupOptions { export interface GroupPanelViewState extends CoreGroupOptions {
@ -78,7 +77,6 @@ export interface GroupviewDropEvent {
export interface IHeader { export interface IHeader {
hidden: boolean; hidden: boolean;
height: number | undefined;
} }
export interface IDockviewGroupPanelModel extends IPanel { export interface IDockviewGroupPanelModel extends IPanel {

9
packages/dockview-core/src/dockview/dockviewPanel.ts
View File

@ -78,7 +78,7 @@ export class DockviewPanel
this.setTitle(params.title); this.setTitle(params.title);
this.view?.init({ this.view.init({
...params, ...params,
api: this.api, api: this.api,
containerApi: this.containerApi, 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 // the obtain the correct dimensions of the content panel we must deduct the tab height
this.api._onDidDimensionChange.fire({ this.api._onDidDimensionChange.fire({
width, width,
height: height - (this.group.model.header.height || 0), height: height,
}); });
this.view?.layout(width, height); this.view.layout(width, height);
} }
public dispose(): void { public dispose(): void {
this.api.dispose(); this.api.dispose();
this.view.dispose();
this.view?.dispose();
} }
} }

1
packages/dockview-core/src/dockview/options.ts
View File

@ -75,7 +75,6 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
watermarkComponent?: WatermarkConstructor; watermarkComponent?: WatermarkConstructor;
watermarkFrameworkComponent?: any; watermarkFrameworkComponent?: any;
frameworkComponentFactory?: GroupPanelFrameworkComponentFactory; frameworkComponentFactory?: GroupPanelFrameworkComponentFactory;
tabHeight?: number;
orientation?: Orientation; orientation?: Orientation;
styles?: ISplitviewStyles; styles?: ISplitviewStyles;
defaultTabComponent?: string; defaultTabComponent?: string;

1
packages/dockview-core/src/gridview/options.ts
View File

@ -14,7 +14,6 @@ export interface GridviewComponentOptions {
[componentName: string]: any; [componentName: string]: any;
}; };
frameworkComponentFactory?: FrameworkFactory<GridviewPanel>; frameworkComponentFactory?: FrameworkFactory<GridviewPanel>;
tabHeight?: number;
styles?: ISplitviewStyles; styles?: ISplitviewStyles;
parentElement?: HTMLElement; parentElement?: HTMLElement;
} }

2
packages/dockview/src/dockview/dockview.tsx
View File

@ -58,7 +58,6 @@ export interface IDockviewReactProps {
components: PanelCollection<IDockviewPanelProps>; components: PanelCollection<IDockviewPanelProps>;
tabComponents?: PanelCollection<IDockviewPanelHeaderProps>; tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>; watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
tabHeight?: number;
onDidDrop?: (event: DockviewDropEvent) => void; onDidDrop?: (event: DockviewDropEvent) => void;
showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean; showDndOverlay?: (event: DockviewDndOverlayEvent) => boolean;
hideBorders?: boolean; hideBorders?: boolean;
@ -142,7 +141,6 @@ export const DockviewReact = React.forwardRef(
frameworkComponentFactory: factory, frameworkComponentFactory: factory,
frameworkComponents: props.components, frameworkComponents: props.components,
frameworkTabComponents, frameworkTabComponents,
tabHeight: props.tabHeight,
watermarkFrameworkComponent: props.watermarkComponent, watermarkFrameworkComponent: props.watermarkComponent,
defaultTabComponent: props.defaultTabComponent defaultTabComponent: props.defaultTabComponent
? DEFAULT_REACT_TAB ? DEFAULT_REACT_TAB

3
packages/docs/docs/components/dockview.mdx
View File

@ -59,7 +59,6 @@ import { DockviewReact } from 'dockview';
| showDndOverlay | Event | Yes | false | | | showDndOverlay | Event | Yes | false | |
| defaultTabComponent | object | Yes | | | | defaultTabComponent | object | Yes | | |
| groupControlComponent | object | Yes | | | | groupControlComponent | object | Yes | | |
| tabHeight | number | Yes | | |
| singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | | singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | |
## Dockview API ## Dockview API
@ -113,8 +112,6 @@ const onReady = (event: DockviewReadyEvent) => {
| removeGroup | `(group: GroupPanel): void` | | | removeGroup | `(group: GroupPanel): void` | |
| getGroup | `(id: string): GroupPanel \| undefined` | | | getGroup | `(id: string): GroupPanel \| undefined` | |
| | | | | | | |
| getTabHeight | `(): number \| undefined` | |
| setTabHeight | `(height: number \| undefined): void` | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | | | focus | `(): void` | |
| layout | `(width: number, height:number): void` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> |

7
packages/docs/versioned_docs/version-1.7.0/components/dockview.mdx vendored
View File

@ -47,7 +47,7 @@ import { DockviewReact } from 'dockview';
``` ```
| Property | Type | Optional | Default | Description | | Property | Type | Optional | Default | Description |
| --------------------- | ------------------------------------ | -------- | --------- | ------------------------------------------------------------ | | --------------------- | ------------------------------------ | -------- | --------- | ------------------------------------------------------------ | --- |
| onReady | (event: SplitviewReadyEvent) => void | No | | | | onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | | | components | object | No | | |
| tabComponents | object | Yes | | | | tabComponents | object | Yes | | |
@ -58,8 +58,7 @@ import { DockviewReact } from 'dockview';
| onDidDrop | Event | Yes | false | | | onDidDrop | Event | Yes | false | |
| showDndOverlay | Event | Yes | false | | | showDndOverlay | Event | Yes | false | |
| defaultTabComponent | object | Yes | | | | defaultTabComponent | object | Yes | | |
| groupControlComponent | object | Yes | | | | groupControlComponent | object | Yes | | | |
| tabHeight | number | Yes | | |
| singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | | singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | |
## Dockview API ## Dockview API
@ -113,8 +112,6 @@ const onReady = (event: DockviewReadyEvent) => {
| removeGroup | `(group: GroupPanel): void` | | | removeGroup | `(group: GroupPanel): void` | |
| getGroup | `(id: string): GroupPanel \| undefined` | | | getGroup | `(id: string): GroupPanel \| undefined` | |
| | | | | | | |
| getTabHeight | `(): number \| undefined` | |
| setTabHeight | `(height: number \| undefined): void` | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | | | focus | `(): void` | |
| layout | `(width: number, height:number): void` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> |