diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index ae45adf8f..e38896f5a 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -8,7 +8,7 @@ import { PanelUpdateEvent } from '../../panel/types'; import { Orientation } from '../../splitview/splitview'; import { CompositeDisposable } from '../../lifecycle'; import { Emitter } from '../../events'; -import { IDockviewPanel } from '../../dockview/dockviewPanel'; +import { IDockviewPanel } from '../../dockview/dockviewPanel'; import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel'; import { fireEvent, queryByTestId } from '@testing-library/dom'; import { getPanelData } from '../../dnd/dataTransfer'; @@ -626,6 +626,7 @@ describe('dockviewComponent', () => { panel1: { id: 'panel1', contentComponent: 'default', + tabComponent: 'tab-default', title: 'panel1', }, panel2: { @@ -637,22 +638,26 @@ describe('dockviewComponent', () => { id: 'panel3', contentComponent: 'default', title: 'panel3', + renderer: 'onlyWhenVisible', }, panel4: { id: 'panel4', contentComponent: 'default', title: 'panel4', + renderer: 'always', }, panel5: { id: 'panel5', contentComponent: 'default', title: 'panel5', + minimumHeight: 100, + maximumHeight: 1000, + minimumWidth: 200, + maximumWidth: 2000, }, }, }); - // dockview.layout(1000, 1000, true); - expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({ activeGroup: 'group-1', grid: { @@ -712,6 +717,7 @@ describe('dockviewComponent', () => { panel1: { id: 'panel1', contentComponent: 'default', + tabComponent: 'tab-default', title: 'panel1', }, panel2: { @@ -723,16 +729,22 @@ describe('dockviewComponent', () => { id: 'panel3', contentComponent: 'default', title: 'panel3', + renderer: 'onlyWhenVisible', }, panel4: { id: 'panel4', contentComponent: 'default', title: 'panel4', + renderer: 'always', }, panel5: { id: 'panel5', contentComponent: 'default', title: 'panel5', + minimumHeight: 100, + maximumHeight: 1000, + minimumWidth: 200, + maximumWidth: 2000, }, }, }); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 517f7c8b1..24c7093cd 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,11 @@ export class DockviewComponent skipSetGroupActive: options.inactive, }); + referenceGroup.api.setSize({ + width: initial?.width, + height: initial?.height, + }); + if (!options.inactive) { this.doSetGroupAndPanelActive(referenceGroup); } @@ -1468,7 +1484,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 +1524,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, @@ -2272,10 +2299,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; } @@ -2284,4 +2312,11 @@ export class DockviewComponent group.value.model.containsPanel(panel) )?.value; } + + private orientationAtLocation(location: number[]) { + const rootOrientation = this.gridview.orientation; + return location.length % 2 == 1 + ? rootOrientation + : orthogonal(rootOrientation); + } } 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;