splitview: proportionalLayout option

related to #50853
This commit is contained in:
Joao Moreno 2018-10-24 14:39:05 -07:00
parent b2f8941985
commit 2ff5934b85
2 changed files with 40 additions and 2 deletions

View file

@ -29,6 +29,7 @@ export interface ISplitViewOptions {
orthogonalStartSash?: Sash;
orthogonalEndSash?: Sash;
inverseAltBehavior?: boolean;
proportionalLayout?: boolean; // default true
}
export interface IView {
@ -87,7 +88,6 @@ export namespace Sizing {
export class SplitView extends Disposable {
readonly orientation: Orientation;
// TODO@Joao have the same pattern as grid here
readonly el: HTMLElement;
private sashContainer: HTMLElement;
private viewContainer: HTMLElement;
@ -99,6 +99,7 @@ export class SplitView extends Disposable {
private sashDragState: ISashDragState;
private state: State = State.Idle;
private inverseAltBehavior: boolean;
private proportionalLayout: boolean;
private _onDidSashChange = this._register(new Emitter<number>());
readonly onDidSashChange = this._onDidSashChange.event;
@ -147,6 +148,7 @@ export class SplitView extends Disposable {
this.orientation = types.isUndefined(options.orientation) ? Orientation.VERTICAL : options.orientation;
this.inverseAltBehavior = !!options.inverseAltBehavior;
this.proportionalLayout = types.isUndefined(options.proportionalLayout) ? true : !!options.proportionalLayout;
this.el = document.createElement('div');
dom.addClass(this.el, 'monaco-split-view2');
@ -342,7 +344,7 @@ export class SplitView extends Disposable {
}
private saveProportions(): void {
if (this.contentSize > 0) {
if (this.proportionalLayout && this.contentSize > 0) {
this.proportions = this.viewItems.map(i => i.size / this.contentSize);
}
}

View file

@ -430,4 +430,40 @@ suite('Splitview', () => {
view2.dispose();
view1.dispose();
});
test('proportional layout', () => {
const view1 = new TestView(20, Number.POSITIVE_INFINITY);
const view2 = new TestView(20, Number.POSITIVE_INFINITY);
const splitview = new SplitView(container);
splitview.layout(200);
splitview.addView(view1, Sizing.Distribute);
splitview.addView(view2, Sizing.Distribute);
assert.deepEqual([view1.size, view2.size], [100, 100]);
splitview.layout(100);
assert.deepEqual([view1.size, view2.size], [50, 50]);
splitview.dispose();
view2.dispose();
view1.dispose();
});
test('disable proportional layout', () => {
const view1 = new TestView(20, Number.POSITIVE_INFINITY);
const view2 = new TestView(20, Number.POSITIVE_INFINITY);
const splitview = new SplitView(container, { proportionalLayout: false });
splitview.layout(200);
splitview.addView(view1, Sizing.Distribute);
splitview.addView(view2, Sizing.Distribute);
assert.deepEqual([view1.size, view2.size], [100, 100]);
splitview.layout(100);
assert.deepEqual([view1.size, view2.size], [80, 20]);
splitview.dispose();
view2.dispose();
view1.dispose();
});
});