rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-03 01:58: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))
);
const view1 = new TestPanel(
'id',
'component',
'headerComponent',
Orientation.VERTICAL,
true,
true
);
const view2 = new TestPanel(
'id2',
'component',
'headerComponent',
Orientation.VERTICAL,
true,
true
);
const view1 = new TestPanel({
id: 'id',
component: 'component',
headerComponent: 'headerComponent',
orientation: Orientation.VERTICAL,
isExpanded: true,
isHeaderVisible: true,
headerSize: 22,
minimumBodySize: 0,
maximumBodySize: Number.MAX_SAFE_INTEGER,
});
const view2 = new TestPanel({
id: 'id2',
component: 'component',
headerComponent: 'headerComponent',
orientation: Orientation.VERTICAL,
isExpanded: true,
isHeaderVisible: true,
headerSize: 22,
minimumBodySize: 0,
maximumBodySize: Number.MAX_SAFE_INTEGER,
});
expect(added.length).toBe(0);
expect(removed.length).toBe(0);
@ -106,22 +112,28 @@ describe('paneview', () => {
orientation: Orientation.HORIZONTAL,
});
const view1 = new TestPanel(
'id',
'component',
'headerComponent',
Orientation.VERTICAL,
true,
true
);
const view2 = new TestPanel(
'id2',
'component',
'headerComponent',
Orientation.VERTICAL,
true,
true
);
const view1 = new TestPanel({
id: 'id',
component: 'component',
headerComponent: 'headerComponent',
orientation: Orientation.VERTICAL,
isExpanded: true,
isHeaderVisible: true,
headerSize: 22,
minimumBodySize: 0,
maximumBodySize: Number.MAX_SAFE_INTEGER,
});
const view2 = new TestPanel({
id: 'id2',
component: 'component',
headerComponent: 'headerComponent',
orientation: Orientation.VERTICAL,
isExpanded: true,
isHeaderVisible: true,
headerSize: 22,
minimumBodySize: 0,
maximumBodySize: Number.MAX_SAFE_INTEGER,
});
paneview.addPane(view1);
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 {
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() {
@ -59,7 +69,7 @@ class TestPanel extends PaneviewPanel {
}
}
describe('componentPaneview', () => {
describe('paneviewComponent', () => {
let container: HTMLElement;
beforeEach(() => {
@ -259,7 +269,7 @@ describe('componentPaneview', () => {
title: 'Panel 1',
},
expanded: true,
minimumSize: 100,
headerSize: 22,
},
{
size: 22,
@ -269,7 +279,7 @@ describe('componentPaneview', () => {
title: 'Panel 2',
},
expanded: false,
minimumSize: 100,
headerSize: 22,
},
{
size: 22,
@ -279,7 +289,7 @@ describe('componentPaneview', () => {
title: 'Panel 3',
},
expanded: false,
minimumSize: 100,
headerSize: 22,
},
],
});
@ -454,6 +464,7 @@ describe('componentPaneview', () => {
component: 'default',
title: 'Panel 1',
},
minimumSize: 100,
expanded: true,
},
{
@ -490,26 +501,27 @@ describe('componentPaneview', () => {
},
expanded: true,
minimumSize: 100,
headerSize: 22,
},
{
size: 122,
size: 22,
data: {
id: 'panel2',
component: 'default',
title: 'Panel 2',
},
expanded: true,
minimumSize: 100,
headerSize: 22,
},
{
size: 356,
size: 456,
data: {
id: 'panel3',
component: 'default',
title: 'Panel 3',
},
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> =
this._onUnhandledDragOverEvent.event;
constructor(
private readonly accessor: IPaneviewComponent,
id: string,
component: string,
headerComponent: string | undefined,
orientation: Orientation,
isExpanded: boolean,
disableDnd: boolean
) {
super(id, component, headerComponent, orientation, isExpanded, true);
readonly accessor: IPaneviewComponent;
constructor(options: {
accessor: IPaneviewComponent;
id: string;
component: string;
headerComponent: string | undefined;
orientation: Orientation;
isExpanded: boolean;
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);
if (!disableDnd) {
if (!options.disableDnd) {
this.initDragFeatures();
}
}

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

@ -21,11 +21,16 @@ import { Classnames } from '../dom';
const nextLayoutId = sequentialNumberGenerator();
const HEADER_SIZE = 22;
const MINIMUM_BODY_SIZE = 0;
const MAXIMUM_BODY_SIZE = Number.MAX_SAFE_INTEGER;
export interface SerializedPaneviewPanel {
snap?: boolean;
priority?: LayoutPriority;
minimumSize?: number;
maximumSize?: number;
headerSize?: number;
data: {
id: string;
component: string;
@ -54,17 +59,23 @@ export class PaneFramework extends DraggablePaneviewPanel {
isExpanded: boolean;
disableDnd: boolean;
accessor: IPaneviewComponent;
headerSize: number;
minimumBodySize: number;
maximumBodySize: number;
}
) {
super(
options.accessor,
options.id,
options.component,
options.headerComponent,
options.orientation,
options.isExpanded,
options.disableDnd
);
super({
accessor: options.accessor,
id: options.id,
component: options.component,
headerComponent: options.headerComponent,
orientation: options.orientation,
isExpanded: options.isExpanded,
disableDnd: options.disableDnd,
headerSize: options.headerSize,
minimumBodySize: options.minimumBodySize,
maximumBodySize: options.maximumBodySize,
});
}
getBodyComponent() {
@ -83,6 +94,7 @@ export interface AddPaneviewComponentOptions<T extends object = Parameters> {
params?: T;
minimumBodySize?: number;
maximumBodySize?: number;
headerSize?: number;
isExpanded?: boolean;
title: string;
index?: number;
@ -277,6 +289,9 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
isExpanded: !!options.isExpanded,
disableDnd: !!this.options.disableDnd,
accessor: this,
headerSize: options.headerSize ?? HEADER_SIZE,
minimumBodySize: MINIMUM_BODY_SIZE,
maximumBodySize: MAXIMUM_BODY_SIZE,
});
this.doAddPanel(view);
@ -344,6 +359,7 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
data: view.toJSON(),
minimumSize: minimum(view.minimumBodySize),
maximumSize: maximum(view.maximumBodySize),
headerSize: view.headerSize,
expanded: view.isExpanded(),
};
});
@ -403,6 +419,9 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
isExpanded: !!view.expanded,
disableDnd: !!this.options.disableDnd,
accessor: this,
headerSize: view.headerSize ?? HEADER_SIZE,
minimumBodySize: view.minimumSize ?? MINIMUM_BODY_SIZE,
maximumBodySize: view.maximumSize ?? MAXIMUM_BODY_SIZE,
});
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 }> =
this._onDidChange.event;
private readonly headerSize = 22;
private _orthogonalSize = 0;
private _size = 0;
private _minimumBodySize = 100;
private _maximumBodySize: number = Number.POSITIVE_INFINITY;
private _minimumBodySize: number;
private _maximumBodySize: number;
private _isExpanded = false;
protected header?: HTMLElement;
protected body?: HTMLElement;
private bodyPart?: IPanePart;
private headerPart?: IPanePart;
private expandedSize = 0;
private animationTimer: any;
private _orientation: Orientation;
private _headerVisible: boolean;
readonly headerSize: number;
readonly headerComponent: string | undefined;
set orientation(value: Orientation) {
this._orientation = value;
}
@ -149,24 +150,37 @@ export abstract class PaneviewPanel
this.header!.style.display = value ? '' : 'none';
}
constructor(
id: string,
component: string,
private readonly headerComponent: string | undefined,
orientation: Orientation,
isExpanded: boolean,
isHeaderVisible: boolean
) {
super(id, component, new PaneviewPanelApiImpl(id, component));
constructor(options: {
id: string;
component: string;
headerComponent: string | undefined;
orientation: Orientation;
isExpanded: boolean;
isHeaderVisible: boolean;
headerSize: number;
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.initialize(this);
this._isExpanded = isExpanded;
this._headerVisible = isHeaderVisible;
this.headerSize = options.headerSize;
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._orientation = orientation;
this._orientation = options.orientation;
this.element.classList.add('dv-pane');
@ -260,9 +274,6 @@ export abstract class PaneviewPanel
this.orientation === Orientation.HORIZONTAL
? [size, orthogonalSize]
: [orthogonalSize, size];
if (this.isExpanded()) {
this.expandedSize = width;
}
super.layout(width, height);
}