From a306742508f2ecde8df0fb1fe6dfc74b067db3de Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 12 Mar 2025 20:55:50 +0000 Subject: [PATCH] feat: custom paneview header height --- .../src/__tests__/paneview/paneview.spec.ts | 76 +++++++++++-------- .../paneview/paneviewComponent.spec.ts | 30 +++++--- .../src/paneview/draggablePaneviewPanel.ts | 39 +++++++--- .../src/paneview/paneviewComponent.ts | 37 ++++++--- .../src/paneview/paneviewPanel.ts | 49 +++++++----- 5 files changed, 151 insertions(+), 80 deletions(-) diff --git a/packages/dockview-core/src/__tests__/paneview/paneview.spec.ts b/packages/dockview-core/src/__tests__/paneview/paneview.spec.ts index 5bc8720d8..8818ee131 100644 --- a/packages/dockview-core/src/__tests__/paneview/paneview.spec.ts +++ b/packages/dockview-core/src/__tests__/paneview/paneview.spec.ts @@ -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); diff --git a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts index a30f73fd5..1a9fcb445 100644 --- a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts @@ -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(() => { @@ -255,7 +265,7 @@ describe('componentPaneview', () => { title: 'Panel 1', }, expanded: true, - minimumSize: 100, + headerSize: 22, }, { size: 22, @@ -265,7 +275,7 @@ describe('componentPaneview', () => { title: 'Panel 2', }, expanded: false, - minimumSize: 100, + headerSize: 22, }, { size: 22, @@ -275,7 +285,7 @@ describe('componentPaneview', () => { title: 'Panel 3', }, expanded: false, - minimumSize: 100, + headerSize: 22, }, ], }); @@ -450,6 +460,7 @@ describe('componentPaneview', () => { component: 'default', title: 'Panel 1', }, + minimumSize: 100, expanded: true, }, { @@ -486,26 +497,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, }, ], }); diff --git a/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts b/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts index 7227ea46a..6d2546dbd 100644 --- a/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts +++ b/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts @@ -38,20 +38,37 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel { readonly onUnhandledDragOverEvent: Event = 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(); } } diff --git a/packages/dockview-core/src/paneview/paneviewComponent.ts b/packages/dockview-core/src/paneview/paneviewComponent.ts index 4856fb1ad..0239a096b 100644 --- a/packages/dockview-core/src/paneview/paneviewComponent.ts +++ b/packages/dockview-core/src/paneview/paneviewComponent.ts @@ -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 { 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); diff --git a/packages/dockview-core/src/paneview/paneviewPanel.ts b/packages/dockview-core/src/paneview/paneviewPanel.ts index 02710da90..88e724a91 100644 --- a/packages/dockview-core/src/paneview/paneviewPanel.ts +++ b/packages/dockview-core/src/paneview/paneviewPanel.ts @@ -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); }