rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-03 10:08:24 +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',
},
},
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: {},
});
});

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

@ -237,6 +237,8 @@ describe('groupview', () => {
removePanelMock = jest.fn();
removeGroupMock = jest.fn();
options = {};
dockview = (<Partial<DockviewComponent>>{
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,
});

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) {}
getTabHeight(): number | undefined {
return this.component.tabHeight;
}
setTabHeight(height: number | undefined): void {
this.component.tabHeight = height;
}
focus(): void {
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 panels: string[];
readonly size: number;
height: number | undefined;
delete: (id: string) => void;
indexOf: (id: string) => number;
onDrop: Event<TabDropIndexEvent>;
@ -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<TabDropIndexEvent>();
@ -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',

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

@ -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<DockviewGroupPanel> {
readonly panels: IDockviewPanel[];
readonly onDidDrop: Event<DockviewDropEvent>;
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;
}

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

@ -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 {

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

@ -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();
}
}

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

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

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

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

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

@ -58,7 +58,6 @@ export interface IDockviewReactProps {
components: PanelCollection<IDockviewPanelProps>;
tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
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

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

@ -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` | <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 |
| --------------------- | ------------------------------------ | -------- | --------- | ------------------------------------------------------------ |
| --------------------- | ------------------------------------ | -------- | --------- | ------------------------------------------------------------ | --- |
| 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` | <Link to="../basics/#auto-resizing">Auto Resizing</Link> |