From bbcbac93e6d5834a4b37c550540234381129022c Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sat, 24 Aug 2024 13:21:52 +0100 Subject: [PATCH] feat: panel initial sizing --- .../src/dockview/dockviewComponent.ts | 62 +++++++++++++++++-- .../src/dockview/dockviewGroupPanel.ts | 36 +++++------ .../dockview-core/src/dockview/options.ts | 2 + 3 files changed, 76 insertions(+), 24 deletions(-) diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 517f7c8b1..d97f42382 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -3,6 +3,7 @@ import { SerializedGridObject, getGridLocation, ISerializedLeafNode, + orthogonal, } from '../gridview/gridview'; import { directionToPosition, @@ -1371,6 +1372,11 @@ export class DockviewComponent ); } + const initial = { + width: options.initialWidth, + height: options.initialHeight, + }; + if (options.position) { if (isPanelOptionsWithPanel(options.position)) { const referencePanel = @@ -1412,6 +1418,11 @@ export class DockviewComponent this.doSetGroupAndPanelActive(group); } + group.api.setSize({ + height: initial?.height, + width: initial?.width, + }); + return panel; } } else { @@ -1458,6 +1469,30 @@ export class DockviewComponent skipSetGroupActive: options.inactive, }); + if (target === 'center') { + const location = getGridLocation(referenceGroup.element); + + if ( + this.orientationAtLocation(location) === + Orientation.VERTICAL + ) { + referenceGroup.api.setSize({ + height: initial?.height, + width: initial?.width, + }); + } else { + referenceGroup.api.setSize({ + height: initial?.height, + width: initial?.width, + }); + } + } else { + referenceGroup.api.setSize({ + width: initial?.width, + height: initial?.height, + }); + } + if (!options.inactive) { this.doSetGroupAndPanelActive(referenceGroup); } @@ -1468,7 +1503,13 @@ export class DockviewComponent location, target ); - const group = this.createGroupAtLocation(relativeLocation); + const group = this.createGroupAtLocation( + relativeLocation, + this.orientationAtLocation(relativeLocation) === + Orientation.VERTICAL + ? initial?.height + : initial?.width + ); panel = this.createPanel(options, group); group.model.openPanel(panel, { skipSetActive: options.inactive, @@ -1502,7 +1543,12 @@ export class DockviewComponent skipSetGroupActive: options.inactive, }); } else { - const group = this.createGroupAtLocation(); + const group = this.createGroupAtLocation( + [0], + this.gridview.orientation === Orientation.VERTICAL + ? initial?.height + : initial?.width + ); panel = this.createPanel(options, group); group.model.openPanel(panel, { skipSetActive: options.inactive, @@ -1517,6 +1563,13 @@ export class DockviewComponent return panel; } + private orientationAtLocation(location: number[]) { + const rootOrientation = this.gridview.orientation; + return location.length % 2 == 1 + ? rootOrientation + : orthogonal(rootOrientation); + } + removePanel( panel: IDockviewPanel, options: { @@ -2272,10 +2325,11 @@ export class DockviewComponent } private createGroupAtLocation( - location: number[] = [0] + location: number[], + size?: number ): DockviewGroupPanel { const group = this.createGroup(); - this.doAddGroup(group, location); + this.doAddGroup(group, location, size); return group; } diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts index 5edd14393..4efee9cd6 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanel.ts @@ -35,35 +35,31 @@ export class DockviewGroupPanel private readonly _model: DockviewGroupPanelModel; get minimumWidth(): number { - const sizes = this.panels - .filter((panel) => typeof panel.minimumWidth === 'number') - .map((panel) => panel.minimumWidth) as number[]; - - return sizes.length > 0 ? Math.max(...sizes) : 100; + const activePanelMinimumWidth = this.activePanel?.minimumWidth; + return typeof activePanelMinimumWidth === 'number' + ? activePanelMinimumWidth + : MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH; } get minimumHeight(): number { - const sizes = this.panels - .filter((panel) => typeof panel.minimumHeight === 'number') - .map((panel) => panel.minimumHeight) as number[]; - - return sizes.length > 0 ? Math.max(...sizes) : 100; + const activePanelMinimumHeight = this.activePanel?.minimumHeight; + return typeof activePanelMinimumHeight === 'number' + ? activePanelMinimumHeight + : MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT; } get maximumWidth(): number { - const sizes = this.panels - .filter((panel) => typeof panel.maximumWidth === 'number') - .map((panel) => panel.maximumWidth) as number[]; - - return sizes.length > 0 ? Math.min(...sizes) : Number.MAX_SAFE_INTEGER; + const activePanelMaximumWidth = this.activePanel?.maximumWidth; + return typeof activePanelMaximumWidth === 'number' + ? activePanelMaximumWidth + : Number.MAX_SAFE_INTEGER; } get maximumHeight(): number { - const sizes = this.panels - .filter((panel) => typeof panel.maximumHeight === 'number') - .map((panel) => panel.maximumHeight) as number[]; - - return sizes.length > 0 ? Math.min(...sizes) : Number.MAX_SAFE_INTEGER; + const activePanelMaximumHeight = this.activePanel?.maximumHeight; + return typeof activePanelMaximumHeight === 'number' + ? activePanelMaximumHeight + : Number.MAX_SAFE_INTEGER; } get panels(): IDockviewPanel[] { diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index bf3235b60..561a732f4 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -238,6 +238,8 @@ export type AddPanelOptions

= { * Defaults to `false` which forces newly added panels to become active. */ inactive?: boolean; + initialWidth?: number; + initialHeight?: number; } & Partial & Partial;