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

Merge pull request #875 from mathuo/863-headercomponents-for-paneviewreact-is-never-used-and-cannot-set-height-because-harcoded-to-22px

Browse Source 
feat: custom paneview header height
This commit is contained in:
mathuo 2025-03-16 20:26:33 +00:00 committed by GitHub
commit 3ebcb8eaef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 151 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
packages/dockview-core/src/__tests__/paneview/paneview.spec.ts
View File

@ -56,22 +56,28 @@ describe('paneview', () => {
paneview.onDidRemoveView((view) => removed.push(view)) paneview.onDidRemoveView((view) => removed.push(view))
); );
const view1 = new TestPanel( const view1 = new TestPanel({
'id', id: 'id',
'component', component: 'component',
'headerComponent', headerComponent: 'headerComponent',
Orientation.VERTICAL, orientation: Orientation.VERTICAL,
true, isExpanded: true,
true isHeaderVisible: true,
); headerSize: 22,
const view2 = new TestPanel( minimumBodySize: 0,
'id2', maximumBodySize: Number.MAX_SAFE_INTEGER,
'component', });
'headerComponent', const view2 = new TestPanel({
Orientation.VERTICAL, id: 'id2',
true, component: 'component',
true headerComponent: 'headerComponent',
); orientation: Orientation.VERTICAL,
isExpanded: true,
isHeaderVisible: true,
headerSize: 22,
minimumBodySize: 0,
maximumBodySize: Number.MAX_SAFE_INTEGER,
});
expect(added.length).toBe(0); expect(added.length).toBe(0);
expect(removed.length).toBe(0); expect(removed.length).toBe(0);
@ -106,22 +112,28 @@ describe('paneview', () => {
orientation: Orientation.HORIZONTAL, orientation: Orientation.HORIZONTAL,
}); });
const view1 = new TestPanel( const view1 = new TestPanel({
'id', id: 'id',
'component', component: 'component',
'headerComponent', headerComponent: 'headerComponent',
Orientation.VERTICAL, orientation: Orientation.VERTICAL,
true, isExpanded: true,
true isHeaderVisible: true,
); headerSize: 22,
const view2 = new TestPanel( minimumBodySize: 0,
'id2', maximumBodySize: Number.MAX_SAFE_INTEGER,
'component', });
'headerComponent', const view2 = new TestPanel({
Orientation.VERTICAL, id: 'id2',
true, component: 'component',
true headerComponent: 'headerComponent',
); orientation: Orientation.VERTICAL,
isExpanded: true,
isHeaderVisible: true,
headerSize: 22,
minimumBodySize: 0,
maximumBodySize: Number.MAX_SAFE_INTEGER,
});
paneview.addPane(view1); paneview.addPane(view1);
paneview.addPane(view2); paneview.addPane(view2);

30
packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts
View File

@ -11,7 +11,17 @@ import { Orientation } from '../../splitview/splitview';
class TestPanel extends PaneviewPanel { class TestPanel extends PaneviewPanel {
constructor(id: string, component: string) { constructor(id: string, component: string) {
super(id, component, 'header', Orientation.VERTICAL, false, true); super({
id,
component,
headerComponent: 'header',
orientation: Orientation.VERTICAL,
isExpanded: false,
isHeaderVisible: true,
headerSize: 22,
minimumBodySize: 0,
maximumBodySize: Number.MAX_SAFE_INTEGER,
});
} }
getHeaderComponent() { getHeaderComponent() {
@ -59,7 +69,7 @@ class TestPanel extends PaneviewPanel {
} }
} }
describe('componentPaneview', () => { describe('paneviewComponent', () => {
let container: HTMLElement; let container: HTMLElement;
beforeEach(() => { beforeEach(() => {
@ -259,7 +269,7 @@ describe('componentPaneview', () => {
title: 'Panel 1', title: 'Panel 1',
}, },
expanded: true, expanded: true,
minimumSize: 100, headerSize: 22,
}, },
{ {
size: 22, size: 22,
@ -269,7 +279,7 @@ describe('componentPaneview', () => {
title: 'Panel 2', title: 'Panel 2',
}, },
expanded: false, expanded: false,
minimumSize: 100, headerSize: 22,
}, },
{ {
size: 22, size: 22,
@ -279,7 +289,7 @@ describe('componentPaneview', () => {
title: 'Panel 3', title: 'Panel 3',
}, },
expanded: false, expanded: false,
minimumSize: 100, headerSize: 22,
}, },
], ],
}); });
@ -454,6 +464,7 @@ describe('componentPaneview', () => {
component: 'default', component: 'default',
title: 'Panel 1', title: 'Panel 1',
}, },
minimumSize: 100,
expanded: true, expanded: true,
}, },
{ {
@ -490,26 +501,27 @@ describe('componentPaneview', () => {
}, },
expanded: true, expanded: true,
minimumSize: 100, minimumSize: 100,
headerSize: 22,
}, },
{ {
size: 122, size: 22,
data: { data: {
id: 'panel2', id: 'panel2',
component: 'default', component: 'default',
title: 'Panel 2', title: 'Panel 2',
}, },
expanded: true, expanded: true,
minimumSize: 100, headerSize: 22,
}, },
{ {
size: 356, size: 456,
data: { data: {
id: 'panel3', id: 'panel3',
component: 'default', component: 'default',
title: 'Panel 3', title: 'Panel 3',
}, },
expanded: true, expanded: true,
minimumSize: 100, headerSize: 22,
}, },
], ],
}); });

39
packages/dockview-core/src/paneview/draggablePaneviewPanel.ts
View File

@ -38,20 +38,37 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent> = readonly onUnhandledDragOverEvent: Event<PaneviewDndOverlayEvent> =
this._onUnhandledDragOverEvent.event; this._onUnhandledDragOverEvent.event;
constructor( readonly accessor: IPaneviewComponent;
private readonly accessor: IPaneviewComponent,
id: string, constructor(options: {
component: string, accessor: IPaneviewComponent;
headerComponent: string | undefined, id: string;
orientation: Orientation, component: string;
isExpanded: boolean, headerComponent: string | undefined;
disableDnd: boolean orientation: Orientation;
) { isExpanded: boolean;
super(id, component, headerComponent, orientation, isExpanded, true); disableDnd: boolean;
headerSize: number;
minimumBodySize: number;
maximumBodySize: number;
}) {
super({
id: options.id,
component: options.component,
headerComponent: options.headerComponent,
orientation: options.orientation,
isExpanded: options.isExpanded,
isHeaderVisible: true,
headerSize: options.headerSize,
minimumBodySize: options.minimumBodySize,
maximumBodySize: options.maximumBodySize,
});
this.accessor = options.accessor;
this.addDisposables(this._onDidDrop, this._onUnhandledDragOverEvent); this.addDisposables(this._onDidDrop, this._onUnhandledDragOverEvent);
if (!disableDnd) { if (!options.disableDnd) {
this.initDragFeatures(); this.initDragFeatures();
} }
} }

37
packages/dockview-core/src/paneview/paneviewComponent.ts
View File

@ -21,11 +21,16 @@ import { Classnames } from '../dom';
const nextLayoutId = sequentialNumberGenerator(); const nextLayoutId = sequentialNumberGenerator();
const HEADER_SIZE = 22;
const MINIMUM_BODY_SIZE = 0;
const MAXIMUM_BODY_SIZE = Number.MAX_SAFE_INTEGER;
export interface SerializedPaneviewPanel { export interface SerializedPaneviewPanel {
snap?: boolean; snap?: boolean;
priority?: LayoutPriority; priority?: LayoutPriority;
minimumSize?: number; minimumSize?: number;
maximumSize?: number; maximumSize?: number;
headerSize?: number;
data: { data: {
id: string; id: string;
component: string; component: string;
@ -54,17 +59,23 @@ export class PaneFramework extends DraggablePaneviewPanel {
isExpanded: boolean; isExpanded: boolean;
disableDnd: boolean; disableDnd: boolean;
accessor: IPaneviewComponent; accessor: IPaneviewComponent;
headerSize: number;
minimumBodySize: number;
maximumBodySize: number;
} }
) { ) {
super( super({
options.accessor, accessor: options.accessor,
options.id, id: options.id,
options.component, component: options.component,
options.headerComponent, headerComponent: options.headerComponent,
options.orientation, orientation: options.orientation,
options.isExpanded, isExpanded: options.isExpanded,
options.disableDnd disableDnd: options.disableDnd,
); headerSize: options.headerSize,
minimumBodySize: options.minimumBodySize,
maximumBodySize: options.maximumBodySize,
});
} }
getBodyComponent() { getBodyComponent() {
@ -83,6 +94,7 @@ export interface AddPaneviewComponentOptions<T extends object = Parameters> {
params?: T; params?: T;
minimumBodySize?: number; minimumBodySize?: number;
maximumBodySize?: number; maximumBodySize?: number;
headerSize?: number;
isExpanded?: boolean; isExpanded?: boolean;
title: string; title: string;
index?: number; index?: number;
@ -277,6 +289,9 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
isExpanded: !!options.isExpanded, isExpanded: !!options.isExpanded,
disableDnd: !!this.options.disableDnd, disableDnd: !!this.options.disableDnd,
accessor: this, accessor: this,
headerSize: options.headerSize ?? HEADER_SIZE,
minimumBodySize: MINIMUM_BODY_SIZE,
maximumBodySize: MAXIMUM_BODY_SIZE,
}); });
this.doAddPanel(view); this.doAddPanel(view);
@ -344,6 +359,7 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
data: view.toJSON(), data: view.toJSON(),
minimumSize: minimum(view.minimumBodySize), minimumSize: minimum(view.minimumBodySize),
maximumSize: maximum(view.maximumBodySize), maximumSize: maximum(view.maximumBodySize),
headerSize: view.headerSize,
expanded: view.isExpanded(), expanded: view.isExpanded(),
}; };
}); });
@ -403,6 +419,9 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
isExpanded: !!view.expanded, isExpanded: !!view.expanded,
disableDnd: !!this.options.disableDnd, disableDnd: !!this.options.disableDnd,
accessor: this, accessor: this,
headerSize: view.headerSize ?? HEADER_SIZE,
minimumBodySize: view.minimumSize ?? MINIMUM_BODY_SIZE,
maximumBodySize: view.maximumSize ?? MAXIMUM_BODY_SIZE,
}); });
this.doAddPanel(panel); this.doAddPanel(panel);

49
packages/dockview-core/src/paneview/paneviewPanel.ts
View File

@ -71,22 +71,23 @@ export abstract class PaneviewPanel
readonly onDidChange: Event<{ size?: number; orthogonalSize?: number }> = readonly onDidChange: Event<{ size?: number; orthogonalSize?: number }> =
this._onDidChange.event; this._onDidChange.event;
private readonly headerSize = 22;
private _orthogonalSize = 0; private _orthogonalSize = 0;
private _size = 0; private _size = 0;
private _minimumBodySize = 100; private _minimumBodySize: number;
private _maximumBodySize: number = Number.POSITIVE_INFINITY; private _maximumBodySize: number;
private _isExpanded = false; private _isExpanded = false;
protected header?: HTMLElement; protected header?: HTMLElement;
protected body?: HTMLElement; protected body?: HTMLElement;
private bodyPart?: IPanePart; private bodyPart?: IPanePart;
private headerPart?: IPanePart; private headerPart?: IPanePart;
private expandedSize = 0;
private animationTimer: any; private animationTimer: any;
private _orientation: Orientation; private _orientation: Orientation;
private _headerVisible: boolean; private _headerVisible: boolean;
readonly headerSize: number;
readonly headerComponent: string | undefined;
set orientation(value: Orientation) { set orientation(value: Orientation) {
this._orientation = value; this._orientation = value;
} }
@ -149,24 +150,37 @@ export abstract class PaneviewPanel
this.header!.style.display = value ? '' : 'none'; this.header!.style.display = value ? '' : 'none';
} }
constructor( constructor(options: {
id: string, id: string;
component: string, component: string;
private readonly headerComponent: string | undefined, headerComponent: string | undefined;
orientation: Orientation, orientation: Orientation;
isExpanded: boolean, isExpanded: boolean;
isHeaderVisible: boolean isHeaderVisible: boolean;
) { headerSize: number;
super(id, component, new PaneviewPanelApiImpl(id, component)); minimumBodySize: number;
maximumBodySize: number;
}) {
super(
options.id,
options.component,
new PaneviewPanelApiImpl(options.id, options.component)
);
this.api.pane = this; // TODO cannot use 'this' before 'super' this.api.pane = this; // TODO cannot use 'this' before 'super'
this.api.initialize(this); this.api.initialize(this);
this._isExpanded = isExpanded; this.headerSize = options.headerSize;
this._headerVisible = isHeaderVisible; this.headerComponent = options.headerComponent;
this._minimumBodySize = options.minimumBodySize;
this._maximumBodySize = options.maximumBodySize;
this._isExpanded = options.isExpanded;
this._headerVisible = options.isHeaderVisible;
this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value this._onDidChangeExpansionState.fire(this.isExpanded()); // initialize value
this._orientation = orientation; this._orientation = options.orientation;
this.element.classList.add('dv-pane'); this.element.classList.add('dv-pane');
@ -260,9 +274,6 @@ export abstract class PaneviewPanel
this.orientation === Orientation.HORIZONTAL this.orientation === Orientation.HORIZONTAL
? [size, orthogonalSize] ? [size, orthogonalSize]
: [orthogonalSize, size]; : [orthogonalSize, size];
if (this.isExpanded()) {
this.expandedSize = width;
}
super.layout(width, height); super.layout(width, height);
} }