Skip to content

Commit

Permalink
Merge pull request #690 from mathuo/640-panel-and-group-default-sizes…
Browse files Browse the repository at this point in the history 
…-and-bounding-dimensions

640 panel and group default sizes and bounding dimensions
  • Loading branch information
@mathuo
mathuo authored Aug 28, 2024
2 parents 2b36844 + 72f457a commit d519c23
Show file tree
Hide file tree
Showing 9 changed files with 183 additions and 20 deletions.
16 changes: 14 additions & 2 deletions packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -732,6 +732,7 @@ describe('dockviewComponent', () => {
panel1: {
id: 'panel1',
contentComponent: 'default',
tabComponent: 'tab-default',
title: 'panel1',
},
panel2: {
Expand All @@ -743,22 +744,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: {
Expand Down Expand Up @@ -818,6 +823,7 @@ describe('dockviewComponent', () => {
panel1: {
id: 'panel1',
contentComponent: 'default',
tabComponent: 'tab-default',
title: 'panel1',
},
panel2: {
Expand All @@ -829,16 +835,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,
},
},
});
Expand Down
4 changes: 4 additions & 0 deletions packages/dockview-core/src/dockview/deserializer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer {
view,
{
renderer: panelData.renderer,
minimumWidth: panelData.minimumWidth,
minimumHeight: panelData.minimumHeight,
maximumWidth: panelData.maximumWidth,
maximumHeight: panelData.maximumHeight,
}
);

Expand Down
65 changes: 59 additions & 6 deletions packages/dockview-core/src/dockview/dockviewComponent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
SerializedGridObject,
getGridLocation,
ISerializedLeafNode,
orthogonal,
} from '../gridview/gridview';
import {
directionToPosition,
Expand Down Expand Up @@ -1371,6 +1372,11 @@ export class DockviewComponent
);
}

const initial = {
width: options.initialWidth,
height: options.initialHeight,
};

if (options.position) {
if (isPanelOptionsWithPanel(options.position)) {
const referencePanel =
Expand Down Expand Up @@ -1412,6 +1418,11 @@ export class DockviewComponent
this.doSetGroupAndPanelActive(group);
}

group.api.setSize({
height: initial?.height,
width: initial?.width,
});

return panel;
}
} else {
Expand Down Expand Up @@ -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);
}
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -1640,7 +1667,12 @@ export class DockviewComponent
);

const group = this.createGroup(options);
this.doAddGroup(group, relativeLocation);
const size =
this.getLocationOrientation(relativeLocation) ===
Orientation.VERTICAL
? options.initialHeight
: options.initialWidth;
this.doAddGroup(group, relativeLocation, size);
if (!options.skipSetActive) {
this.doSetGroupAndPanelActive(group);
}
Expand All @@ -1654,6 +1686,13 @@ export class DockviewComponent
}
}

private getLocationOrientation(location: number[]) {
return location.length % 2 == 0 &&
this.gridview.orientation === Orientation.HORIZONTAL
? Orientation.HORIZONTAL
: Orientation.VERTICAL;
}

removeGroup(
group: DockviewGroupPanel,
options?:
Expand Down Expand Up @@ -2259,7 +2298,13 @@ export class DockviewComponent
this._api,
group,
view,
{ renderer: options.renderer }
{
renderer: options.renderer,
minimumWidth: options.minimumWidth,
minimumHeight: options.minimumHeight,
maximumWidth: options.maximumWidth,
maximumHeight: options.maximumHeight,
}
);

panel.init({
Expand All @@ -2271,10 +2316,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;
}

Expand All @@ -2283,4 +2329,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);
}
}
38 changes: 36 additions & 2 deletions packages/dockview-core/src/dockview/dockviewGroupPanel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,34 @@ export class DockviewGroupPanel
{
private readonly _model: DockviewGroupPanelModel;

get minimumWidth(): number {
const activePanelMinimumWidth = this.activePanel?.minimumWidth;
return typeof activePanelMinimumWidth === 'number'
? activePanelMinimumWidth
: MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH;
}

get minimumHeight(): number {
const activePanelMinimumHeight = this.activePanel?.minimumHeight;
return typeof activePanelMinimumHeight === 'number'
? activePanelMinimumHeight
: MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT;
}

get maximumWidth(): number {
const activePanelMaximumWidth = this.activePanel?.maximumWidth;
return typeof activePanelMaximumWidth === 'number'
? activePanelMaximumWidth
: Number.MAX_SAFE_INTEGER;
}

get maximumHeight(): number {
const activePanelMaximumHeight = this.activePanel?.maximumHeight;
return typeof activePanelMaximumHeight === 'number'
? activePanelMaximumHeight
: Number.MAX_SAFE_INTEGER;
}

get panels(): IDockviewPanel[] {
return this._model.panels;
}
Expand Down Expand Up @@ -71,8 +99,14 @@ export class DockviewGroupPanel
id,
'groupview_default',
{
minimumHeight: MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
minimumWidth: MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
minimumHeight:
options.constraints?.minimumHeight ??
MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
minimumWidth:
options.constraints?.maximumHeight ??
MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
maximumHeight: options.constraints?.maximumHeight,
maximumWidth: options.constraints?.maximumWidth,
},
new DockviewGroupPanelApiImpl(id, accessor)
);
Expand Down
4 changes: 4 additions & 0 deletions packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
} from './options';
import { OverlayRenderContainer } from '../overlay/overlayRenderContainer';
import { TitleEvent } from '../api/dockviewPanelApi';
import { Contraints } from '../gridview/gridviewPanel';

interface GroupMoveEvent {
groupId: string;
Expand All @@ -50,6 +51,9 @@ interface CoreGroupOptions {
locked?: DockviewGroupPanelLocked;
hideHeader?: boolean;
skipSetActive?: boolean;
constraints?: Partial<Contraints>;
initialWidth?: number;
initialHeight?: number;
}

export interface GroupOptions extends CoreGroupOptions {
Expand Down
36 changes: 35 additions & 1 deletion packages/dockview-core/src/dockview/dockviewPanel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,18 @@ import { IDockviewPanelModel } from './dockviewPanelModel';
import { DockviewComponent } from './dockviewComponent';
import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
import { WillFocusEvent } from '../api/panelApi';
import { Contraints } from '../gridview/gridviewPanel';

export interface IDockviewPanel extends IDisposable, IPanel {
readonly view: IDockviewPanelModel;
readonly group: DockviewGroupPanel;
readonly api: DockviewPanelApi;
readonly title: string | undefined;
readonly params: Parameters | undefined;
readonly minimumWidth?: number;
readonly minimumHeight?: number;
readonly maximumWidth?: number;
readonly maximumHeight?: number;
updateParentGroup(
group: DockviewGroupPanel,
options?: { skipSetActive?: boolean }
Expand All @@ -40,6 +45,11 @@ export class DockviewPanel
private _title: string | undefined;
private _renderer: DockviewPanelRenderer | undefined;

private _minimumWidth: number | undefined;
private _minimumHeight: number | undefined;
private _maximumWidth: number | undefined;
private _maximumHeight: number | undefined;

get params(): Parameters | undefined {
return this._params;
}
Expand All @@ -56,6 +66,22 @@ export class DockviewPanel
return this._renderer ?? this.accessor.renderer;
}

get minimumWidth(): number | undefined {
return this._minimumWidth;
}

get minimumHeight(): number | undefined {
return this._minimumHeight;
}

get maximumWidth(): number | undefined {
return this._maximumWidth;
}

get maximumHeight(): number | undefined {
return this._maximumHeight;
}

constructor(
public readonly id: string,
component: string,
Expand All @@ -64,11 +90,15 @@ export class DockviewPanel
private readonly containerApi: DockviewApi,
group: DockviewGroupPanel,
readonly view: IDockviewPanelModel,
options: { renderer?: DockviewPanelRenderer }
options: { renderer?: DockviewPanelRenderer } & Partial<Contraints>
) {
super();
this._renderer = options.renderer;
this._group = group;
this._minimumWidth = options.minimumWidth;
this._minimumHeight = options.minimumHeight;
this._maximumWidth = options.maximumWidth;
this._maximumHeight = options.maximumHeight;

this.api = new DockviewPanelApiImpl(
this,
Expand Down Expand Up @@ -129,6 +159,10 @@ export class DockviewPanel
: undefined,
title: this.title,
renderer: this._renderer,
minimumHeight: this._minimumHeight,
maximumHeight: this._maximumHeight,
minimumWidth: this._minimumWidth,
maximumWidth: this._maximumWidth,
};
}

Expand Down
Loading

0 comments on commit d519c23

Please sign in to comment.